spree_admin 5.0.0.rc1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: c46d7797c6b7f96882ad96c43ea5a208adeca65c74816b1541a4eec33c6dbdd7
+  data.tar.gz: 51593866ea9184c76e644c9e87691b94e183ea9bab9d50df371f97bc6a53ae59
+SHA512:
+  metadata.gz: ab791c77bbf7061f800a622f19242dfea2ff77d5e11e6fca722ce06239462f7160bda2bfe31b983ef6fc440b0e9caa36802a986574a9c2ab7fee8dc50ab6b281
+  data.tar.gz: 850bd370e9ec8cc75cf0017d6c866ea7f45c116e33d737977217a6c1e61070e5b2edb9f1275d23cca355cc190ad2c60d17cbf6d57baf49cebd82a6fd49e11303

data/LICENSE.md

@@ -0,0 +1,13 @@
+# License
+
+Copyright © 2024-present, Vendo Connect Inc.
+
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see [https://www.gnu.org/licenses/](https://www.gnu.org/licenses/).

data/README.md

@@ -0,0 +1,4 @@
+# Spree Admin Dashboard
+
+Welcome to the Spree Admin Dashboard repository. This is a new, shiny admin dashboard for Spree Commerce which will replace the old admin dashboard in Spree 5.0.
+

data/Rakefile

@@ -0,0 +1,15 @@
+require 'rubygems'
+require 'rake'
+require 'rake/testtask'
+require 'rspec/core/rake_task'
+require 'spree/testing_support/common_rake'
+
+RSpec::Core::RakeTask.new
+
+task default: :spec
+
+desc "Generates a dummy app for testing"
+task :test_app do
+  ENV['LIB_NAME'] = 'spree/admin'
+  Rake::Task['common:test_app'].invoke
+end

data/app/assets/config/spree_admin_manifest.js

@@ -0,0 +1,10 @@
+//= link spree/admin/actiontext.css
+//= link spree/admin/application.css
+
+//= link_tree ../images
+
+//= link_tree ../../javascript/spree/admin/controllers .js
+//= link_tree ../../javascript/spree/admin/helpers .js
+//= link_tree ../../../vendor/javascript .js
+//= link spree/admin/application.js
+

data/app/assets/stylesheets/spree/admin/actiontext.css

@@ -0,0 +1,36 @@
+/*
+ * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
+ * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
+ * inclusion directly in any other asset bundle and remove this file.
+ *
+ *= require trix
+*/
+
+/*
+ * We need to override trix.css’s image gallery styles to accommodate the
+ * <action-text-attachment> element we wrap around attachments. Otherwise,
+ * images in galleries will be squished by the max-width: 33%; rule.
+*/
+.trix-content .attachment-gallery > action-text-attachment,
+.trix-content .attachment-gallery > .attachment {
+  flex: 1 0 33%;
+  padding: 0 0.5em;
+  max-width: 33%;
+}
+
+.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
+.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
+.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
+  flex-basis: 50%;
+  max-width: 50%;
+}
+
+.trix-content action-text-attachment .attachment {
+  padding: 0 !important;
+  max-width: 100% !important;
+}
+
+.trix-button--dialog {
+  width: auto !important;
+  height: auto !important;
+}

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

@@ -0,0 +1,43 @@
+@import 'global/variables';
+
+@import 'bootstrap';
+
+@import 'components/navbar';
+@import 'components/tables';
+@import 'components/badges';
+@import 'components/cards';
+@import 'components/alerts';
+@import 'components/dropdowns';
+@import 'components/main';
+@import 'components/buttons';
+@import 'components/filters';
+@import 'components/navigation';
+@import 'components/modals';
+@import 'components/offcanvas';
+@import 'components/variants_form';
+@import 'components/media_form';
+@import 'components/seo_form';
+@import 'components/line_items_form';
+@import 'components/search_picker';
+@import 'components/sortable_tree';
+@import 'components/bulk_panel';
+
+@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');
+@import url('https://esm.sh/@uppy/dashboard@4.1.0/dist/style.min.css');
+@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 'plugins/uppy_fixes';
+
+@import 'shared/base';
+@import 'shared/forms';
+
+@import 'views/dashboard';
+@import "views/page_builder";

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

@@ -0,0 +1,48 @@
+.alert {
+  display: inline-block;
+}
+
+.alert {
+  background-repeat: no-repeat;
+  background-position: 1rem center;
+  background-size: 1.5rem 1.5rem;
+  padding-left: 60px;
+  min-height: 3rem;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+
+  > p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.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");
+}
+
+.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");
+}
+
+.alert-danger {
+  background-color: #f8d7da;
+  border-color: rgba($danger, 0.3) !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='%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");
+}
+
+.alert-success {
+  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");
+}
+
+.page-alerts {
+  .alert {
+    @extend .rounded-lg;
+  }
+}

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

