spree_admin 5.1.8 → 5.2.0.rc1

data/app/assets/stylesheets/spree/admin/global/_variables.scss

@@ -1,6 +1,6 @@
 // https://github.com/twbs/bootstrap/blob/v4.6.2/scss/_variables.scss
 
-$gray-25: #F8F8F9;
+$gray-25: #FAFAFA;
 $gray-50: #F3F3F3;
 $gray-100: #E3E3E3 !default;
 $gray-200: #D5D5D5 !default;
@@ -12,7 +12,7 @@ $gray-700: #4D4D4D !default;
 $gray-800: #333333 !default;
 $gray-900: #1A1A1A !default;
 
-$light: $gray-50 !default;
+$light: $gray-25 !default;
 
 $primary: #061932 !default;
 $black: #000000 !default;
@@ -27,7 +27,7 @@ $container-max-widths: (
   sm: 540px,
   md: 720px,
   lg: 960px,
-  xl: 1260px
+  xl: 1250px
 ) !default;
 $grid-gutter-width: 16px !default;
 
@@ -35,7 +35,7 @@ $theme-colors: (
   "white": $white,
   "black": $black,
   "primary": $primary,
-  "secondary": rgba($blue, 0.1),
+  "secondary": rgba($blue, 0.05),
   "action": $action,
   "action-border": $action-border,
   "active": $gray-25,
@@ -52,28 +52,28 @@ $theme-colors: (
   "gray-600": $gray-600,
   "gray-700": $gray-700,
   "gray-800": $gray-800,
-  "gray-900": $gray-900,
-  "mint": #C7E15A
+  "gray-900": $gray-900
 );
 
 $body-color: #333 !default;
-$body-bg: $gray-25 !default;
+$body-bg: $white !default;
 $enable-shadows: false;
 $enable-responsive-font-sizes: true;
 $font-family-sans-serif: Inter, sans-serif !default;
-$font-size-base:   0.813rem !default;
+$font-size-base:   0.8125rem !default;
 $font-size-plus:   0.875rem !default;
 $font-size-sm:    0.75rem !default;
 $font-size-lg:    1rem !default;
 $font-weight-normal: 400 !default;
-$font-weight-bold:            600 !default;
+$font-weight-medium: 500 !default;
+$font-weight-bold: 600 !default;
 $headings-font-family: $font-family-sans-serif;
 $line-height-base:            1.5 !default;
 $border-radius: 0.5rem !default;
 $border-radius-sm: 0.4rem !default;
 $border-radius-lg: 0.75rem !default;
-$border-color: $gray-100 !default;
-$input-border-color: $border-color !default;
+$border-color: rgba($gray-100, 0.85) !default;
+$input-border-color: rgba($gray-200, 0.85) !default;
 $list-group-border-color: $border-color !default;
 $list-group-hover-bg: $gray-25 !default;
 $list-group-active-bg: $action !default;
@@ -81,61 +81,63 @@ $list-group-active-border-color: $action-border !default;
 
 $thumbnail-border-color: $border-color !default;
 $hr-border-color: $border-color !default;
-$table-border-color: $gray-50 !default;
+$table-border-color: $border-color !default;
 $card-border-color: $border-color !default;
 $input-btn-focus-width: 0.18rem !default;
 
-$card-spacer-y:                     .75rem !default;
-$card-spacer-x:                     1rem !default;
+$card-spacer-y:                     1rem !default;
+$card-spacer-x:                     1.25rem !default;
 
 $component-active-bg:         $blue !default;
 
 $input-placeholder-color: $gray-500;
-$input-padding-y:         .5rem !default;
+$input-padding-y:         .55rem !default;
 $input-disabled-bg: $gray-25 !default;
 $input-focus-border-color: $blue !default;
-$input-box-shadow: none !default;
-$btn-box-shadow: $input-box-shadow !default;
 $custom-select-disabled-bg: $gray-50 !default;
 
-$text-muted: $gray-400 !default;
+$text-muted: $gray-600 !default;
 
 $link-color: $primary !default;
 $link-hover-decoration:                   underline !default;
 
 $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .025) !default;
