spree_admin 5.0.3 → 5.1.0.beta

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2314972e804657e3746e099913f84a2ffe364d955005ecd2ad0f441f6d38f44c
-  data.tar.gz: b5b4bc046008b7f3077c12dccb7571f5fc965f2196d3a1d077f044d911da0dd2
+  metadata.gz: 3e1ac13d6758a403cfb0bbe73dc321c2c5f853c1910c8bc680d9fb0d366f599c
+  data.tar.gz: 1a475cbd3c432b53f0bcf9e940d596af75f02da95ab17e6b8af53e5167575eb7
 SHA512:
-  metadata.gz: 0f823382a162659d30e565ff7dfc2299f4c8b5ce4e73e11c7b3a146dc0560ebadd289653d09b6c40eb33e30300f4d2032b91389b2a2eebad43657c236d2065df
-  data.tar.gz: 7e104c97735e15737d3b9d209a632ac7cdd8c53b0229e8482225e57e023d44d74228833fef8cb7f2fd54c1f56e696b634fff5d7d289bc6a3bdb5d2e14aa56c23
+  metadata.gz: b92a3f1848e75f3a03f363d5339afffda9ba16f9a956660ad704082dd423a9f6c45b4493dd0f2b5d973a0203631de95d58afb31ef2bfcf9f40381efbddb4f251
+  data.tar.gz: 5cfcc7b93f6f46e0f6f1e5ee337d6282cf02c62be8ef3b22e6f8bf198a11f451047492359cafbe3a8302b65f1fa062c3f6405b89fe8cf08d0b91e9b4bd4ae679

data/app/assets/stylesheets/spree/admin/components/_bulk_panel.scss

@@ -7,7 +7,11 @@
   box-shadow: $dropdown-box-shadow;
   animation: bounceInUp;
   animation-duration: 0.5s;
-  gap: 0.75rem;
+  gap: 0.5rem;
+
+  .btn {
+    height: 2rem;
+  }
 }
 
 #bulk-panel {
@@ -38,4 +42,7 @@
   align-items: center;
   justify-content: center;
   gap: 0.25rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  border-left: 1px solid $gray-50;
 }

data/app/assets/stylesheets/spree/admin/components/_buttons.scss

@@ -9,6 +9,10 @@ button[disabled]        .show-when-enabled { display: none; }
   @include button-variant(theme-color('success'), theme-color('success'), theme-color('success') );
 }
 
+.btn {
+  box-shadow: $btn-box-shadow;
+}
+
 .btn,
 .nav-pills > li > a {
   vertical-align: middle;
@@ -62,40 +66,28 @@ button[disabled]        .show-when-enabled { display: none; }
   }
 }
 
-.btn-hover {
-  &:hover, &:focus {
-    text-decoration: none !important;
-    background-color: $gray-50 !important;
-  }
-}
 .hover-light {
   &:hover, &:focus {
-    background-color: $gray-25 !important;
-    text-decoration: none !important;
+    background-color: $dropdown-link-hover-bg;
+    text-decoration: none;
   }
 }
 .hover-gray {
   &:hover, &:focus {
-    background-color: $gray-100 !important;
-    text-decoration: none !important;
-  }
-}
-.hover-gray-50 {
-  &:hover, &:focus {
-    background-color: $gray-50 !important;
-    text-decoration: none !important;
+    background-color: $gray-100;
+    text-decoration: none;
   }
 }
 .hover-gray-200 {
   &:hover, &:focus {
-    background-color: $gray-200 !important;
-    text-decoration: none !important;
+    background-color: $gray-200;
+    text-decoration: none;
   }
 }
 .hover-primary {
   &:hover, &:focus {
-    background-color: theme-color('black') !important;
-    text-decoration: none !important;
+    background-color: theme-color('black');
+    text-decoration: none;
   }
 }
 

data/app/assets/stylesheets/spree/admin/components/_cards.scss

@@ -35,6 +35,10 @@
 	}
 }
 
+.card .card {
+  border-radius: $border-radius;
+}
+
 .card-header, .card-footer {
   background-color: transparent;
 }
@@ -59,11 +63,13 @@
   border-color: $gray-50 !important;
 }
 
+.card, .card-lg {
+  box-shadow: $card-box-shadow;
+  background-color: $card-bg;
+  border-radius: $border-radius-lg;
+}
 .card-lg {
   margin-bottom: 1rem;
-  background-color: $white;
-  border-radius: $border-radius-lg;
-  border: 1px solid $card-border-color;
   padding: 0;
 }
 

data/app/assets/stylesheets/spree/admin/components/_dropdowns.scss

