updated unit styling, added polyfill js library, updated javascript handling for modes swap

cms/static/coffee/src/views/module_edit.coffee

@@ -7,7 +7,7 @@ class CMS.Views.ModuleEdit extends Backbone.View
     "click .component-editor .save-button": 'clickSaveButton'
     "click .component-actions .edit-button": 'clickEditButton'
     "click .component-actions .delete-button": 'onDelete'
-    "click .mode .not-set": 'clickModeButton'
+    "click .not-set ": 'clickModeButton'
 
   initialize: ->
     @onDelete = @options.onDelete
@@ -86,5 +86,11 @@ class CMS.Views.ModuleEdit extends Backbone.View
 
   clickModeButton: (event) ->
     event.preventDefault()
-    @$el.find("a").removeClass('not-set')
-    @$el.find("a").addClass('is-set')
+    @$el.find("a").removeClass('not-set').addClass('is-set')
+
+    previouslySetMode = @$el.siblings('li.active-mode').find('.is-set')
+    previouslySetMode.find("a").removeClass('is-set').addClass('not-set')
+
+    activeTab = $component_editor.find('.xmodule_edit').find(".is-set")
+    activeTab.removeClass('is-set')
+    activeTab.siblings('.not-set').addClass('is-set')

cms/static/sass/views/_unit.scss

