From 769a8436186a793b909cc90f148870245c5768ec Mon Sep 17 00:00:00 2001
From: Graeme Nathan <graeme@stembolt.com>
Date: Fri, 6 Apr 2018 11:43:47 -0700
Subject: [PATCH] Highlight negative numbers in red

This commit aims to smooth out admin user interactions when dealing with
number by providing visual feedback of negative numbers

Having negative amounts of items is unintuitive, though necessary for
backordering. This commit calls out when a number is negative by
highlighting it in red.
---
 .../app/assets/javascripts/spree/backend/admin.js | 15 +++++++++++++++
 .../stock_items/stock_location_stock_item.hbs     | 13 +++++++++++--
 .../spree/backend/shared/_typography.scss         |  2 ++
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/backend/app/assets/javascripts/spree/backend/admin.js b/backend/app/assets/javascripts/spree/backend/admin.js
index 65bc298b195..09de11db508 100644
--- a/backend/app/assets/javascripts/spree/backend/admin.js
+++ b/backend/app/assets/javascripts/spree/backend/admin.js
@@ -136,3 +136,18 @@ Spree.ready(function(){
     });
   }
 });
+
+Spree.ready(function() {
+  // Highlight negative numbers in red.
+  document.querySelector('body').addEventListener('input', function(e){
+    var el = e.target;
+    var isInputNumber = el instanceof HTMLInputElement && el.type == 'number';
+    if(isInputNumber){
+      if(el.value < 0){
+        el.classList.add("negative");
+      } else {
+        el.classList.remove("negative");
+      }
+    }
+  });
+});
diff --git a/backend/app/assets/javascripts/spree/backend/templates/stock_items/stock_location_stock_item.hbs b/backend/app/assets/javascripts/spree/backend/templates/stock_items/stock_location_stock_item.hbs
index ad707a66b13..d4728361d38 100644
--- a/backend/app/assets/javascripts/spree/backend/templates/stock_items/stock_location_stock_item.hbs
+++ b/backend/app/assets/javascripts/spree/backend/templates/stock_items/stock_location_stock_item.hbs
@@ -11,10 +11,19 @@
 <td>
   {{#if editing}}
     <form>
-      <input class="fullwidth" name="count_on_hand" type="number" value="{{count_on_hand}}">
+      <input
+      {{#if negative}}
+        class="fullwidth negative"
+      {{else}}
+        class="fullwidth"
+      {{/if}}
+      name="count_on_hand"
+      type="number"
+      value="{{count_on_hand}}"
+    >
     </form>
   {{else}}
-    <span {{#if negative}}class="red"{{/if}}>{{count_on_hand}}</span>
+    <span {{#if negative}}class="negative"{{/if}}>{{count_on_hand}}</span>
   {{/if}}
 </td>
 <td class="actions">
diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_typography.scss b/backend/app/assets/stylesheets/spree/backend/shared/_typography.scss
index 3ecd2ec3479..8d58d3a6410 100644
--- a/backend/app/assets/stylesheets/spree/backend/shared/_typography.scss
+++ b/backend/app/assets/stylesheets/spree/backend/shared/_typography.scss
@@ -98,6 +98,8 @@ dl {
 .red    { color: $color-5 }
 .yellow { color: $color-6 }
 
+.negative { color: $color-5 !important }
+
 .no-objects-found {
   text-align: center;
   font-size: 120%;