spree_admin 5.0.3 → 5.1.0.beta

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

@@ -2,9 +2,7 @@
 
 $gray-25: #F9F9F9;
 $gray-50: #F3F3F3;
-$gray-75: #F0F0F0;
-$gray-100: #EAEAEA !default;
-$gray-150: #E0E0E0 !default;
+$gray-100: #E7E5E4 !default;
 $gray-200: #D5D5D5 !default;
 $gray-300: #B3B3B3 !default;
 $gray-400: #999999 !default;
@@ -24,6 +22,15 @@ $white: #FFFFFF !default;
 $action: #F4F9FF !default;
 $action-border: #e2ecff !default;
 
+// Override Bootstrap 4.6 breakpoints
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1240px
+) !default;
+
+
 $theme-colors: (
   "white": $white,
   "black": $black,
@@ -50,7 +57,7 @@ $theme-colors: (
 );
 
 $body-color: #333 !default;
-$body-bg: #FCFCFC !default;
+$body-bg: $gray-25 !default;
 $enable-shadows: false;
 $enable-responsive-font-sizes: true;
 $font-family-sans-serif: Inter, sans-serif !default;
@@ -65,19 +72,18 @@ $line-height-base:            1.5 !default;
 $border-radius: 0.5rem !default;
 $border-radius-sm: 0.4rem !default;
 $border-radius-lg: 0.75rem !default;
-$card-border-radius: $border-radius-lg !default;
 $border-color: $gray-100 !default;
-$input-border-color: $gray-100 !default;
+$input-border-color: $border-color !default;
 $list-group-border-color: $border-color !default;
 $list-group-hover-bg: $gray-25 !default;
 $list-group-active-bg: $action !default;
 $list-group-active-border-color: $action-border !default;
 
-$thumbnail-border-color: $gray-100 !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.15rem !default;
+$input-btn-focus-width: 0.18rem !default;
 
 $card-spacer-y:                     .75rem !default;
 $card-spacer-x:                     1rem !default;
@@ -87,6 +93,9 @@ $component-active-bg:         $blue !default;
 $input-placeholder-color: $gray-500;
 $input-padding-y:         .5rem !default;
 $input-disabled-bg: $gray-50 !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;
@@ -104,6 +113,11 @@ $box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06
 $box-shadow-xs: rgba(43, 34, 51, 0.04) 0px 1px 2px !default;
 $box-shadow-lg: rgba(0, 5, 13, 0.5) 0px 4px 8px 2px;
 
+$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;
+$card-bg: $white !default;
+$card-border-radius: $border-radius-lg !default;
+
 $tooltip-border-radius: $border-radius !default;
 $tooltip-opacity: 1 !default;
 $tooltip-margin:                    0.25rem 0 !default;
@@ -149,27 +163,26 @@ $display4-weight:             400 !default;
 
 $dropdown-border-width:  0px !default;
 $dropdown-border-radius: $border-radius-lg !default;
-$dropdown-link-hover-bg: $blue !default;
-$dropdown-link-hover-color: $white !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-padding-x:    0.25rem !default;
 $dropdown-padding-y:    0.25rem !default;
-$dropdown-divider-bg: $gray-25 !default;
+$dropdown-divider-bg: $gray-50 !default;
 $dropdown-divider-margin-y: 0.25rem !default;
 $dropdown-header-color: $gray-500 !default;
 
-$modal-backdrop-bg:                 $white !default;
+$modal-backdrop-bg:                 $body-bg !default;
 $modal-backdrop-opacity:            0.8 !default;
-$modal-content-border-color: $border-color !default;
+$modal-content-border-color:        $border-color !default;
+$modal-content-border-width:        0px !default;
 $modal-header-padding: 1rem 1.25rem 1rem 1.25rem !default;
 $modal-inner-padding: 1rem 1.25rem 1rem 1.25rem !default;
 $modal-fade-transform:              translate(0, 0) !default;
 $modal-show-transform:              none !default;
 $modal-transition:                  transform .2s ease-out !default;
 $modal-scale-transform:             scale(1.02) !default;
-$modal-content-border-width: 0px !default;
 $modal-header-border-width: 1px !default;
-$modal-content-box-shadow-xs: rgba(0, 0, 0, 0.08) 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: $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-sm-up: $modal-content-box-shadow-xs !default;
 $modal-footer-margin-between: 0 !default;
 
@@ -177,6 +190,11 @@ $alert-padding-y:                   0.5rem !default;
 $alert-padding-x:                   1rem !default;
 $alert-border-radius: $border-radius-lg;
 
+$breadcrumb-bg: transparent !default;
+$breadcrumb-padding-y: 0 !default;
+$breadcrumb-padding-x: 1rem !default;
+$breadcrumb-margin-bottom: 0 !default;
+
 $embed-responsive-aspect-ratios: (
     (21 9),
     (16 9),
@@ -193,4 +211,6 @@ $code-color: $gray-600 !default;
 $list-group-bg: transparent !default;
 $list-group-item-padding-x:         1rem !default;
 
-$sidebar-width: 220px !default;
+$header-height: 52px !default;
+$sidebar-width: 220px !default;
+$sidebar-bg: $body-bg !default;

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

@@ -29,9 +29,9 @@ $select-color-optgroup-text: $dropdown-header-color !default;
 $select-color-optgroup-border: $dropdown-divider-bg !default;
 $select-color-dropdown: $dropdown-bg !default;
 $select-color-dropdown-border-top: mix($input-border-color, $input-bg, 0.8) !default;
-$select-color-dropdown-item-active: $dropdown-link-hover-bg !default;
-$select-color-dropdown-item-active-text: $dropdown-link-hover-color !default;
-$select-color-dropdown-item-create-active-text: $dropdown-link-hover-color !default;
+$select-color-dropdown-item-active: $gray-50 !default;
+$select-color-dropdown-item-active-text: $gray-900 !default;
+$select-color-dropdown-item-create-active-text: $gray-900 !default;
 $select-opacity-disabled: 0.5 !default;
 
 $select-border: 1px solid $input-border-color !default;
@@ -67,8 +67,9 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
 	z-index: $zindex-dropdown;
 	background: $select-color-dropdown;
 	border: 1px solid $dropdown-border-color; //$dropdown-fallback-border
-	border-radius: $border-radius;
+	border-radius: $border-radius-lg;
 	box-shadow: 0 6px 12px rgba(0,0,0,.175);
+	top: 110%;
 }
 
 .#{$select-ns}-dropdown {

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

@@ -224,19 +224,6 @@ strong {
   z-index: 99999999;
 }
 
-figure.admin-img-holder {
-  max-width: 275px;
-  border: 2px dashed grey;
-  border-radius: $border-radius;
-  overflow: hidden;
-  display: inline-block;
-
-  img {
-    max-width: 100%;
-    height: auto;
-  }
-}
-
 .image-container {
   .img-fluid {
     transition: transform .5s ease;
@@ -388,8 +375,8 @@ small,
 }
 
 .sortable-chosen {
-  border: 2px dashed theme-color('primary') !important;
-  border-radius: 5px !important;
+  background-color: theme-color('action') !important;
+  border: 2px dashed $blue !important;
 }
 
 .handle {
@@ -492,6 +479,9 @@ turbo-frame[busy] #turbo-spinner {
     height: 2rem;
   }
 }
+turbo-frame[loading] .spinner-border, turbo-frame[busy] .spinner-border {
+  display: block !important;
+}
 
 .fill-primary {
   & > * {
@@ -662,12 +652,32 @@ div.uppy-Root {
   border-radius: $border-radius-lg;
 }
 
+.rounded-lg-top {
+  border-top-left-radius: $border-radius-lg;
+  border-top-right-radius: $border-radius-lg;
+}
+
+.rounded-lg-bottom {
+  border-bottom-left-radius: $border-radius-lg;
+  border-bottom-right-radius: $border-radius-lg;
+}
+
+.rounded-lg-left {
+  border-top-left-radius: $border-radius-lg;
+  border-bottom-left-radius: $border-radius-lg;
+}
+
+.rounded-lg-right {
+  border-top-right-radius: $border-radius-lg;
+  border-bottom-right-radius: $border-radius-lg;
+}
+
 .turbo-progress-bar {
   background-color: theme-color('blue');
 }
 
 .tooltip-inner {
-  border: 1px solid $gray-100;
+  border: 1px solid $border-color;
   box-shadow: $box-shadow-xs;
 }
 
@@ -675,9 +685,32 @@ div.uppy-Root {
   border-radius: 50%;
   background-color: $gray-200;
   color: $gray-500;
-  font-size: 1rem;
+  font-size: $font-size-base;
   font-weight: 500;
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
+.breadcrumb {
+  gap: 0.5rem;
+  align-items: center;
+  color: $gray-500;
+  font-size: $font-size-sm;
+  
+  i {
+    opacity: 0.5;
+  }
+
+  li {
+    a {
+      color: $gray-500;
+      text-decoration: none;
+
+      &:hover {
+        color: $primary;
+      }
+    }
+  }
+}
+

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

@@ -1,6 +1,6 @@
 .custom-checkbox .custom-control-label::before {
   border-radius: 0.25rem !important;
-  border-color: $gray-200;
+  border-color: $input-border-color;
 }
 
 label {
@@ -27,11 +27,15 @@ label {
 }
 
 .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;
+
   &:disabled, &[readonly] {
     @extend .shadow-none;
     @extend .text-muted;
     background-color: $gray-50 !important;
-    border: 1px solid $gray-100 !important;
+    border: 1px solid $border-color !important;
     cursor: not-allowed;
   }
 }

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

@@ -1,8 +1,12 @@
+$sidebar-width: 345px;
+$header-height: 43px;
+
 #page-builder {
   background-color: $gray-100;
 
   #content {
     margin-left: 0;
+    padding-top: 0;
   }
 
   #main-part {
@@ -15,9 +19,8 @@
   }
 
   .nav-pills {
-    border: 1px solid $gray-100;
     border-radius: $border-radius;
-    background-color: $gray-50;
+    background-color: $gray-100;
     padding: 0.1rem;
 
     .nav-link {
@@ -28,7 +31,7 @@
 
       &.active {
         background-color: $white;
-        border: 1px solid $gray-100;
+        border: 1px solid $border-color;
       }
     }
   }
@@ -39,8 +42,8 @@
 
 #page-builder-header {
   z-index: 1031;
-  border-bottom: 1px solid $gray-150;
-
+  border-bottom: 1px solid $border-color;
+  height: $header-height;
   nav {
     width: 100%;
     display: flex;
@@ -50,17 +53,20 @@
   }
 }
 #page-builder-sidebar {
-  width: 345px;
-  top: 43px;
+  position: fixed;
+  width: $sidebar-width;
+  top: $header-height;
   left: 0px;
   background-color: $body-bg;
-  border-right: 1px solid $gray-150;
-
+  border-right: 1px solid $border-color;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  height: calc(100vh - $header-height);
   .sidebar-header {
     height: 48px;
-    padding: 0.5rem 1rem;
-    background-color: $gray-25;
-    border-bottom: 1px solid $gray-50;
+    padding: 0.5rem 0.7rem;
+    background-color: $body-bg;
+    border-bottom: 1px solid $border-color;
     display: flex;
     align-items: center;
     margin-bottom: 0.5rem;
@@ -74,17 +80,24 @@
     position: fixed;
     bottom: 0;
     left: 0;
-    width: 345px;
-    padding: 0.5rem 1rem;
-    background-color: $gray-25;
-    border-top: 1px solid $gray-50;
+    width: calc($sidebar-width - 1px);
+    padding: 0.5rem;
+    background-color: $body-bg;
+    box-shadow: 0 0 0 1px $border-color;
     z-index: 1031;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .list-group-item {
+    padding: 0.5rem 0.5rem;
   }
 }
 #page-builder-preview {
   border-radius: $border-radius;
   border: 1px solid $gray-300;
-  margin-top: 60px;
+  margin-top: calc($header-height + 1rem);
 }
 
 
