spree_backend 4.1.5 → 4.2.0.beta

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

@@ -0,0 +1,38 @@
+//= require spree/backend
+
+$(document).ready(function () {
+  $.expr[':'].Contains = function (a, i, m) {
+    return (
+      (a.textContent || a.innerText || '')
+        .toUpperCase()
+        .indexOf(m[3].toUpperCase()) >= 0
+    )
+  }
+
+  function listFilter (list) {
+    var input = $('#variant-price-search')
+
+    $(input)
+      .change(function () {
+        var filter = $(this).val()
+        if (filter) {
+          $(list).find('.panel-title:not(:Contains(' + filter + '))').parent().hide()
+          $(list).find('.panel-title:Contains(' + filter + ')').parent().show()
+        } else {
+          $(list)
+            .find('.panel')
+            .parent()
+            .show()
+        }
+        return false
+      })
+      .keyup(function () {
+        $(this).change()
+      })
+  }
+
+  // ondomready
+  $(function () {
+    listFilter($('#variant-prices'))
+  })
+})

data/app/assets/javascripts/spree/backend/payments/edit.js

@@ -95,8 +95,8 @@ jQuery(function ($) {
     }
 
     PaymentView.prototype.$new_button = function (action) {
-      return $('<a><span class="icon icon-' + action + '"></span></a>').attr({
-        'class': 'payment-action-' + action + ' btn btn-default btn-sm icon-link no-text with-tip',
+      return $('<a><i class="icon icon-' + action + '"></i></a>').attr({
+        'class': 'payment-action-' + action + ' btn btn-outline-secondary btn-sm no-filter',
         title: Spree.translations[action]
       }).data({
         action: action
@@ -203,8 +203,9 @@ jQuery(function ($) {
       var amount = this.constructor.normalize_amount(this.payment.display_amount())
       return $('<input />').prop({
         id: 'amount',
+        class: 'form-control',
         value: amount
-      }).width(width).css({
+      }).width(width * 2).css({
         'text-align': 'right'
       })
     }

data/app/assets/javascripts/spree/backend/payments/new.js

@@ -1,12 +1,23 @@
-//= require jquery.payment
+/* global Cleave */
+
 $(document).ready(function () {
   if ($('#new_payment').length) {
-    $('.cardNumber').payment('formatCardNumber')
-    $('.cardExpiry').payment('formatCardExpiry')
-    $('.cardCode').payment('formatCardCVC')
-
-    $('.cardNumber').change(function () {
-      $('.ccType').val($.payment.cardType(this.value))
+    /* eslint-disable no-new */
+    new Cleave('.cardNumber', {
+      creditCard: true,
+      onCreditCardTypeChanged: function (type) {
+        $('.ccType').val(type)
+      }
+    })
+    /* eslint-disable no-new */
+    new Cleave('.cardExpiry', {
+      date: true,
+      datePattern: ['m', 'Y']
+    })
+    /* eslint-disable no-new */
+    new Cleave('.cardCode', {
+      numericOnly: true,
+      blocks: [3]
     })
 
     $('.payment_methods_radios').click(
@@ -35,16 +46,5 @@ $(document).ready(function () {
         }
       }
     )
-
-    $('.cvvLink').click(function (event) {
-      var windowName = 'cvv_info'
-      var windowOptions = 'left=20,top=20,width=500,height=500,toolbar=0,resizable=0,scrollbars=1'
-      window.open($(this).prop('href'), windowName, windowOptions)
-      event.preventDefault()
-    })
-
-    $('select.jump_menu').change(function () {
-      window.location = this.options[this.selectedIndex].value
-    })
   }
 })

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

@@ -147,7 +147,7 @@ function initProductActions () {
       var quantity = $container.find('input[name="add_quantity"]').val()
       if (variant_id) {
         // Add to the table
-        var newRow = '<tr><td>' + productName + '</td><td>' + quantity + '</td><td><img src="/assets/admin/icons/cross.png"/></td></tr>'
+        var newRow = '<tr><td>' + product_name + '</td><td>' + quantity + '</td><td><i class="icon icon-cancel"></i></td></tr>'
         $container.find('table').append(newRow)
         // Add to serialized string in hidden text field
         var $hiddenField = $container.find('.line_items_string')

data/app/assets/javascripts/spree/backend/spree-select2.js

@@ -1,7 +1,21 @@
-jQuery(function ($) {
-  // Make select beautiful
+document.addEventListener('DOMContentLoaded', function() {
+  // Inititate Select2 on any select element with the class .select2
   $('select.select2').select2({
-    allowClear: true,
-    dropdownAutoWidth: true
+    allowClear: true
+  })
+
+  // BELOW: z-index fix for Select2 v3.x to lower the z-index of an opened Select2.
+  // The javascript below is not needed if Spree is updated to use Select2 v4.x
+  window.addEventListener('click', function(e) {
+    var select2Drop = document.getElementById('select2-drop')
+
+    if (select2Drop) {
+      if (select2Drop.contains(e.target)) {
+        // Clicking inside the Select2 dropdown does nothing...
+      } else {
+        // Clicking outside the Select2 dropdown close all open Select2 dropdowns.
+        $('*').select2('close')
+      }
+    }
   })
 })

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

@@ -6,7 +6,8 @@ $(function () {
     $.ajax({
       type: this.method,
       url: this.action,
-      data: $(this).serialize()
+      data: $(this).serialize(),
+      dataType: 'json'
     })
     return false
   })

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

@@ -6,26 +6,26 @@ root.taxon_tree_menu = function (obj, context) {
   editUrl.setPath(editUrl.path() + '/' + obj.attr('id') + '/edit')
   return {
     create: {
-      label: '<span class="icon icon-plus"></span> ' + Spree.translations.add,
+      label: '<i class="icon icon-add"></i>' + Spree.translations.add,
       action: function (obj) {
         return context.create(obj)
       }
     },
     rename: {
-      label: '<span class="icon icon-pencil"></span> ' + Spree.translations.rename,
+      label: '<i class="icon icon-edit"></i> ' + Spree.translations.rename,
       action: function (obj) {
         return context.rename(obj)
       }
     },
     remove: {
-      label: '<span class="icon icon-trash"></span> ' + Spree.translations.remove,
+      label: '<i class="icon icon-delete"></i> ' + Spree.translations.remove,
       action: function (obj) {
         return context.remove(obj)
       }
     },
     edit: {
       separator_before: true,
-      label: '<span class="icon icon-cog"></span> ' + Spree.translations.edit,
+      label: '<i class="icon icon-settings"></i> ' + Spree.translations.edit,
       action: function () {
         window.location = editUrl.toString()
         return window.location

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

@@ -158,9 +158,16 @@ root.setup_taxonomy_tree = function (taxonomyId) {
         return $(this).jstree('core').toggle_node($('.jstree-icon').first())
       })
     })
+
     $taxonomyTree.on('dblclick', 'a', function () {
-      $taxonomyTree.jstree('rename', this)
+      var iOS = /iPad|iPhone|iPod/.test(navigator.platform || '')
+      if (iOS) {
+        $taxonomyTree.jstree('show_contextmenu', this)
+      } else {
+        $taxonomyTree.jstree('rename', this)
+      }
     })
+
     // suppress form submit on enter/return
     $(document).keypress(function (event) {
       if (event.keyCode === 13) {

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

@@ -1,26 +1,35 @@
-/* global productTemplate */
+/* global productTemplate, Sortable */
 $(function () {
   window.productTemplate = Handlebars.compile($('#product_template').text())
   var taxonProducts = $('#taxon_products')
   var taxonId = $('#taxon_id')
 
-  taxonProducts.sortable({
-    handle: '.js-sort-handle'
-  })
-
-  taxonProducts.on('sortstop', function (event, ui) {
-    return $.ajax({
-      url: Spree.routes.classifications_api,
-      method: 'PUT',
-      dataType: 'json',
-      data: {
-        token: Spree.api_key,
-        product_id: ui.item.data('product-id'),
-        taxon_id: $('#taxon_id').val(),
-        position: ui.item.index()
+  var el = document.getElementById('taxon_products')
+  if (el) {
+    Sortable.create(el, {
+      handle: '.sort-handle',
+      ghostClass: 'moving-this',
+      animation: 550,
+      easing: 'cubic-bezier(1, 0, 0, 1)',
+      swapThreshold: 0.9,
+      forceFallback: true,
+      onEnd: function (evt) {
+        var itemEl = evt.item.getAttribute('data-product-id')
+        var newin = evt.newIndex
+        return $.ajax({
+          url: Spree.routes.classifications_api,
+          method: 'PUT',
+          dataType: 'json',
+          data: {
+            token: Spree.api_key,
+            product_id: itemEl,
+            taxon_id: $('#taxon_id').val(),
+            position: newin
+          }
+        })
       }
     })
-  })
+  }
 
   if (taxonId.length > 0) {
     taxonId.select2({

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

@@ -22,7 +22,7 @@ $.fn.userAutocomplete = function () {
       data: function (term) {
         return {
           q: {
-            email_cont: term
+            email_start: term
           },
           token: Spree.api_key
         }

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

@@ -36,7 +36,7 @@ $.fn.variantAutocomplete = function () {
       data: function (term) {
         return {
           q: {
-            product_name_or_sku_cont: term
+            search_by_product_name_or_sku: term
           },
           token: Spree.api_key
         }

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

@@ -7,7 +7,8 @@ $(function () {
     $.ajax({
       type: this.method,
       url: this.action,
-      data: $(this).serialize()
+      data: $(this).serialize(),
+      dataType: 'json'
     })
     return false
   })

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

@@ -3,9 +3,9 @@
  * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
  * the top of the compiled file, but it's generally better to create a new file per style scope.
 
- *= require jquery-ui/datepicker
  *= require jquery-ui/autocomplete
  *= require select2
  *= require animate
+ *= require flatpickr
  *= require spree/backend/spree_admin
 */

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

@@ -1,3 +1,7 @@
+.payment-action-save {
+  @include button-variant($success, $success, $success );
+}
+
 .btn,
 .nav-pills > li > a {
   vertical-align: middle;
@@ -7,19 +11,31 @@
 .btn {
   text-align: center;
 
-  .glyphicon {
-    padding-right: 3px;
+  .ship {
+    color: #fff;
+  }
+  svg,
+  i.icon {
+   margin-bottom: 3px;
   }
-
-  .ship { color: #fff; }
 }
 
-.btn-sm .glyphicon { padding: 0; }
-
-.btn.action-void { @extend .btn-danger; }
-.btn.action-capture { @extend .btn-success; }
-.btn.payment-action-edit {
-  @extend .btn-primary;
+input#image_attachment >
+input[type="button"],
+input[type="file"]::-webkit-file-upload-button {
+  @include border-radius();
+  border: 1px solid;
+  background-color: white;
+  color: $secondary;
+  border-color: $secondary;
+  padding: 0.375rem 0.75rem;
+  &:hover {
+    color: white;
+    background-color: $secondary;
+  }
+}
 
-  color: $white !important;
+.actions .btn,
+.page-actions .btn {
+  margin: 2px;
 }

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

@@ -1,15 +1,31 @@
 #table-filter {
   display: none;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
   margin-top: 20px;
 }
 
+.index-filter-button .icon-chevron-right {
+  transform: rotate(0);
+  transition: .3s ease-in-out;
+  margin-bottom: 0;
+}
+
+.collapsed .icon-chevron-right {
+  transform: rotate(90deg);
+  transition: .3s ease-in-out;
+}
+
+.default-filter-icon {
+  opacity: 0.1;
+}
+
+i.js-delete-filter {
+  width: $select2-icon-size;
+  height: $select2-icon-size;
+  margin-bottom: 0;
+}
+
 .index-filter-button {
   font-size: $font-size-sm;
-  .glyphicon {
-    color: $gray-800;
-  }
 
   button {
     height: 100%;
@@ -34,3 +50,17 @@
     border-bottom-left-radius: 0;
   }
 }
+
+.sort_link {
+  .icon, svg {
+    margin-left: 5px;
+    margin-bottom: 2px;
+    width: 0.8rem;
+    height: 0.8rem;
+
+  }
+  
+  svg.default-filter-arrow {
+    opacity: 0.1;
+  }
+}

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

@@ -1,5 +1,4 @@
-// TODO: Switch everything to use glyphicons
-.icon, .glyphicon {
+span.icon, span.glyphicon {
   vertical-align: text-top;
 }
 
@@ -240,8 +239,9 @@ $alias_icons: (plus add)
               (globe translate)
               (ok approve);
 
-.icon {
+span.icon {
   @extend .glyphicon;
+  top:2px;
 
   // Map defaults.
   @each $icon in $default_icons {
@@ -254,4 +254,39 @@ $alias_icons: (plus add)
     $alias: nth($map, 2);
     &.icon-#{$alias} { @extend .glyphicon-#{$icon}; }
   }
-}
+}
+
+// Spree SVG Icon Defaults
+i.icon {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  overflow: hidden;
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  background-position: center;
+}
+
+
+// Spree SVG Icons in JS
+
+// The icons listed below are used by javascript generated content
+// If you wish to use an existing SVG icon in javascript generated content
+// use <i> tags like this -> <i class="icon icon-close"></i>
+// Using <span> tags will fall back to legacy glyphicon font based icons
+
+i.icon-close,
+i.icon-cancel,
+i.icon-delete,
+i.icon-void          { background-image: url(asset-path("backend-cancel.svg")); }
+i.icon-save          { background-image: url(asset-path("backend-save.svg")); }
+i.icon-add           { background-image: url(asset-path("backend-add.svg")); }
+i.icon-search        { background-image: url(asset-path("backend-search.svg")); }
+i.icon-settings      { background-image: url(asset-path("backend-settings.svg")); }
+i.icon-delete        { background-image: url(asset-path("backend-delete.svg")); }
+i.icon-edit          { background-image: url(asset-path("backend-edit.svg")); }
+i.icon-chevron-down  { background-image: url(asset-path("backend-chevron-down.svg")); }
+i.icon-chevron-left  { background-image: url(asset-path("backend-chevron-left.svg")); }
+i.icon-chevron-right { background-image: url(asset-path("backend-chevron-right.svg")); }
+i.icon-chevron-up    { background-image: url(asset-path("backend-chevron-up.svg")); }