[WIP 🚧 ] Admin - Order edition, behind feature toggle admin_style_v2: adjust colors

This reverts commits faf106b2824f248812f523c10b688bd9b254dc14..74b618230ff736ac7929246e2c83ed95067a4dd0
This commit is contained in:
David Cook
2023-05-02 14:33:15 +10:00
parent c21ff075de
commit 0ff540e1e3
23 changed files with 82 additions and 277 deletions

View File

@@ -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

View File

@@ -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')

View File

@@ -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')

View File

@@ -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'

View File

@@ -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: ""}

View File

@@ -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'

View File

@@ -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";

View File

@@ -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;
}

View File

@@ -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;

View File

@@ -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;
}

View File

@@ -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;
}
}

View File

@@ -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;
}
}
}

View File

@@ -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;
}
}

View File

@@ -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;
}

View File

@@ -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";
}

View File

@@ -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;
}
}
}

View File

@@ -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;
}
}
}

View File

@@ -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 {

View File

@@ -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"],

View File

@@ -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();
}
}

View File

@@ -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;

View File

@@ -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";

View File

@@ -1,3 +1 @@
@import '../css/admin/globals/palette';
@import "../css/admin/all.scss";