solidus_backend 1.3.2 → 1.4.0.beta1

data/app/assets/javascripts/spree/backend/templates/variants/line_items_autocomplete_stock.hbs

@@ -61,7 +61,7 @@
 
   <fieldset class="no-border-bottom">
     <legend align="center" class="stock-location">
-      <button class="add_variant no-text fa fa-plus icon_link"  title="{{ t "add" }}" data-action="add">{{ t "add" }}</button>
+      <button class="add_variant"  title="{{ t "add" }}" data-action="add">{{ t "add" }}</button>
     </legend>
   </fieldset>
 </fieldset>

data/app/assets/javascripts/spree/backend/templates/variants/split.hbs

@@ -1,27 +1,25 @@
-<tr class='stock-item-split' data-variant-id='{{variant.id}}'>
-  <td colspan='2'>
-    Move {{variant.name}} to
-  </td>
-  <td colspan='2'>
-  <select name="item_stock_location" id='item_stock_location' style='width:100%;'>
-    <option></option>
-    <optgroup label="{{ t "existing_shipments" }}">
-      {{#each shipments}}
-      <option data-shipment-number='{{this.number}}' value='{{this.stock_location_id}}'>{{this.stock_location.name}}({{this.number}})</option>
-      {{/each}}
-    </optgroup>
-    <optgroup label="{{ t "new_shipment_at_location" }}">
-      {{#each variant.stock_items}}
-        <option data-new-shipment='true' value='{{this.stock_location_id}}'>{{this.stock_location_name}}&nbsp;({{this.count_on_hand}} on hand)</option>
-      {{/each}}
-    </optgroup>
-    </select>
-  </td>
-  <td>
-    <input class="quantity" id="item_quantity" type="number" min="1" value="1" max="{{max_quantity}}">
-  </td>
-  <td class='actions'>
-    <a href='#' class='save-split icon_link fa fa-ok no-text with-tip' title='Save'></a>
-    <a href='#' class='cancel-split icon_link fa fa-cancel no-text with-tip' title='Cancel'></a>
-  </td>
-</tr>
+<td colspan='2'>
+  Move {{variant.name}} to
+</td>
+<td colspan='2'>
+<select name="item_stock_location" style='width:100%;'>
+  <option></option>
+  <optgroup label="{{ t "existing_shipments" }}">
+    {{#each shipments}}
+    <option value='shipment:{{this.number}}'>{{this.stock_location.name}}({{this.number}})</option>
+    {{/each}}
+  </optgroup>
+  <optgroup label="{{ t "new_shipment_at_location" }}">
+    {{#each variant.stock_items}}
+      <option value='stock_location:{{this.stock_location_id}}'>{{this.stock_location_name}}&nbsp;({{this.count_on_hand}} on hand)</option>
+    {{/each}}
+  </optgroup>
+  </select>
+</td>
+<td>
+  <input class="quantity" id="item_quantity" type="number" min="1" value="1" max="{{max_quantity}}">
+</td>
+<td class='actions'>
+  <a href='#' class='save-split icon_link fa fa-ok no-text with-tip' title='Save'></a>
+  <a href='#' class='cancel-split icon_link fa fa-cancel no-text with-tip' title='Cancel'></a>
+</td>

data/app/assets/javascripts/spree/backend/user_picker.js

@@ -9,10 +9,14 @@ $.fn.userAutocomplete = function () {
     minimumInputLength: 1,
     multiple: true,
     initSelection: function (element, callback) {
-      $.get(Spree.routes.users_api, {
-        ids: element.val()
-      }, function (data) {
-        callback(data.users);
+      Spree.ajax({
+        url: Spree.routes.users_api,
+        data: {
+          ids: element.val()
+        },
+        success: function(data) {
+          callback(data.users);
+        }
       });
     },
     ajax: {
@@ -21,10 +25,12 @@ $.fn.userAutocomplete = function () {
       params: { "headers": { "X-Spree-Token": Spree.api_key } },
       data: function (term) {
         return {
-          m: 'or',
-          email_start: term,
-          addresses_firstname_start: term,
-          addresses_lastname_start: term
+          q: {
+            m: 'or',
+            email_start: term,
+            addresses_firstname_start: term,
+            addresses_lastname_start: term
+          }
         };
       },
       results: function (data) {

data/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss

@@ -148,7 +148,7 @@ $font-family-monospace:      Menlo, Monaco, Consolas, "Courier New", monospace !
 $font-family-base:           $font-family-sans-serif !default;
 
 // Pixel value used to responsively scale all typography. Applied to the `<html>` element.
-$font-size-root:             16px !default;
+$font-size-root:             15px !default;
 
 $font-size-base:             1rem !default;
 $font-size-lg:               1.25rem !default;
@@ -624,9 +624,9 @@ $thumbnail-border-radius:     $border-radius !default;
 $breadcrumb-padding-vertical:   .75rem !default;
 $breadcrumb-padding-horizontal: 1rem !default;
 
-$breadcrumb-bg:                 $gray-lighter !default;
+$breadcrumb-bg:                 none !default;
 $breadcrumb-divider-color:      $gray-light !default;
-$breadcrumb-active-color:       $gray-light !default;
+$breadcrumb-active-color:       $color-4 !default;
 $breadcrumb-divider:            "/" !default;
 
 

data/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss

@@ -0,0 +1,4 @@
+.breadcrumb {
+  font-size: 16px;
+  margin-bottom: 0;
+}

data/app/assets/stylesheets/spree/backend/components/_date-picker.scss

@@ -86,7 +86,6 @@
 
     .ui-datepicker-title {
       color: $color-1;
-      text-transform: uppercase;
       font-size: 85% !important;
       padding: 6px 10px;
     }

data/app/assets/stylesheets/spree/backend/components/_hint.scss

@@ -0,0 +1,3 @@
+.hint-tooltip {
+  cursor: pointer;
+}

data/app/assets/stylesheets/spree/backend/components/_navigation.scss

@@ -13,7 +13,6 @@ nav.menu {
         position: relative;
         text-align: left;
         border: 1px solid transparent;
-        text-transform: uppercase;
         font-weight: $font-weight-bold;
         font-size: 90%;
       }

data/app/assets/stylesheets/spree/backend/components/_progress.scss

@@ -3,6 +3,7 @@
   position: fixed;
   top: 0;
   right: 0;
+  bottom: 0;
   z-index: 1000;
   opacity: 0.8;
   @include calc(width, "100% - #{$width-sidebar}");
@@ -10,9 +11,12 @@
   .wrapper {
     border-radius: 10px;
     position: absolute;
+    top: 50%;
     left: 50%;
     width: 200px;
+    height: 100px;
     margin-left: -100px;
+    margin-top: -50px;
     padding: 11px 0;
     background-color: $color-3;
     color: $color-1;
@@ -24,10 +28,9 @@
   }
 
   .progress-message {
-    font-size: 120%;
+    font-size: 130%;
     font-weight: $font-weight-bold;
     margin-top: 20px;
-    text-transform: uppercase;
   }
 }
 

data/app/assets/stylesheets/spree/backend/components/_sidebar.scss

@@ -1,15 +1,12 @@
-// Sidebar
-//---------------------------------------------------
-#sidebar {
+body:not(.new-layout) #sidebar {
   overflow: visible;
   border-top: 1px solid $color-border;
   margin-top: 17px;
 
   .sidebar-title {
     color: $color-2;
-    text-transform: uppercase;
     text-align: center;
-    font-size: 14px;
+    font-size: 16px;
     font-weight: $font-weight-bold;
 
     > span {
@@ -30,3 +27,15 @@
     }
   }
 }
+
+body.new-layout .content-sidebar {
+  ul {
+    padding-left: 0;
+  }
+}
+
+body.new-layout .sidebar-title {
+  @include line-through();
+  color: $color-2;
+  font-size: 14px;
+}

data/app/assets/stylesheets/spree/backend/components/_states.scss

@@ -1,6 +1,5 @@
 .state {
-  text-transform: uppercase;
-  font-size: 80%;
+  font-size: 90%;
   font-weight: $font-weight-bold;
 
   &:before {

data/app/assets/stylesheets/spree/backend/globals/_mixins.css

@@ -0,0 +1,2 @@
+@import "mixins/caret";
+@import "mixins/line_through";

data/app/assets/stylesheets/spree/backend/globals/mixins/_line_through.scss

@@ -0,0 +1,22 @@
+@mixin line-through($color: $color-2, $background: $color-1) {
+  position: relative;
+  text-align: center;
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: calc(50% - 1px);
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background: $color;
+    z-index: 0;
+  }
+
+  > * { // usually a <span> but we'll use an * just in case
+    @include padding(null 1rem);
+    position: relative;
+    background: $background;
+    z-index: 1;
+  }
+}

data/app/assets/stylesheets/spree/backend/plugins/_select2.scss

@@ -30,6 +30,7 @@
     .select2-search-choice-close {
       @extend .fa;
       @extend .fa-times;
+      display: none;
       margin-top: 2px;
       font-size: 100% !important;
       background-image: none !important;
@@ -111,7 +112,8 @@
 }
 
 .select2-results {
-  padding-left: 0 !important;
+  margin: 4px 0;
+  padding: 0 4px;
 
   li {
     font-size: 85% !important;
@@ -123,7 +125,7 @@
 
     &.select2-highlighted {
       .select2-result-label {
-        &, h6 {
+        &, .media-heading, .media-content, .customer-email {
           color: $color-1 !important;
         }
       }
@@ -134,6 +136,14 @@
       min-height: 22px;
       clear: both;
       overflow: auto;
+
+      .variant-autocomplete-item {
+        .media-content {
+          dd {
+            margin: 0;
+          }
+        }
+      }
     }
 
     &.select2-no-results, &.select2-searching {
@@ -142,7 +152,6 @@
       color: $color-body-text;
       text-align: center;
       font-weight: $font-weight-bold;
-      text-transform: uppercase;
     }
   }
 

data/app/assets/stylesheets/spree/backend/sections/_products.scss

@@ -1,12 +1,31 @@
-[data-hook="admin_products_sidebar"] {
-  // .field.checkbox:first-child {
-  //   margin-top: 36px;
-  // }
-  .actions {
-    padding: 0 !important;
+[data-hook="admin_products_index_search"] {
+  @include make-row();
+
+  > * {
+    @include make-col();
+    @include padding(0 null); // override the padding on .field
   }
 }
 
+.product-search-field-name {
+  @include make-col-span(6);
+}
+
+.product-search-field-sku {
+  @include make-col-span(4);
+}
+
+.product-search-field-show-deleted.field.checkbox {
+  // extra specificity to override styles
+  @include make-col-span(2);
+  min-height: initial; // override .field.checkbox
+  margin-bottom: 0; // override .checkbox
+}
+
+div[data-hook="admin_products_index_search_buttons"] {
+  margin-top: 2rem;
+}
+
 [data-hook="admin_product_form_fields"] {
   label {
     display: inline-block;
@@ -28,7 +47,6 @@
 
 .outstanding-balance {
   margin-bottom: 15px;
-  text-transform: uppercase;
 
   strong {
     color: $color-2;

data/app/assets/stylesheets/spree/backend/sections/_promotions.scss

@@ -122,7 +122,6 @@
 }
 
 .promotion-title {
-  text-transform: uppercase;
   text-align: left;
   font-size: 85%;
   border-bottom: 1px solid $color-border;

data/app/assets/stylesheets/spree/backend/sections/_transfer_items.scss

@@ -21,7 +21,6 @@
   }
   .summary-field {
     font-weight: 600;
-    text-transform: uppercase;
     font-size: 105%;
   }
   .arrow {

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

@@ -72,8 +72,7 @@ textarea {
 
 label {
   font-weight: $font-weight-bold;
-  text-transform: uppercase;
-  font-size: 85%;
+  font-size: 90%;
   display: inline;
   margin-bottom: 5px;
   color: $color-4;
@@ -97,14 +96,14 @@ input[type="submit"],
 input[type="button"],
 button, .button {
   display: inline-block;
-  padding: 8px 15px;
+  padding: 6px 15px;
   border: none;
   border-radius: $border-radius;
   background-color: $color-btn-bg;
   color: $color-btn-text;
-  text-transform: uppercase;
   font-weight: $font-weight-bold !important;
   white-space: nowrap;
+  line-height: $line-height;
 
   &:before {
     font-weight: normal !important;
@@ -228,9 +227,8 @@ fieldset {
   legend {
     background-color: $color-1;
     color: $color-2;
-    font-size: 14px;
+    font-size: 16px;
     font-weight: $font-weight-bold;
-    text-transform: uppercase;
     text-align: center;
     padding: 8px 15px;
     width: auto;

data/app/assets/stylesheets/spree/backend/shared/_header.scss

@@ -1,10 +1,13 @@
 .main-header {
   @include display(flex);
   @include align-items(center);
-  margin-left: $width-sidebar;
-  padding: 15px 14px;
+  padding: 15px $grid-gutter-width;
   background-color: very-light($color-3, 4);
   border-bottom: 1px solid $color-border;
+
+  body:not(.new-layout) & {
+    margin-left: $width-sidebar;
+  }
 }
 
 .page-title {

data/app/assets/stylesheets/spree/backend/shared/_layout.scss

@@ -5,6 +5,10 @@ html {
 body {
   position: relative;
   min-height: 100%;
+
+  &.new-layout {
+    padding-left: $width-sidebar;
+  }
 }
 
 .admin-nav {
@@ -12,9 +16,38 @@ body {
   width: $width-sidebar;
 }
 
-.main-content {
-  margin-left: $width-sidebar;
-  @include clearfix;
+.content-wrapper {
+  body:not(.new-layout) & {
+    margin-left: $width-sidebar;
+  }
+
+  body.new-layout & {
+    @include padding(1rem $grid-gutter-width null);
+  }
+
+  &.centered {
+    @include margin(null auto);
+    max-width: map-get($container-max-widths, "xl");
+  }
+}
+
+.content {
+  @include make-row();
+}
+
+.content-main {
+  @include make-col();
+  @include make-col-span(12);
+  overflow-x: hidden; // makes sure that the tabs are able to resize
+
+  .has-sidebar & {
+    @include make-col-span(9);
+  }
+}
+
+.content-sidebar {
+  @include make-col();
+  @include make-col-span(3);
 }
 
 #content {