@@ -508,24 +508,24 @@ body.course.unit {
     .mode {
       display: inline-block;
 
-      .inactive-mode {
+      &.inactive-mode{
         display: none;
       }
 
-      .active-mode {
-        @include blue-button;
-      }
+      &.active-mode a {
 
-      .is-set {
-        @include linear-gradient($blue, $blue);
-        box-shadow: inset 0 0 3px $shadow;
-        background-color: $blue;
-
-        cursor: default;
+        @include blue-button;
 
-        &:hover {
+        &.is-set {
+          @include linear-gradient($blue, $blue);
           box-shadow: inset 0 0 3px $shadow;
           background-color: $blue;
+          cursor: default;
+
+          &:hover {
+            box-shadow: inset 0 0 3px $shadow;
+            background-color: $blue;
+          }
         }
       }
     }
@@ -654,7 +654,7 @@ body.course.unit {
       }
 
       select {
-        @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
+        @include box-shadow(0 1px 2px $shadow-l1 inset);
         background: none repeat scroll #F2F2F2;
 
         &:focus {

cms/templates/base.html

@@ -49,6 +49,7 @@
     <script src="${static.url('js/vendor/jquery.smooth-scroll.min.js')}"></script>
     <script type="text/javascript" src="${static.url('js/vendor/CodeMirror/htmlmixed.js')}"></script>
     <script type="text/javascript" src="${static.url('js/vendor/CodeMirror/css.js')}"></script>
+    <script src="${static.url('js/vendor/html5-input-polyfills/number-polyfill.js')}"></script>
 
     <!--TODO: not the right place-->
     <script type="text/javascript" src="${static.url('js/models/metadata_model.js')}"></script>

cms/templates/component.html

 <div class="wrapper wrapper-component-editor">
 	<div class="component-editor">
 		<div class="component-edit-header">
-  			<span class="component-name"><em>Editing:</em> Name of Component</span>
+  			<span class="component-name"><em>Editing:</em> Component</span>
   	  		<ul class="nav-edit-modes">
-  	  			<li id="editor-mode" class="mode" aria-controls="editor-tab" aria-selected="true" role="tab" tabindex="0">
-  	  				<a href="#" class="active-mode not-set">Editor</a>
+  	  			<li id="editor-mode" class="mode active-mode" aria-controls="editor-tab" aria-selected="true" role="tab" tabindex="0">
+  	  				<a href="#" class="not-set">Editor</a>
 	  			</li>
-	  			<li id="settings-mode" class="mode" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
-	  				<a href="#" class="inactive-mode">Compiler </a>
+	  			<li id="settings-mode" class="mode inactive-mode" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
+	  				<a href="#" class="not-set">Compiler </a>
 	  			</li>
-	  			<li id="settings-mode" class="mode" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
-	  				<a href="#" class="active-mode is-set">Settings </a>
+	  			<li id="settings-mode" class="mode active-mode" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
+	  				<a href="#" class="is-set">Settings</a>
 	  			</li>
 	  		</ul>
 		</div> <!-- Editor Header -->

common/static/js/vendor/html5-input-polyfills/number-polyfill.js

+// Generated by CoffeeScript 1.4.0
+
+/*
+HTML5 Number polyfill | Jonathan Stipe | https://github.com/jonstipe/number-polyfill
+*/
+
+
+(function() {
+
+  (function($) {
+    var i;
+    i = document.createElement("input");
+    i.setAttribute("type", "number");
+    if (i.type === "text") {
+      $.fn.inputNumber = function() {
+        var clipValues, decrement, domMouseScrollHandler, extractNumDecimalDigits, getParams, increment, matchStep, mouseWheelHandler;
+        getParams = function(elem) {
+          var $elem, max, min, step, val;
+          $elem = $(elem);
+          step = $elem.attr('step');
+          min = $elem.attr('min');
+          max = $elem.attr('max');
+          val = parseFloat($elem.val());
+          step = /^-?\d+(?:\.\d+)?$/.test(step) ? parseFloat(step) : null;
+          min = /^-?\d+(?:\.\d+)?$/.test(min) ? parseFloat(min) : null;
+          max = /^-?\d+(?:\.\d+)?$/.test(max) ? parseFloat(max) : null;
+          if (isNaN(val)) {
+            val = min || 0;
+          }
+          return {
+            min: min,
+            max: max,
+            step: step,
+            val: val
+          };
+        };
+        clipValues = function(value, min, max) {
+          if ((max != null) && value > max) {
+            return max;
+          } else if ((min != null) && value < min) {
+            return min;
+          } else {
+            return value;
+          }
+        };
+        extractNumDecimalDigits = function(input) {
+          var num, raisedNum;
+          if (input != null) {
+            num = 0;
+            raisedNum = input;
+            while (raisedNum !== Math.round(raisedNum)) {
+              num += 1;
+              raisedNum = input * Math.pow(10, num);
+            }
+            return num;
+          } else {
+            return 0;
+          }
+        };
+        matchStep = function(value, min, max, step) {
+          var mod, raiseTo, raisedMod, raisedStep, raisedStepDown, raisedStepUp, raisedValue, stepDecimalDigits, stepDown, stepUp;
+          stepDecimalDigits = extractNumDecimalDigits(step);
+          if (step == null) {
+            return value;
+          } else if (stepDecimalDigits === 0) {
+            mod = (value - (min || 0)) % step;
+            if (mod === 0) {
+              return value;
+            } else {
+              stepDown = value - mod;
+              stepUp = stepDown + step;
+              if ((stepUp > max) || ((value - stepDown) < (stepUp - value))) {
+                return stepDown;
+              } else {
+                return stepUp;
+              }
+            }
+          } else {
+            raiseTo = Math.pow(10, stepDecimalDigits);
+            raisedStep = step * raiseTo;
+            raisedMod = (value - (min || 0)) * raiseTo % raisedStep;
+            if (raisedMod === 0) {
+              return value;
+            } else {
+              raisedValue = value * raiseTo;
+              raisedStepDown = raisedValue - raisedMod;
+              raisedStepUp = raisedStepDown + raisedStep;
+              if (((raisedStepUp / raiseTo) > max) || ((raisedValue - raisedStepDown) < (raisedStepUp - raisedValue))) {
+                return raisedStepDown / raiseTo;
+              } else {
+                return raisedStepUp / raiseTo;
+              }
+            }
+          }
+        };
+        increment = function(elem) {
+          var newVal, params, raiseTo;
+          if (!$(elem).is(":disabled")) {
+            params = getParams(elem);
+            raiseTo = Math.pow(10, Math.max(extractNumDecimalDigits(params['val']), extractNumDecimalDigits(params['step'])));
+            newVal = (Math.round(params['val'] * raiseTo) + Math.round((params['step'] || 1) * raiseTo)) / raiseTo;
+            if ((params['max'] != null) && newVal > params['max']) {
+              newVal = params['max'];
+            }
+            newVal = matchStep(newVal, params['min'], params['max'], params['step']);
+            $(elem).val(newVal).change();
+          }
+          return null;
+        };
+        decrement = function(elem) {
+          var newVal, params, raiseTo;
+          if (!$(elem).is(":disabled")) {
+            params = getParams(elem);
+            raiseTo = Math.pow(10, Math.max(extractNumDecimalDigits(params['val']), extractNumDecimalDigits(params['step'])));
+            newVal = (Math.round(params['val'] * raiseTo) - Math.round((params['step'] || 1) * raiseTo)) / raiseTo;
+            if ((params['min'] != null) && newVal < params['min']) {
+              newVal = params['min'];
+            }
+            newVal = matchStep(newVal, params['min'], params['max'], params['step']);
+            $(elem).val(newVal).change();
+          }
+          return null;
+        };
+        domMouseScrollHandler = function(e) {
+          e.preventDefault();
+          if (e.originalEvent.detail < 0) {
+            increment(this);
+          } else {
+            decrement(this);
+          }
+          return null;
+        };
+        mouseWheelHandler = function(e) {
+          e.preventDefault();
+          if (e.originalEvent.wheelDelta > 0) {
+            increment(this);
+          } else {
+            decrement(this);
+          }
+          return null;
+        };
+        $(this).filter('input[type="number"]').each(function() {
+          var $downBtn, $elem, $upBtn, attrMutationCallback, attrObserver, btnContainer, downBtn, elem, halfHeight, upBtn;
+          elem = this;
+          $elem = $(elem);
+          halfHeight = ($elem.outerHeight() / 2) + 'px';
+          upBtn = document.createElement('div');
+          downBtn = document.createElement('div');
+          $upBtn = $(upBtn);
+          $downBtn = $(downBtn);
+          btnContainer = document.createElement('div');
+          $upBtn.addClass('number-spin-btn number-spin-btn-up').css('height', halfHeight);
+          $downBtn.addClass('number-spin-btn number-spin-btn-down').css('height', halfHeight);
+          btnContainer.appendChild(upBtn);
+          btnContainer.appendChild(downBtn);
+          $(btnContainer).addClass('number-spin-btn-container').insertAfter(elem);
+          $elem.on({
+            focus: function(e) {
+              $elem.on({
+                DOMMouseScroll: domMouseScrollHandler,
+                mousewheel: mouseWheelHandler
+              });
+              return null;
+            },
+            blur: function(e) {
+              $elem.off({
+                DOMMouseScroll: domMouseScrollHandler,
+                mousewheel: mouseWheelHandler
+              });
+              return null;
+            },
+            keypress: function(e) {
+              var _ref, _ref1;
+              if (e.keyCode === 38) {
+                increment(this);
+              } else if (e.keyCode === 40) {
+                decrement(this);
+              } else if (((_ref = e.keyCode) !== 8 && _ref !== 9 && _ref !== 35 && _ref !== 36 && _ref !== 37 && _ref !== 39) && ((_ref1 = e.which) !== 45 && _ref1 !== 46 && _ref1 !== 48 && _ref1 !== 49 && _ref1 !== 50 && _ref1 !== 51 && _ref1 !== 52 && _ref1 !== 53 && _ref1 !== 54 && _ref1 !== 55 && _ref1 !== 56 && _ref1 !== 57)) {
+                e.preventDefault();
+              }
+              return null;
+            },
+            change: function(e) {
+              var newVal, params;
+              if (e.originalEvent != null) {
+                params = getParams(this);
+                newVal = clipValues(params['val'], params['min'], params['max']);
+                newVal = matchStep(newVal, params['min'], params['max'], params['step'], params['stepDecimal']);
+                $(this).val(newVal);
+              }
+              return null;
+            }
+          });
+          $upBtn.on("mousedown", function(e) {
+            var releaseFunc, timeoutFunc;
+            increment(elem);
+            timeoutFunc = function(elem, incFunc) {
+              incFunc(elem);
+              $elem.data("timeoutID", window.setTimeout(timeoutFunc, 10, elem, incFunc));
+              return null;
+            };
+            releaseFunc = function(e) {
+              window.clearTimeout($elem.data("timeoutID"));
+              $(document).off('mouseup', releaseFunc);
+              $upBtn.off('mouseleave', releaseFunc);
+              return null;
+            };
+            $(document).on('mouseup', releaseFunc);
+            $upBtn.on('mouseleave', releaseFunc);
+            $elem.data("timeoutID", window.setTimeout(timeoutFunc, 700, elem, increment));
+            return null;
+          });
+          $downBtn.on("mousedown", function(e) {
+            var releaseFunc, timeoutFunc;
+            decrement(elem);
+            timeoutFunc = function(elem, decFunc) {
+              decFunc(elem);
+              $elem.data("timeoutID", window.setTimeout(timeoutFunc, 10, elem, decFunc));
+              return null;
+            };
+            releaseFunc = function(e) {
+              window.clearTimeout($elem.data("timeoutID"));
+              $(document).off('mouseup', releaseFunc);
+              $downBtn.off('mouseleave', releaseFunc);
+              return null;
+            };
+            $(document).on('mouseup', releaseFunc);
+            $downBtn.on('mouseleave', releaseFunc);
+            $elem.data("timeoutID", window.setTimeout(timeoutFunc, 700, elem, decrement));
+            return null;
+          });
+          $elem.css("textAlign", 'right');
+          if ($elem.css("opacity") !== "1") {
+            $(btnContainer).css("opacity", $elem.css("opacity"));
+          }
+          if ($elem.css("visibility") !== "visible") {
+            $(btnContainer).css("visibility", $elem.css("visibility"));
+          }
+          if (elem.style.display !== "") {
+            $(btnContainer).css("display", $elem.css("display"));
+          }
+          if ((typeof WebKitMutationObserver !== "undefined" && WebKitMutationObserver !== null) || (typeof MutationObserver !== "undefined" && MutationObserver !== null)) {
+            attrMutationCallback = function(mutations, observer) {
+              var mutation, _i, _len;
+              for (_i = 0, _len = mutations.length; _i < _len; _i++) {
+                mutation = mutations[_i];
+                if (mutation.type === "attributes") {
+                  if (mutation.attributeName === "class") {
+                    $(btnContainer).removeClass(mutation.oldValue).addClass(elem.className);
+                  } else if (mutation.attributeName === "style") {
+                    $(btnContainer).css({
+                      "opacity": elem.style.opacity,
+                      "visibility": elem.style.visibility,
+                      "display": elem.style.display
+                    });
+                  }
+                }
+              }
+              return null;
+            };
+            attrObserver = (typeof WebKitMutationObserver !== "undefined" && WebKitMutationObserver !== null) ? new WebKitMutationObserver(attrMutationCallback) : ((typeof MutationObserver !== "undefined" && MutationObserver !== null) ? new MutationObserver(attrMutationCallback) : null);
+            attrObserver.observe(elem, {
+              attributes: true,
+              attributeOldValue: true,
+              attributeFilter: ["class", "style"]
+            });
+          } else if (typeof MutationEvent !== "undefined" && MutationEvent !== null) {
+            $elem.on("DOMAttrModified", function(evt) {
+              if (evt.originalEvent.attrName === "class") {
+                $(btnContainer).removeClass(evt.originalEvent.prevValue).addClass(evt.originalEvent.newValue);
+              } else if (evt.originalEvent.attrName === "style") {
+                $(btnContainer).css({
+                  "display": elem.style.display,
+                  "visibility": elem.style.visibility,
+                  "opacity": elem.style.opacity
+                });
+              }
+              return null;
+            });
+          }
+          return null;
+        });
+        return $(this);
+      };
+      $(function() {
+        $('input[type="number"]').inputNumber();
+        return null;
+      });
+      null;
+    } else {
+      $.fn.inputNumber = function() {
+        return $(this);
+      };
+      null;
+    }
+    return null;
+  })(jQuery);
+
+}).call(this);