Merge pull request #10791 from dacook/10630-new-brand-colours

[admin_v3] New brand colours in admin interface
This commit is contained in:
Filipe
2023-05-31 16:03:18 +01:00
committed by GitHub
19 changed files with 182 additions and 23 deletions

View File

@@ -5,8 +5,8 @@ angular.module("admin.utils").factory "StatusMessage", ->
alert: {style: {color: 'grey'}}
notice: {style: {color: 'grey'}}
success: {style: {color: '#9fc820'}}
failure: {style: {color: '#da5354'}}
error: {style: {color: '#da5354'}}
failure: {style: {color: '#C85136'}}
error: {style: {color: '#C85136'}}
statusMessage:
text: ""

View File

@@ -3,7 +3,7 @@
.seven.columns.alpha
%h5#status-message{ ng: { show: "StatusMessage.invalidMessage == ''", style: 'StatusMessage.statusMessage.style' } }
{{ StatusMessage.statusMessage.text || " " }}
%h5#status-message{ ng: { show: "StatusMessage.invalidMessage !== ''" }, style: 'color: #da5354' }
%h5#status-message{ ng: { show: "StatusMessage.invalidMessage !== ''" }, style: 'color: #C85136' }
{{ StatusMessage.invalidMessage || " " }}
.nine.columns.omega.text-right{ ng: { transclude: true } }

View File

