From 6ec219031d67a92d9758e66399e16d60b1835ca6 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Tue, 14 Feb 2023 15:47:55 +0100 Subject: [PATCH 1/4] Avoid to specifically use a `label` component for `menu_item` Then, add `label` CSS rule inside `menu_item` component --- app/webpacker/css/admin/dropdown.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/webpacker/css/admin/dropdown.scss b/app/webpacker/css/admin/dropdown.scss index 4ba11d97e8..ed6acc6c59 100644 --- a/app/webpacker/css/admin/dropdown.scss +++ b/app/webpacker/css/admin/dropdown.scss @@ -200,13 +200,15 @@ max-height: 200px; overflow-y: scroll; - label.menu_item { + .menu_item { margin-bottom: 5px; color: #454545; font-weight: 400; cursor: pointer; padding-top: 4px; padding-bottom: 5px; + text-transform: uppercase; + font-size: 85%; } } } From 28286a4c3e23ab35d27709f3da953f10906ff545 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Tue, 14 Feb 2023 15:57:42 +0100 Subject: [PATCH 2/4] Slightly change classes and markup to make dropdown use the new style ie. `.ofn-drop-down-v2` --- .../admin/columns_dropdown.html.haml | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/app/assets/javascripts/templates/admin/columns_dropdown.html.haml b/app/assets/javascripts/templates/admin/columns_dropdown.html.haml index f06944182a..7d6059de4d 100644 --- a/app/assets/javascripts/templates/admin/columns_dropdown.html.haml +++ b/app/assets/javascripts/templates/admin/columns_dropdown.html.haml @@ -1,11 +1,13 @@ -.ofn-drop-down.right#columns-dropdown{ ng: { controller: 'ColumnsDropdownCtrl' } } - %span{ :class => 'icon-reorder' }= "  #{t('admin.columns')}".html_safe - %span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" } +.ofn-drop-down.ofn-drop-down-v2.right#columns-dropdown{ ng: { controller: 'ColumnsDropdownCtrl' } } + .ofn-drop-down-label + = "  #{t('admin.columns')}".html_safe + %span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" } %div.menu{ 'ng-show' => "expanded" } - %div.menu_item{ ng: { repeat: "column in columns", click: "toggle(column)", class: "{selected: column.visible}" } } - %span.check - %span.name {{ column.name }} - %hr - %div.menu_item.text-center - %input.fullwidth.orange{ type: "button", ng: { value: "saved() ? 'Saved': 'Saving'", show: "saved() || saving", disabled: "saved()" } } - %input.fullwidth.red{ type: "button", :value => t('admin.column_save_as_default').html_safe, ng: { show: "!saved() && !saving", click: "saveColumnPreferences(action)"} } + .menu_items + .menu_item{ ng: { repeat: "column in columns", click: "toggle(column);" } } + %input.redesigned-input{ type: "checkbox", ng: { checked: "column.visible" } } + {{ column.name }} + %hr + %div.menu_item.text-center + %input.fullwidth.orange{ type: "button", ng: { value: "saved() ? 'Saved': 'Saving'", show: "saved() || saving", disabled: "saved()" } } + %input.fullwidth.red{ type: "button", :value => t('admin.column_save_as_default').html_safe, ng: { show: "!saved() && !saving", click: "saveColumnPreferences(action)"} } From d9eb97bd05369adde3f92592852afca32f46fad1 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Tue, 14 Feb 2023 15:58:46 +0100 Subject: [PATCH 3/4] As we are in transition, angularjs dropdown component use both css classes And we should specify a bit the height of the component since it's used in different context --- app/webpacker/css/admin/dropdown.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/app/webpacker/css/admin/dropdown.scss b/app/webpacker/css/admin/dropdown.scss index ed6acc6c59..85fd5c7416 100644 --- a/app/webpacker/css/admin/dropdown.scss +++ b/app/webpacker/css/admin/dropdown.scss @@ -212,3 +212,12 @@ } } } + +.ofn-drop-down.ofn-drop-down-v2 { + // Add very specific styling here for components that are in transition: + // ie. the ones using the two classes above + .ofn-drop-down-label { + padding-top: 7px; + padding-bottom: 7px; + } +} From 166e2f525e20f30f2fb2fa208f1fccd8ef3bcdc1 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Tue, 14 Feb 2023 16:21:49 +0100 Subject: [PATCH 4/4] New design uses lowercase for component title and specify clicking inside the dropdown --- spec/support/request/admin_helper.rb | 14 ++++++++++---- spec/system/admin/bulk_product_update_spec.rb | 4 ++-- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/spec/support/request/admin_helper.rb b/spec/support/request/admin_helper.rb index 63e0476a1a..60e0fcdbd4 100644 --- a/spec/support/request/admin_helper.rb +++ b/spec/support/request/admin_helper.rb @@ -3,13 +3,19 @@ module AdminHelper def toggle_columns(*labels) # open dropdown - find("div#columns-dropdown", text: "COLUMNS").click + # case insensitive search for "Columns" text + find("div#columns-dropdown", text: /columns/i).click - labels.each do |label| - find("div#columns-dropdown div.menu div.menu_item", text: label).click + within "div#columns-dropdown" do + labels.each do |label| + # Convert label to case-insensitive regexp if not one already + label = /#{label}/i unless label.is_a?(Regexp) + + find("div.menu div.menu_item", text: /#{label}/i).click + end end # close dropdown - find("div#columns-dropdown", text: "COLUMNS").click + find("div#columns-dropdown", text: /columns/i).click end end diff --git a/spec/system/admin/bulk_product_update_spec.rb b/spec/system/admin/bulk_product_update_spec.rb index 20b401b34c..308a9097b9 100644 --- a/spec/system/admin/bulk_product_update_spec.rb +++ b/spec/system/admin/bulk_product_update_spec.rb @@ -345,7 +345,7 @@ describe ' login_as_admin visit spree.admin_products_path - toggle_columns "Available On", /^Category?/, "Inherits Properties?", "SKU" + toggle_columns "Available On", /^Category?/i, "Inherits Properties?", "SKU" within "tr#p_#{p.id}" do expect(page).to have_field "product_name", with: p.name @@ -712,7 +712,7 @@ describe ' expect(page).to have_selector "th", text: "ON HAND" expect(page).to have_selector "th", text: "AV. ON" - toggle_columns /^.{0,1}Producer$/ + toggle_columns /^.{0,1}Producer$/i expect(page).to have_no_selector "th", text: "PRODUCER" expect(page).to have_selector "th", text: "NAME"