-$btn-disabled-opacity: 0.3 !default;
+$btn-disabled-opacity: 0.7 !default;
 
 $nav-link-padding-y:                .5rem !default;
 $nav-link-padding-x:                .6rem !default;
 
 $box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06) !default;
-$box-shadow-xs: rgba(43, 34, 51, 0.04) 0px 1px 2px !default;
+$box-shadow-xs: rgba(43, 34, 51, 0.03) 0px 1px 1px !default;
 $box-shadow-lg: rgba(0, 5, 13, 0.5) 0px 4px 8px 2px;
+$input-box-shadow: $box-shadow-xs !default;
+$btn-box-shadow: $input-box-shadow !default;
 
-$card-border-width: 0px !default;
-$card-box-shadow: 0 0 0 1px $card-border-color, 0 1px 2px 0 rgba(0, 0, 0, 0.05) !default;
+$btn-font-weight: $font-weight-medium !default;
+
+$card-border-width: 1px !default;
 $card-bg: $white !default;
-$card-border-radius: $border-radius-lg !default;
+$card-border-radius: 1rem !default;
 
-$tooltip-border-radius: $border-radius !default;
+$tooltip-border-radius: $border-radius-lg !default;
 $tooltip-opacity: 1 !default;
 $tooltip-margin:                    0.25rem 0 !default;
-$tooltip-padding-y:                 .25rem !default;
-$tooltip-padding-x:                 .5rem !default;
+$tooltip-padding-y:                 .35rem !default;
+$tooltip-padding-x:                 .65rem !default;
 $tooltip-bg: $white !default;
 $tooltip-color: $body-color !default;
 $tooltip-arrow-color: transparent !default;
 $tooltip-max-width: 210px !default;
+$tooltip-font-size: $font-size-base !default;
 
 $transition-base:             all .1s ease-in-out !default;
 $transition-fade:             opacity .15s linear !default;
 $transition-collapse:         height .15s ease !default;
 $transition-collapse-width:   width .15s ease !default;
 
-$badge-font-size:                   0.70rem !default;
-$badge-font-weight:                 500 !default;
-$badge-padding-y:                   .25em !default;
+$badge-font-size:                   $font-size-sm !default;
+$badge-font-weight:                 $font-weight-normal !default;
+$badge-padding-y:                   .35em !default;
 $badge-padding-x:                   .45em !default;
 $badge-border-radius:               $border-radius-sm !default;
 
@@ -161,15 +163,20 @@ $display2-weight:             400 !default;
 $display3-weight:             400 !default;
 $display4-weight:             400 !default;
 
+$dropdown-bg: $white !default;
 $dropdown-border-width:  0px !default;
-$dropdown-border-radius: $border-radius-lg !default;
-$dropdown-link-hover-bg: $gray-50 !default;
-$dropdown-box-shadow:    rgba(209, 217, 224, 0.8) 0px 0px 0px 1px, rgba(37, 41, 46, 0.04) 0px 6px 12px -3px, rgba(37, 41, 46, 0.12) 0px 6px 18px 0px !default;
+$dropdown-border-radius: 1rem !default;
+$dropdown-inner-border-radius: 0.75rem !default;
+$dropdown-link-hover-bg: rgba($gray-100, 0.5) !default;
+$dropdown-box-shadow:    0px 0px 0px 1px $gray-200, 0px 6px 12px -3px rgba($gray-300, 0.35), 0px 6px 18px 0px rgba($gray-300, 0.35) !default;
 $dropdown-padding-x:    0.25rem !default;
 $dropdown-padding-y:    0.25rem !default;
 $dropdown-divider-bg: $gray-50 !default;
 $dropdown-divider-margin-y: 0.25rem !default;
-$dropdown-header-color: $gray-500 !default;
+$dropdown-header-color: $text-muted !default;
+$dropdown-item-padding-y:           0.45rem !default;
+$dropdown-item-padding-x:           0.65rem !default;
+
 $zindex-dropdown: 1050;
 
 $modal-backdrop-bg:                 $body-bg !default;
@@ -183,13 +190,14 @@ $modal-show-transform:              none !default;
 $modal-transition:                  transform .2s ease-out !default;
 $modal-scale-transform:             scale(1.02) !default;
 $modal-header-border-width: 1px !default;
