raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-03-17 04:34:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #10131 from jibees/10125-change-oc-page-colors

Browse Source 
[WIP 🚧 ] `/admin/order_cycles` behind feature toggle `admin_style_v2`
This commit is contained in:
Rachel Arnould
2023-01-06 15:07:41 +01:00
committed by GitHub
parent 6b3a0fa14a e403a2c174
commit 61175c036a
14 changed files with 125 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/views/admin/order_cycles/_add_exchange_form.html.haml
View File

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

7
app/views/admin/order_cycles/_exchange_form.html.haml
View File

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

12
app/views/admin/order_cycles/_header.html.haml
View File

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

11
app/views/admin/order_cycles/_row.html.haml
View File

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

18
app/webpacker/css/admin/v2/components/buttons.scss
View File

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

39
app/webpacker/css/admin/v2/components/tables.scss
View File

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

10
app/webpacker/css/admin/v2/components/tags-input.scss Normal file
View File

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

19
app/webpacker/css/admin/v2/components/wizard_progress.scss Normal file
View File

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

4
app/webpacker/css/admin/v2/main.scss
View File

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

6
app/webpacker/css/admin/v2/others.scss Normal file
View File

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

16
app/webpacker/css/admin/v2/plugins/select2.scss
View File

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

3
app/webpacker/css/admin/v2/shared/forms.scss
View File

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

4
app/webpacker/css/admin/v2/shared/typography.scss
View File

@@ -12,3 +12,7 @@
a:not(.button) {
@include v2-link-color();
}
h4 {
color: $v2-medium-dark-grey;
}

1
app/webpacker/css/admin/v2/variables.scss
View File

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