mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-02-27 01:43:22 +00:00
Merge pull request #10791 from dacook/10630-new-brand-colours
[admin_v3] New brand colours in admin interface
This commit is contained in:
@@ -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: ""
|
||||
|
||||
@@ -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 } }
|
||||
|
||||
|
||||
@@ -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')}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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'
|
||||
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -34,6 +34,6 @@ input[type="checkbox"].redesigned-input {
|
||||
}
|
||||
|
||||
&:checked:before {
|
||||
color: #5498da !important;
|
||||
color: $color-txt-text !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
7
app/webpacker/css/admin/globals/palette.scss
Normal file
7
app/webpacker/css/admin/globals/palette.scss
Normal 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
|
||||
@@ -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;
|
||||
|
||||
@@ -75,7 +75,7 @@ a.action--disabled {
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
color: #5498da;
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
$background-grey: #eceef1;
|
||||
$background-blue: #5498da;
|
||||
$background-blue: $color-3;
|
||||
|
||||
// scss-lint:disable SelectorFormat
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
136
app/webpacker/css/admin_v3/all.scss
Normal file
136
app/webpacker/css/admin_v3/all.scss
Normal 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";
|
||||
7
app/webpacker/css/admin_v3/globals/palette.scss
Normal file
7
app/webpacker/css/admin_v3/globals/palette.scss
Normal 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
|
||||
@@ -1,3 +1,4 @@
|
||||
@import '../admin/globals/palette.scss';
|
||||
@import '../admin/variables';
|
||||
@import 'email';
|
||||
@import 'payments_list';
|
||||
|
||||
1
app/webpacker/packs/admin-style-v3.scss
Normal file
1
app/webpacker/packs/admin-style-v3.scss
Normal file
@@ -0,0 +1 @@
|
||||
@import "../css/admin_v3/all.scss";
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user