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 36c8e804af..72be25f5f4 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)" += 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" diff --git a/app/views/admin/order_cycles/_exchange_form.html.haml b/app/views/admin/order_cycles/_exchange_form.html.haml index 8ab45003c5..e5aa662c60 100644 --- a/app/views/admin/order_cycles/_exchange_form.html.haml +++ b/app/views/admin/order_cycles/_exchange_form.html.haml @@ -26,15 +26,16 @@ = f.submit t('.add_fee'), 'ng-click' => 'addExchangeFee($event, exchange)', 'ng-hide' => '!enterprises[exchange.enterprise_id].managed && !order_cycle.viewing_as_coordinator' %td.actions - %a{'ng-click' => 'removeExchange($event, exchange)', :class => "icon-trash no-text remove-exchange"} + .flex + %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: 4 } + colspan: if feature?(:admin_style_v2, spree_current_user) then 5 else 4 end } - 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: 5 } + colspan: if feature?(:admin_style_v2, spree_current_user) then 6 else 5 end } diff --git a/app/views/admin/order_cycles/_header.html.haml b/app/views/admin/order_cycles/_header.html.haml index 0d3f9fba8e..b867609e3c 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' }, style: 'width: 20%;' } - %col{ ng: { show: 'columns.close.visible' }, style: 'width: 20%;' } + %col{ ng: { show: 'columns.open.visible' } } + %col{ ng: { show: 'columns.close.visible' } } - 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{ style: 'width: 5%;' } - %col{ style: 'width: 5%;' } - %col{ style: 'width: 5%;' } + %col + %col + %col %thead %tr @@ -32,5 +32,3 @@ %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 5a2e06dbb6..1fbba44186 100644 --- a/app/views/admin/order_cycles/_row.html.haml +++ b/app/views/admin/order_cycles/_row.html.haml @@ -32,8 +32,9 @@ = t('.variants') %td.actions - %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) } + .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) } diff --git a/app/webpacker/css/admin/v2/components/buttons.scss b/app/webpacker/css/admin/v2/components/buttons.scss index 90a4a70184..6e52bd2f54 100644 --- a/app/webpacker/css/admin/v2/components/buttons.scss +++ b/app/webpacker/css/admin/v2/components/buttons.scss @@ -26,14 +26,26 @@ fieldset .filter-actions .button:hover, } &.disabled, - &[disabled] { - @include backgroundAndBorder($v2-light-grey); + &[disabled], + &.disabled.secondary, + &[disabled].secondary { + @include backgroundAndBorder($v2-dark-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 { + &.icon-remove, + &#clear_all_filters { 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 143da4fb5a..e273947f9e 100644 --- a/app/webpacker/css/admin/v2/components/tables.scss +++ b/app/webpacker/css/admin/v2/components/tables.scss @@ -46,6 +46,10 @@ table tbody tr { display: flex; column-gap: 10px; } + + &.actions > .flex { + justify-content: flex-end; + } } &.even, &.odd { @@ -57,7 +61,6 @@ 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(.cancel) { @@ -96,7 +99,7 @@ table tbody tr td.actions { } } -table#listing_orders { +table { thead th.actions, thead td.actions { background-color: $v2-medium-light-grey !important; @@ -105,16 +108,42 @@ table#listing_orders { 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 new file mode 100644 index 0000000000..c7c8634c97 --- /dev/null +++ b/app/webpacker/css/admin/v2/components/tags-input.scss @@ -0,0 +1,10 @@ +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 new file mode 100644 index 0000000000..83cfe8dd3f --- /dev/null +++ b/app/webpacker/css/admin/v2/components/wizard_progress.scss @@ -0,0 +1,19 @@ +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 16d0dc59a6..2ff6321fb4 100644 --- a/app/webpacker/css/admin/v2/main.scss +++ b/app/webpacker/css/admin/v2/main.scss @@ -12,6 +12,10 @@ @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 new file mode 100644 index 0000000000..ad60e67342 --- /dev/null +++ b/app/webpacker/css/admin/v2/others.scss @@ -0,0 +1,6 @@ +/* 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 fb017a890b..6f873fbc1a 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; - padding-top: 3px; + height: 35px; .select2-arrow { color: $v2-medium-grey; @@ -17,7 +17,7 @@ &.select2-container-active, &:hover { .select2-choice { - background-color: transparent !important; + background-color: white !important; border-color: $v2-medium-grey !important; } } @@ -45,14 +45,26 @@ } .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 ac8d9bf316..a0309662dd 100644 --- a/app/webpacker/css/admin/v2/shared/forms.scss +++ b/app/webpacker/css/admin/v2/shared/forms.scss @@ -18,9 +18,10 @@ 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; + border-color: $v2-medium-grey !important; } } diff --git a/app/webpacker/css/admin/v2/shared/typography.scss b/app/webpacker/css/admin/v2/shared/typography.scss index 03bdd23e5a..458558290c 100644 --- a/app/webpacker/css/admin/v2/shared/typography.scss +++ b/app/webpacker/css/admin/v2/shared/typography.scss @@ -12,3 +12,7 @@ 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 b6548511de..21fedeca07 100644 --- a/app/webpacker/css/admin/v2/variables.scss +++ b/app/webpacker/css/admin/v2/variables.scss @@ -9,6 +9,7 @@ $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;