Merge pull request #5392 from solidusio/elia/admin-support

Update the `Spree::Backend` navigation menu to match the upcoming `SolidusAdmin`
solidusio · Sep 27, 2023 · 1ca7101 · 1ca7101
2 parents 69ba182 + 38cd7b0
commit 1ca7101
Show file tree

Hide file tree

Showing 20 changed files with 609 additions and 105 deletions.
diff --git a/backend/app/assets/config/solidus_backend_manifest.js b/backend/app/assets/config/solidus_backend_manifest.js
@@ -5,4 +5,5 @@
 
 //= link solidus_admin/select2_locales
 
-//= link_directory ../stylesheets/spree/backend/themes .css
+//= link spree/backend/themes/classic.css
+//= link spree/backend/themes/solidus_admin.css
diff --git a/backend/app/assets/images/spree/backend/themes/solidus_admin/remixicon.symbol.svg b/backend/app/assets/images/spree/backend/themes/solidus_admin/remixicon.symbol.svg
diff --git a/backend/app/assets/javascripts/spree/backend/components/admin_nav.js b/backend/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();
+    });
+  }
 });
diff --git a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss b/backend/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

diff --git a/backend/app/assets/stylesheets/spree/backend/components/_navigation_solidus_admin.scss b/backend/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;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/backend/app/assets/stylesheets/spree/backend/components/_switch_solidus_admin.scss b/backend/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;
+  }
+}
diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_layout.scss b/backend/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;
 }