-$modal-content-box-shadow-xs: $border-color 0px 0px 0px 1px, rgba(0, 0, 0, 0.02) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 8px 16px -4px, rgba(0, 0, 0, 0.06) 0px 24px 32px -8px !default;
+$modal-content-box-shadow-xs: $dropdown-box-shadow;
 $modal-content-box-shadow-sm-up: $modal-content-box-shadow-xs !default;
 $modal-footer-margin-between: 0 !default;
 
 $alert-padding-y:                   0.5rem !default;
 $alert-padding-x:                   1rem !default;
-$alert-border-radius: $border-radius-lg;
+$alert-border-radius: $border-radius;
+$alert-border-width: 0px !default;
 
 $breadcrumb-bg: transparent !default;
 $breadcrumb-padding-y: 0 !default;
@@ -205,17 +213,27 @@ $embed-responsive-aspect-ratios: (
 ) !default;
 
 // tables
-$table-cell-padding: .75rem .50rem !default;
+$table-cell-padding: 1.15rem .75rem !default;
 
-$code-color: $gray-600 !default;
-$code-bg: $gray-25 !default;
+$code-color: $body-color !default;
+$code-bg: $gray-50 !default;
 
 $list-group-bg: transparent !default;
-$list-group-item-padding-x:         1rem !default;
 
-$header-bg: $gray-25 !default;
-$header-height: 60px !default;
+$list-group-item-padding-x:         1.25rem !default;
+$list-group-item-padding-y:         0.75rem !default;
+$header-bg: $body-bg !default;
+$header-height: 54px !default;
 $sidebar-width: 220px !default;
-$sidebar-bg: $gray-25 !default;
+$sidebar-bg: $light !default;
+
+$progress-bar-bg: rgba($blue, 0.75) !default;
+
+$btn-border-radius:           $border-radius-lg !default;
+$btn-border-radius-lg:        $border-radius-lg !default;
+$btn-border-radius-sm:        $border-radius !default;
+
+$nav-pills-border-radius: $border-radius-lg !default;
 
-$progress-bar-bg: $blue !default;
+$modal-content-inner-border-radius: 1rem !default;
+$modal-content-border-radius: 1rem !default;

data/app/assets/stylesheets/spree/admin/plugins/_trix_custom.scss

@@ -67,6 +67,11 @@ trix-toolbar .trix-button, trix-toolbar .trix-button-group {
   margin-bottom: 0 !important;
 }
 
+trix-toolbar .trix-button {
+  width: 32px !important;
+  height: 28px !important;
+  padding: 4px;
+}
 trix-toolbar .trix-button:hover {
   background-color: $border-color !important;
   color: theme-color('black') !important;

data/app/assets/stylesheets/spree/admin/plugins/tom-select.scss

@@ -87,7 +87,7 @@ $select-spinner-border-color:					$select-color-border !default;
 .#{$select-ns}-wrapper.single{
 	.#{$select-ns}-control {
 		&, input {
-			cursor: pointer;
+			cursor: default;
 		}
 	}
 }

data/app/assets/stylesheets/spree/admin/plugins/uppy_fixes.scss

@@ -1,3 +1,25 @@
+.uppy-Root {
+  font-family: $font-family-base !important;
+  font-size: $font-size-base !important;
+  color: $body-color !important;
+  line-height: $line-height-base !important;
+}
+
+.uppy-Dashboard-inner {
+  background-color: $light;
+  border-color: $border-color;
+}
+
+.uppy-Dashboard-innerWrap, .uppy-Dashboard-inner, .uppy-Dashboard-AddFiles {
+  border-radius: $border-radius-lg !important;
+}
+
+.uppy-Dashboard-Item-previewInnerWrap {
+  background-color: transparent !important;
+  border-radius: $border-radius-lg !important;
+  box-shadow: none !important;
+}
+
 .uppy-Dashboard--modal .uppy-Dashboard-overlay {
   background-color: $modal-backdrop-bg !important;
   opacity: $modal-backdrop-opacity !important;
@@ -8,10 +30,16 @@
   border-color: $modal-content-border-color !important;
 }
 