@@ -26,10 +26,14 @@
   box-shadow: $dropdown-box-shadow;
 
   .dropdown-item, .dropdown-header {
-    padding-left: $input-btn-padding-x;
-    padding-right: $input-btn-padding-x;
     padding-top: $input-btn-padding-y;
     padding-bottom: $input-btn-padding-y;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+  .dropdown-header {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
   }
 
   .dropdown-item {
@@ -39,16 +43,19 @@
     align-items: center;
     justify-content: flex-start;
     background: transparent;
+    padding-top: 0.4rem;
+    padding-bottom: 0.4rem;
+    margin-bottom: 0.15rem;
 
     color: $gray-700;
 
     &:hover {
-      background-color: $blue;
-      color: $white;
+      background-color: $dropdown-link-hover-bg;
+      color: $dropdown-link-hover-color;
     }
 
     i {
-      margin-right: 0.7rem;
+      margin-right: 0.5rem;
     }
 
     .badge {
@@ -78,7 +85,7 @@
   }
   .dropdown-item.active {
     font-weight: 600 !important;
-    background-color: $gray-50 !important;
+    background-color: $dropdown-link-hover-bg !important;
   }
   .button_to {
     width: 100%;
@@ -92,40 +99,6 @@
   }
 }
 
-.dropdown-dark {
-  &:hover {
-    background-color: #272727;
-  }
-
-  .dropdown-menu {
-    background-color: #272727;
-    border: 1px solid $gray-800;
-    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
-    @extend .text-white;
-
-    .dropdown-divider {
-      border-top-color: $gray-800;
-    }
-
-    .dropdown-item {
-      color: $gray-300;
-
-      &:hover, &.active {
-        color: $white !important;
-        background-color: $gray-800;
-
-        i {
-          color: $gray-100 !important;
-        }
-      }
-    }
-  }
-
-  .dropdown-divider {
-    border-top-color: $gray-800;
-  }
-}
-
 .dropdown-toggle {
   &:after {
     border: none;

data/app/assets/stylesheets/spree/admin/components/_filters.scss

@@ -1,3 +1,28 @@
+.filter-wrap {
+  padding: 0.5rem;
+  border-bottom: 1px solid $border-color;
+  gap: 0.5rem;
+
+  .btn {
+    height: 2.125rem;
+  }
+}
+
+#filters-search-bar {
+  max-width: 300px;
+  margin-right: auto;
+  height: 2.125rem;
+}
+
+#table-filter {
+  padding: 0.75rem;
+  border-radius: $border-radius;
+  border: 1px solid $gray-50;
+  background-color: $gray-25;
+  margin-top: 0.5rem;
+}
+
+
 .collapsed .arrow {
   transform: rotate(-90deg);
   transition: .3s ease-in-out;
@@ -8,16 +33,20 @@ i.js-delete-filter {
 }
 
 .sort_link {
-  color: $gray-600 !important;
+  color: $gray-600;
+  padding: 0.25rem;
+  border-radius: $border-radius-sm;
 
   &:hover {
-    color: $gray-700 !important;
+    color: theme-color('primary') !important;
     text-decoration: none !important;
+    background-color: $gray-50;
   }
 
   &.asc, &.desc {
+    font-weight: $font-weight-bold;
     svg {
-      color: $gray-900 !important;
+      color: $gray-600 !important;
     }
   }
 

data/app/assets/stylesheets/spree/admin/components/_main.scss

@@ -1,24 +1,71 @@
-turbo-frame[loading] .spinner-border, turbo-frame[busy] .spinner-border {
-  display: block !important;
-}
-
 .sort-handle {
   cursor: grab;
 }
 
-.no-wrap {
-  white-space: nowrap;
-}
-
 #page-header {
-  height: 74px;
+  height: 70px;
   display: flex;
   align-items: center;
 }
 
 .page-header-title {
   font-size: 1.25rem;
-  font-weight: 700;
+}
+
+.store-dropdown {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  background-color: $sidebar-bg;
+  width: $sidebar-width;
+  border-right: 1px solid $border-color;
+  border-bottom: 1px solid $border-color;
+  height: $header-height;
+}
+
+.store-dropdown-button {
+  padding: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-align: left;
+  gap: 0.5rem;
+  box-shadow: none !important;
+
+  &:hover {
+    background-color: $gray-50;
+  }
+}
+
+.store-chooser {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  margin: 0.25rem;
+  border: 1px solid $border-color;
+  border-radius: $border-radius-lg;
+
+  .store-chooser-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    border-radius: $border-radius;
+    padding: 0.25rem;
+    text-wrap: nowrap;
+
+    &:hover {
+      text-decoration: none;
+      background-color: $dropdown-link-hover-bg;
+    }
+
+    &.active {
+      cursor: not-allowed;
+      background-color: $action;
+    }
+  }
 }
 
 #main-sidebar {
@@ -26,15 +73,15 @@ turbo-frame[loading] .spinner-border, turbo-frame[busy] .spinner-border {
   flex-direction: column;
   gap: 0.5rem;
   width: $sidebar-width;
-  background-color: $gray-25;
-  border-right: 1px solid $gray-100;
-  height: 100vh;
+  background-color: $sidebar-bg;
+  box-shadow: inset -1px 0 0 $border-color;
+  height: calc(100vh - $header-height);
   overflow-y: auto;
   overflow-x: hidden;
   position: fixed;
-  top: 0;
-  color: $gray-700;
-  padding-top: 0.5rem;
+  top: $header-height;
+  color: $gray-600;
+  padding-top: 0.8rem;
 
   @media (max-width: 992px) {
     display: none;
@@ -43,9 +90,7 @@ turbo-frame[loading] .spinner-border, turbo-frame[busy] .spinner-border {
   .nav {
     padding-left: 0.75rem;
     padding-right: 0.75rem;
-  }
-  .nav {
-    gap: 0.125rem;
+    gap: 0.2rem;
     display: flex;
     flex-direction: column;
   }
@@ -58,9 +103,10 @@ turbo-frame[loading] .spinner-border, turbo-frame[busy] .spinner-border {
     padding-right: 0.35rem;
     padding-top: 0.35rem;
     padding-bottom: 0.35rem;
+    color: inherit;
 
     .ti {
-      font-size: 1rem;
+      font-size: 1.125rem !important;
       margin-right: 0.5rem;
       border-radius: $border-radius-sm;
       padding: 0.2rem 0.2rem;
@@ -68,6 +114,10 @@ turbo-frame[loading] .spinner-border, turbo-frame[busy] .spinner-border {
 
     &:hover {
       background-color: $gray-50;
+
+      .ti {
+        color: theme-color('primary');
+      }
     }
     &.active {
       color: theme-color('primary');
@@ -91,9 +141,19 @@ turbo-frame[loading] .spinner-border, turbo-frame[busy] .spinner-border {
     display: flex;
     flex-direction: column;
     list-style: none;
-  
-    margin-left: 1.5rem !important;
-  
+    padding-top: 0.25rem;
+    padding-left: 2rem;
+    &:before {
+      content: '';
+      position: absolute;
+      left: 1rem;
+      top: 0;
+      bottom: 0.25rem;
+      width: 1px;
+      background-color: $gray-200;
+    }
+    position: relative;
+
     .nav-link {
       font-weight: 400;
       padding-top: 0.25rem;
@@ -106,6 +166,17 @@ turbo-frame[loading] .spinner-border, turbo-frame[busy] .spinner-border {
         font-weight: 600;
         background-color: transparent !important;
         box-shadow: none;
+
+        &:before {
+          content: '';
+          position: absolute;
+          left: calc(-1rem - 1px);
+          top: 10%;
+          width: 3px;
+          height: 80%;
+          background-color: theme-color('primary');
+          border-radius: $border-radius-sm;
+        }
       }
     }
   }
@@ -142,18 +213,23 @@ turbo-frame[loading] .spinner-border, turbo-frame[busy] .spinner-border {
   @extend .alert-info;
 
   background-image: none;
-  padding-left: 1rem;
-  border-left: 0;
-  border-right: 0;
-  border-bottom: 0;
-  border-radius: 0;
+  position: relative;
   font-size: $font-size-sm;
-  margin-bottom: 0;
+  padding: 0.5rem 1rem;
+  margin: 0.75rem;
+  p {
+    margin-bottom: 0.5rem;
+  }
 
   .btn-close {
     position: absolute;
-    right: 0.5rem;
-    top: 0.5rem;
+    right: 0.25rem;
+    top: 0.25rem;
+    color: inherit !important;
+
+    &:hover {
+      background-color: transparent !important;
+    }
   }
 }
 

data/app/assets/stylesheets/spree/admin/components/_media_form.scss

@@ -5,17 +5,23 @@
   justify-content: center;
   align-items: center;
   overflow: hidden;
-  border-radius: 0.5rem;
-  border: 1px dashed $gray-50;
+  border-radius: $border-radius-lg;
+  border: 1px dashed $gray-100;
   background-color: rgba($gray-25, 0.5);
   padding: 0.5rem;
   cursor: pointer;
   color: $gray-500;
 
   &:hover {
-    background-color: $gray-25;
-    border-color: $gray-100;
-    color: $gray-700;
+    background-color: $action;
+    border-color: rgba($blue, 0.5);
+    color: rgba($blue, 0.8);
+  }
+
+  &:active {
+    background-color: $action;
+    border-color: rgba($blue, 0.5);
+    box-shadow: 0 0 0 2px $white, 0 0 0 4px $blue !important;
   }
 }
 
@@ -51,10 +57,14 @@
     width: 100%;
     height: 100%;
     aspect-ratio: 1/1;
-    border-radius: 0.5rem;
+    border-radius: $border-radius;
     position: relative;
     justify-content: space-between;
     align-items: flex-start;
+    transition-property: box-shadow;
+    transition-duration: 0.2s;
+    transition-timing-function: ease-in-out;
+    box-shadow: rgba(209, 217, 224, 0.5) 0px 0px 0px 1px;
 
     & img {
       top: 0;
@@ -78,9 +88,11 @@
         display: inline !important;
       }
 
-      & img {
-        opacity: 0.5;
-      }
+      box-shadow: rgba(209, 217, 224, 0.8) 0px 0px 0px 1px, rgba(37, 41, 46, 0.04) 0px 3px 6px -3px, rgba(37, 41, 46, 0.12) 0px 2px 6px 0px !important;
+    }
+
+    &:has(input:checked) {
+      box-shadow: 0 0 0 2px $blue !important;
     }
 
     &:first-of-type {

data/app/assets/stylesheets/spree/admin/components/_modals.scss

@@ -25,14 +25,15 @@ body.modal-open {
 }
 .modal-footer {
   display: flex;
-  justify-content: space-between;
+  justify-content: end;
   padding: $modal-inner-padding;
-  background-color: #FAFAFA;
-  border-top: 1px solid $gray-50;
+  background-color: $gray-25;
+  border-top: 1px solid $border-color;
 
   .btn {
     display: inline-flex ;
     width: auto !important;
+    height: 2.5rem;
   }
 }
 

data/app/assets/stylesheets/spree/admin/components/_navbar.scss

@@ -1,10 +1,6 @@
-@media (max-width: 768px) {
-  header#header {
-    background-color: $gray-900 !important;
-    color: #fff !important;
-    border-bottom: 0 none !important;
-    position: sticky;
-    top: 0;
-    z-index: 1020;
-  }
+#header {
+  height: $header-height;
+  background-color: $body-bg;
+
+  box-shadow: inset 0 -1px 0 $border-color;
 }

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

@@ -12,7 +12,6 @@
   position: relative;
   transition: background 0.15s, color 0.1s;
   will-change: background, color;
-  font-weight: 400;
   color: $gray-700;
 
   &:hover {

data/app/assets/stylesheets/spree/admin/components/_sortable_tree.scss

@@ -35,8 +35,12 @@
   }
 
   .sortable-chosen {
-    border: 1px dashed var(--gray);
-    border-radius: 5px;
+    background-color: transparent !important;
+    border-color: transparent !important;
+    .sortable-tree-item-row {
+      background-color: $action !important;
+      border: 1px dashed rgba($blue, 0.5) !important;
+    }
   }
 
   .item_image_holder {

data/app/assets/stylesheets/spree/admin/components/_tables.scss

@@ -4,7 +4,17 @@
 
 .filter-wrap {
   padding: 0.5rem;
-  border-bottom: 1px solid $gray-50;
+  border-bottom: 1px solid $border-color;
+  gap: 0.5rem;
+
+  .btn {
+    height: 2.375rem;
+  }
+}
+
+#filters-search-bar {
+  max-width: 300px;
+  margin-right: auto;
 }
 
 #table-filter {
@@ -41,12 +51,19 @@ table.table {
 
   thead {
     th {
+      background-color: rgba($gray-25, 0.5);
       @extend .text-muted;
       font-size: $font-size-sm;
+      font-weight: $font-weight-normal;
       vertical-align: middle;
-      font-weight: 400;
-      padding-top: 0.5rem;
-      padding-bottom: 0.5rem;
+      padding-top: 0.3rem;
+      padding-bottom: 0.3rem;
+    }
+    th:first-child {
+      border-top-left-radius: $border-radius-lg;
+    }
+    th:last-child {
+      border-top-right-radius: $border-radius-lg;
     }
   }
 
@@ -78,7 +95,7 @@ table.table {
       }
     }
 
-    tr:hover:not(.active) {
+    tr:hover:not(.active):not(.sortable-chosen) {
       td {
         background-color: $gray-25;
       }
@@ -185,3 +202,16 @@ td.actions {
     top: 0px;
   }
 }
+
+.card-lg {
+  table {
+    thead {
+      th:first-child {
+        border-top-left-radius: 0;
+      }
+      th:last-child {
+        border-top-right-radius: 0;
+      }
+    }
+  }
+}