spree_admin 5.1.7 → 5.2.0.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1b5fef55ebb0f54365b38f656dd7dcd5d9add0dc89198f524945c539d8c9febd
-  data.tar.gz: d092feb207665dc4682dda6fa130f5d7981cb946f818ea9306c66b46db368b56
+  metadata.gz: f22556fbb3d151c7c2b05dab509022275e6c59f8de4adb4896bcdf5bc48f8f0d
+  data.tar.gz: f4dd860a86b552d8fbdd6d5e6492d94d46a9ce125a6fc4a9fa0748cebf5a657e
 SHA512:
-  metadata.gz: 69996445df30c272c3093ffafcc7987ff3fb334b9ba4e06e729c4916b02435aa107b39e4da64fe7ab703a424526964b31dc936a1111fac1f904b19a7c2b98d97
-  data.tar.gz: e25035318a0cba4e0ae9e305722a879cb59a2518d60b0ede374ab872694ca3c30e61196b1c31a3e21d96d964c982d3e599f854ee7d9c667c39be2cae1af309e0
+  metadata.gz: 649ede281c65678902ee006fbe831f456aaac7de23d72657009125c9281fd0231f586de5d951c67114c40095bc47d7a96b25f25c4e529b10300b7f0aac8f8dac
+  data.tar.gz: 70808fb3caba9f95df1108d70e14625e8d9f3f6bd3e8a2495cdf4034720fd4d18f34428ab8931c225e3157b788f2e1c7189592b732f9e9fac372565304aa07d7

data/app/assets/stylesheets/spree/admin/application.scss

@@ -10,9 +10,11 @@
 @import 'components/dropdowns';
 @import 'components/main';
 @import 'components/buttons';
+@import 'components/tooltips';
 @import 'components/filters';
 @import 'components/navigation';
-@import 'components/modals';
+@import 'components/modals'; // old bootstrap modals
+@import 'components/dialogs'; // new native dialogs
 @import 'components/offcanvas';
 @import 'components/variants_form';
 @import 'components/media_form';
@@ -21,11 +23,11 @@
 @import 'components/search_picker';
 @import 'components/sortable_tree';
 @import 'components/bulk_panel';
+@import 'components/wizard';
 
 @import 'plugins/tinymce_custom';
 @import 'plugins/trix_custom';
 @import 'plugins/tom-select.bootstrap4';
-@import 'plugins/flatfile';
 
 @import url('https://unpkg.com/trix@2.1.12/dist/trix.css');
 @import url('https://esm.sh/@uppy/core@4.2.0/dist/style.min.css');
@@ -33,6 +35,7 @@
 @import url('https://esm.sh/@uppy/image-editor@3.1.0/dist/style.min.css');
 @import url('https://esm.sh/animate.css@4.1.1/animate.min.css');
 @import url('https://esm.sh/@simonwep/pickr@1.8.2/dist/themes/classic.min.css');
+@import url('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css');
 
 @import 'plugins/uppy_fixes';
 

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