@@ -0,0 +1,117 @@
+.badge {
+  cursor: default;
+  @extend .d-inline-flex;
+  @extend .align-items-center;
+  font-weight: $badge-font-weight;
+  font-size: $badge-font-size;
+}
+.badge i {
+  @extend .mr-1;
+  font-size: 100%;
+}
+.badge .ti {
+  font-size: $badge-font-size;
+  line-height: $badge-font-size
+}
+
+// Green
+.badge-completed,
+.badge-complete,
+.badge-resumed,
+.badge-considered_safe,
+.badge-paid,
+.badge-shipped,
+.badge-active,
+.badge-success,
+.badge-sold,
+.badge-open,
+.badge-authorized,
+.badge-published,
+.badge-live,
+.badge-processed,
+.badge-success,
+.badge-create,
+.badge-approved,
+.badge-resolved,
+.badge-reimbursed,
+.bg-success {
+  border: 1px solid rgba($success, 0.05);
+  background-color: #C6F6D5 !important;
+  color: #22543D !important;
+}
+
+// Red
+.badge-failed,
+.badge-considered_risky,
+.badge-error,
+.badge-errored,
+.badge-invalid,
+.badge-rejected,
+.badge-destroy,
+.badge-closed,
+.badge-canceled,
+.badge-partially_canceled,
+.badge-void,
+.badge-danger {
+  background-color: #fee2e1 !important;
+  color: #8e1f0b !important;
+}
+
+// Orange
+.badge-returned,
+.badge-credit_owed,
+.badge-balance_due,
+.badge-backorder,
+.badge-checkout,
+.badge-suspended,
+.badge-archived,
+.badge-warning,
+.badge-ready, // unfulfilled
+.bg-warning
+{
+  border: 1px solid rgba($warning, 0.25);
+  background-color: rgba(255, 235, 120, 1);
+  color: rgba(79, 71, 0, 1);
+}
+
+// light
+.badge-processing,
+.badge-pending,
+.badge-paused,
+.badge-awaiting_return,
+.badge-cart,
+.badge-inactive,
+.badge-address,
+.badge-delivery,
+.badge-payment,
+.badge-confirm,
+.badge-disabled,
+.badge-draft,
+.badge-onboarding,
+.badge-light,
+.badge-invited {
+  @extend .bg-white;
+  @extend .text-muted;
+  @extend .border;
+  font-weight: $font-weight-normal;
+
+  &:hover {
+    @extend .bg-white;
+    @extend .text-muted;
+  }
+}
+
+.badge-notice,
+.badge-update,
+.badge-partial,
+.badge-info {
+  border: 1px solid rgba($info, 0.05);
+  background-color: #E0EFFE;
+  color: #00527c;
+}
+
+.badge-dark {
+  background-color: transparent !important;
+  border: 1px solid $gray-800 !important;
+  color: $white;
+}

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

@@ -0,0 +1,31 @@
+.bulk-panel-container {
+  display: inline-flex;
+  align-items: center;
+  border-radius: $border-radius-lg;
+  background-color: $white;
+  padding: 0.5rem;
+  box-shadow: $dropdown-box-shadow;
+}
+
+#bulk-panel {
+  position: fixed;
+  width: 100%;
+  text-align: center;
+  bottom: 1rem;
+  left: 0;
+  z-index: 1020;
+}
+
+@include media-breakpoint-up(lg) {
+  #bulk-panel {
+    left: 25%;
+    width: 75%;
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  #bulk-panel {
+    left: 16.66666667%;
+    width: 83.33333333%;
+  }
+}

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

