Negative coh red

backend/app/assets/javascripts/spree/backend/admin.js

@@ -7,6 +7,7 @@
 //= require spree/backend/product_picker
 //= require spree/backend/option_value_picker
 //= require spree/backend/taxons
+//= require spree/backend/highlight_negative_numbers
 
 /**
 This is a collection of javascript functions and whatnot

backend/app/assets/javascripts/spree/backend/highlight_negative_numbers.js

@@ -0,0 +1,14 @@
+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>{{count_on_hand}}</span>
+    <span {{#if negative}}class="negative"{{/if}}>{{count_on_hand}}</span>
   {{/if}}
 </td>
 <td class="actions">

backend/app/assets/javascripts/spree/backend/views/stock/edit_stock_item_row.js

@@ -4,6 +4,7 @@ Spree.Views.Stock.EditStockItemRow = Backbone.View.extend({
   initialize: function(options) {
     this.stockLocationName = options.stockLocationName;
     this.editing = false;
+    this.negative = this.model.attributes.count_on_hand < 0;
     this.render();
   },
 
@@ -19,7 +20,8 @@ Spree.Views.Stock.EditStockItemRow = Backbone.View.extend({
   render: function() {
     var renderAttr = {
       stockLocationName: this.stockLocationName,
-      editing: this.editing
+      editing: this.editing,
+      negative: this.negative
     };
     _.extend(renderAttr, this.model.attributes);
     this.$el.attr("data-variant-id", this.model.get('variant_id'));

backend/app/assets/stylesheets/spree/backend/shared/_typography.scss

@@ -98,6 +98,9 @@ dl {
 .red    { color: $color-5 }
 .yellow { color: $color-6 }
 
+.negative { color: $red }
+input[type="number"].negative { color: $red } // needed to override blue style that is more specific than '.negative'
+
 .no-objects-found {
   text-align: center;
   font-size: 120%;