@@ -5,9 +5,9 @@
 .alert {
   background-repeat: no-repeat;
   background-position: 1rem center;
-  background-size: 1.5rem 1.5rem;
-  padding-left: 60px;
-  min-height: 3rem;
+  background-size: 1rem 1rem;
+  padding-left: 44px;
+  min-height: 2.5rem;
   display: inline-flex;
   flex-direction: column;
   justify-content: center;
@@ -15,33 +15,38 @@
   > p:last-child {
     margin-bottom: 0;
   }
+
+  a {
+    font-weight: $font-weight-medium;
+    color: theme-color('primary');
+  }
 }
 
 .alert-info {
   background-color: #f7fcff;
   border-color: rgba($info, 0.1) !important;
 
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2317a2b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-info-circle'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0' /%3E%3Cpath d='M12 9h.01' /%3E%3Cpath d='M11 12h1v4h1' /%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-info-circle'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0' /%3E%3Cpath d='M12 9h.01' /%3E%3Cpath d='M11 12h1v4h1' /%3E%3C/svg%3E");
 }
 
 .alert-warning {
   border-color: rgba($warning, 0.1) !important;
-
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffc107' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-alert-circle'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0' /%3E%3Cpath d='M12 8v4' /%3E%3Cpath d='M12 16h.01' /%3E%3C/svg%3E");
+  color: inherit;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-alert-circle'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0' /%3E%3Cpath d='M12 8v4' /%3E%3Cpath d='M12 16h.01' /%3E%3C/svg%3E");
 }
 
 .alert-danger {
   background-color: #FEF2F2;
   border-color: #FBE3E3;
   color: #450A09;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-exclamation-circle'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /%3E%3Cpath d='M12 9v4' /%3E%3Cpath d='M12 16v.01' /%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-exclamation-circle'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /%3E%3Cpath d='M12 9v4' /%3E%3Cpath d='M12 16v.01' /%3E%3C/svg%3E");
 }
 
 .alert-success {
   background-color: #ECFDF5;
   color: #092E26;
   border-color: #D5F9E6;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-check-circle'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /%3E%3Cpath d='M9 12l2 2l4 -4' /%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-check-circle'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /%3E%3Cpath d='M9 12l2 2l4 -4' /%3E%3C/svg%3E");
 }
 
 .page-alerts {
@@ -49,3 +54,16 @@
     @extend .rounded-lg;
   }
 }
+
+.alerts-container {
+  position: fixed;
+  width: 100%;
+  z-index: 1070;
+  top: 0.4rem;
+
+  .alert {
+    border-width: 1px;
+    box-shadow: $box-shadow-xs;
+    border-radius: $border-radius-lg;
+  }
+}

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

@@ -36,7 +36,7 @@
 .badge-reimbursed,
 .badge-allocation,
 .bg-success {
-  border: 1px solid rgba($success, 0.05);
+  border: 1px solid transparent !important;
   background-color: #C6F6D5 !important;
   color: #22543D !important;
 }
@@ -54,6 +54,7 @@
 .badge-partially_canceled,
 .badge-void,
 .badge-danger {
+  border: 1px solid transparent;
   background-color: #fee2e1 !important;
   color: #8e1f0b !important;
 }
@@ -70,7 +71,7 @@
 .badge-ready, // unfulfilled
 .bg-warning
 {
-  border: 1px solid rgba($warning, 0.25);
+  border: 1px solid transparent;
   background-color: rgba(255, 235, 120, 1);
   color: rgba(79, 71, 0, 1);
 }
@@ -109,7 +110,7 @@
 .badge-partial,
 .badge-capture,
 .badge-info {
-  border: 1px solid rgba($info, 0.05);
+  border: 1px solid transparent;
   background-color: #E0EFFE;
   color: #00527c;
 }

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

@@ -1,22 +1,23 @@
 .bulk-panel-container {
   display: inline-flex;
   align-items: center;
-  border-radius: $border-radius-lg;
-  background-color: $white;
+  border-radius: 1rem;
+  background-color: $dropdown-bg;
   box-shadow: $dropdown-box-shadow;
   animation: bounceInUp;
   animation-duration: 0.5s;
+  height: 3rem;
+  gap: 0.5rem;
 
   .btn {
-    border-width: 0;
-    padding-top: 0;
-    padding-bottom: 0;
-    height: 2.75rem;
-    border-radius: 0;
+    height: 2.5rem;
+    &:hover {
+      background-color: $gray-50;
+    }
   }
 
   > * {
-    height: 2.75rem;
+    height: 2.5rem;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -24,11 +25,6 @@
     &:first-child {
       border-top-left-radius: $border-radius-lg;
       border-bottom-left-radius: $border-radius-lg;
-
-      .btn {
-        border-top-left-radius: $border-radius-lg;
-        border-bottom-left-radius: $border-radius-lg;
-      }
     }
 
     &:last-child {
@@ -40,18 +36,6 @@
         border-bottom-right-radius: $border-radius-lg;
       }
     }
-
-    &:after {
-      content: '';
-      display: block;
-      width: 1px;
-      height: 100%;
-      background-color: $gray-50;
-    }
-
-    &:last-child:after {
-      display: none;
-    }
   }
 
   .btn-close {
@@ -87,10 +71,11 @@
   padding-right: 0;
 
   .bulk-operations-counter-label {
-    margin-right: 1rem;
+    padding-right: 1rem;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
+    border-right: 1px solid $border-color;
   }
 }

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