+.uppy-Dashboard-browse, .uppy-DashboardContent-back {
+  @extend .btn;
+  @extend .btn-light;
+}
 .uppy-Dashboard-browse {
-  color: $blue !important;
-  text-decoration: none !important;
-  border-bottom: 0 !important;
+  @extend .ml-2;
+}
+.uppy-DashboardContent-save {
+  @extend .btn;
+  @extend .btn-primary;
 }
 
 .uppy-Dashboard-close {
@@ -23,3 +51,24 @@
   }
 }
 
+.uppy-StatusBar-actionBtn {
+  @extend .btn;
+  @extend .btn-sm;
+  @extend .btn-light;
+}
+
+.uppy-StatusBar.is-complete .uppy-StatusBar-progress {
+  background-color: theme-color('blue') !important;
+}
+
+.uppy-Dashboard-AddFiles-title {
+  font-weight: $font-weight-base !important;
+  font-size: $font-size-base !important;
+}
+
+.uppy-size--md .uppy-DashboardContent-bar {
+  height: 56px !important;
+}
+.uppy-size--md .uppy-DashboardContent-title {
+  line-height: 56px !important;
+}

data/app/assets/stylesheets/spree/admin/shared/_base.scss

@@ -2,12 +2,20 @@
 html {
   min-height: 100%;
   letter-spacing: normal;
+  text-rendering: optimizeLegibility;
+  text-size-adjust: 100%;
 }
 body {
   @extend .h-100;
   overflow-y:scroll;
 }
 
+body * {
+  &:focus {
+    outline-color: theme-color('blue') !important;
+  }
+}
+
 html, body {
   overscroll-behavior: none;
 }
@@ -23,7 +31,7 @@ strong {
 }
 
 .font-weight-semibold {
-  font-weight: 500 !important;
+  font-weight: $font-weight-medium !important;
 }
 
 .text-size-lg, .font-size-lg {
@@ -313,13 +321,6 @@ small,
   font-size: $font-size-sm !important;
 }
 
