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.

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");
+      }
+    }
+  });
+});

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">

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%;