@@ -11,6 +11,8 @@ button[disabled]        .show-when-enabled { display: none; }
 
 .btn {
   box-shadow: $btn-box-shadow;
+
+  transition: background-color 0.1s linear 0s, border-color 0.2s linear 0s !important;
 }
 
 .btn,
@@ -62,19 +64,19 @@ button[disabled]        .show-when-enabled { display: none; }
   &:hover {
     background: rgba($danger, 0.1) !important;
     border-color: rgba($danger, 0.1) !important;
-    color: rgba($danger, 0.8) !important;
+    color: $danger !important;
   }
 }
 
 .hover-light {
   &:hover, &:focus {
-    background-color: $gray-25;
+    background-color: rgba($light, 0.75);
     text-decoration: none;
   }
 }
 .hover-gray {
   &:hover, &:focus {
-    background-color: $gray-100;
+    background-color: $gray-50;
     text-decoration: none;
   }
 }
@@ -91,23 +93,12 @@ button[disabled]        .show-when-enabled { display: none; }
   }
 }
 
-.btn-link {
-  color: theme-color('primary') !important;
-  border-color: $border-color;
-
-  &:hover, &:focus {
-    text-decoration: none !important;
-    background-color: theme-color('action') !important;
-    border-color: theme-color('action-border') !important;
-  }
-}
-
 .btn-secondary {
   color: $primary;
-  border-color: transparent;
+  border-color: rgba($primary, 0.1);
 
   &:hover, &:focus {
-    border-color: rgba($primary, 0.1) !important;
+    border-color: rgba($primary, 0.2) !important;
     color: $primary !important;
   }
 
@@ -143,13 +134,13 @@ button[disabled]        .show-when-enabled { display: none; }
 }
 
 .btn-light {
-  background-color: $white;
+  background-color: $gray-25;
   border-color: $border-color;
   color: $gray-700;
 
   &:hover, &:focus {
     border-color: $border-color;
-    background-color: $gray-25;
+    background-color: $gray-50;
     color: $gray-900;
   }
 

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

@@ -45,25 +45,30 @@
 .card-header {
   display: flex;
   align-items: center;
-  height: 50px;
+  height: 54px;
   border-bottom: 1px solid $gray-50;
+  padding-right: 1rem;
 
   .card-title {
     margin-bottom: 0;
     font-size: $font-size-plus;
-    font-weight: $font-weight-bold;
     font-family: $font-family-sans-serif;
   }
 }
+.card-footer {
+  border-top-width: 0;
+}
 
 .card-footer.border-top, .card-body.border-top, .card .border-top, .card .border-bottom, .card .list-group-item  {
   border-color: $gray-50 !important;
 }
 
 .card, .card-lg {
-  box-shadow: $card-box-shadow;
+  border-width: $card-border-width;
+  border-style: solid;
+  border-color: $card-border-color;
   background-color: $card-bg;
-  border-radius: $border-radius-lg;
+  border-radius: $card-border-radius;
 }
 .card-lg {
   margin-bottom: 1rem;
@@ -93,33 +98,49 @@
   @extend .overflow-hidden;
 
   .card-header {
-    @extend .p-0;
+    &:hover {
+      background-color: $light !important;
+    }
+  }
+  .card-body {
+    border-top: 1px solid $gray-50;
   }
-  .card-header a {
-    padding: 0.75rem !important;
 
-    .ti-chevron-down {
-      color: $gray-400;
-    }
+  // Arrow rotation when details is open
+  &[open] .arrow {
+    transform: rotate(90deg) !important;
+  }
 
-    &:hover {
-      text-decoration: none !important;
+  &:not([open]) .arrow {
+    transform: rotate(0deg) !important;
+  }
+}
 
-      .ti-chevron-down {
-        color: $gray-900 !important;
+.collapsable-card, .card {
+  // Details/Summary styling for cards
+  details {
+    summary {
+      cursor: pointer;
+      list-style: none;
+      user-select: none;
+      
+      &::-webkit-details-marker {
+        display: none;
+      }
+      
+      &::marker {
+        display: none;
       }
-    }
-  }
-  &:hover {
-    .card-header a {
-      text-decoration: none !important;
 
-      .ti-chevron-down {
-        color: $gray-500;
+      // Ensure summary is clickable and accessible
+      &[role="button"] {
+        outline: none;
+        
+        &:focus {
+          outline: 2px solid $primary;
+          outline-offset: -2px;
+        }
       }
     }
   }
-  .card-body {
-    border-top: 1px solid $gray-50;
-  }
 }

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

@@ -0,0 +1,204 @@
+/* Prevent scrolling while dialog is open */
+body:has(dialog[data-dialog-target="dialog"][open]) {
+  // overflow: hidden;
+}
+
+/* Customize the dialog backdrop */
+dialog {
+  box-shadow: 0 0 0 100vw rgba($modal-backdrop-bg, $modal-backdrop-opacity);
+}
+
+dialog:-internal-dialog-in-top-layer::backdrop {
+  background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity);
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+/* Add animations */
+dialog[data-dialog-target="dialog"][open] {
+  animation: fade-in 200ms forwards;
+}
+
+dialog[data-dialog-target="dialog"][closing] {
+  animation: fade-out 200ms forwards;
+}
+
+dialog {
+  display: none;
+  z-index: $zindex-modal;
+  border-radius: $modal-content-border-radius;
+  border: $modal-content-border-width solid $modal-content-border-color;
+  background: $modal-content-bg;
+  box-shadow: $modal-content-box-shadow-xs;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+dialog:open {
+  display: block;
+}
+
+.drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: auto;
+  height: calc(100dvh - 2rem);
+  max-height: calc(100dvh - 2rem);
+  width: calc(100vw - 2rem);
+  max-width: 600px;
+  min-width: 320px;
+  margin: 1rem;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 0;
+  overflow-y: hidden;
+  overflow-x: hidden;
+
+  .drawer-title {
+    margin-bottom: 0;
+  }
+
+  &:open {
+    display: flex;
+  }
+
+  .alerts-container {
+    position: absolute;
+  } 
+
+  @media (max-width: 991.98px) {
+    max-width: 100vw;
+    min-width: 100vw;
+  }
+
+  > turbo-frame:not(#drawer_alerts), turbo-frame > form {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .drawer-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: $modal-inner-padding;
+    border-bottom: 1px solid $gray-50;
+  }
+
+  .drawer-body {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding: $modal-inner-padding;
+  }
+
+  .drawer-footer {
+    position: sticky;
+    bottom: 0;
+    padding: $modal-inner-padding;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-top: 1px solid $gray-50;
+    background-color: $gray-25;
+  }
+}
+
+// Native Dialog component (centered modal replacement)
+.dialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90%;
+  max-width: 500px;
+  max-height: 90vh;
+  margin: 0;
+  padding: 0;
+  flex-direction: column;
+  overflow-y: hidden;
+  overflow-x: hidden;
+
+  &.dialog-lg {
+    max-width: 800px;
+  }
+
+  &.dialog-xl {
+    max-width: 1140px;
+  }
+
+  &:open {
+    display: flex;
+  }
+
+  .dialog-title {
+    margin-bottom: 0;
+    font-weight: $font-weight-medium;
+  }
+
+  .alerts-container {
+    position: absolute;
+  }
+
+  > turbo-frame:not(#dialog_alerts), turbo-frame > form {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .dialog-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: $modal-inner-padding;
+    border-bottom: 1px solid $gray-50;
+
+    .btn-close {
+      margin-right: -0.25rem;
+    }
+  }
+
+  .dialog-body {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding: $modal-inner-padding;
+    max-height: calc(90vh - 200px);
+  }
+
+  .dialog-footer {
+    position: sticky;
+    bottom: 0;
+    padding: $modal-inner-padding;
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: space-between;
+    border-top: 1px solid $gray-50;
+    background-color: $gray-25;
+    border-radius: 0 0 $modal-content-border-radius $modal-content-border-radius;
+
+    .btn {
+      display: inline-flex;
+      height: 2.5rem;
+    }
+  }
+}