solidus_backend 4.1.0 → 4.2.0

data/app/assets/javascripts/spree/backend/components/admin_nav.js

@@ -21,4 +21,22 @@ Spree.ready(function() {
   if (document.body.classList.contains('admin-nav-hidden')) {
     $(adminNavToggle).removeClass('fa-chevron-circle-left').addClass('fa-chevron-circle-right');
   }
+
+  let solidusAdminSwitch = document.querySelector("#solidus-admin-switch");
+
+  if (solidusAdminSwitch) {
+    let cookies = new Map(document.cookie.split(';').map((cookie) => cookie.trim().split('=')))
+    let label = document.querySelector("#solidus-admin-switch-label");
+
+    solidusAdminSwitch.checked = cookies.get("solidus_admin") === 'false'
+    label.textContent = solidusAdminSwitch.checked ? label.dataset.adminLabel : label.dataset.legacyLabel
+
+    solidusAdminSwitch.addEventListener("change", function(e) {
+      let value = !solidusAdminSwitch.checked;
+
+      document.cookie = `solidus_admin=${value}; Path=/ `;
+
+      location.reload();
+    });
+  }
 });

data/app/assets/javascripts/spree/backend/option_value_picker.js

@@ -25,7 +25,6 @@ $.fn.optionValueAutocomplete = function (options) {
       url: Spree.pathFor('api/option_values'),
       datatype: 'json',
       data: function (term, page) {
-        // Note: This doesn't work. variants_product_id isn't an allowed filter
         var productId = typeof(productSelect) !== 'undefined' ? $(productSelect).select2('val') : null;
         return {
           q: {

data/app/assets/javascripts/spree/backend/views/promotions/option_values_rule.js

@@ -23,9 +23,9 @@ Spree.Views.Promotions.OptionValuesRuleRow = Backbone.View.extend({
 
     this.$('.js-promo-rule-option-value-product-select').productAutocomplete({multiple: false});
 
-    // Note: This doesn't work. This always selects the first product select on the page.
-    // optionValueAutocomplete also doesn't work, so this cancels out.
-    this.$('.js-promo-rule-option-value-option-values-select').optionValueAutocomplete({productSelect: '.js-promo-rule-option-value-product-select'})
+    var productSelect = this.$el.find(".js-promo-rule-option-value-product-select")
+
+    this.$('.js-promo-rule-option-value-option-values-select').optionValueAutocomplete({ productSelect })
 
     if(this.productId == null) {
       this.$('.js-promo-rule-option-value-option-values-select').prop('disabled', true);

data/app/assets/stylesheets/spree/backend/components/_navigation.scss

@@ -1,3 +1,5 @@
+@import "./navigation_solidus_admin";
+
 $padding-x-navbar: 26px;
 $padding-y-navbar: 13px;
 $padding-y-navbar-submenu: 9px;
@@ -188,6 +190,15 @@ nav.menu {
       left: 1em;
       transform: translateX(-50%);
     }
+
+    svg {
+      position: absolute;
+      margin-left: -2.2em;
+      fill: currentColor;
+      height: 1.4em;
+      width: 1.4em;
+      vertical-align: -0.3em;
+    }
   }
 
   // until .fa usage is corrected

data/app/assets/stylesheets/spree/backend/components/_navigation_solidus_admin.scss

@@ -0,0 +1,274 @@
+$color-navbar-hover-bg: $color-navbar-bg !default;
+$color-navbar-hover: $color-navbar !default;
+@import "spree/backend/themes/solidus_admin/colors";
+@import "spree/backend/components/switch_solidus_admin";
+
+.solidus-admin--nav {
+  background-color: $color-light;
+  position: sticky;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  margin-left: -$width-sidebar;
+  z-index: $zindex-sticky;
+  width: $width-sidebar;
+  padding: 16px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  border-right: $color-light-accent 1px solid;
+
+  &--wrapper {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 240px;
+  }
+
+  @media print {
+    display: none;
+  }
+
+  &--section {
+    text-align: center;
+    width: 100%;
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    &:not(:last-child) {
+      margin-bottom: 16px;
+    }
+  }
+
+  > nav {
+    flex-grow: 1;
+  }
+
+  &--logo {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    text-align: left;
+    margin-bottom: 16px;
+    padding: 12px 8px;
+
+    img {
+      max-height: $main-header-height - (16px * 2) - (12px * 2);
+    }
+  }
+
+  &--store-link {
+    display: flex;
+    width: 100%;
+    border: $border-color 1px solid;
+    border-radius: $border-radius;
+    padding: 6px 8px;
+    text-align: left;
+
+    &:hover {
+      background: $color-navbar-hover-bg;
+      color: $color-navbar-hover;
+    }
+
+    i {
+      float: right;
+      padding: 6px 8px;
+      color: $color-dark-light;
+    }
+
+    &--name {
+      line-height: 24px;
+      font-size: 14px;
+      font-weight: 600;
+      color: $color-dark;
+      display: block;
+    }
+
+    &--url {
+      line-height: 20px;
+      font-size: 12px;
+      font-weight: 400;
+      color: $color-dark-light;
+      display: block;
+    }
+
+    svg {
+      fill: $solidus-admin-gray-400;
+      height: 16px;
+      width: 100%;
+      max-width: 16px;
+    }
+  }
+
+  &--menu {
+    padding: 0;
+    list-style: none;
+    text-align: left;
+
+    li {
+      padding: 0;
+    }
+
+    li > a,
+    li > label {
+      margin: 0;
+      margin-bottom: 2px;
+      display: block;
+      font-size: 14px;
+      line-height: 24px;
+      font-weight: 600;
+      padding: 2px 12px;
+      width: 100%;
+      border-radius: $border-radius;
+      color: $color-primary;
+      gap: 12px;
+      display: flex;
+      align-items: center;
+
+      &::before,
+      svg {
+        display: inline-block;
+        width: 18px;
+        height: 18px;
+        padding: 0;
+      }
+    }
+
+    li.selected > a {
+      background: $color-navbar-active-bg;
+      color: $color-navbar-active;
+    }
+
+    li:not(.selected):hover > a,
+    li:not(.selected):hover > label {
+      background: $color-navbar-hover-bg;
+      color: $color-navbar-hover;
+    }
+
+    ul {
+      padding: 0;
+      margin: 0;
+      list-style: none;
+
+      li a {
+        padding-left: 12px + 18px + 12px;
+        font-weight: 400;
+        color: $color-dark-dark;
+      }
+    }
+
+    li:not(.selected) > ul {
+      display: none;
+    }
+  }
+
+  &--footer {
+    position: relative;
+    width: 100%;
+
+    summary {
+      display: flex;
+      padding: 12px;
+      margin-top: 8px;
+      gap: 6px;
+      border-radius: 4px;
+      color: $solidus-admin-gray-500;
+      cursor: pointer;
+      line-height: 0;
+      align-items: center;
+      font-size: 14px;
+      font-weight: 600;
+      outline: none;
+
+      &:hover {
+        background-color: $solidus-admin-gray-25;
+      }
+
+      [open] > & {
+        background-color: $solidus-admin-gray-25;
+      }
+
+      &::marker,
+      &::-webkit-details-marker {
+        display: none;
+      }
+
+      svg {
+        display: inline-block;
+        flex-shrink: 0;
+        vertical-align: text-bottom;
+        width: 24px;
+        height: 24px;
+        background-color: $solidus-admin-black;
+        fill: $solidus-admin-yellow;
+        border-radius: 100%;
+      }
+
+      div {
+        line-height: 24px;
+        align-self: stretch;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    ul {
+      font-size: 14px;
+      position: absolute;
+      left: 0;
+      bottom: 100%;
+      padding: 8px;
+      margin-bottom: 4px;
+      border-radius: 8px;
+      border: 1px $solidus-admin-gray-100 solid;
+      width: 100%;
+      color: $solidus-admin-black;
+      background-color: $solidus-admin-white;
+      box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 4px 8px 0px,
+        rgba(0, 0, 0, 0.04) 0px 2px 4px -1px;
+
+      li {
+        display: flex;
+        align-items: center;
+        border-radius: 4px;
+        height: 32px;
+        padding: 0 8px;
+
+        &:hover {
+          background-color: $solidus-admin-gray-25;
+        }
+
+        a,
+        label {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          color: inherit;
+          height: 32px;
+          margin: 0px;
+          font-size: 1em;
+          background-color: inherit;
+
+          select {
+            appearance: none;
+            border: none;
+            background-color: transparent;
+            width: 100%;
+            flex-grow: 1;
+          }
+
+          svg {
+            height: 20px;
+            width: 100%;
+            max-width: 20px;
+            fill: currentColor;
+          }
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/spree/backend/components/_switch_solidus_admin.scss

@@ -0,0 +1,48 @@
+@import "spree/backend/themes/solidus_admin/colors";
+
+.solidus-admin--nav--switch {
+  appearance: none;
+	cursor: pointer;
+	width: 2.5rem;
+	height: 1.5rem;
+	background: $solidus-admin-gray-200;
+	display: block;
+	border-radius: 100px;
+	position: relative;
+
+  &:focus {
+    outline: 0;
+  }
+
+  &:hover {
+    background-color: $solidus-admin-gray-300;
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0.125rem;
+    left: 0.125rem;
+    width: 1.25rem;
+    height: 1.25rem;
+    background: #fff;
+    border-radius: 90px;
+    transition: 0.3s;
+  }
+
+  &:checked {
+    background: $solidus-admin-gray-500;
+    &:after {
+      left: 2.375rem;
+      transform: translatex(-100%);
+    }
+
+    &:hover {
+      background: $solidus-admin-gray-700;
+    }
+  }
+
+  &:active:after {
+    width: 1.5rem;
+  }
+}

data/app/assets/stylesheets/spree/backend/shared/_layout.scss

@@ -4,7 +4,7 @@ html {
 
 body {
   position: relative;
-  min-height: 100%;
+  min-height: 100vh;
   padding-left: $width-sidebar;
 }
 

data/app/assets/stylesheets/spree/backend/themes/solidus_admin/_colors.scss

@@ -0,0 +1,44 @@
+// Primary palette
+$solidus-admin-solidus-red: #ef3023;
+$solidus-admin-black: #222222;
+$solidus-admin-graphite: #c7ccc7;
+$solidus-admin-graphite-light: #d8dad8;
+$solidus-admin-sand: #f5f3f0;
+$solidus-admin-white: #ffffff;
+
+// Secondary palette
+$solidus-admin-yellow: #fdc071;
+$solidus-admin-orange: #f68050;
+$solidus-admin-blue: #2554b1;
+$solidus-admin-moss: #2d3925;
+$solidus-admin-forest: #096756;
+$solidus-admin-midnight: #163449;
+$solidus-admin-pink: #f6d7e2;
+$solidus-admin-plum: #3a0e31;
+$solidus-admin-sky: #cbdff1;
+$solidus-admin-seafoam: #c1e0de;
+$solidus-admin-dune: #e6bf9b;
+
+// UI Red
+$solidus-admin-red-100: #f8d6d3;
+$solidus-admin-red-200: #f1ada7;
+$solidus-admin-red-300: #ea8980;
+$solidus-admin-red-400: #e36054;
+$solidus-admin-red-500: #dc3728;
+$solidus-admin-red-600: #b12c20;
+$solidus-admin-red-700: #862219;
+$solidus-admin-red-800: #561610;
+$solidus-admin-red-900: #2b0b08;
+
+// Grayscale
+$solidus-admin-gray-15: #fafafa;
+$solidus-admin-gray-25: #f5f5f5;
+$solidus-admin-gray-50: #f0f0f0;
+$solidus-admin-gray-100: #dedede;
+$solidus-admin-gray-200: #cfcfcf;
+$solidus-admin-gray-300: #bababa;
+$solidus-admin-gray-400: #a3a3a3;
+$solidus-admin-gray-500: #737373;
+$solidus-admin-gray-600: #616161;
+$solidus-admin-gray-700: #4a4a4a;
+$solidus-admin-gray-800: #333333;

data/app/assets/stylesheets/spree/backend/themes/solidus_admin/_tables.scss

@@ -20,34 +20,34 @@ table.index {
   }
 
   > thead > tr > th {
-    border-top: 1px solid $theme-gray-100;
+    border-top: 1px solid $solidus-admin-gray-100;
     border-bottom: none
   }
 
   > thead > tr > th,
   > tbody > tr > td {
     &:first-child {
-      border-left: 1px solid $theme-gray-100;
+      border-left: 1px solid $solidus-admin-gray-100;
     }
 
     &:last-child {
-      border-right: 1px solid $theme-gray-100;
+      border-right: 1px solid $solidus-admin-gray-100;
     }
   }
 
   > tbody > tr:last-child > td {
-    border-bottom: 1px solid $theme-gray-100;
+    border-bottom: 1px solid $solidus-admin-gray-100;
   }
 
   // Colors
   > th {
-    background-color: $theme-gray-15;
-    color: $theme-gray-600;
+    background-color: $solidus-admin-gray-15;
+      color: $solidus-admin-gray-600;
   }
 
   > td {
-    background-color: $theme-white;
-    color: $theme-black;
+    background-color: $solidus-admin-white;
+      color: $solidus-admin-black;
   }
 }
 

data/app/assets/stylesheets/spree/backend/themes/solidus_admin/_variables.scss

@@ -1,3 +1,4 @@
+@import "./colors";
 
 // -------------------------------------------------------------
 //   Variables used in all other files
@@ -11,70 +12,25 @@ $label-font-size: 12px;
 // Colors
 //--------------------------------------------------------------
 
-// Primary palette
-$theme-solidus-red: #ef3023;
-$theme-black: #222222;
-$theme-graphite: #c7ccc7;
-$theme-graphite-light: #d8dad8;
-$theme-sand: #f5f3f0;
-$theme-white: #ffffff;
-
-// Secondary palette
-$theme-yellow: #fdc071;
-$theme-orange: #f68050;
-$theme-blue: #2554b1;
-$theme-moss: #2d3925;
-$theme-forest: #096756;
-$theme-midnight: #163449;
-$theme-pink: #f6d7e2;
-$theme-plum: #3a0e31;
-$theme-sky: #cbdff1;
-$theme-seafoam: #c1e0de;
-$theme-dune: #e6bf9b;
-
-// UI Red
-$theme-red-100: #f8d6d3;
-$theme-red-200: #f1ada7;
-$theme-red-300: #ea8980;
-$theme-red-400: #e36054;
-$theme-red-500: #dc3728;
-$theme-red-600: #b12c20;
-$theme-red-700: #862219;
-$theme-red-800: #561610;
-$theme-red-900: #2b0b08;
-
-// Grayscale
-$theme-gray-15: #fafafa;
-$theme-gray-25: #f5f5f5;
-$theme-gray-50: #f0f0f0;
-$theme-gray-100: #dedede;
-$theme-gray-200: #cfcfcf;
-$theme-gray-300: #bababa;
-$theme-gray-400: #a3a3a3;
-$theme-gray-500: #737373;
-$theme-gray-600: #616161;
-$theme-gray-700: #4a4a4a;
-$theme-gray-800: #333333;
-
 // Basic color palette for admin
 
-$color-dark: $theme-gray-800;
-$color-dark-dark: $theme-gray-600;
-$color-dark-light: $theme-gray-500;
-$color-dark-accent: $theme-gray-200;
+$color-dark: $solidus-admin-gray-800;
+$color-dark-dark: $solidus-admin-gray-600;
+$color-dark-light: $solidus-admin-gray-500;
+$color-dark-accent: $solidus-admin-gray-200;
 
-$color-primary: $theme-black;
-$color-primary-light: $theme-gray-100;
+$color-primary: $solidus-admin-black;
+$color-primary-light: $solidus-admin-gray-100;
 
-$color-light: $theme-gray-15;
-$color-light-dark: $theme-gray-50;
-$color-light-accent: $theme-gray-100;
+$color-light: $solidus-admin-gray-15;
+$color-light-dark: $solidus-admin-gray-50;
+$color-light-accent: $solidus-admin-gray-100;
 
-$color-white: $theme-white;
+$color-white: $solidus-admin-white;
 
-$color-red: $theme-red-600;
-$color-yellow: $theme-yellow;
-$color-green: $theme-forest;
+$color-red: $solidus-admin-red-600;
+$color-yellow: $solidus-admin-yellow;
+$color-green: $solidus-admin-forest;
 
 // Basic accents for admin
 $box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.12);
@@ -84,13 +40,13 @@ $color-border: $color-light-dark;
 $color-disabled: $color-dark-light;
 
 // Basic navigation colors
-$color-header-bg: $theme-white;
+$color-header-bg: $solidus-admin-white;
 $color-sidebar-bg: $color-light;
 $color-sidebar-border: $color-border;
 $color-navbar: $color-dark;
 $color-navbar-bg: $color-light;
-$color-navbar-active: $theme-solidus-red;
-$color-navbar-active-bg: $theme-gray-25;
+$color-navbar-active: $solidus-admin-solidus-red;
+$color-navbar-active-bg: $solidus-admin-gray-50;
 $color-navbar-submenu: $color-dark-light;
 $color-navbar-submenu-bg: $color-light;
 $color-navbar-submenu-active: $color-primary;
@@ -99,7 +55,7 @@ $color-navbar-footer-bg: $color-light;
 $color-navbar-footer-active: $color-primary;
 $color-icon-navbar: $color-dark-light;
 
-$color-navbar-hover-bg: $theme-gray-25;
+$color-navbar-hover-bg: $solidus-admin-gray-50;
 $color-navbar-hover: $color-dark;
 
 // Basic Tabs colors
@@ -131,7 +87,7 @@ $color-style-guide-nav-link: darken($color-light, 65%);
 $color-style-guide-nav-link-hover: darken($color-light, 5%);
 $color-style-guide-section-border: darken($color-light, 10%);
 $color-style-guide-swatch-border: darken($color-light, 10%);
-$color-style-guide-table-border: $theme-sky;
+$color-style-guide-table-border: $solidus-admin-sky;
 
 // Table colors
 $color-tbl-odd: $color-white;
@@ -143,20 +99,20 @@ $color-tbl-thead: $color-light;
 // For now these are custom assigned colors just for this section. As we go
 // about updating other areas of the admin we will likely want to pull these
 // colors out into better named variables.
-$color-pill-text: $theme-gray-800;
-$color-pill-neutral: $theme-gray-100;
+$color-pill-text: $solidus-admin-gray-800;
+$color-pill-neutral: $solidus-admin-gray-100;
 $color-pill-neutral-text: $color-pill-text;
-$color-pill-complete: $theme-sky;
+$color-pill-complete: $solidus-admin-sky;
 $color-pill-complete-text: $color-pill-text;
-$color-pill-active: $theme-seafoam;
+$color-pill-active: $solidus-admin-seafoam;
 $color-pill-active-text: $color-pill-text;
 $color-pill-inactive: $color-pill-neutral;
-$color-pill-inactive-text: $theme-gray-600;
-$color-pill-pending: $theme-yellow;
+$color-pill-inactive-text: $solidus-admin-gray-600;
+$color-pill-pending: $solidus-admin-yellow;
 $color-pill-pending-text: $color-pill-text;
-$color-pill-warning: $theme-orange;
+$color-pill-warning: $solidus-admin-orange;
 $color-pill-warning-text: $color-pill-text;
-$color-pill-error: $theme-red-300;
+$color-pill-error: $solidus-admin-red-300;
 $color-pill-error-text: $color-pill-text;
 
 // Available states
@@ -201,4 +157,4 @@ $main-header-height: 84px;
 $content-wrapper-bg: $color-white;
 $admin-body-bg: $color-white;
 
-$link-hover-color: $theme-solidus-red;
+$link-hover-color: $solidus-admin-solidus-red;