From 7a1bd660c4c7a12b81b2fae022c4eef5083e5dd6 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Tue, 28 Jun 2022 16:57:59 +0200 Subject: [PATCH 1/4] Prepare ofn-drop-down to have a "disabled" state and a "prepend" element --- .../dropdown/directives/dropdown.js.coffee | 1 + app/webpacker/css/admin/dropdown.scss | 49 +++++++++++++++++-- 2 files changed, 47 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/admin/dropdown/directives/dropdown.js.coffee b/app/assets/javascripts/admin/dropdown/directives/dropdown.js.coffee index f26894afbc..83eb397a35 100644 --- a/app/assets/javascripts/admin/dropdown/directives/dropdown.js.coffee +++ b/app/assets/javascripts/admin/dropdown/directives/dropdown.js.coffee @@ -10,6 +10,7 @@ scope.$emit "offClick" element.click (event) -> + return if event.target.closest(".ofn-drop-down").classList.contains "disabled" || event.target.classList.contains "disabled" if !scope.expanded event.stopPropagation() scope.deregistrationCallback = scope.$on "offClick", -> diff --git a/app/webpacker/css/admin/dropdown.scss b/app/webpacker/css/admin/dropdown.scss index 4a991cbffe..51ec736099 100644 --- a/app/webpacker/css/admin/dropdown.scss +++ b/app/webpacker/css/admin/dropdown.scss @@ -11,14 +11,12 @@ color: #575757; } -.ofn-drop-down { +@mixin ofn-drop-down-style { padding: 7px 15px; border-radius: 3px; border: 1px solid #d4d4d4; background-color: #f5f5f5; - position: relative; display: block; - float: left; color: #828282; cursor: pointer; -moz-user-select: none; @@ -29,6 +27,51 @@ text-align: center; margin-right: 10px; + &.disabled { + opacity: 0.5; + + &:hover { + cursor: default; + border-color: #d4d4d4; + color: #828282; + } + } +} + +.ofn-drop-down-with-prepend { + display: flex; + + &.right { + float: right; + + .ofn-drop-down-prepend { + margin-left: 10px; + margin-right: 0; + } + } + + .ofn-drop-down { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .ofn-drop-down-prepend { + @include ofn-drop-down-style; + + border-right: none; + margin-left: 0; + margin-right: 10px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + cursor: default; + } +} + +.ofn-drop-down { + @include ofn-drop-down-style; + position: relative; + float: left; + &.right { float: right; margin-right: 0px; From 77e384ab7160d361c305674af5fa680510161e31 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Tue, 28 Jun 2022 16:58:16 +0200 Subject: [PATCH 2/4] Replace button by a drop-down + update specs as well --- app/views/spree/admin/orders/index.html.haml | 14 ++++++++++++-- config/locales/en.yml | 1 + spec/system/admin/orders_spec.rb | 6 ++++-- 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/app/views/spree/admin/orders/index.html.haml b/app/views/spree/admin/orders/index.html.haml index f47102e916..fffb6997f4 100644 --- a/app/views/spree/admin/orders/index.html.haml +++ b/app/views/spree/admin/orders/index.html.haml @@ -23,8 +23,18 @@ = render partial: 'per_page_controls' - if Spree::Config[:enable_invoices?] - %button.invoices-modal{'ng-controller' => 'bulkInvoiceCtrl', 'ng-click' => 'createBulkInvoice()', 'ng-disabled' => 'selected_orders.length == 0'} - = t('.print_invoices') + .ofn-drop-down-with-prepend.right + .ofn-drop-down-prepend{"ng-class": "selected_orders.length == 0 ? 'disabled' : ''"} + {{ selected_orders.length }} + =t('.selected') + .ofn-drop-down{"ng-class": "selected_orders.length == 0 ? 'disabled' : ''"} + %span{ :class => 'icon-reorder' } + ="#{t('admin.actions')}".html_safe + %span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" } + %div.menu{ 'ng-show' => "expanded" } + %div.menu_item + %span.name.invoices-modal{'ng-controller' => 'bulkInvoiceCtrl', 'ng-click' => 'createBulkInvoice()' } + = t('.print_invoices') %table#listing_orders.index.responsive{width: "100%", 'ng-init' => 'initialise()', 'ng-show' => "!RequestMonitor.loading && orders.length > 0" } %colgroup diff --git a/config/locales/en.yml b/config/locales/en.yml index f86de538be..3be3dde8b3 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -3768,6 +3768,7 @@ See the %{link} to find out more about %{sitename}'s features and to start using results_found: "%{number} Results found." viewing: "Viewing %{start} to %{end}." print_invoices: "Print Invoices" + selected: selected sortable_header: payment_state: "Payment State" shipment_state: "Shipment State" diff --git a/spec/system/admin/orders_spec.rb b/spec/system/admin/orders_spec.rb index 696a5e16f4..15bb057012 100644 --- a/spec/system/admin/orders_spec.rb +++ b/spec/system/admin/orders_spec.rb @@ -113,12 +113,14 @@ describe ' page.find("#listing_orders thead th:first-child input[type=checkbox]").click expect(page.find("#listing_orders tbody tr td:first-child input[type=checkbox]")).to be_checked # enables print invoices button - expect(page).to have_button('Print Invoices', disabled: false) + page.find("span.icon-reorder", text: "ACTIONS").click + expect(page).to have_content "Print Invoices" # unselect all orders page.find("#listing_orders thead th:first-child input[type=checkbox]").click expect(page.find("#listing_orders tbody tr td:first-child input[type=checkbox]")).to_not be_checked # disables print invoices button - expect(page).to have_button('Print Invoices', disabled: true) + page.find("span.icon-reorder", text: "ACTIONS").click + expect(page).to_not have_content "Print Invoices" end end From 8d66f3323004ba030cac97b67fbf0f35623a88c1 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Tue, 28 Jun 2022 18:12:20 +0200 Subject: [PATCH 3/4] per_page control can now be set on the right of the page --- .../spree/admin/orders/_per_page_controls.html.haml | 3 ++- .../css/admin/components/per_page_controls.scss | 11 +++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/app/views/spree/admin/orders/_per_page_controls.html.haml b/app/views/spree/admin/orders/_per_page_controls.html.haml index 0b34cd4e8a..fbde2d5f06 100644 --- a/app/views/spree/admin/orders/_per_page_controls.html.haml +++ b/app/views/spree/admin/orders/_per_page_controls.html.haml @@ -1,4 +1,5 @@ -.per-page{'ng-show' => '!RequestMonitor.loading && orders.length > 0'} +- position ||= "" +.per-page{'ng-show' => '!RequestMonitor.loading && orders.length > 0', class: ("right" if position == "right") } %input.per-page-select.ofn-select2{type: 'number', data: 'per_page_options', 'min-search' => 999, 'ng-model' => 'per_page', 'ng-change' => 'fetchResults()'} %span.per-page-feedback diff --git a/app/webpacker/css/admin/components/per_page_controls.scss b/app/webpacker/css/admin/components/per_page_controls.scss index 34ae9f7737..1b4e2dc3f9 100644 --- a/app/webpacker/css/admin/components/per_page_controls.scss +++ b/app/webpacker/css/admin/components/per_page_controls.scss @@ -1,6 +1,17 @@ .per-page { float: left; + &.right { + display: flex; + flex-direction: row-reverse; + align-items: center; + + .per-page-feedback { + margin-right: 1em; + margin-left: 0; + } + } + .per-page-feedback { margin-left: 1em; } From 8ba59079b3603a9ec0e41f01734f1856115917a1 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Tue, 28 Jun 2022 18:12:47 +0200 Subject: [PATCH 4/4] Reverse per_page and actions components left <-> right --- app/views/spree/admin/orders/index.html.haml | 30 +++++++++++--------- app/webpacker/css/admin/dropdown.scss | 8 ++---- 2 files changed, 18 insertions(+), 20 deletions(-) diff --git a/app/views/spree/admin/orders/index.html.haml b/app/views/spree/admin/orders/index.html.haml index fffb6997f4..58adef82be 100644 --- a/app/views/spree/admin/orders/index.html.haml +++ b/app/views/spree/admin/orders/index.html.haml @@ -20,21 +20,23 @@ = render partial: 'filters' .row.index-controls{'ng-show' => '!RequestMonitor.loading && orders.length > 0'} - = render partial: 'per_page_controls' + %div{style: "display: flex; justify-content: space-between;"} + - if Spree::Config[:enable_invoices?] + .ofn-drop-down-with-prepend + .ofn-drop-down-prepend{"ng-class": "selected_orders.length == 0 ? 'disabled' : ''"} + {{ selected_orders.length }} + =t('.selected') + .ofn-drop-down{"ng-class": "selected_orders.length == 0 ? 'disabled' : ''"} + %span{ :class => 'icon-reorder' } + ="#{t('admin.actions')}".html_safe + %span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" } + %div.menu{ 'ng-show' => "expanded" } + %div.menu_item + %span.name.invoices-modal{'ng-controller' => 'bulkInvoiceCtrl', 'ng-click' => 'createBulkInvoice()' } + = t('.print_invoices') - - if Spree::Config[:enable_invoices?] - .ofn-drop-down-with-prepend.right - .ofn-drop-down-prepend{"ng-class": "selected_orders.length == 0 ? 'disabled' : ''"} - {{ selected_orders.length }} - =t('.selected') - .ofn-drop-down{"ng-class": "selected_orders.length == 0 ? 'disabled' : ''"} - %span{ :class => 'icon-reorder' } - ="#{t('admin.actions')}".html_safe - %span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" } - %div.menu{ 'ng-show' => "expanded" } - %div.menu_item - %span.name.invoices-modal{'ng-controller' => 'bulkInvoiceCtrl', 'ng-click' => 'createBulkInvoice()' } - = t('.print_invoices') + + = render partial: 'per_page_controls', locals: { position: "right" } %table#listing_orders.index.responsive{width: "100%", 'ng-init' => 'initialise()', 'ng-show' => "!RequestMonitor.loading && orders.length > 0" } %colgroup diff --git a/app/webpacker/css/admin/dropdown.scss b/app/webpacker/css/admin/dropdown.scss index 51ec736099..e5e001d362 100644 --- a/app/webpacker/css/admin/dropdown.scss +++ b/app/webpacker/css/admin/dropdown.scss @@ -44,12 +44,8 @@ &.right { float: right; - .ofn-drop-down-prepend { - margin-left: 10px; - margin-right: 0; - } } - + .ofn-drop-down { border-top-left-radius: 0; border-bottom-left-radius: 0; @@ -60,7 +56,7 @@ border-right: none; margin-left: 0; - margin-right: 10px; + margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; cursor: default;