@@ -139,10 +152,6 @@
   }
 }
 
-main#content {
-  padding-top: 0 !important;
-}
-
 .editor-add-section {
   position: fixed;
   right: 20px;

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

@@ -0,0 +1,22 @@
+module Spree
+  module Admin
+    module BreadcrumbConcern
+      extend ActiveSupport::Concern
+
+      included do
+        class_attribute :breadcrumb_icon
+        before_action :add_breadcrumb_icon_instance_var
+      end
+
+      class_methods do
+        def add_breadcrumb_icon(icon_name)
+          self.breadcrumb_icon = icon_name
+        end
+      end
+
+      def add_breadcrumb_icon_instance_var
+        @breadcrumb_icon = self.class.breadcrumb_icon
+      end
+    end
+  end
+end

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

@@ -0,0 +1,22 @@
+module Spree
+  module Admin
+    module PreferencesConcern
+      extend ActiveSupport::Concern
+
+      private
+
+      def clear_empty_password_preferences(param_name)
+        if params[param_name].present?
+          password_preferences = @object.preferences_of_type(:password)
+          password_preferences.each do |preference|
+            preference_key = "preferred_#{preference}"
+
+            if params.dig(param_name, preference_key).blank? && @object.preferences[preference].present?
+              params[param_name].delete(preference_key)
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,22 @@
+module Spree
+  module Admin
+    module ProductsBreadcrumbConcern
+      extend ActiveSupport::Concern
+
+      included do
+        add_breadcrumb_icon 'box'
+        add_breadcrumb Spree.t(:products), :admin_products_path
+
+        before_action :add_breadcrumb_for_product, only: [:edit, :update]
+      end
+
+      private
+
+      def add_breadcrumb_for_product
+        return unless @product.present?
+        return if @product.new_record?
+        add_breadcrumb @product.name, spree.edit_admin_product_path(@product)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,23 @@
+module Spree
+  module Admin
+    module PromotionsBreadcrumbConcern
+      extend ActiveSupport::Concern
+
+      included do
+        add_breadcrumb_icon 'discount'
+        add_breadcrumb Spree.t(:promotions), :admin_promotions_path
+
+        before_action :add_breadcrumb_for_promotion
+      end
+
+      private
+
+      def add_breadcrumb_for_promotion
+        return unless @promotion.present?
+        return if @promotion.new_record?
+
+        add_breadcrumb @promotion.name, spree.admin_promotion_path(@promotion)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,12 @@
+module Spree
+  module Admin
+    module StorefrontBreadcrumbConcern
+      extend ActiveSupport::Concern
+
+      included do
+        add_breadcrumb_icon 'building-store'
+        add_breadcrumb Spree.t('admin.storefront'), :admin_themes_path
+      end
+    end
+  end
+end

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

@@ -81,6 +81,10 @@ module Spree
           spree.admin_users_url
         end
       end
+
+      def permitted_resource_params
+        params.require(:address).permit(Spree::PermittedAttributes.address_attributes)
+      end
     end
   end
 end

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

@@ -0,0 +1,112 @@
+module Spree
+  module Admin
+    class AdminUsersController < BaseController
+      add_breadcrumb Spree.t(:users), :admin_admin_users_path
+
+      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]
+
+      layout :choose_layout
+
+      # 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])
+        @collection = @search.result
+      end
+
+      # GET /admin/admin_users/:id
+      def show
+        authorize! :read, @admin_user
+        @role_users = @admin_user.role_users.includes(:role).where(resource: @parent)
+
+        add_breadcrumb @admin_user.email, spree.admin_admin_user_path(@admin_user)
+      end
+
+      # GET /admin/admin_users/new?token=<token>
+      # this is a self signup flow for admin users from the invitation email
+      def new
+        @admin_user = Spree.admin_user_class.new
+        @admin_user.email = @invitation.email
+      end
+
+      # POST /admin/admin_users
+      # this is a self signup flow for admin users from the invitation email
+      def create
+        @admin_user = Spree.admin_user_class.new(permitted_params)
+        @invitation.invitee = @admin_user
+        if @admin_user.save && @invitation.accept!
+          # Automatically log in the user after successful signup
+          # if Devise is installed
+          if defined?(sign_in)
+            sign_in(Spree.admin_user_class.model_name.singular_route_key, @admin_user)
+          end
+          redirect_to spree.admin_path
+        else
+          render :new, status: :unprocessable_entity
+        end
+      end
+
+      # GET /admin/admin_users/:id/edit
+      def edit
+        authorize! :update, @admin_user
+      end
+
+      # PUT /admin/admin_users/:id
+      def update
+        authorize! :update, @admin_user
+
+        permitted_params = params.require(:admin_user).permit(permitted_user_attributes | [spree_role_ids: []])
+
+        if @admin_user.update(permitted_params)
+          redirect_to spree.admin_admin_user_path(@admin_user), status: :see_other, notice: flash_message_for(@admin_user, :successfully_updated)
+        else
+          render :edit, status: :unprocessable_entity
+        end
+      end
+
+      private
+
+      def permitted_params
+        params.require(:admin_user).permit(:email, :password, :password_confirmation, :first_name, :last_name)
+      end
+
+      def load_invitation
+        raise ActiveRecord::RecordNotFound if params[:token].blank?
+
+        @invitation = Spree::Invitation.pending.not_expired.find_by!(token: params[:token])
+      end
+
+      def load_parent
+        @parent = current_store
+      end
+
+      def scope
+        @parent.users.accessible_by(current_ability, :manage)
+      end
+
+      def load_admin_user
+        @admin_user = Spree.admin_user_class.accessible_by(current_ability).find(params[:id])
+      end
+
+      # for self signup flow, we use the minimal layout
+      def choose_layout
+        @invitation.present? ? 'spree/minimal' : 'spree/admin'
+      end
+
+      def load_roles
+        @roles = Spree::Role.accessible_by(current_ability)
+      end
+
+      def model_class
+        Spree.admin_user_class
+      end
+    end
+  end
+end

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