@@ -17,18 +17,18 @@
= link_to_with_icon 'icon-chevron-right', t('.payment_methods'), spree.admin_payment_methods_path(enterprise_id: enterprise.id)
(#{enterprise.payment_methods.count})
- if enterprise.payment_methods.count == 0
%span.icon-exclamation-sign{"ofn-with-tip" => t('.payment_methods_tip'), style: "font-size: 16px;color: #DA5354"}
%span.warning-icon.icon-exclamation-sign{"ofn-with-tip" => t('.payment_methods_tip')}
%br/
- if can?(:admin, Spree::ShippingMethod) && can?(:manage_shipping_methods, enterprise)
= link_to_with_icon 'icon-plane', t('.shipping_methods'), spree.admin_shipping_methods_path(enterprise_id: enterprise.id)
(#{enterprise.shipping_methods.count})
- if enterprise.shipping_methods.count == 0
%span.icon-exclamation-sign{"ofn-with-tip" => t('.shipping_methods_tip'), style: "font-size: 16px;color: #DA5354"}
%span.warning-icon.icon-exclamation-sign{"ofn-with-tip" => t('.shipping_methods_tip')}
%br/
- if can?(:admin, EnterpriseFee) && can?(:manage_enterprise_fees, enterprise)
= link_to_with_icon 'icon-money', t('.enterprise_fees'), main_app.admin_enterprise_fees_path(enterprise_id: enterprise.id)
(#{enterprise.enterprise_fees.count})
- if enterprise.enterprise_fees.count == 0
%span.icon-warning-sign{"ofn-with-tip" => t('.enterprise_fees_tip'), style: "font-size: 16px;color: orange"}
%span.warning-icon.icon-warning-sign{"ofn-with-tip" => t('.enterprise_fees_tip')}

View File

@@ -32,7 +32,7 @@
%td= enterprise_form.check_box :visible, {}, 'public', 'hidden'
- if spree_current_user.admin?
%td= enterprise_form.select :owner_id, enterprise.users.map{ |e| [ e.email, e.id ] }, {}, class: "select2 fullwidth"
%td
%td.enterprise-actions
= render 'actions', enterprise: enterprise
- if @enterprises.empty?
%tr

View File

@@ -14,7 +14,11 @@
%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"
- if feature?(:admin_style_v3, spree_current_user)
= stylesheet_pack_tag 'admin-style-v3', media: "screen, print"
- else
= stylesheet_pack_tag 'admin-styles', media: "screen, print"
= render "layouts/bugsnag_js"
= javascript_include_tag 'admin/all'

View File

@@ -14,6 +14,7 @@
@import "~shortcut-buttons-flatpickr/dist/themes/light";
@import "globals/functions";
@import "globals/palette";
@import "globals/variables";
@import "variables";
@import "globals/mixins";

View File

@@ -34,6 +34,6 @@ input[type="checkbox"].redesigned-input {
}
&:checked:before {
color: #5498da !important;
color: $color-txt-text !important;
}
}

View File

@@ -10,7 +10,7 @@
left: 0;
font-size: 13px;
pointer-events: none;
background-color: #5498da;
background-color: $color-3;
padding: 5px 15px;
border-radius: 3px;
color: #fff;
@@ -19,7 +19,7 @@
}
.arrow {
background-color: #5498da;
background-color: $color-3;
position: absolute;
width: 8px;
height: 8px;

View File

@@ -35,3 +35,10 @@ form[name="enterprise_form"] {
margin-bottom: 1em;
margin-top: 1em;
}
table .enterprise-actions {
.warning-icon {
color: $warning-red;
font-size: 16px;
}
}

View File

@@ -0,0 +1,7 @@
// 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

View File

@@ -9,14 +9,6 @@ $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

@@ -75,7 +75,7 @@ a.action--disabled {
cursor: default;
&:hover {
color: #5498da;
color: $color-link;
}
}

View File

@@ -1,5 +1,5 @@
$background-grey: #eceef1;
$background-blue: #5498da;
$background-blue: $color-3;
// scss-lint:disable SelectorFormat

View File

@@ -4,8 +4,8 @@ $spree-green: #9fc820;
$spree-blue: #5498da;
$spree-light-blue: #eff5fc;
$warning-red: #da5354;
$warning-orange: #da7f52;
$warning-red: $color-5;
$warning-orange: $color-5;
$bright-orange: #ffa92e;
$medium-grey: #919191;
$pale-blue: #cee1f4;

View File

@@ -0,0 +1,136 @@
// Admin v3 styles
// While in feature-toggle, we inherit all files from old admin design.
// Individual files may be copied in order to replace the old files.
@import "vendor/assets/stylesheets/normalize";
@import "vendor/assets/stylesheets/responsive-tables";
@import "vendor/assets/stylesheets/jquery.powertip";
@import "~jquery-ui/themes/base/core";
@import "~jquery-ui/themes/base/button";
@import "~jquery-ui/themes/base/resizable";
@import "vendor/assets/stylesheets/jquery-ui-theme";
@import "~jquery-ui/themes/base/dialog";
@import "../shared/textAngular";
@import "../shared/ng-tags-input.min";
@import "vendor/assets/stylesheets/select2.css.scss";
@import "~flatpickr/dist/flatpickr";
@import "~flatpickr/dist/themes/material_blue";
@import "~shortcut-buttons-flatpickr/dist/themes/light";
@import "../admin/globals/functions";
@import "globals/palette"; // admin_v3
@import "../admin/globals/variables";
@import "../admin/variables";
@import "../admin/globals/mixins";
@import "../admin/plugins/font-awesome";
@import "../shared/variables/layout";
@import "../shared/variables/variables";
@import "../shared/utilities";
@import "../admin/shared/typography";
@import "../admin/shared/tables";
@import "../admin/shared/icons";
@import "../admin/shared/forms";
@import "../admin/shared/layout";
@import "../admin/shared/scroll_bar";
@import "../admin/plugins/flatpickr-customization";
@import "../admin/plugins/powertip";
@import "../admin/plugins/jstree";
@import "../admin/plugins/select2";
@import "../admin/sections/orders";
@import "../admin/sections/products";
@import "../admin/hacks/mozilla";
@import "../admin/hacks/opera";
@import "../admin/hacks/ie";
@import "../admin/components/actions";
@import "../admin/components/alert-box";
@import "../admin/components/alert_row";
@import "../admin/components/buttons";
@import "../admin/components/date-picker";
@import "../admin/components/dialogs";
@import "../admin/components/input";
@import "../admin/components/jquery_dialog";
@import "../admin/components/messages";
@import "../admin/components/navigation";
@import "../admin/components/ng-cloak";
@import "../admin/components/page_actions";
@import "../admin/components/pagination";
@import "../admin/components/per_page_controls";
@import "../admin/components/product_autocomplete";
@import "../admin/components/progress";
@import "../admin/components/save_bar";
@import "../admin/components/sidebar";
@import "../admin/components/simple_modal";
@import "../admin/components/states";
@import "../admin/components/stripe_connect_button";
@import "../admin/components/subscriptions_states";
@import "../admin/components/table-filter";
@import "../admin/components/table_loading";
@import "../admin/components/timepicker";
@import "../admin/components/todo";
@import "../admin/components/tooltip";
@import "../admin/components/wizard_progress";
@import "../admin/pages/enterprise_form";
@import "../admin/pages/subscription_form";
@import "../admin/pages/subscription_line_items";
@import "../admin/pages/subscription_review";
@import "../admin/advanced_settings";
@import "../admin/alert";
@import "../admin/animations";
@import "../admin/change_type_form";
@import "../admin/customers";
@import "../admin/dashboard_item";
@import "../admin/dashboard-single-ent";
@import "../admin/dialog";
@import "../admin/disabled";
@import "../admin/dropdown";
@import "../admin/enterprise_index_panels";
@import "../admin/enterprises";
@import "../admin/filters_and_controls";
@import "../admin/grid";
@import "../admin/icons";
@import "../admin/index_panel_buttons";
@import "../admin/index_panels";
@import "../admin/modals";
@import "../admin/offsets";
@import "../admin/openfoodnetwork";
@import "../admin/order_cycles";
@import "../admin/orders";
@import "../admin/product_import";
@import "../admin/products";
@import "../admin/question-mark-tooltip";
@import "../admin/relationships";
@import "../admin/reports";
@import "../admin/select2";
@import "../admin/sidebar-item";
@import "../admin/side_menu";
@import "../admin/tables";
@import "../admin/tag_rules";
@import "../admin/terms_of_service_files";
@import "../admin/validation";
@import "../admin/variables";
@import "../admin/variant_overrides";
@import "../admin/welcome";
@import "../shared/question-mark-icon";
@import "../admin/question-mark-tooltip";
@import "~tom-select/src/scss/tom-select.default";
@import "../admin/components/tom_select";
@import "app/components/help_modal_component/help_modal_component";
@import "app/components/product_component/product_component";
@import "app/components/selector_component/selector_component";
@import "app/components/products_table_component/products_table_component";
@import "app/components/selector_with_filter_component/selector_with_filter_component";
@import "app/components/pagination_component/pagination_component";
@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";

View File

@@ -0,0 +1,7 @@
// Basic color palette for admin styles v3
$color-1: #FFFFFF !default; // White
$color-2: #9FC820 !default; // Green
$color-3: #008397 !default; // Teal (Allports)
$color-4: #6788A2 !default; // Dark Blue
$color-5: #C85136 !default; // Red/Orange (Mojo)
$color-6: #FF9300 !default; // Yellow

View File

@@ -1,3 +1,4 @@
@import '../admin/globals/palette.scss';
@import '../admin/variables';
@import 'email';
@import 'payments_list';

View File

@@ -0,0 +1 @@
@import "../css/admin_v3/all.scss";

View File

@@ -11,6 +11,9 @@ 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_v3" => <<~DESC,
Test the work-in-progress design updates.
DESC
"api_reports" => <<~DESC,
An API endpoint for reports at
<code>/api/v0/reports/:report_type(/:report_subtype)</code>