workarea-admin 3.4.45 → 3.5.0.beta.1

data/app/assets/stylesheets/workarea/admin/components/_chart_legend.scss

@@ -1,22 +1,19 @@
 /*------------------------------------*\
     #CHART-LEGEND
-    TODO remove in v4, not used >= 3.4
 \*------------------------------------*/
 
-$chart-legend-dot-size:     $font-size !default;
+$chart-legend-list-item-disabled-opacity: .25 !default;
 
+.chart-legend {}
 
-.chart-legend {
-    @extend %list-reset;
-}
+    .chart-legend__list {
+        @extend %inline-list;
+    }
 
-    .chart-legend__item {}
-
-        .chart-legend__color-dot {
-            display: inline-block;
-            width: $chart-legend-dot-size;
-            height: $chart-legend-dot-size;
-            vertical-align: middle;
+        .chart-legend__list-item {
+            margin: 0 $spacing-unit;
         }
 
-        .chart-legend__label {}
+        .chart-legend__list-item--disabled {
+            opacity: $chart-legend-list-item-disabled-opacity;
+        }

data/app/assets/stylesheets/workarea/admin/components/_checkbox.scss

@@ -12,63 +12,89 @@ $checkbox-icon-size: 16px !default;
 
 
 .checkbox {
+    position: relative;
     display: inline-block;
+    cursor: pointer;
 }
 
+.checkbox--no-label {}
+
 .checkbox--indeterminate {}
 
     /**
-     * Actual input hidden off page
+     * Hide the input off-page
      */
     .checkbox__input {
         @extend %visually-hidden;
     }
 
     /**
-     * Default UI State
-     * 1. Icon
+     * Checkbox UI
+     * 1. Required for backwards compatibility
      */
     .checkbox__label {
-        position: relative;
         display: inline-block;
-        width: $checkbox-size;
-        height: $checkbox-size;
-        background-color: $checkbox-bg-color;
-        border-radius: $checkbox-border-radius;
-        box-shadow: 0 0 0 1px $checkbox-border-color;
-        appearance: none;
-        vertical-align: middle;
-        font-size: 0;
+        line-height: 1;
+
+        .index-table &, /* [1] */
+        .checkbox--no-label & {
+            max-width: $checkbox-size + 1px;
+            max-height: $checkbox-size + 1px;
+            overflow: hidden;
+        }
+
+        &::before {
+            position: relative;
+            display: inline-block;
+            width: $checkbox-size;
+            height: $checkbox-size;
+            background-color: $checkbox-bg-color;
+            border-radius: $checkbox-border-radius;
+            border: 1px solid $checkbox-border-color;
+            appearance: none;
+            vertical-align: middle;
+            font-size: 0;
+            margin-right: $spacing-unit;
+            content: '';
+        }
 
-        &::after { /* [1] */
-            @include center;
+        &::after {
+            position: absolute;
+            left: 0;
+            top: 2px;
             display: inline-block;
             font-weight: bold;
+            width: $checkbox-icon-size;
+            text-align: center;
             font-size: $checkbox-icon-size;
             color: $checkbox-icon-color;
         }
     }
 
     /**
-     * Checked UI State
-     * 1. Icon
+     * State management
+     * 1. Checked
+     * 2. Indeterminate
      */
-    .checkbox__input:checked ~ .checkbox__label {
-        background-color: $checkbox-bg-color-active;
+    .checkbox__input:checked ~ .checkbox__label { /* [1] */
+        &::before {
+            background-color: $checkbox-bg-color-active;
+        }
 
-        &::after { /* [1] */
+        &::after {
             content: '✔';
         }
     }
 
     /**
      * Indeterminate UI State
-     * 1. Icon
      */
-    .checkbox--indeterminate .checkbox__label {
-        background-color: $checkbox-bg-color-active;
+    .checkbox--indeterminate .checkbox__label { /* [2] */
+        &::before {
+            background-color: $checkbox-bg-color-active;
+        }
 
-        &::after { /* [1] */
+        &::after {
             content: '–';
         }
     }

data/app/assets/stylesheets/workarea/admin/components/_content_block_list.scss

@@ -11,7 +11,6 @@ $content-block-list-item-bg-color:  $white !default;
 $content-block-icon-size:   24px !default;
 $content-block-icon-color:  $gray !default;
 
-
 .content-block-list {
     @extend %list-reset;
     border-bottom: $content-block-list-border;
@@ -38,10 +37,14 @@ $content-block-icon-color:  $gray !default;
             fill: $content-block-icon-color;
         }
 
+        .content-block-list__segments {
+            float: right;
+        }
+
         .content-block-list__name {
             @extend %truncate;
             padding: 0 ($spacing-unit * 2);
-            width: calc(100% - #{$content-block-icon-size * 2});
+            width: calc(100% - #{$content-block-icon-size * 3});
             float: left;
             font-size: 1.16rem;
             line-height: $content-block-icon-size;
@@ -55,4 +58,3 @@ $content-block-icon-color:  $gray !default;
         .content-block-list__icon--move {
             cursor: move;
         }
-

data/app/assets/stylesheets/workarea/admin/components/_date_marker.scss

@@ -3,9 +3,12 @@
 \*------------------------------------*/
 
 $date-marker-min-width:        50px !default;
+$date-marker-min-height:       48px !default;
 $date-marker-background-color: $light-gray !default;
 $date-marker-month-font-size:  12px !default;
 $date-marker-day-font-size:    20px !default;
+$date-marker-arrow-size: 12px !default;
+$date-marker-border-radius: $global-border-radius !default;
 
 .date-marker {
     position: relative;
@@ -13,15 +16,25 @@ $date-marker-day-font-size:    20px !default;
     margin-right: $horizontal-margin;
     padding: $spacing-unit;
     min-width: $date-marker-min-width;
+    min-height: $date-marker-min-height;
     float: right;
     font-weight: bold;
     line-height: 1.2;
     text-align: center;
     background-color: $date-marker-background-color;
-}
+    border-radius: $date-marker-border-radius;
 
-.date-marker--no-date {
-    padding: 0;
+    &::before {
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translate(50%, -50%) rotate(45deg);
+        display: block;
+        width: $date-marker-arrow-size;
+        height: $date-marker-arrow-size;
+        background-color: $date-marker-background-color;
+        content: '';
+    }
 }
 
     .date-marker__annotation {
@@ -33,10 +46,18 @@ $date-marker-day-font-size:    20px !default;
 
     .date-marker__month {
         font-size: $date-marker-month-font-size;
+        line-height: 1;
+        text-transform: uppercase;
     }
 
     .date-marker__day {
         margin-bottom: 0;
         font-size: $date-marker-day-font-size;
+        line-height: 1;
+    }
+
+    .date-marker__unknown {
+        @include center;
+        font-size: $date-marker-day-font-size;
     }
 

data/app/assets/stylesheets/workarea/admin/components/_index_table.scss

@@ -4,6 +4,7 @@
 
 $index-table-row-color:  $black !default;
 $index-table-row-inactive-color:  $gray !default;
+$index-table-row-highlight-color: $green !default;
 $index-table-image-size:  32px !default;
 
 /**
@@ -31,6 +32,10 @@ $index-table-image-size:  32px !default;
         color: $index-table-row-color;
     }
 
+    .index-table__row--highlight {
+        background: rgba($index-table-row-highlight-color, 0.2);
+    }
+
     .index-table__row--inactive {
         color: $index-table-row-inactive-color;
     }

data/app/assets/stylesheets/workarea/admin/components/_jump_to_menu.scss

@@ -0,0 +1,57 @@
+/*------------------------------------*\
+    #JUMP-TO-MENU
+\*------------------------------------*/
+
+$jump-to-menu-bg-color: $white !default;
+$jump-to-menu-border-color: $light-gray !default;
+
+.jump-to-menu {
+    display: none;
+
+    @include respond-to($wide-breakpoint) {
+        display: block;
+    }
+}
+
+.jump-to-menu--with-workflow-bar {}
+
+
+    .jump-to-menu__container {
+        @include global-box-shadow;
+        position: fixed;
+        bottom: 0;
+        right: 0;
+        width: inherit;
+        max-height: calc(100vh - #{$global-header-height} - #{$spacing-unit * 2});
+        margin-right: $spacing-unit;
+        background: $jump-to-menu-bg-color;
+        border: 1px solid $jump-to-menu-border-color;
+        border-radius: 5px 5px 0 0;
+        overflow-y: auto;
+
+        .jump-to-menu--with-workflow-bar & {
+            bottom: $global-workflow-bar-height;
+            max-height: calc(100vh - #{$global-header-height} - #{$global-workflow-bar-height} - #{$spacing-unit * 2});
+        }
+    }
+
+
+        .jump-to-menu__list {
+            margin: 0;
+            padding: ($spacing-unit / 2) ($spacing-unit * 2);
+            list-style: none;
+        }
+
+            .jump-to-menu__list-item { margin: $spacing-unit 0; }
+
+
+                .jump-to-menu__link {
+                    display: inline-block;
+                    text-decoration: none;
+                    line-height: 1.25;
+
+                    &:hover { text-decoration: underline; }
+                }
+
+                .jump-to-menu__link--1 {}
+                .jump-to-menu__link--2 { padding-left: 1em; font-size: 0.9rem; }

data/app/assets/stylesheets/workarea/admin/components/_product_summary.scss

@@ -7,6 +7,10 @@ $product-summary-muted-bg-color: $light-gray !default;
 $product-summary-box-shadow-color:  $gray !default;
 $product-summary-action-color:      $blue !default;
 
+$product-summary-status-color: $white !default;
+$product-summary-status-issue-color: $red !default;
+$product-summary-status-issue-low-inventory-color: $orange !default;
+
 $product-summary-image-outline:  2px solid $gray !default;
 
 
@@ -36,6 +40,35 @@ $product-summary-image-outline:  2px solid $gray !default;
     background: $product-summary-muted-bg-color;
 }
 
+.product-summary--status-issue {
+    @include global-box-shadow($product-summary-status-issue-color, tight);
+
+    &.product-summary--low-inventory {
+        @include global-box-shadow($product-summary-status-issue-low-inventory-color, tight);
+    }
+}
+
+
+    .product-summary__status {
+        @include center;
+        display: none;
+        color: $product-summary-status-color;
+        background: $product-summary-status-issue-color;
+        width: 80%;
+        text-align: center;
+        font-weight: bold;
+        padding: ($spacing-unit / 2) $spacing-unit;
+        border-radius: $global-border-radius;
+
+        .product-summary--status-issue & {
+            display: block;
+        }
+
+        .product-summary--low-inventory & {
+            background: $product-summary-status-issue-low-inventory-color;
+        }
+    }
+
 
     .product-summary__remove {
         display: block;
@@ -76,3 +109,16 @@ $product-summary-image-outline:  2px solid $gray !default;
         display: block;
         text-align: center;
     }
+
+
+    /**
+     * For Products that will not display on the Storefront we reduce opacity.
+     */
+    .product-summary__media,
+    .product-summary__name,
+    .product-summary__graph {
+        .product-summary--inactive &,
+        .product-summary--out-of-stock & {
+            opacity: 0.5;
+        }
+    }

data/app/assets/stylesheets/workarea/admin/components/_toggle_button.scss

@@ -20,10 +20,6 @@ $toggle-button-status-negative-color:  $red !default;
     display: inline-block;
 }
 
-.toggle-button--disabled {
-    opacity: 0.5;
-}
-
     /**
      * 1. provides positiioning context for `.toggle-button__label`
      * 2. height + vertical margin = `.text-box` height
@@ -82,6 +78,7 @@ $toggle-button-status-negative-color:  $red !default;
             font-size:   12px;
             font-weight: bold;
             line-height: 24px; /* [1] */
+            text-align: left;
             text-transform: uppercase;
             border: 1px solid $toggle-button-label-border-color;
             border-radius: 12px;

data/app/assets/stylesheets/workarea/admin/email/_base.scss

@@ -4,6 +4,7 @@
 
 body {
     margin: 0;
+    padding: 0 !important;
 }
 
 body > center {
@@ -12,10 +13,16 @@ body > center {
 
 body > center,
 body > center > table {
-    background: $email-background-color;
     text-align: left;
 }
 
+// Required to ensure background is properly displayed across clients
+body,
+body > center,
+.mso-wrapper {
+    background: $email-background-color;
+}
+
 table {
     border: 0;
     -premailer-cellpadding: 0;
@@ -35,14 +42,35 @@ img {
 }
 
 a {
-    color: $link-color;
+    color: $blue;
+    text-decoration: underline;
 }
 
 h1, h2, h3, h4, h5, h6, p {
     font-family: $font-family;
+    margin-top: 0;
+}
+
+h1 {
+    font-size: 26px;
 }
 
 p {
     font-size: $font-size;
     line-height: $line-height;
 }
+
+hr {
+    background-color: $light-gray;
+    border: 0;
+    height: 1px;
+    margin: ($spacing-unit * 2) 0;
+}
+
+ul {
+    padding-left: $spacing-unit * 3;
+}
+
+li {
+    margin: $spacing-unit 0;
+}

data/app/assets/stylesheets/workarea/admin/email/_components.scss

@@ -1,24 +1,33 @@
 /*------------------------------------*\
     #LAYOUT
 \*------------------------------------*/
+
+$email-container-font-color: $dark-gray !default;
 $email-container-main-bg-color: $white !default;
+$email-container-main-shadow-color: $light-gray !default;
+$email-container-main-accent-color: $blue !default;
 
 .email-container {
-    margin: auto;
+    margin: 0 auto;
     text-align: center;
+    font-family: $font-family;
+    color: $email-container-font-color;
 }
 
 .email-container--main {
+    box-shadow: 0 0 10px $email-container-main-shadow-color;
+    border-bottom: 8px solid $email-container-main-accent-color;
+
     & > tr > td {
         background: $email-container-main-bg-color;
-        text-align: center;
+        text-align: left;
         vertical-align: top;
-        padding: $spacing-unit;
+        padding: $spacing-unit * 3;
     }
 }
 
 .email-header {
-    padding: ($spacing-unit * 2) 0;
+    padding: ($spacing-unit * 4) 0;
 }
 
 .email-footer {
@@ -26,6 +35,10 @@ $email-container-main-bg-color: $white !default;
     font-family: $font-family;
 }
 
+.section {
+    padding: ($spacing-unit * 2) 0;
+}
+
 
 /*------------------------------------*\
     #PREHEADER-TEXT
@@ -47,10 +60,14 @@ $email-container-main-bg-color: $white !default;
     #LOGO
 \*------------------------------------*/
 .logo {
+    display: inline-block;
+    vertical-align: top;
     text-decoration: none;
 }
 
-    .logo__image {}
+    .logo__image {
+        display: block;
+    }
 
 
 /*------------------------------------*\
@@ -112,3 +129,47 @@ $item-table-border-color: $light-gray !default;
     }
 }
 
+/*------------------------------------*\
+    #BOX
+\*------------------------------------*/
+$box-border-color: $blue !default;
+
+.box {
+    border: 1px solid $box-border-color;
+    border-left-width: 8px;
+    padding: $spacing-unit * 2;
+    margin: ($spacing-unit * 4) 0;
+}
+
+/*------------------------------------*\
+    #COMMENT
+\*------------------------------------*/
+
+.comment {
+    @extend .box;
+    margin: $spacing-unit * 4;
+}
+
+    .comment__author-info {
+        display: block;
+        font-size: $font-size - 2;
+        font-style: italic;
+        margin-top: $spacing-unit * 2;
+    }
+
+
+/*------------------------------------*\
+    #BUTTON
+\*------------------------------------*/
+$button-color: $white !default;
+$button-bg-color: $blue !default;
+
+.button {
+    display: inline-block;
+    padding: $spacing-unit ($spacing-unit * 4);
+    background: $button-bg-color;
+    color: $button-color;
+    text-decoration: none;
+    font-weight: bold;
+    border-radius: 11px;
+}

data/app/assets/stylesheets/workarea/admin/email/_helpers.scss

@@ -10,6 +10,22 @@
 .align-right { text-align: right; }
 
 
+/**
+ * Display helpers
+ */
+.hidden {
+    display: none;
+    font-size: 1px;
+    line-height: 1px;
+    max-height: 0px;
+    max-width: 0px;
+    opacity: 0;
+    overflow: hidden;
+    mso-hide: all;
+    font-family: sans-serif;
+}
+
+
 /**
  * Responsive helpers
  *
@@ -61,9 +77,4 @@
     table.center-on-narrow {
         display: inline-block !important;
     }
-
-    /* Adjust typography on small screens to improve readability */
-    .email-container p {
-        font-size: $font-size + 2px !important;
-    }
 }

data/app/assets/stylesheets/workarea/admin/email/{_settings.scss → _settings.scss.erb}

@@ -7,10 +7,10 @@
  * imported, effectively adjusting the theme of the site for the site's emails.
  */
 
-$font-size: 16px !default;
-
 @import '../settings/colors';
 @import '../settings/global';
+
+$font-size: 16px !default;
 @import '../settings/typography';
 
 
@@ -18,5 +18,5 @@ $font-size: 16px !default;
  * Email-specific variables are defined separately.
  */
 
-$email-max-width: 600px !default;
-$email-background-color: $light-gray !default;
+$email-max-width: <%= Workarea.config.admin_email_width %>px !default;
+$email-background-color: $off-white !default;

data/app/controllers/workarea/admin/application_controller.rb

@@ -4,7 +4,6 @@ module Workarea
       include Turbolinks::Controller
       include Authentication
       include Authorization
-      include AdminGuestBrowsing
       include Impersonation
       include CurrentRelease
       include Visiting
@@ -17,7 +16,6 @@ module Workarea
       before_action :require_login
       before_action :require_admin
       before_action :check_authorization, except: :dashboard
-      before_action :touch_auth_cookie, unless: -> { impersonating? || admin_browsing_as_guest? }
       before_action :set_variant
       before_action :setup_alerts, if: :current_layout
       around_action :audit_log
@@ -90,7 +88,7 @@ module Workarea
       end
 
       def inline_cache_busting
-        Sidekiq::Callbacks.inline(BustDiscountCache, BustNavigationCache, BustSkuCache) { yield }
+        Sidekiq::Callbacks.inline(BustNavigationCache, BustSkuCache) { yield }
       end
 
       def enable_auto_redirect
@@ -102,7 +100,7 @@ module Workarea
       end
 
       def track_index_filters
-        session[:last_index_path] = request.fullpath unless request.xhr? || request.format.json?
+        session[:last_index_path] = request.fullpath
       end
     end
   end

data/app/controllers/workarea/admin/bulk_action_sequential_product_edits_controller.rb

@@ -64,21 +64,19 @@ module Workarea
       end
 
       def set_details
-        @product.details = HashUpdate.new(
-          original: @product.details,
+        HashUpdate.new(
           adds: params[:new_details],
           updates: params[:details],
           removes: params[:details_to_remove]
-        ).result
+        ).apply(@product.details)
       end
 
       def set_filters
-        @product.filters = HashUpdate.new(
-          original: @product.filters,
+        HashUpdate.new(
           adds: params[:new_filters],
           updates: params[:filters],
           removes: params[:filters_to_remove]
-        ).result
+        ).apply(@product.filters)
       end
 
       def set_images

data/app/controllers/workarea/admin/bulk_variant_saving.rb

@@ -21,9 +21,8 @@ module Workarea
         end
 
         if attributes[:inventory].present?
-          inventory = Inventory::Sku.find_or_initialize_by(id: variant.sku)
+          inventory = Inventory::Sku.find_or_create_by(id: variant.sku)
           inventory.available = attributes[:inventory]
-          inventory.policy = 'standard' if inventory.new_record?
           inventory.save!
         end
       end