From c21ff075de82573850473a117e9d8093c3520d50 Mon Sep 17 00:00:00 2001 From: David Cook Date: Tue, 2 May 2023 14:14:58 +1000 Subject: [PATCH 1/6] Revert pull #10131 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [WIP 🚧 ] /admin/order_cycles behind feature toggle admin_style_v2 This reverts commits ccfc632149f062fca546784c7c2f14708d91a08e~1..e403a2c174def34cfa115eab038c86923482bfbf --- .../order_cycles/_add_exchange_form.html.haml | 2 +- .../order_cycles/_exchange_form.html.haml | 7 ++-- .../admin/order_cycles/_header.html.haml | 12 +++--- app/views/admin/order_cycles/_row.html.haml | 11 +++--- .../css/admin/v2/components/buttons.scss | 18 ++------- .../css/admin/v2/components/tables.scss | 39 +++---------------- .../css/admin/v2/components/tags-input.scss | 10 ----- .../admin/v2/components/wizard_progress.scss | 19 --------- app/webpacker/css/admin/v2/main.scss | 4 -- app/webpacker/css/admin/v2/others.scss | 6 --- .../css/admin/v2/plugins/select2.scss | 16 +------- app/webpacker/css/admin/v2/shared/forms.scss | 3 +- .../css/admin/v2/shared/typography.scss | 4 -- app/webpacker/css/admin/v2/variables.scss | 1 - 14 files changed, 27 insertions(+), 125 deletions(-) delete mode 100644 app/webpacker/css/admin/v2/components/tags-input.scss delete mode 100644 app/webpacker/css/admin/v2/components/wizard_progress.scss delete mode 100644 app/webpacker/css/admin/v2/others.scss diff --git a/app/views/admin/order_cycles/_add_exchange_form.html.haml b/app/views/admin/order_cycles/_add_exchange_form.html.haml index 72be25f5f4..36c8e804af 100644 --- a/app/views/admin/order_cycles/_add_exchange_form.html.haml +++ b/app/views/admin/order_cycles/_add_exchange_form.html.haml @@ -3,4 +3,4 @@ {{ enterprise.name }} = "{{ enterprise.issues_summary_#{type} ? '('+enterprise.issues_summary_#{type}+')' : '' }}" -= f.submit t(".add_#{type}"), 'ng-click' => "add#{type.capitalize}($event)", 'ng-disabled' => "!new_#{type}_id || !OrderCycle.novel#{type.capitalize}(new_#{type}_id)", "class": "secondary" += f.submit t(".add_#{type}"), 'ng-click' => "add#{type.capitalize}($event)", 'ng-disabled' => "!new_#{type}_id || !OrderCycle.novel#{type.capitalize}(new_#{type}_id)" diff --git a/app/views/admin/order_cycles/_exchange_form.html.haml b/app/views/admin/order_cycles/_exchange_form.html.haml index d92099cd8c..94481b1f13 100644 --- a/app/views/admin/order_cycles/_exchange_form.html.haml +++ b/app/views/admin/order_cycles/_exchange_form.html.haml @@ -26,16 +26,15 @@ = f.submit t('.add_fee'), 'ng-click' => 'addExchangeFee($event, exchange)', 'ng-hide' => '!enterprises[exchange.enterprise_id].managed && !order_cycle.viewing_as_coordinator' %td.actions - .flex - %a{'ng-click' => 'removeExchange($event, exchange)', :class => "icon-trash no-text remove-exchange"} + %a{'ng-click' => 'removeExchange($event, exchange)', :class => "icon-trash no-text remove-exchange"} - if type == 'supplier' %tr.panel-row{ object: "exchange", panels: "{products: 'exchange_products_supplied'}", locals: "$index,exchangeTotalVariants,order_cycle,exchange,enterprises,setExchangeVariants,selectAllVariants,suppliedVariants,removeDistributionOfVariant,initializeExchangeProductsPanel,loadMoreExchangeProducts,loadAllExchangeProducts,productsLoading", - colspan: if feature?(:admin_style_v2, spree_current_user) then 5 else 4 end } + colspan: 4 } - if type == 'distributor' %tr.panel-row{ object: "exchange", panels: "{products: 'exchange_products_distributed', tags: 'exchange_tags'}", locals: "$index,exchangeTotalVariants,order_cycle,exchange,enterprises,setExchangeVariants,incomingExchangeVariantsFor,variantSuppliedToOrderCycle,initializeExchangeProductsPanel,loadMoreExchangeProducts,loadAllExchangeProducts,productsLoading", - colspan: if feature?(:admin_style_v2, spree_current_user) then 6 else 5 end } + colspan: 5 } diff --git a/app/views/admin/order_cycles/_header.html.haml b/app/views/admin/order_cycles/_header.html.haml index b867609e3c..0d3f9fba8e 100644 --- a/app/views/admin/order_cycles/_header.html.haml +++ b/app/views/admin/order_cycles/_header.html.haml @@ -1,16 +1,16 @@ %colgroup %col{ ng: { show: 'columns.name.visible' } } %col{ ng: { show: 'columns.schedules.visible' } } - %col{ ng: { show: 'columns.open.visible' } } - %col{ ng: { show: 'columns.close.visible' } } + %col{ ng: { show: 'columns.open.visible' }, style: 'width: 20%;' } + %col{ ng: { show: 'columns.close.visible' }, style: 'width: 20%;' } - unless simple_index %col{ ng: { show: 'columns.producers.visible' } } %col{ ng: { show: 'columns.coordinator.visible' } } %col{ ng: { show: 'columns.shops.visible' } } %col{ ng: { show: 'columns.products.visible' } } - %col - %col - %col + %col{ style: 'width: 5%;' } + %col{ style: 'width: 5%;' } + %col{ style: 'width: 5%;' } %thead %tr @@ -32,3 +32,5 @@ %th{ ng: { show: 'columns.products.visible' } } =t :products %th.actions + %th.actions + %th.actions diff --git a/app/views/admin/order_cycles/_row.html.haml b/app/views/admin/order_cycles/_row.html.haml index 1fbba44186..5a2e06dbb6 100644 --- a/app/views/admin/order_cycles/_row.html.haml +++ b/app/views/admin/order_cycles/_row.html.haml @@ -32,9 +32,8 @@ = t('.variants') %td.actions - .flex - %a.edit-order-cycle.icon-edit.no-text{ ng: { href: '{{orderCycle.edit_path}}'}, 'ofn-with-tip' => t(:edit) } - %div{ ng: { if: 'orderCycle.viewing_as_coordinator' } } - %a.clone-order-cycle.icon-copy.no-text{ ng: { href: '{{orderCycle.clone_path}}'}, 'ofn-with-tip' => t(:clone) } - %div{ ng: { if: 'orderCycle.deletable && orderCycle.viewing_as_coordinator' }} - %a.delete-order-cycle.icon-trash.no-text{ ng: { href: '{{orderCycle.delete_path}}'}, data: { method: 'delete', confirm: t(:are_you_sure) }, 'ofn-with-tip' => t(:remove) } + %a.edit-order-cycle.icon-edit.no-text{ ng: { href: '{{orderCycle.edit_path}}'}, 'ofn-with-tip' => t(:edit) } + %td.actions{ ng: { if: 'orderCycle.viewing_as_coordinator' } } + %a.clone-order-cycle.icon-copy.no-text{ ng: { href: '{{orderCycle.clone_path}}'}, 'ofn-with-tip' => t(:clone) } + %td.actions{ ng: { if: 'orderCycle.deletable && orderCycle.viewing_as_coordinator' }} + %a.delete-order-cycle.icon-trash.no-text{ ng: { href: '{{orderCycle.delete_path}}'}, data: { method: 'delete', confirm: t(:are_you_sure) }, 'ofn-with-tip' => t(:remove) } diff --git a/app/webpacker/css/admin/v2/components/buttons.scss b/app/webpacker/css/admin/v2/components/buttons.scss index 6e52bd2f54..90a4a70184 100644 --- a/app/webpacker/css/admin/v2/components/buttons.scss +++ b/app/webpacker/css/admin/v2/components/buttons.scss @@ -26,26 +26,14 @@ fieldset .filter-actions .button:hover, } &.disabled, - &[disabled], - &.disabled.secondary, - &[disabled].secondary { - @include backgroundAndBorder($v2-dark-light-grey); + &[disabled] { + @include backgroundAndBorder($v2-light-grey); box-shadow: none; - cursor: default; - color: white; - - &:hover { - @include backgroundAndBorder($v2-dark-light-grey); - box-shadow: none; - cursor: default; - color: white; - } } &.secondary, &.cancel, - &.icon-remove, - &#clear_all_filters { + &.icon-remove { background-color: $white; border: 2px solid $v2-blue-light; color: $v2-blue-light; diff --git a/app/webpacker/css/admin/v2/components/tables.scss b/app/webpacker/css/admin/v2/components/tables.scss index 99f6dbb23a..e867aa24e0 100644 --- a/app/webpacker/css/admin/v2/components/tables.scss +++ b/app/webpacker/css/admin/v2/components/tables.scss @@ -45,10 +45,6 @@ table tbody tr { > .flex { column-gap: 10px; } - - &.actions > .flex { - justify-content: flex-end; - } } &.even, &.odd { @@ -60,6 +56,7 @@ table tbody tr { table thead tr th.actions, table tbody tr td.actions { + background-color: $v2-body-bg !important; // Special for icons in the actions column [class*="icon-"], button[class*="icon-"]:not(.disabled):not([disabled]):not(.secondary):not( @@ -100,7 +97,7 @@ table tbody tr td.actions { } } -table { +table#listing_orders { thead th.actions, thead td.actions { background-color: $v2-medium-light-grey !important; @@ -109,42 +106,16 @@ table { background-color: white !important; } td { + // When the table is the listing of orders, we need to increase the height of the cells + padding: 20px 0; + &.actions { padding-left: 20px; border-bottom: 2px solid $v2-medium-light-grey !important; // needs to be important because of already defined with important } - } -} - -table tbody tr:hover > td { - background-color: #e9f3fc !important; // needs to be important because of already defined with important -} - -table#listing_orders { - td { - // When the table is the listing of orders, we need to increase the height of the cells - padding: 20px 0; &:not(:first-child) { border-left: none; // Only show left border on the first cells, as it indicates the order state by its color } } } - -table#listing_order_cycles tr.open td { - background-color: #d9fccb !important; // needs to be important because of already defined with important -} -table#listing_order_cycles tr.closed td { - background-color: #eee !important; // needs to be important because of already defined with important -} -table#listing_order_cycles tr.upcoming td { - background-color: #fbfccb !important; // needs to be important because of already defined with important -} - -tbody.panel-ctrl.expanded > tr:not(.panel-row) > td { - border-bottom: 1px solid #6788a2 !important; // needs to be important because of already defined with important -} - -tbody.panel-ctrl.expanded > tr:not(.panel-row) > td.selected { - border-bottom: none !important; // it's a bit annoying to always put that important, but it's the only way to override the default style -} diff --git a/app/webpacker/css/admin/v2/components/tags-input.scss b/app/webpacker/css/admin/v2/components/tags-input.scss deleted file mode 100644 index c7c8634c97..0000000000 --- a/app/webpacker/css/admin/v2/components/tags-input.scss +++ /dev/null @@ -1,10 +0,0 @@ -tags-input .tags li.tag-item { - background-color: $v2-blue-light; -} - -tags-input .tags { - box-shadow: none; - &.focused { - box-shadow: none; - } -} diff --git a/app/webpacker/css/admin/v2/components/wizard_progress.scss b/app/webpacker/css/admin/v2/components/wizard_progress.scss deleted file mode 100644 index 83cfe8dd3f..0000000000 --- a/app/webpacker/css/admin/v2/components/wizard_progress.scss +++ /dev/null @@ -1,19 +0,0 @@ -ul.wizard-progress li { - a { - color: white; - } - - background-color: $v2-dark-light-grey; - &:before, - &:after { - background-color: $v2-dark-light-grey; - } - - &.current { - background-color: $v2-blue-light; - &:before, - &:after { - background-color: $v2-blue-light; - } - } -} diff --git a/app/webpacker/css/admin/v2/main.scss b/app/webpacker/css/admin/v2/main.scss index 2ff6321fb4..16d0dc59a6 100644 --- a/app/webpacker/css/admin/v2/main.scss +++ b/app/webpacker/css/admin/v2/main.scss @@ -12,10 +12,6 @@ @import "components/sidebar.scss"; @import "components/tom_select.scss"; @import "components/dropdown.scss"; -@import "components/wizard_progress.scss"; -@import "components/tags-input.scss"; - -@import "others.scss"; body { background-color: $v2-body-bg; diff --git a/app/webpacker/css/admin/v2/others.scss b/app/webpacker/css/admin/v2/others.scss deleted file mode 100644 index ad60e67342..0000000000 --- a/app/webpacker/css/admin/v2/others.scss +++ /dev/null @@ -1,6 +0,0 @@ -/* The aim of this file is to not create a file for each small modification on components */ - -#advanced_settings { - background-color: $v2-blue-lightest; - border-color: $v2-blue-dark; -} diff --git a/app/webpacker/css/admin/v2/plugins/select2.scss b/app/webpacker/css/admin/v2/plugins/select2.scss index 6f873fbc1a..fb017a890b 100644 --- a/app/webpacker/css/admin/v2/plugins/select2.scss +++ b/app/webpacker/css/admin/v2/plugins/select2.scss @@ -7,7 +7,7 @@ color: $v2-medium-grey !important; padding-left: 5px; font-size: 13px; - height: 35px; + padding-top: 3px; .select2-arrow { color: $v2-medium-grey; @@ -17,7 +17,7 @@ &.select2-container-active, &:hover { .select2-choice { - background-color: white !important; + background-color: transparent !important; border-color: $v2-medium-grey !important; } } @@ -45,26 +45,14 @@ } .select2-choices { border-color: $v2-medium-grey !important; - min-height: 35px; .select2-search-choice { background-color: $v2-blue-light; } } - &.select2-drop-above { - .select2-choices { - border-top-left-radius: 0; - border-top-right-radius: 0; - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - } - } } .select2-drop { border-color: $v2-medium-grey; - &.select2-drop-above.select2-drop-active { - border-color: $v2-medium-grey; - } } .select2-search { diff --git a/app/webpacker/css/admin/v2/shared/forms.scss b/app/webpacker/css/admin/v2/shared/forms.scss index a0309662dd..ac8d9bf316 100644 --- a/app/webpacker/css/admin/v2/shared/forms.scss +++ b/app/webpacker/css/admin/v2/shared/forms.scss @@ -18,10 +18,9 @@ fieldset { // Change the color of all inputs color: $v2-medium-grey; border-color: $v2-light-grey !important; - font-size: 13px; &:focus { - border-color: $v2-medium-grey !important; + border-color: $v2-medium-grey; } } diff --git a/app/webpacker/css/admin/v2/shared/typography.scss b/app/webpacker/css/admin/v2/shared/typography.scss index 458558290c..03bdd23e5a 100644 --- a/app/webpacker/css/admin/v2/shared/typography.scss +++ b/app/webpacker/css/admin/v2/shared/typography.scss @@ -12,7 +12,3 @@ a:not(.button) { @include v2-link-color(); } - -h4 { - color: $v2-medium-dark-grey; -} diff --git a/app/webpacker/css/admin/v2/variables.scss b/app/webpacker/css/admin/v2/variables.scss index 21fedeca07..b6548511de 100644 --- a/app/webpacker/css/admin/v2/variables.scss +++ b/app/webpacker/css/admin/v2/variables.scss @@ -9,7 +9,6 @@ $v2-dark-grey: #333333; $v2-medium-dark-grey: #444444; $v2-body-grey: $color-4; $v2-medium-grey: #717171; -$v2-dark-light-grey: #d9d9d9; $v2-medium-light-grey: #e6e6e6; $v2-light-grey: #e7e7e7; From 0ff540e1e3f87f69cd73495770d8668c08a50621 Mon Sep 17 00:00:00 2001 From: David Cook Date: Tue, 2 May 2023 14:33:15 +1000 Subject: [PATCH 2/6] Revert pull #10080 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [WIP 🚧 ] Admin - Order edition, behind feature toggle admin_style_v2: adjust colors This reverts commits faf106b2824f248812f523c10b688bd9b254dc14..74b618230ff736ac7929246e2c83ed95067a4dd0 --- app/helpers/spree/admin/orders_helper.rb | 2 +- app/views/spree/admin/orders/_note.html.haml | 7 +- .../spree/admin/orders/_shipment.html.haml | 18 ++-- .../admin/orders/_shipment_manifest.html.haml | 9 +- .../spree/admin/payments/_list.html.haml | 5 +- app/views/spree/admin/shared/_head.html.haml | 5 +- app/webpacker/css/admin/all.scss | 2 + app/webpacker/css/admin/globals/palette.scss | 16 ---- .../css/admin/globals/variables.scss | 8 ++ .../css/admin/v2/components/buttons.scss | 31 ++++--- .../css/admin/v2/components/dropdown.scss | 9 -- .../css/admin/v2/components/sidebar.scss | 11 --- .../css/admin/v2/components/tables.scss | 86 +++++-------------- .../css/admin/v2/components/tom_select.scss | 47 ---------- app/webpacker/css/admin/v2/main.scss | 23 ++--- app/webpacker/css/admin/v2/navigation.scss | 22 ----- .../css/admin/v2/plugins/powertip.scss | 27 ------ .../css/admin/v2/plugins/select2.scss | 8 +- app/webpacker/css/admin/v2/shared/forms.scss | 3 +- .../css/admin/v2/shared/typography.scss | 8 +- app/webpacker/css/admin/v2/variables.scss | 4 +- app/webpacker/packs/admin-styles-v2.scss | 6 -- app/webpacker/packs/admin-styles.scss | 2 - 23 files changed, 82 insertions(+), 277 deletions(-) delete mode 100644 app/webpacker/css/admin/globals/palette.scss delete mode 100644 app/webpacker/css/admin/v2/components/dropdown.scss delete mode 100644 app/webpacker/css/admin/v2/components/sidebar.scss delete mode 100644 app/webpacker/css/admin/v2/components/tom_select.scss delete mode 100644 app/webpacker/packs/admin-styles-v2.scss diff --git a/app/helpers/spree/admin/orders_helper.rb b/app/helpers/spree/admin/orders_helper.rb index 92e55fa008..9032f7b787 100644 --- a/app/helpers/spree/admin/orders_helper.rb +++ b/app/helpers/spree/admin/orders_helper.rb @@ -112,7 +112,7 @@ module Spree event_label = I18n.t("cancel", scope: "actions") button_link_to(event_label, fire_admin_order_url(@order, e: "cancel"), - method: :put, icon: "icon-remove", form_id: "cancel_order_form") + method: :put, icon: "icon-cancel", form_id: "cancel_order_form") end def resume_event_link diff --git a/app/views/spree/admin/orders/_note.html.haml b/app/views/spree/admin/orders/_note.html.haml index c128e812ab..fb46907191 100644 --- a/app/views/spree/admin/orders/_note.html.haml +++ b/app/views/spree/admin/orders/_note.html.haml @@ -20,8 +20,7 @@ = t(".no_note_present") %td.actions - .flex - = link_to '', '', class: 'edit-note icon_link icon-edit no-text with-tip', data: { action: 'edit' }, title: Spree.t('edit') - - if @order.note.present? - = link_to '', '', class: 'delete-note icon_link icon-trash no-text with-tip', data: { action: 'remove' }, title: Spree.t('delete') + = link_to '', '', class: 'edit-note icon_link icon-edit no-text with-tip', data: { action: 'edit' }, title: Spree.t('edit') + - if @order.note.present? + = link_to '', '', class: 'delete-note icon_link icon-trash no-text with-tip', data: { action: 'remove' }, title: Spree.t('delete') diff --git a/app/views/spree/admin/orders/_shipment.html.haml b/app/views/spree/admin/orders/_shipment.html.haml index 78329c5db9..f28ef2740f 100644 --- a/app/views/spree/admin/orders/_shipment.html.haml +++ b/app/views/spree/admin/orders/_shipment.html.haml @@ -26,7 +26,7 @@ = Spree.t(:price) %th = Spree.t(:quantity) - %th.force-rounded-right + %th = Spree.t(:total) %th.orders-actions.actions @@ -57,8 +57,8 @@ %span = shipment.fee_adjustment.display_amount - %td.actions - - if shipment.fee_adjustment.present? && shipment.can_modify? + - if shipment.fee_adjustment.present? && shipment.can_modify? + %td.actions - if can? :update, shipment = link_to '', '', :class => 'edit-method icon_link icon-edit no-text with-tip', :data => { :action => 'edit' }, :title => Spree.t('edit') @@ -70,9 +70,8 @@ %td.actions - if can?(:update, shipment) && !shipment.canceled? - .flex - = link_to '', '', :class => 'save-tracking icon_link icon-ok no-text with-tip', :data => { 'shipment-number' => shipment.number, :action => 'save' }, :title => I18n.t('actions.save') - = link_to '', '', :class => 'cancel-tracking icon_link icon-cancel no-text with-tip', :data => { :action => 'cancel' }, :title => I18n.t('actions.cancel') + = link_to '', '', :class => 'save-tracking icon_link icon-ok no-text with-tip', :data => { 'shipment-number' => shipment.number, :action => 'save' }, :title => I18n.t('actions.save') + = link_to '', '', :class => 'cancel-tracking icon_link icon-cancel no-text with-tip', :data => { :action => 'cancel' }, :title => I18n.t('actions.cancel') %tr.show-tracking.total %td{ :colspan => "5" } @@ -85,7 +84,6 @@ %td.actions - if can?(:update, shipment) && shipment.can_modify? - .flex - = link_to '', '', :class => 'edit-tracking icon_link icon-edit no-text with-tip', :data => { :action => 'edit' }, :title => Spree.t('edit') - - if shipment.tracking.present? - = link_to '', '', :class => 'delete-tracking icon_link icon-trash no-text with-tip', :data => { 'shipment-number' => shipment.number, :action => 'remove' }, :title => Spree.t('delete') + = link_to '', '', :class => 'edit-tracking icon_link icon-edit no-text with-tip', :data => { :action => 'edit' }, :title => Spree.t('edit') + - if shipment.tracking.present? + = link_to '', '', :class => 'delete-tracking icon_link icon-trash no-text with-tip', :data => { 'shipment-number' => shipment.number, :action => 'remove' }, :title => Spree.t('delete') diff --git a/app/views/spree/admin/orders/_shipment_manifest.html.haml b/app/views/spree/admin/orders/_shipment_manifest.html.haml index 262ad9655c..fd95d95dbc 100644 --- a/app/views/spree/admin/orders/_shipment_manifest.html.haml +++ b/app/views/spree/admin/orders/_shipment_manifest.html.haml @@ -19,11 +19,10 @@ %td.cart-item-delete.actions - if shipment.can_modify? && can?(:update, shipment) - .flex - = link_to '', '#', :class => 'save-item icon_link icon-ok no-text with-tip', :data => {'shipment-number' => shipment.number, 'variant-id' => item.variant.id, :action => 'save'}, :title => t('actions.save'), :style => 'display: none' - = link_to '', '#', :class => 'cancel-item icon_link icon-cancel no-text with-tip', :data => {:action => 'cancel'}, :title => t('actions.cancel'), :style => 'display: none' - = link_to '', '#', :class => 'edit-item icon_link icon-edit no-text with-tip', :data => {:action => 'edit'}, :title => t('actions.edit') - = link_to '', '#', :class => 'delete-item icon-trash no-text with-tip', :data => {'shipment-number' => shipment.number, 'variant-id' => item.variant.id, :action => 'remove'}, :title => t('actions.delete') + = link_to '', '#', :class => 'save-item icon_link icon-ok no-text with-tip', :data => {'shipment-number' => shipment.number, 'variant-id' => item.variant.id, :action => 'save'}, :title => t('actions.save'), :style => 'display: none' + = link_to '', '#', :class => 'cancel-item icon_link icon-cancel no-text with-tip', :data => {:action => 'cancel'}, :title => t('actions.cancel'), :style => 'display: none' + = link_to '', '#', :class => 'edit-item icon_link icon-edit no-text with-tip', :data => {:action => 'edit'}, :title => t('actions.edit') + = link_to '', '#', :class => 'delete-item icon-trash no-text with-tip', :data => {'shipment-number' => shipment.number, 'variant-id' => item.variant.id, :action => 'remove'}, :title => t('actions.delete') = render 'spree/admin/shared/custom-alert' = render 'spree/admin/shared/custom-confirm' diff --git a/app/views/spree/admin/payments/_list.html.haml b/app/views/spree/admin/payments/_list.html.haml index a3b419ea13..6daa450eca 100644 --- a/app/views/spree/admin/payments/_list.html.haml +++ b/app/views/spree/admin/payments/_list.html.haml @@ -15,6 +15,5 @@ %td.align-center %span{class: "state #{payment.state}"}= t(payment.state, scope: "spree.payment_states", default: payment.state.capitalize) %td.actions - .flex - - payment.actions.each do |action| - = link_to_with_icon "icon-#{action}", Spree.t(action), fire_admin_order_payment_path(@order, payment, e: action), method: :put, no_text: true, data: {action: action, disable_with: ""} + - payment.actions.each do |action| + = link_to_with_icon "icon-#{action}", Spree.t(action), fire_admin_order_payment_path(@order, payment, e: action), method: :put, no_text: true, data: {action: action, disable_with: ""} diff --git a/app/views/spree/admin/shared/_head.html.haml b/app/views/spree/admin/shared/_head.html.haml index 69d501bb17..254e893bfc 100644 --- a/app/views/spree/admin/shared/_head.html.haml +++ b/app/views/spree/admin/shared/_head.html.haml @@ -14,10 +14,7 @@ %link{:href => "https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,700&subset=latin,cyrillic,greek,vietnamese", :rel => "stylesheet", :type => "text/css"} -- if feature?(:admin_style_v2, spree_current_user) - = stylesheet_pack_tag 'admin-styles-v2', media: "screen, print" -- else - = stylesheet_pack_tag 'admin-styles', media: "screen, print" += stylesheet_pack_tag 'admin-styles', media: "screen, print" = render "layouts/bugsnag_js" = javascript_include_tag 'admin/all' diff --git a/app/webpacker/css/admin/all.scss b/app/webpacker/css/admin/all.scss index 8148937855..ba7978e51a 100644 --- a/app/webpacker/css/admin/all.scss +++ b/app/webpacker/css/admin/all.scss @@ -129,3 +129,5 @@ @import "app/components/table_header_component/table_header_component"; @import "app/components/search_input_component/search_input_component"; @import "app/components/confirm_modal_component/confirm_modal_component"; + +@import "v2/main.scss"; diff --git a/app/webpacker/css/admin/globals/palette.scss b/app/webpacker/css/admin/globals/palette.scss deleted file mode 100644 index 6b343d22c1..0000000000 --- a/app/webpacker/css/admin/globals/palette.scss +++ /dev/null @@ -1,16 +0,0 @@ -// Basic color palette for admin -$color-1: #FFFFFF !default; // White -$color-2: #9FC820 !default; // Green -$color-3: #5498DA !default; // Light Blue -$color-4: #6788A2 !default; // Dark Blue -$color-5: #C60F13 !default; // Red -$color-6: #FF9300 !default; // Yellow - -@mixin basicColorPalette($color1, $color2, $color3, $color4, $color5, $color6) { - $color-1: $color1 !global; - $color-2: $color2 !global; - $color-3: $color3 !global; - $color-4: $color4 !global; - $color-5: $color5 !global; - $color-6: $color6 !global; -} diff --git a/app/webpacker/css/admin/globals/variables.scss b/app/webpacker/css/admin/globals/variables.scss index 167d5fe2f6..5bd369d20b 100644 --- a/app/webpacker/css/admin/globals/variables.scss +++ b/app/webpacker/css/admin/globals/variables.scss @@ -9,6 +9,14 @@ $base-font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, // Colors //-------------------------------------------------------------- +// Basic color palette for admin +$color-1: #FFFFFF !default; // White +$color-2: #9FC820 !default; // Green +$color-3: #5498DA !default; // Light Blue +$color-4: #6788A2 !default; // Dark Blue +$color-5: #C60F13 !default; // Red +$color-6: #FF9300 !default; // Yellow + // Body base colors $color-body-bg: $color-1 !default; $color-body-text: $color-4 !default; diff --git a/app/webpacker/css/admin/v2/components/buttons.scss b/app/webpacker/css/admin/v2/components/buttons.scss index 90a4a70184..37aadada0e 100644 --- a/app/webpacker/css/admin/v2/components/buttons.scss +++ b/app/webpacker/css/admin/v2/components/buttons.scss @@ -11,29 +11,27 @@ select[type="submit"], input[type="button"], select[type="button"], .select2-container-multi [type="button"].select2-choices, -button:not(.no-text), +button, .button, -.actions a:not(.no-text), -fieldset .filter-actions button, // Be more specific to be sure to override the form button style (with a white border) -fieldset .filter-actions .button:hover, +.actions a:not([class*="icon-"]), .admin__section-header .ofn-drop-down // Same behavior as the button { - @include backgroundAndBorder($v2-blue-light); - - &:hover { - @include backgroundAndBorder($v2-blue); - box-shadow: $v2-box-shadow; - } - &.disabled, &[disabled] { @include backgroundAndBorder($v2-light-grey); - box-shadow: none; } - &.secondary, - &.cancel, - &.icon-remove { + &:not(.disabled):not([disabled]):not(.secondary) { + // Change the color of the button only if it's not disabled + @include backgroundAndBorder($v2-blue-light); + + &:hover { + @include backgroundAndBorder($v2-blue); + box-shadow: $v2-box-shadow; + } + } + + &.secondary { background-color: $white; border: 2px solid $v2-blue-light; color: $v2-blue-light; @@ -62,6 +60,7 @@ fieldset .filter-actions .button:hover, } } -#table-filter fieldset { +#table-filter fieldset:has(.actions) { + // do not apply border to filter actions as it's drawn by the #table-filter .actions before and after pseudo elements border-bottom: 0; } diff --git a/app/webpacker/css/admin/v2/components/dropdown.scss b/app/webpacker/css/admin/v2/components/dropdown.scss deleted file mode 100644 index c982a8245a..0000000000 --- a/app/webpacker/css/admin/v2/components/dropdown.scss +++ /dev/null @@ -1,9 +0,0 @@ -/* Override app/webpacker/css/admin/dropdown.scss */ - -.ofn-drop-down, -.ofn-drop-down-with-prepend .ofn-drop-down-prepend { - background-color: white; - &.disabled { - opacity: 0.9; - } -} diff --git a/app/webpacker/css/admin/v2/components/sidebar.scss b/app/webpacker/css/admin/v2/components/sidebar.scss deleted file mode 100644 index 9275c66e46..0000000000 --- a/app/webpacker/css/admin/v2/components/sidebar.scss +++ /dev/null @@ -1,11 +0,0 @@ -/* Override file app/webpacker/css/admin/components/sidebar.scss */ - -#sidebar { - border-color: #e7e7e7; - .sidebar-title { - color: $v2-blue; - & > span { - background-color: $v2-body-bg; - } - } -} diff --git a/app/webpacker/css/admin/v2/components/tables.scss b/app/webpacker/css/admin/v2/components/tables.scss index e867aa24e0..8f40899bbe 100644 --- a/app/webpacker/css/admin/v2/components/tables.scss +++ b/app/webpacker/css/admin/v2/components/tables.scss @@ -1,17 +1,5 @@ /* Overide tables.scss app/webpacker/css/admin/components/tables.scss */ -table { - background-color: white; -} - -table thead tr:first-child th:first-child { - border-top-left-radius: 3px; -} - -table thead tr:first-child th:last-child, -table thead th.force-rounded-right { - border-top-right-radius: 3px; -} table thead th { background-color: $v2-medium-light-grey; border: none; @@ -25,23 +13,24 @@ table thead th { } } -table tr:not([class*="state"]) { - th:first-child, - td:first-child { - border-left: none; - } -} - table tbody tr { &:first-child th, &:first-child td { border-top: none; // Don't show the top border of the first row } + td:not(:first-child) { + border-left: none; // Only show left border on the first cells, as it indicates the order state by its color + } td { - border: none; - border-bottom: 2px solid $v2-medium-light-grey; + border-bottom: none; // By default, do not show the border of the cells + border-right: none; + border-top: none; + border-bottom: 2px solid $v2-medium-light-grey; + &.actions { + border-bottom: 2px solid $v2-medium-light-grey !important; // needs to be important because of already defined with important + } > .flex { column-gap: 10px; } @@ -54,31 +43,18 @@ table tbody tr { } } -table thead tr th.actions, -table tbody tr td.actions { - background-color: $v2-body-bg !important; +table th.actions, +table td.actions { // Special for icons in the actions column - [class*="icon-"], - button[class*="icon-"]:not(.disabled):not([disabled]):not(.secondary):not( - .cancel - ) { + [class*="icon-"] { color: $v2-blue; - display: flex; - justify-content: center; - align-items: center; - - &:before { - width: auto; - padding: 0; - } - &.no-text { border: 2px solid $v2-blue-light; - display: flex; // Be sure that display: flex; is applied - padding-top: 0; + background-color: $v2-blue-lightest; &:hover { border-color: $v2-blue; + background-color: $v2-blue-light; box-shadow: $v2-box-shadow; &:before { @@ -87,35 +63,13 @@ table tbody tr td.actions { } } } - .icon-edit:hover, - .icon-capture:hover, - .icon-ok:hover, - .icon-plus:hover, - .icon-road:hover { - background-color: $v2-blue; - color: $color-1; - } } -table#listing_orders { - thead th.actions, - thead td.actions { - background-color: $v2-medium-light-grey !important; - } - tbody tr td.actions { - background-color: white !important; - } - td { - // When the table is the listing of orders, we need to increase the height of the cells - padding: 20px 0; +table#listing_orders td { + // When the table is the listing of orders, we need to increase the height of the cells + padding: 20px 0; - &.actions { - padding-left: 20px; - border-bottom: 2px solid $v2-medium-light-grey !important; // needs to be important because of already defined with important - } - - &:not(:first-child) { - border-left: none; // Only show left border on the first cells, as it indicates the order state by its color - } + &.actions { + padding-left: 20px; } } diff --git a/app/webpacker/css/admin/v2/components/tom_select.scss b/app/webpacker/css/admin/v2/components/tom_select.scss deleted file mode 100644 index 0f20a3ec58..0000000000 --- a/app/webpacker/css/admin/v2/components/tom_select.scss +++ /dev/null @@ -1,47 +0,0 @@ -/* Override app/webpacker/css/admin/components/tom_select.scss */ - -.ts-wrapper.primary.focus .ts-control, -.ts-wrapper.primary .ts-control { - background-color: white; - border: 1px solid $v2-light-grey; - color: $v2-medium-grey; - - &:after { - border-color: $v2-medium-grey transparent transparent transparent; - } -} - -.ts-wrapper.dropdown-active.primary .ts-control { - background-color: transparent; - border-color: $v2-light-grey; - color: $v2-medium-grey; - - &:after { - border-color: transparent transparent $v2-medium-grey transparent; - } -} - -.ts-wrapper.dropdown-active.focus .ts-control { - border-color: $v2-medium-grey; -} - -.dropdown-input-wrap { - .dropdown-input { - border: 1px solid $v2-light-grey; - } -} - -.ts-dropdown .create:hover, -.ts-dropdown #admin-menu li.selected a.create, -#admin-menu li.selected .ts-dropdown a.create, -.ts-dropdown .option:hover, -.ts-dropdown #admin-menu li.selected a.option, -#admin-menu li.selected .ts-dropdown a.option, -.ts-dropdown .active { - background-color: $v2-blue; - color: $white; -} - -.ts-dropdown.single { - border-color: $v2-medium-grey; -} diff --git a/app/webpacker/css/admin/v2/main.scss b/app/webpacker/css/admin/v2/main.scss index 16d0dc59a6..60260a9bc9 100644 --- a/app/webpacker/css/admin/v2/main.scss +++ b/app/webpacker/css/admin/v2/main.scss @@ -1,18 +1,13 @@ @import "variables.scss"; @import "shared/typography.scss"; -@import "navigation.scss"; -@import "plugins/select2.scss"; -@import "plugins/powertip.scss"; -@import "plugins/flatpickr-customization.scss"; -@import "shared/forms.scss"; -@import "components/buttons.scss"; -@import "components/tables.scss"; -@import "components/progress.scss"; -@import "components/sidebar.scss"; -@import "components/tom_select.scss"; -@import "components/dropdown.scss"; - -body { - background-color: $v2-body-bg; +body.admin.admin-v2 { + @import "navigation.scss"; + @import "plugins/select2.scss"; + @import "plugins/powertip.scss"; + @import "plugins/flatpickr-customization.scss"; + @import "shared/forms.scss"; + @import "components/buttons.scss"; + @import "components/tables.scss"; + @import "components/progress.scss"; } diff --git a/app/webpacker/css/admin/v2/navigation.scss b/app/webpacker/css/admin/v2/navigation.scss index 56c5f541e0..d0f5b641c1 100644 --- a/app/webpacker/css/admin/v2/navigation.scss +++ b/app/webpacker/css/admin/v2/navigation.scss @@ -60,25 +60,3 @@ color: $v2-medium-dark-grey; } } - -nav.menu ul li, -nav.menu ul #admin-menu li, -#admin-menu nav.menu ul li { - &.active { - a { - color: $v2-blue-dark; - border-bottom-color: $v2-blue-dark; - } - } - - &.selected a, - a { - &:hover { - color: $v2-blue-dark; - border-bottom-color: $v2-blue-dark; - border-top-color: transparent; - border-right-color: transparent; - border-left-color: transparent; - } - } -} diff --git a/app/webpacker/css/admin/v2/plugins/powertip.scss b/app/webpacker/css/admin/v2/plugins/powertip.scss index b496967f20..dedef2bf60 100644 --- a/app/webpacker/css/admin/v2/plugins/powertip.scss +++ b/app/webpacker/css/admin/v2/plugins/powertip.scss @@ -28,31 +28,4 @@ &.sw:before { border-right-color: $v2-blue; } - - &.edit, - &.green, - &.capture, - &.save, - &.add { - background-color: $v2-blue; - - &.n:before, - &.ne:before, - &.nw:before { - border-top-color: $v2-blue; - } - &.e:before, - &.nw:before, - &.sw:before { - border-right-color: $v2-blue; - } - &.s:before, - &.se:before, - &.sw:before { - border-bottom-color: $v2-blue; - } - &.w:before { - border-left-color: $v2-blue; - } - } } diff --git a/app/webpacker/css/admin/v2/plugins/select2.scss b/app/webpacker/css/admin/v2/plugins/select2.scss index fb017a890b..e0096e701e 100644 --- a/app/webpacker/css/admin/v2/plugins/select2.scss +++ b/app/webpacker/css/admin/v2/plugins/select2.scss @@ -2,7 +2,7 @@ .select2-container { .select2-choice { - background-color: white; + background-color: transparent; border: 1px solid $v2-light-grey !important; color: $v2-medium-grey !important; padding-left: 5px; @@ -37,12 +37,6 @@ } .select2-container-multi { - &.select2-dropdown-open, - &.select2-container-active { - .select2-choices { - border-color: $v2-medium-grey !important; - } - } .select2-choices { border-color: $v2-medium-grey !important; .select2-search-choice { diff --git a/app/webpacker/css/admin/v2/shared/forms.scss b/app/webpacker/css/admin/v2/shared/forms.scss index ac8d9bf316..86ebddd051 100644 --- a/app/webpacker/css/admin/v2/shared/forms.scss +++ b/app/webpacker/css/admin/v2/shared/forms.scss @@ -25,12 +25,11 @@ fieldset { } fieldset label { - color: $v2-medium-dark-grey; + color: $v2-medium-grey; } fieldset legend { color: $v2-blue; - background-color: $v2-body-bg; } input[type="checkbox"], diff --git a/app/webpacker/css/admin/v2/shared/typography.scss b/app/webpacker/css/admin/v2/shared/typography.scss index 03bdd23e5a..f0dcc73983 100644 --- a/app/webpacker/css/admin/v2/shared/typography.scss +++ b/app/webpacker/css/admin/v2/shared/typography.scss @@ -9,6 +9,10 @@ } } -a:not(.button) { - @include v2-link-color(); +body.admin.admin-v2 { + color: $v2-body-grey; + + a:not(.button) { + @include v2-link-color(); + } } diff --git a/app/webpacker/css/admin/v2/variables.scss b/app/webpacker/css/admin/v2/variables.scss index b6548511de..ddaba6a9f0 100644 --- a/app/webpacker/css/admin/v2/variables.scss +++ b/app/webpacker/css/admin/v2/variables.scss @@ -7,7 +7,7 @@ $v2-orange-lightest: #fcdbd4; $v2-dark-grey: #333333; $v2-medium-dark-grey: #444444; -$v2-body-grey: $color-4; +$v2-body-grey: #666666; $v2-medium-grey: #717171; $v2-medium-light-grey: #e6e6e6; $v2-light-grey: #e7e7e7; @@ -21,5 +21,3 @@ $v2-green: #019854; $v2-green-light: #01cb70; $v2-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); // Default box shadow for actions stuff - -$v2-body-bg: #f7f9fa; diff --git a/app/webpacker/packs/admin-styles-v2.scss b/app/webpacker/packs/admin-styles-v2.scss deleted file mode 100644 index 1f6f135c70..0000000000 --- a/app/webpacker/packs/admin-styles-v2.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import '../css/admin/globals/palette'; -@include basicColorPalette(#FFFFFF, #69A95D, #14B6CC, #484848, #C1122B, #F27052); - -@import "../css/admin/all.scss"; - -@import "../css/admin/v2/main.scss"; diff --git a/app/webpacker/packs/admin-styles.scss b/app/webpacker/packs/admin-styles.scss index 9cb8a5287f..59e774d496 100644 --- a/app/webpacker/packs/admin-styles.scss +++ b/app/webpacker/packs/admin-styles.scss @@ -1,3 +1 @@ -@import '../css/admin/globals/palette'; - @import "../css/admin/all.scss"; From be70cd7893273a25337b75bba389eb15acaf6686 Mon Sep 17 00:00:00 2001 From: David Cook Date: Tue, 2 May 2023 14:39:34 +1000 Subject: [PATCH 3/6] Revert pull #10054 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [WIP 🚧 ] Admin/Orders, behind feature toggle admin_style_v2: adjust colors This reverts commits 5cab0f7f3d495daaeb97fd786208a24355b630fe..4ef5609b0eb08fe7e48803de166ae3e979103c1b --- .../spree/admin/orders/_filters.html.haml | 2 +- app/views/spree/admin/orders/index.html.haml | 22 +++--- .../css/admin/v2/components/buttons.scss | 66 ---------------- .../css/admin/v2/components/progress.scss | 9 --- .../css/admin/v2/components/tables.scss | 75 ------------------- app/webpacker/css/admin/v2/main.scss | 8 -- app/webpacker/css/admin/v2/navigation.scss | 19 +++-- .../v2/plugins/flatpickr-customization.scss | 46 ------------ .../css/admin/v2/plugins/powertip.scss | 31 -------- .../css/admin/v2/plugins/select2.scss | 70 ----------------- app/webpacker/css/admin/v2/shared/forms.scss | 55 -------------- .../css/admin/v2/shared/typography.scss | 18 ----- app/webpacker/css/admin/v2/variables.scss | 22 +----- 13 files changed, 29 insertions(+), 414 deletions(-) delete mode 100644 app/webpacker/css/admin/v2/components/buttons.scss delete mode 100644 app/webpacker/css/admin/v2/components/progress.scss delete mode 100644 app/webpacker/css/admin/v2/components/tables.scss delete mode 100644 app/webpacker/css/admin/v2/plugins/flatpickr-customization.scss delete mode 100644 app/webpacker/css/admin/v2/plugins/powertip.scss delete mode 100644 app/webpacker/css/admin/v2/plugins/select2.scss delete mode 100644 app/webpacker/css/admin/v2/shared/forms.scss delete mode 100644 app/webpacker/css/admin/v2/shared/typography.scss diff --git a/app/views/spree/admin/orders/_filters.html.haml b/app/views/spree/admin/orders/_filters.html.haml index 18b16f9dc3..f328c149ea 100644 --- a/app/views/spree/admin/orders/_filters.html.haml +++ b/app/views/spree/admin/orders/_filters.html.haml @@ -54,6 +54,6 @@ .actions.filter-actions %a.button.icon-search{'ng-click' => 'fetchResults()'} = t(:filter_results) - %a.button{'ng-click' => 'clearFilters()', "id": "clear_filters_button", "class": ("secondary" if feature?(:admin_style_v2, spree_current_user)) } + %a.button{'ng-click' => 'clearFilters()', "id": "clear_filters_button"} = t(:clear_filters) diff --git a/app/views/spree/admin/orders/index.html.haml b/app/views/spree/admin/orders/index.html.haml index 538298ba26..33224c8957 100644 --- a/app/views/spree/admin/orders/index.html.haml +++ b/app/views/spree/admin/orders/index.html.haml @@ -100,17 +100,17 @@ %td.align-center %span{'ng-bind-html' => 'order.display_total'} %td.actions - .flex - %div.row-loading-icons - %div{ng: {show: 'rowStatus[order.id] == "loading"', cloak: true}, style: "width: 30px; height: 30px;"} - = render partial: "components/spinner" - %i.success.icon-ok-sign{ng: {show: 'rowStatus[order.id] == "success"'} } - %i.error.icon-remove-sign.with-tip{ng: {show: 'rowStatus[order.id] == "error"'}, 'ofn-with-tip' => t('.order_not_updated')} - %a.icon_link.with-tip.icon-edit.no-text{'ng-href' => '{{order.edit_path}}', 'data-action' => 'edit', 'ofn-with-tip' => t('.edit')} - %div{'ng-if' => 'order.ready_to_ship'} - %button.icon-road.icon_link.with-tip.no-text{'ng-click' => 'shipOrder(order)', rel: 'nofollow', 'ofn-with-tip' => t('.ship')} - %div{'ng-if' => 'order.ready_to_capture'} - %button.icon-capture.icon_link.no-text{'ng-click' => 'capturePayment(order)', rel: 'nofollow', 'ofn-with-tip' => t('.capture')} + %div.row-loading-icons + %div{ng: {show: 'rowStatus[order.id] == "loading"', cloak: true}, style: "width: 30px; height: 30px;"} + = render partial: "components/spinner" + %i.success.icon-ok-sign{ng: {show: 'rowStatus[order.id] == "success"'} } + %i.error.icon-remove-sign.with-tip{ng: {show: 'rowStatus[order.id] == "error"'}, 'ofn-with-tip' => t('.order_not_updated')} + %a.icon_link.with-tip.icon-edit.no-text{'ng-href' => '{{order.edit_path}}', 'data-action' => 'edit', 'ofn-with-tip' => t('.edit')} + %div{'ng-if' => 'order.ready_to_ship'} + %button.icon-road.icon_link.with-tip.no-text{'ng-click' => 'shipOrder(order)', rel: 'nofollow', 'ofn-with-tip' => t('.ship')} + %div{'ng-if' => 'order.ready_to_capture'} + %button.icon-capture.icon_link.no-text{'ng-click' => 'capturePayment(order)', rel: 'nofollow', 'ofn-with-tip' => t('.capture')} + .sixteen.columns.alpha#loading{ 'ng-show' => 'RequestMonitor.loading' } = render partial: "components/admin_spinner" %h1 diff --git a/app/webpacker/css/admin/v2/components/buttons.scss b/app/webpacker/css/admin/v2/components/buttons.scss deleted file mode 100644 index 37aadada0e..0000000000 --- a/app/webpacker/css/admin/v2/components/buttons.scss +++ /dev/null @@ -1,66 +0,0 @@ -/* Overide buttons.scss app/webpacker/css/admin/components/buttons.scss */ - -@mixin backgroundAndBorder($color) { - background-color: $color; - border: 2px solid $color; -} - -input[type="submit"], -select[type="submit"], -.select2-container-multi [type="submit"].select2-choices, -input[type="button"], -select[type="button"], -.select2-container-multi [type="button"].select2-choices, -button, -.button, -.actions a:not([class*="icon-"]), -.admin__section-header .ofn-drop-down // Same behavior as the button -{ - &.disabled, - &[disabled] { - @include backgroundAndBorder($v2-light-grey); - } - - &:not(.disabled):not([disabled]):not(.secondary) { - // Change the color of the button only if it's not disabled - @include backgroundAndBorder($v2-blue-light); - - &:hover { - @include backgroundAndBorder($v2-blue); - box-shadow: $v2-box-shadow; - } - } - - &.secondary { - background-color: $white; - border: 2px solid $v2-blue-light; - color: $v2-blue-light; - - &:hover { - background-color: $v2-blue-lightest; - color: $v2-blue; - box-shadow: $v2-box-shadow; - } - } - - &.active { - @include backgroundAndBorder($v2-blue); - } -} - -#table-filter .actions { - /* used to draw a line on the right and left of the actions buttons - We can then remove the dropshadow on the buttons */ - &:before, - &:after { - background-color: $v2-light-grey; // same color as the border of the fieldset. see forms.scss - height: 1px; - content: attr(data-initials); - flex-grow: 1; // make the line as long as it can - } -} - -#table-filter fieldset:has(.actions) { - // do not apply border to filter actions as it's drawn by the #table-filter .actions before and after pseudo elements - border-bottom: 0; -} diff --git a/app/webpacker/css/admin/v2/components/progress.scss b/app/webpacker/css/admin/v2/components/progress.scss deleted file mode 100644 index e9b6450c30..0000000000 --- a/app/webpacker/css/admin/v2/components/progress.scss +++ /dev/null @@ -1,9 +0,0 @@ -/* Overide app/webpacker/css/admin/components/progress.scss file */ - -#progress { - background-color: $v2-blue; -} - -#loading { - color: $v2-blue; -} diff --git a/app/webpacker/css/admin/v2/components/tables.scss b/app/webpacker/css/admin/v2/components/tables.scss deleted file mode 100644 index 8f40899bbe..0000000000 --- a/app/webpacker/css/admin/v2/components/tables.scss +++ /dev/null @@ -1,75 +0,0 @@ -/* Overide tables.scss app/webpacker/css/admin/components/tables.scss */ - -table thead th { - background-color: $v2-medium-light-grey; - border: none; - color: $v2-blue; - text-transform: capitalize; - font-size: 13px; - - a { - border: none; - color: $v2-blue; - } -} - -table tbody tr { - &:first-child th, - &:first-child td { - border-top: none; // Don't show the top border of the first row - } - td:not(:first-child) { - border-left: none; // Only show left border on the first cells, as it indicates the order state by its color - } - - td { - border-bottom: none; // By default, do not show the border of the cells - border-right: none; - border-top: none; - - border-bottom: 2px solid $v2-medium-light-grey; - &.actions { - border-bottom: 2px solid $v2-medium-light-grey !important; // needs to be important because of already defined with important - } - > .flex { - column-gap: 10px; - } - } - &.even, - &.odd { - td { - background-color: transparent; // Do not use odd and even colors for background - } - } -} - -table th.actions, -table td.actions { - // Special for icons in the actions column - [class*="icon-"] { - color: $v2-blue; - &.no-text { - border: 2px solid $v2-blue-light; - background-color: $v2-blue-lightest; - - &:hover { - border-color: $v2-blue; - background-color: $v2-blue-light; - box-shadow: $v2-box-shadow; - - &:before { - color: white; - } - } - } - } -} - -table#listing_orders td { - // When the table is the listing of orders, we need to increase the height of the cells - padding: 20px 0; - - &.actions { - padding-left: 20px; - } -} diff --git a/app/webpacker/css/admin/v2/main.scss b/app/webpacker/css/admin/v2/main.scss index 60260a9bc9..16c8b4370e 100644 --- a/app/webpacker/css/admin/v2/main.scss +++ b/app/webpacker/css/admin/v2/main.scss @@ -1,13 +1,5 @@ @import "variables.scss"; -@import "shared/typography.scss"; body.admin.admin-v2 { @import "navigation.scss"; - @import "plugins/select2.scss"; - @import "plugins/powertip.scss"; - @import "plugins/flatpickr-customization.scss"; - @import "shared/forms.scss"; - @import "components/buttons.scss"; - @import "components/tables.scss"; - @import "components/progress.scss"; } diff --git a/app/webpacker/css/admin/v2/navigation.scss b/app/webpacker/css/admin/v2/navigation.scss index d0f5b641c1..714a4560a6 100644 --- a/app/webpacker/css/admin/v2/navigation.scss +++ b/app/webpacker/css/admin/v2/navigation.scss @@ -3,8 +3,14 @@ li { color: $v2-medium-dark-grey; - i { - @include v2-link-color(); + &:hover { + a, i { + color: $v2-orange; + } + } + + a { + color: $v2-medium-dark-grey; } } } @@ -21,8 +27,7 @@ display: none; } - li a:hover, - li.selected a { + li a:hover, li.selected a { background-color: $v2-orange-light; span { @@ -35,6 +40,7 @@ } } + #sub-menu { background-color: $v2-orange-light; @@ -42,10 +48,10 @@ font-size: 100%; } - li a:hover, - li.selected a { + li a:hover, li.selected a { text-shadow: 1px 1px 9px $v2-orange; background-color: lighten($v2-orange-light, 7%); + &:after { display: none; } @@ -60,3 +66,4 @@ color: $v2-medium-dark-grey; } } + diff --git a/app/webpacker/css/admin/v2/plugins/flatpickr-customization.scss b/app/webpacker/css/admin/v2/plugins/flatpickr-customization.scss deleted file mode 100644 index 7ebd19741c..0000000000 --- a/app/webpacker/css/admin/v2/plugins/flatpickr-customization.scss +++ /dev/null @@ -1,46 +0,0 @@ -/* Override flatpickr styles: app/webpacker/css/admin/plugins/flatpickr-customization.scss */ - -.flatpickr-calendar { - &.arrowTop::after { - border-bottom-color: $v2-blue-light; - } - .flatpickr-months .flatpickr-month, - .flatpickr-current-month .flatpickr-monthDropdown-months { - background: $v2-blue-light; - color: white; - input { - color: white; - } - } - - .flatpickr-weekdays { - background: $v2-blue-light; - - .flatpickr-weekday { - background: $v2-blue-light; - color: white; - } - } - - .flatpickr-day.selected, - .flatpickr-day.startRange, - .flatpickr-day.endRange, - .flatpickr-day.selected.inRange, - .flatpickr-day.startRange.inRange, - .flatpickr-day.endRange.inRange, - .flatpickr-day.selected:focus, - .flatpickr-day.startRange:focus, - .flatpickr-day.endRange:focus, - .flatpickr-day.selected:hover, - .flatpickr-day.startRange:hover, - .flatpickr-day.endRange:hover, - .flatpickr-day.selected.prevMonthDay, - .flatpickr-day.startRange.prevMonthDay, - .flatpickr-day.endRange.prevMonthDay, - .flatpickr-day.selected.nextMonthDay, - .flatpickr-day.startRange.nextMonthDay, - .flatpickr-day.endRange.nextMonthDay { - background: $v2-blue-light; - border-color: $v2-blue-light; - } -} diff --git a/app/webpacker/css/admin/v2/plugins/powertip.scss b/app/webpacker/css/admin/v2/plugins/powertip.scss deleted file mode 100644 index dedef2bf60..0000000000 --- a/app/webpacker/css/admin/v2/plugins/powertip.scss +++ /dev/null @@ -1,31 +0,0 @@ -/* Overide file powertip.scss app/webpacker/css/admin/v2/plugins/powertip.scss */ - -#powerTip { - background-color: $v2-blue; - - &.n:before, - &.ne:before, - &.nw:before { - border-top-color: $v2-blue; - } - - &.e:before { - border-right-color: $v2-blue; - } - &.s:before, - &.se:before, - &.sw:before { - border-bottom-color: $v2-blue; - } - &.w:before { - border-left-color: $v2-blue; - } - &.ne:before, - &.se:before { - border-right-color: $v2-blue; - } - &.nw:before, - &.sw:before { - border-right-color: $v2-blue; - } -} diff --git a/app/webpacker/css/admin/v2/plugins/select2.scss b/app/webpacker/css/admin/v2/plugins/select2.scss deleted file mode 100644 index e0096e701e..0000000000 --- a/app/webpacker/css/admin/v2/plugins/select2.scss +++ /dev/null @@ -1,70 +0,0 @@ -/* Override select2 styles app/webpacker/css/admin/plugins/select2.scss */ - -.select2-container { - .select2-choice { - background-color: transparent; - border: 1px solid $v2-light-grey !important; - color: $v2-medium-grey !important; - padding-left: 5px; - font-size: 13px; - padding-top: 3px; - - .select2-arrow { - color: $v2-medium-grey; - } - } - - &.select2-container-active, - &:hover { - .select2-choice { - background-color: transparent !important; - border-color: $v2-medium-grey !important; - } - } - - &.select2-dropdown-open.select2-container-active { - &:not(.select2-drop-above) { - .select2-choice { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - } - &.select2-drop-above .select.select2-choice { - border-top-left-radius: 0; - border-top-right-radius: 0; - } - } -} - -.select2-container-multi { - .select2-choices { - border-color: $v2-medium-grey !important; - .select2-search-choice { - background-color: $v2-blue-light; - } - } -} - -.select2-drop { - border-color: $v2-medium-grey; -} - -.select2-search { - color: $v2-medium-grey; -} - -.select2-results { - margin-right: 0; - li { - .select2-result-label { - color: $v2-medium-grey; - } - &.select2-highlighted { - background-color: $v2-blue; - } - &.select2-no-results, - &.select2-searching { - color: $v2-medium-grey; - } - } -} diff --git a/app/webpacker/css/admin/v2/shared/forms.scss b/app/webpacker/css/admin/v2/shared/forms.scss deleted file mode 100644 index 86ebddd051..0000000000 --- a/app/webpacker/css/admin/v2/shared/forms.scss +++ /dev/null @@ -1,55 +0,0 @@ -/* Overide forms.scss app/webpacker/css/admin/shared/forms.scss */ - -input[type="text"], -.select2-container-multi .select2-choices, -.select2-search input, -.select2-search select, -select, -input[type="password"], -input[type="email"], -input[type="url"], -input[type="tel"], -input[type="date"], -input[type="datetime"], -input[type="time"], -input[type="number"], -textarea, -fieldset { - // Change the color of all inputs - color: $v2-medium-grey; - border-color: $v2-light-grey !important; - - &:focus { - border-color: $v2-medium-grey; - } -} - -fieldset label { - color: $v2-medium-grey; -} - -fieldset legend { - color: $v2-blue; -} - -input[type="checkbox"], -input[type="radio"] { - accent-color: $v2-blue; -} - -fieldset .filter-actions { - button, - .button, - input[type="submit"] { - box-shadow: none; - width: 200px; // adjust at the same size in order to center them. Not ideal but works for now. - - &:first-of-type { - margin-right: 0; // don't see any reason to have a margin right on the first button as it's managed by the flexbox - } - - &:hover { - box-shadow: $v2-box-shadow; - } - } -} diff --git a/app/webpacker/css/admin/v2/shared/typography.scss b/app/webpacker/css/admin/v2/shared/typography.scss deleted file mode 100644 index f0dcc73983..0000000000 --- a/app/webpacker/css/admin/v2/shared/typography.scss +++ /dev/null @@ -1,18 +0,0 @@ -// Overide app/webpacker/css/admin/shared/typography.scss - -@mixin v2-link-color() { - color: $v2-blue; - border-color: $v2-blue; - &:hover { - color: $v2-blue-dark; - border-color: $v2-blue-dark; - } -} - -body.admin.admin-v2 { - color: $v2-body-grey; - - a:not(.button) { - @include v2-link-color(); - } -} diff --git a/app/webpacker/css/admin/v2/variables.scss b/app/webpacker/css/admin/v2/variables.scss index ddaba6a9f0..1eba6e0a5c 100644 --- a/app/webpacker/css/admin/v2/variables.scss +++ b/app/webpacker/css/admin/v2/variables.scss @@ -1,23 +1,9 @@ // Should finally replace (or at least complete) the file /admin/globale/variables.scss -$v2-orange: #f27052; -$v2-orange-light: #f5947d; -$v2-orange-lighter: #f8b7a8; -$v2-orange-lightest: #fcdbd4; +$v2-orange: #F27052; +$v2-orange-light: #F5947D; +$v2-orange-lighter: #F8B7A8; +$v2-orange-lightest: #FCDBD4; $v2-dark-grey: #333333; $v2-medium-dark-grey: #444444; -$v2-body-grey: #666666; -$v2-medium-grey: #717171; -$v2-medium-light-grey: #e6e6e6; -$v2-light-grey: #e7e7e7; - -$v2-blue: #017a9a; -$v2-blue-dark: #005e7a; -$v2-blue-light: #0096ad; -$v2-blue-lightest: #e6f7fa; // Could be used as a background color for the action icons - -$v2-green: #019854; -$v2-green-light: #01cb70; - -$v2-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); // Default box shadow for actions stuff From 3ec659d82b316015dc5673fcf51810903e1d1d0d Mon Sep 17 00:00:00 2001 From: David Cook Date: Tue, 2 May 2023 14:49:42 +1000 Subject: [PATCH 4/6] Revert pull #10025 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [WIP 🚧 ] Admin, behind feature toggle admin_style_v2: adjust some colors This reverts commits 60f0a58508ce77666fa96c73d76dc0620f23daaf~1..09bcc772ff089f911a56bb --- app/helpers/spree/admin/navigation_helper.rb | 1 - app/views/spree/admin/shared/_head.html.haml | 2 +- app/views/spree/layouts/admin.html.haml | 2 +- app/webpacker/css/admin/all.scss | 1 - .../css/admin/components/navigation.scss | 1 + app/webpacker/css/admin/v2/main.scss | 5 -- app/webpacker/css/admin/v2/navigation.scss | 69 ------------------- app/webpacker/css/admin/v2/variables.scss | 9 --- 8 files changed, 3 insertions(+), 87 deletions(-) delete mode 100644 app/webpacker/css/admin/v2/main.scss delete mode 100644 app/webpacker/css/admin/v2/navigation.scss delete mode 100644 app/webpacker/css/admin/v2/variables.scss diff --git a/app/helpers/spree/admin/navigation_helper.rb b/app/helpers/spree/admin/navigation_helper.rb index 9e8bb6e97f..56fc759660 100644 --- a/app/helpers/spree/admin/navigation_helper.rb +++ b/app/helpers/spree/admin/navigation_helper.rb @@ -34,7 +34,6 @@ module Spree link = link_to_with_icon(options[:icon], titleized_label, destination_url) css_classes << 'tab-with-icon' else - titleized_label = raw("#{titleized_label}") link = link_to(titleized_label, destination_url) end diff --git a/app/views/spree/admin/shared/_head.html.haml b/app/views/spree/admin/shared/_head.html.haml index 254e893bfc..238052154e 100644 --- a/app/views/spree/admin/shared/_head.html.haml +++ b/app/views/spree/admin/shared/_head.html.haml @@ -12,7 +12,7 @@ = t(controller.controller_name, :default => controller.controller_name.titleize) = " - OFN #{t(:administration)}" -%link{:href => "https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,700&subset=latin,cyrillic,greek,vietnamese", :rel => "stylesheet", :type => "text/css"} +%link{:href => "https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600&subset=latin,cyrillic,greek,vietnamese", :rel => "stylesheet", :type => "text/css"} = stylesheet_pack_tag 'admin-styles', media: "screen, print" = render "layouts/bugsnag_js" diff --git a/app/views/spree/layouts/admin.html.haml b/app/views/spree/layouts/admin.html.haml index 6fd5aacd15..ad070e473c 100644 --- a/app/views/spree/layouts/admin.html.haml +++ b/app/views/spree/layouts/admin.html.haml @@ -3,7 +3,7 @@ %head = render :partial => 'spree/admin/shared/head' - %body.admin{ "class": ("admin-v2" if feature?(:admin_style_v2, spree_current_user)) } + %body.admin - if content_for?(:main_ng_app_name) - if content_for?(:main_ng_ctrl_name) %div{ "ng-app" => yield(:main_ng_app_name).strip.html_safe, "ng-controller" => yield(:main_ng_ctrl_name).strip.html_safe } diff --git a/app/webpacker/css/admin/all.scss b/app/webpacker/css/admin/all.scss index ba7978e51a..d4251c1627 100644 --- a/app/webpacker/css/admin/all.scss +++ b/app/webpacker/css/admin/all.scss @@ -130,4 +130,3 @@ @import "app/components/search_input_component/search_input_component"; @import "app/components/confirm_modal_component/confirm_modal_component"; -@import "v2/main.scss"; diff --git a/app/webpacker/css/admin/components/navigation.scss b/app/webpacker/css/admin/components/navigation.scss index 7aeda38cbe..b6fb372546 100644 --- a/app/webpacker/css/admin/components/navigation.scss +++ b/app/webpacker/css/admin/components/navigation.scss @@ -78,6 +78,7 @@ nav.menu { text-transform: uppercase; position: relative; text-align: center; + font-weight: 600; i { display: inline; diff --git a/app/webpacker/css/admin/v2/main.scss b/app/webpacker/css/admin/v2/main.scss deleted file mode 100644 index 16c8b4370e..0000000000 --- a/app/webpacker/css/admin/v2/main.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import "variables.scss"; - -body.admin.admin-v2 { - @import "navigation.scss"; -} diff --git a/app/webpacker/css/admin/v2/navigation.scss b/app/webpacker/css/admin/v2/navigation.scss deleted file mode 100644 index 714a4560a6..0000000000 --- a/app/webpacker/css/admin/v2/navigation.scss +++ /dev/null @@ -1,69 +0,0 @@ -#header { - #login-nav { - li { - color: $v2-medium-dark-grey; - - &:hover { - a, i { - color: $v2-orange; - } - } - - a { - color: $v2-medium-dark-grey; - } - } - } -} - -#admin-menu { - background-color: $v2-orange; - - li a span.text { - font-weight: 700; - } - - li.tab-with-icon a:before { - display: none; - } - - li a:hover, li.selected a { - background-color: $v2-orange-light; - - span { - text-shadow: 1px 1px 9px $v2-orange; - } - - &:after { - display: none; - } - } -} - - -#sub-menu { - background-color: $v2-orange-light; - - li a { - font-size: 100%; - } - - li a:hover, li.selected a { - text-shadow: 1px 1px 9px $v2-orange; - background-color: lighten($v2-orange-light, 7%); - - &:after { - display: none; - } - } -} - -.admin__section-header { - background-color: transparent; - border-bottom: none; - - h1.js-admin-page-title { - color: $v2-medium-dark-grey; - } -} - diff --git a/app/webpacker/css/admin/v2/variables.scss b/app/webpacker/css/admin/v2/variables.scss deleted file mode 100644 index 1eba6e0a5c..0000000000 --- a/app/webpacker/css/admin/v2/variables.scss +++ /dev/null @@ -1,9 +0,0 @@ -// Should finally replace (or at least complete) the file /admin/globale/variables.scss - -$v2-orange: #F27052; -$v2-orange-light: #F5947D; -$v2-orange-lighter: #F8B7A8; -$v2-orange-lightest: #FCDBD4; - -$v2-dark-grey: #333333; -$v2-medium-dark-grey: #444444; From e29df5ea8fce0bdded80ce521ca52789448feca5 Mon Sep 17 00:00:00 2001 From: David Cook Date: Tue, 2 May 2023 15:13:23 +1000 Subject: [PATCH 5/6] Remove unused secondary class This partially reverts 97c3aaebb211345671cc2a3501c643431959e3f1 because it referred to the new feature toggle which has been removed. --- app/views/spree/admin/orders/bulk_management.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/spree/admin/orders/bulk_management.html.haml b/app/views/spree/admin/orders/bulk_management.html.haml index a386fd015d..4216df3732 100644 --- a/app/views/spree/admin/orders/bulk_management.html.haml +++ b/app/views/spree/admin/orders/bulk_management.html.haml @@ -52,7 +52,7 @@ .actions.filter-actions %a.button.icon-search{'ng-click' => 'refreshData()'} = t(:filter_results) - %a.button{'ng-click' => 'resetSelectFilters()', "id": "clear_filters_button", "class": ("secondary" if feature?(:admin_style_v2, spree_current_user)) } + %a.button{'ng-click' => 'resetSelectFilters()', "id": "clear_filters_button" } = t(:clear_filters) %hr.divider.sixteen.columns.alpha.omega{ ng: { show: 'unitsVariantSelected()' } } From 04a5c7452eed7618e47f9a058ef304ef2f99183d Mon Sep 17 00:00:00 2001 From: David Cook Date: Tue, 2 May 2023 15:18:22 +1000 Subject: [PATCH 6/6] Remove admin_style_v2 description Partially reverts 9a1b1498bf --- lib/open_food_network/feature_toggle.rb | 3 --- 1 file changed, 3 deletions(-) diff --git a/lib/open_food_network/feature_toggle.rb b/lib/open_food_network/feature_toggle.rb index 305511a0a5..a64e960d6c 100644 --- a/lib/open_food_network/feature_toggle.rb +++ b/lib/open_food_network/feature_toggle.rb @@ -11,9 +11,6 @@ module OpenFoodNetwork # We way move this to a YAML file when it becomes too awkward. # **WARNING:** Features not in this list will be removed. CURRENT_FEATURES = { - "admin_style_v2" => <<~DESC, - Change some colour and layout in the backend to a newer version. - DESC "api_reports" => <<~DESC, An API endpoint for reports at /api/v0/reports/:report_type(/:report_subtype)