-.alerts-container {
-  position: fixed;
-  width: 100%;
-  z-index: 1070;
-  top: 1rem;
-}
-
 // tailwind matchers
 
 .gap-1 {
@@ -524,7 +525,7 @@ turbo-frame[loading] .spinner-border, turbo-frame[busy] .spinner-border {
   @extend .rounded-pill;
   @extend .text-uppercase;
   font-size: 0.875rem;
-  font-weight: 500;
+  font-weight: $font-weight-medium;
   padding: 5px 16px ;
   letter-spacing: 2.24px;
   border: 1px solid $gray-200;
@@ -596,6 +597,10 @@ turbo-frame[loading] .spinner-border, turbo-frame[busy] .spinner-border {
     background-color: rgba($gray-500, 0.25);
   }
 }
+.overflow-visible {
+  overflow-y: visible !important;
+  overflow-x: visible !important;
+}
 
 .outline-none	{
   outline: none !important;
@@ -688,7 +693,7 @@ div.uppy-Root {
   background-color: $gray-200;
   color: $gray-500;
   font-size: $font-size-base;
-  font-weight: 500;
+  font-weight: $font-weight-medium;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -697,20 +702,16 @@ div.uppy-Root {
 .breadcrumb {
   gap: 0.5rem;
   align-items: center;
-  color: $gray-500;
-  font-size: $font-size-sm;
+  color: $text-muted;
+  font-weight: $font-weight-medium;
   
-  i {
-    opacity: 0.5;
-  }
-
   li {
     a {
-      color: $gray-500;
       text-decoration: none;
 
       &:hover {
         color: $primary;
+        text-decoration: underline;
       }
     }
   }

data/app/assets/stylesheets/spree/admin/shared/_forms.scss

@@ -4,7 +4,7 @@
 }
 
 label {
-  font-weight: 500;
+  font-weight: $font-weight-medium;
   font-size: 100%;
 
   &:hover {
@@ -23,13 +23,15 @@ label {
 
 .form-text {
   font-size: $font-size-sm;
+  color: $text-muted;
   margin-top: 0;
 }
 
 .form-control, .text-input, .trix-container, .ts-control, trix-toolbar .trix-dialog .trix-input, .custom-select, .input-group-text, .custom-file-label {
   box-shadow: $input-box-shadow;
-  transition-property: box-shadow;
-  transition-duration: 0.2s;
+  transition-property: box-shadow, border-color;
+  transition-duration: 0.15s;
+  transition-timing-function: ease;
 
   &:disabled, &[readonly] {
     @extend .shadow-none;
@@ -71,7 +73,7 @@ input[type="file"] {
 }
 .custom-select, .form-control, .ts-control {
   &:hover:not(:focus):not(:active):not(.active):not(:focus-visible):not(:focus-within) {
-    border: 1px solid $gray-200;
+    border: 1px solid $gray-100;
   }
 }
 
@@ -80,6 +82,7 @@ input[type="file"] {
 }
 .ts-dropdown {
   @extend .p-1;
+  z-index: 10000000 !important;
 
   .option {
     @extend .p-2;

data/app/assets/stylesheets/spree/admin/views/_page_builder.scss

@@ -1,8 +1,10 @@
 $sidebar-width: 345px;
-$header-height: 43px;
+$header-height: 50px;
 
 #page-builder {
-  background-color: $gray-100;
+  background-color: $gray-50;
+  height: 100vh;
+  overflow: hidden;
 
   #content {
     margin-left: 0;
@@ -19,19 +21,17 @@ $header-height: 43px;
   }
 
   .nav-pills {
-    border-radius: $border-radius;
-    background-color: $gray-100;
-    padding: 0.1rem;
+    background-color: $gray-50;
+    padding: 0.25rem;
+    border-radius: $nav-pills-border-radius;
 
     .nav-link {
       background-color: transparent;
       padding: 0.25rem 0.5rem;
-      border-radius: $border-radius-sm;
-      border: 1px solid transparent;
+      border-radius: $border-radius;
 
       &.active {
         background-color: $white;
-        border: 1px solid $border-color;
       }
     }
   }
@@ -46,6 +46,7 @@ $header-height: 43px;
   height: $header-height;
   nav {
     width: 100%;
+    height: $header-height;
     display: flex;
     align-items: center;
     gap: 0.5rem;
@@ -59,7 +60,6 @@ $header-height: 43px;
   left: 0px;
   background-color: $body-bg;
   border-right: 1px solid $border-color;
-  overflow-y: scroll;
   overflow-x: hidden;
   height: calc(100vh - $header-height);
   .sidebar-header {
@@ -96,7 +96,7 @@ $header-height: 43px;
 }
 #page-builder-preview {
   border-radius: $border-radius;
-  border: 1px solid $gray-300;
+  border: 1px solid $gray-200;
   margin-top: calc($header-height + 1rem);
 }
 
@@ -106,7 +106,7 @@ $header-height: 43px;
   &:hover,
   &:focus {
     color: theme-color('black') !important;
-    background-color: $gray-100 !important;
+    background-color: $gray-50 !important;
     a {
       text-decoration: none !important;
     }
@@ -120,7 +120,7 @@ $header-height: 43px;
     &:hover,
     &:focus,
     &:active {
-      background-color: $gray-200 !important;
+      background-color: $gray-100 !important;
     }
   }
 }

data/app/controllers/concerns/spree/admin/page_builder_concern.rb

@@ -8,11 +8,11 @@ module Spree
       end
 
       def set_variables
-        @theme_preview = current_store.theme_previews.find(session[:theme_preview_id]) if session[:theme_preview_id].present?
-        @theme = @theme_preview.parent if @theme_preview
-        if session[:page_preview_id].present?
+        @theme_preview = current_store.theme_previews.find_by(id: session[:theme_preview_id]) if session[:theme_preview_id].present?
+        @theme = @theme_preview.present? ? @theme_preview.parent : current_store.default_theme
+        if @theme.present? && session[:page_preview_id].present?
           @page_preview = @theme.page_previews.find_by(id: session[:page_preview_id]) ||
-                            current_store.page_previews.find(session[:page_preview_id])
+                            current_store.page_previews.find_by(id: session[:page_preview_id])
         end
         @page = @page_preview.parent if @page_preview
       end

data/app/controllers/concerns/spree/admin/settings_concern.rb

@@ -0,0 +1,23 @@
+module Spree
+  module Admin
+    module SettingsConcern
+      extend ActiveSupport::Concern
+
+      included do
+        before_action :set_settings_area_flag
+      end
+
+      def choose_layout
+        return 'turbo_rails/frame' if turbo_frame_request?
+
+        'spree/admin_settings'
+      end
+
+      private
+
+      def set_settings_area_flag
+        @settings_area = true
+      end
+    end
+  end
+end

data/app/controllers/spree/admin/admin_users_controller.rb

@@ -1,23 +1,23 @@
 module Spree
   module Admin
     class AdminUsersController < BaseController
-      add_breadcrumb Spree.t(:users), :admin_admin_users_path
+      include Spree::Admin::SettingsConcern
 
       skip_before_action :authorize_admin, only: [:new, :create]
       before_action :load_parent, except: [:new, :create]
       before_action :load_roles, except: [:index]
       before_action :load_invitation, only: [:new, :create]
-      before_action :load_admin_user, only: [:show, :edit, :update]
+      before_action :load_admin_user, only: [:show, :edit, :update, :destroy]
 
-      layout :choose_layout
+      helper_method :object_url
 
       # GET /admin/admin_users
       def index
         params[:q] ||= {}
         params[:q][:s] ||= 'created_at asc'
         @search = scope.includes(role_users: :role, avatar_attachment: :blob).
-                        where(role_users: { resource: @parent }).
-                        ransack(params[:q])
+                  where(role_users: { resource: @parent }).
+                  ransack(params[:q])
         @collection = @search.result
       end
 
@@ -71,6 +71,17 @@ module Spree
         end
       end
 
+      # DELETE /admin/admin_users/:id
+      def destroy
+        authorize! :destroy, @admin_user
+        if @admin_user.destroy
+          redirect_to spree.admin_admin_users_path, status: :see_other, notice: flash_message_for(@admin_user, :successfully_removed)
+        else
+          flash[:error] = @admin_user.errors.full_messages.to_sentence
+          redirect_to spree.admin_admin_users_path, status: :see_other
+        end
+      end
+
       private
 
       def permitted_params
@@ -97,7 +108,7 @@ module Spree
 
       # for self signup flow, we use the minimal layout
       def choose_layout
-        @invitation.present? ? 'spree/minimal' : 'spree/admin'
+        @invitation.present? ? 'spree/minimal' : 'spree/admin_settings'
       end
 
       def load_roles
@@ -107,6 +118,10 @@ module Spree
       def model_class
         Spree.admin_user_class
       end
+
+      def object_url
+        spree.admin_admin_user_path(@admin_user)
+      end
     end
   end
 end

data/app/controllers/spree/admin/assets_controller.rb

@@ -1,7 +1,7 @@
 module Spree
   module Admin
     class AssetsController < ResourceController
-      include Spree::Admin::SessionAssetsHelper
+      include Spree::Admin::AssetsHelper
 
       def create
         @asset = asset_type.new(permitted_resource_params)
@@ -10,10 +10,8 @@ module Spree
         authorize! :update, @asset.viewable if @asset.viewable.present? && current_vendor
 
         if @asset.save
-          @product = @asset.product || current_store.products.new
-
-          # we need to store the asset ids in the session to be able to display them in the product page
-          store_uploaded_asset_in_session(@asset) if @product.new_record?
+          # we need to store the asset ids in the session for new assets to be able to display them
+          store_uploaded_asset_in_session(@asset, @asset.viewable_type) if @asset.viewable.nil? || @asset.viewable.new_record?
         else
           flash.now[:error] = @asset.errors.full_messages.to_sentence
           render :create, status: :unprocessable_entity

data/app/controllers/spree/admin/base_controller.rb

@@ -4,6 +4,7 @@ module Spree
       include Spree::Admin::BreadcrumbConcern
 
       layout :choose_layout
+      default_form_builder Spree::Admin::FormBuilder
 
       helper 'spree/base'
       helper 'spree/admin/navigation'
@@ -33,7 +34,7 @@ module Spree
       def redirect_unauthorized_access
         if try_spree_current_user
           flash[:error] = Spree.t(:authorization_failure)
-          redirect_to spree.admin_forbidden_path, allow_other_host: true
+          redirect_back(fallback_location: spree.admin_forbidden_path)
         else
           store_location
           try_to_redirect_to_login_path