@@ -3,14 +3,8 @@ module Spree
     class AssetsController < ResourceController
       include Spree::Admin::SessionAssetsHelper
 
-      ALLOWED_ASSET_TYPES = ['Spree::Asset', 'Spree::Image'].freeze
-
       def create
-        if ALLOWED_ASSET_TYPES.include?(asset_type)
-          @asset = asset_type.constantize.new(permitted_resource_params)
-        else
-          raise "Invalid asset type"
-        end
+        @asset = asset_type.new(permitted_resource_params)
 
         # we only should check this for vendor users
         authorize! :update, @asset.viewable if @asset.viewable.present? && current_vendor
@@ -47,7 +41,7 @@ module Spree
       private
 
       def permitted_resource_params
-        params.require(:asset).permit(:type, :viewable_id, :viewable_type, :attachment, :alt, :position)
+        params.require(:asset).permit(Spree::PermittedAttributes.asset_attributes)
       end
 
       def create_turbo_stream_enabled?
@@ -63,7 +57,11 @@ module Spree
       end
 
       def asset_type
-        permitted_resource_params[:type] || model_class.to_s
+        allowed_asset_types.find { |type| type.to_s == permitted_resource_params[:type] } || model_class
+      end
+
+      def allowed_asset_types
+        [Spree::Asset, Spree::Image]
       end
     end
   end