@@ -0,0 +1,198 @@
+// https://github.com/hotwired/turbo/pull/386
+button                  .show-when-disabled { display: none; }
+button[disabled]        .show-when-disabled { display: initial; }
+
+button                  .show-when-enabled { display: initial; }
+button[disabled]        .show-when-enabled { display: none; }
+
+.payment-action-save {
+  @include button-variant(theme-color('success'), theme-color('success'), theme-color('success') );
+}
+
+.btn,
+.nav-pills > li > a {
+  vertical-align: middle;
+  transition: color 0.1s linear 0s, background-color 0.1s linear 0s, opacity 0.2s linear 0s !important;
+}
+
+.btn:focus {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.btn:disabled {
+  cursor: not-allowed;
+}
+
+.ti {
+  font-size: 130%;
+  vertical-align: middle;
+  line-height: 130%;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  vertical-align: middle;
+
+  .ship {
+    color: #fff;
+  }
+}
+
+.btn-primary {
+  @extend .shadow-xs;
+}
+
+.btn-lg {
+  @extend .py-2;
+  @extend .px-4;
+}
+
+.btn-danger {
+  @extend .btn-light;
+  color: $danger !important;
+
+  &:hover {
+    background: rgba($danger, 0.1) !important;
+    border-color: rgba($danger, 0.1) !important;
+    color: rgba($danger, 0.8) !important;
+  }
+}
+
+.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;
+  }
+}
+.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;
+  }
+}
+.hover-gray-200 {
+  &:hover, &:focus {
+    background-color: $gray-200 !important;
+    text-decoration: none !important;
+  }
+}
+.hover-primary {
+  &:hover, &:focus {
+    background-color: theme-color('black') !important;
+    text-decoration: none !important;
+  }
+}
+
+.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;
+
+  &:hover, &:focus {
+    border-color: rgba($primary, 0.1) !important;
+    color: $primary !important;
+  }
+
+  .arrow {
+    color: $primary !important;
+  }
+}
+
+.actions .btn {
+  margin-left: 5px;
+}
+
+.btn-close {
+  @extend .btn;
+  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/0.85em auto no-repeat;
+  width: 0.85em;
+  height: 0.85em;
+  opacity: 0.5;
+  padding: 12px;
+  border-radius: $border-radius;
+
+  &:hover {
+    opacity: 0.8 !important;
+    background-color: $gray-100 !important;
+  }
+}
+
+.btn i {
+  margin-right: 0.5rem;
+}
+.btn-sm i {
+  margin-right: 0.25rem;
+}
+
+.btn-light {
+  background-color: $white;
+  border-color: $border-color;
+  color: $gray-700;
+
+  &:hover, &:focus {
+    border-color: $gray-100;
+    background-color: $gray-25;
+    color: $gray-900;
+  }
+
+  &:focus, &:active {
+    background: $gray-50 !important;
+    box-shadow: $btn-active-box-shadow !important;
+  }
+
+  &.bg-transparent {
+    background: transparent;
+  }
+}
+
+.btn-dark {
+  background-color: $gray-900;
+  color: $gray-200;
+
+  &:hover, &:focus {
+    background: linear-gradient($gray-900, $primary) !important;
+    border-color: $gray-700 !important;
+    color: $white !important;
+  }
+}
+
+.page-link {
+  @extend .btn;
+  @extend .btn-sm;
+  @extend .btn-light;
+  @extend .ml-1;
+  @extend .p-2;
+
+  .ti {
+    @extend .mr-0;
+  }
+}
+.page-link.disabled {
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,126 @@
+.card {
+  > .table,
+  .table-responsive > .table {
+  	border-right: 0;
+  	border-left: 0;
+    margin-bottom: 0;
+
+    &:last-child, &:last-of-type {
+			border-bottom: 0;
+		}
+
+  	td:first-child,
+		th:first-child {
+			border-left: 0;
+		}
+
+  	td:last-child,
+		th:last-child {
+			border-right: 0;
+		}
+
+  	tr:first-child td,
+		tr:first-child th {
+			border-top: 0;
+		}
+
+  	tr:last-child td {
+			border-bottom: 0;
+		}
+	}
+
+  .card-header + .table,
+  .card-header + .table-responsive > .table {
+    border-top: 0;
+	}
+}
+
+.card-header, .card-footer {
+  background-color: transparent;
+}
+.card-header, .card-footer, .card-body {
+  border-top: 0 none;
+}
+.card-header {
+  display: flex;
+  align-items: center;
+  height: 50px;
+  border-bottom-color: $gray-50;
+
+  .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, .card-body.border-top, .card .border-top, .card .border-bottom, .card .list-group-item  {
+  border-color: $gray-50 !important;
+}
+
+.card-lg {
+  @extend .mb-3;
+  @extend .bg-white;
+
+  border-radius: $border-radius-lg;
+  border: 1px solid $card-border-color;
+  padding: 1rem;
+}
+
+.card-text {
+  overflow-wrap: anywhere;
+}
+
+.card-body .form-group:last-child {
+  margin-bottom: 0;
+}
+
+.card-header .arrow {
+  @extend .w-auto;
+  &:before {
+    transition: .3s transform ease-in-out;
+  }
+}
+.card-header .collapsed .arrow:before {
+  transform: rotate(-90deg);
+}
+
+.collapsable-card {
+  @extend .card;
+  @extend .overflow-hidden;
+
+  .card-header {
+    @extend .p-0;
+  }
+  .card-header a {
+    padding: 0.75rem !important;
+
+    .ti-chevron-down {
+      color: $gray-400;
+    }
+
+    &:hover {
+      text-decoration: none !important;
+
+      .ti-chevron-down {
+        color: $gray-900 !important;
+      }
+    }
+  }
+  &:hover {
+    .card-header a {
+      text-decoration: none !important;
+
+      .ti-chevron-down {
+        color: $gray-500;
+      }
+    }
+  }
+  .card-body {
+    border-top: 1px solid $gray-50;
+  }
+  .card-header {
+    border: 0 none;
+  }
+}