refactoring, styling

assets/javascripts/app/controllers/inspector.module.coffee

@@ -75,10 +75,7 @@ class Inspector extends Spine.Controller
     # Make sure only one inspector is active
     @manager = new Spine.Manager
     @manager.add(@textInspector, @displayInspector)
-    @manager.bind 'change', (controller) =>
-      name = controller.constructor.name
-      @$headers.removeClass('active')
-      @$headers.filter("[data-type=#{name}]").addClass('active')
+    @manager.bind 'change', @changeHeader
 
     # Display the display inspector by default
     @displayInspector.active()
@@ -117,6 +114,11 @@ class Inspector extends Spine.Controller
       @textInspector.render()
       @textInspector.active()
 
+  changeHeader: =>
+    name = @manager.current.constructor.name
+    @$headers.removeClass('active')
+    @$headers.filter("[data-type=#{name}]").addClass('active')
+
   release: ->
     @textInspector.release()
     @displayInspector.release()

assets/javascripts/app/controllers/inspector/border.module.coffee

@@ -16,9 +16,8 @@ class BorderController extends Spine.Controller
 
   current: 'border'
 
-  render: =>
-    @disabled = not @stage.selection.isAny()
-    @disabled = true if @stage.selection.get('border') is false
+  constructor: ->
+    super
 
     @html JST['app/views/inspector/border'](this)
 
@@ -27,12 +26,19 @@ class BorderController extends Spine.Controller
     @$color.bind 'change', => @inputChange()
 
     @$('input[type=color]').replaceWith(@$color.el)
+
+  render: =>
+    @disabled = not @stage.selection.isAny()
+    @disabled = true if @stage.selection.get('border') is false
+
     @change(@current)
 
     @el.toggleClass('disabled', @disabled)
     @$inputs.attr('disabled', @disabled)
     this
 
+  # Private
+
   change: (@current) ->
     return if @disabled
 

assets/javascripts/app/controllers/inspector/border_radius.module.coffee

@@ -11,20 +11,25 @@ class BorderRadius extends Spine.Controller
 
   current: 'borderRadius'
 
+  constructor: ->
+    super
+    @html JST['app/views/inspector/border_radius'](this)
+
   render: =>
     # Disable unless elements are selected or if an
     # element, such as an ellipsis, is selected.
     @disabled = not @stage.selection.isAny()
     @disabled = true if @stage.selection.get('borderRadius') is false
 
-    @html JST['app/views/inspector/border_radius'](this)
     @change(@current)
 
     @el.toggleClass('disabled', @disabled)
     @$inputs.attr('disabled', @disabled)
 
     this
 
+  # Private
+
   change: (@current) ->
     return if @disabled
 

assets/javascripts/app/controllers/inspector/box_shadow.module.coffee

@@ -24,54 +24,51 @@ class BoxShadowEdit extends Spine.Controller
     @render()
 
   render: ->
-    @html JST['app/views/inspector/box_shadow'](@)
-
-    @colorInput = new ColorPicker.Preview(
+    @$color = new ColorPicker.Preview(
       color: @shadow.color
-      el: @$('.colorInput')
     )
 
-    @colorInput.bind 'change', (color) =>
-      @shadow.color.set color
-      @trigger 'change', @shadow
-      @update()
+    @$color.bind 'change', (color) => @inputChange()
 
-    @positionPicker = new PositionPicker(
-      el: @$('.positionInput')
-    )
+    @$position = new PositionPicker
 
-    @positionPicker.bind 'change', (position) =>
+    @$position.bind 'change', (position) =>
       @shadow.x = position.left
       @shadow.y = position.top
       @trigger 'change', @shadow
       @update()
 
+    @html JST['app/views/inspector/box_shadow'](@)
+    @$('input[type=color]').replaceWith(@$color.el)
+    @$('input[type=position]').replaceWith(@$position.el)
+
     @update()
     this
 
   update: ->
     @$inputs.attr('disabled', @disabled)
-    @positionPicker.disabled = @disabled
 
-    @positionPicker.change(
+    @$position.change(
       left: @shadow.x, top: @shadow.y
     )
 
     @$x.val @shadow.x
     @$y.val @shadow.y
     @$blur.val @shadow.blur
+    @$color.val @shadow.color
 
   inputChange: (e) ->
-    @shadow.x    = parseFloat(@$x.val())
-    @shadow.y    = parseFloat(@$y.val())
-    @shadow.blur = parseFloat(@$blur.val()) or 0
+    @shadow.x     = parseFloat(@$x.val())
+    @shadow.y     = parseFloat(@$y.val())
+    @shadow.blur  = parseFloat(@$blur.val()) or 0
+    @shadow.color = @$color.val()
 
     @trigger 'change', @shadow
     @update()
 
   release: ->
-    @colorInput?.release()
-    @positionPicker?.release()
+    @$color?.release()
+    @$position?.release()
     super
 
 class BoxShadowList extends Spine.Controller

assets/javascripts/app/controllers/inspector/dimensions.module.coffee

@@ -14,11 +14,11 @@ class Dimensions extends Spine.Controller
   constructor: ->
     super
     $(document).bind 'resize.element move.element', @update
+    @html JST['app/views/inspector/dimensions'](this)
 
   render: =>
     @disabled = not @stage.selection.isSingle()
 
-    @html JST['app/views/inspector/dimensions'](this)
     @update()
 
     @el.toggleClass('disabled', @disabled)

assets/javascripts/app/controllers/inspector/text_shadow.module.coffee

@@ -16,27 +16,27 @@ class TextShadow extends Spine.Controller
   constructor: ->
     super
 
-    @positionPicker = new PositionPicker
+    @$position = new PositionPicker
 
-    @positionPicker.bind 'change', (position) =>
+    @$position.bind 'change', (position) =>
       @shadow.x = position.left
       @shadow.y = position.top
-      @stage.selection.set('textShadow', @shadow)
+      @set()
       @update()
 
     @$color = new ColorPicker.Preview
     @$color.bind 'change', => @change()
 
+    @html JST['app/views/inspector/text_shadow'](@)
+    @$('input[type=color]').replaceWith(@$color.el)
+    @$('input[type=position]').replaceWith(@$position.el)
+
   render: ->
     @disabled = not @stage.selection.isAny()
 
     @shadow = @stage.selection.get('textShadow')
     @shadow or= new Shadow
 
-    @html JST['app/views/inspector/text_shadow'](@)
-    @$('input[type=color]').replaceWith(@$color.el)
-    @append @positionPicker
-
     @update()
 
     this
@@ -55,17 +55,25 @@ class TextShadow extends Spine.Controller
     @shadow.blur  = parseFloat(@$blur.val())
     @shadow.color = @$color.val()
 
-    @positionPicker.change(
+    @$position.change(
       left: @shadow.x,
       top: @shadow.y
     )
 
+    @set()
+    @update()
+
+  set: ->
+    # Text shadows need a blur
+    # to be formatted correctly
+    @shadow.blur ?= 0
+
     @stage.history.record('textShadow')
     @stage.selection.set('textShadow', @shadow)
-    @update()
 
   release: ->
-    @positionPicker?.release()
+    @$position?.release()
+    @$color?.release()
     super
 
 module.exports =  TextShadow

assets/javascripts/app/views/inspector/box_shadow.jst.eco

@@ -1,6 +1,6 @@
 <article>
   <div class="hbox">
-    <div class="positionInput"></div>
+    <input type="position" name="position">
 
     <div class="vbox">
       <label>
@@ -22,7 +22,7 @@
 
       <label class="color">
         <span>Color</span>
-        <div class="colorInput"></div>
+        <input type="color" name="color">
       </label>
     </div>
   </div>

assets/javascripts/app/views/inspector/text_shadow.jst.eco

@@ -1,20 +1,31 @@
 <h3>Text Shadow</h3>
 
 <article>
-  <label>
-    <span>X</span>
-    <input type="number" name="x" placeholder="0px">
-  </label>
+  <div class="hbox">
+    <input type="position" name="position">
 
-  <label>
-    <span>Y</span>
-    <input type="number" name="y" placeholder="0px">
-  </label>
+    <div class="vbox">
+      <label>
+        <span>X</span>
+        <input type="number" name="x" placeholder="0px">
+      </label>
 
-  <label>
-    <span>Blur</span>
-    <input type="number" name="blur" placeholder="0px">
-  </label>
+      <label>
+        <span>Y</span>
+        <input type="number" name="y" placeholder="0px">
+      </label>
+    </div>
 
-  <input type="color" name="color">
+    <div class="vbox">
+      <label class="blur">
+        <span>Blur</span>
+        <input type="number" name="blur" placeholder="0px">
+      </label>
+
+      <label class="color">
+        <span>Color</span>
+        <input type="color" name="color">
+      </label>
+    </div>
+  </div>
 </article>

assets/stylesheets/app/inspector/text_shadow.css.styl

@@ -0,0 +1,21 @@
+#app .inspector .textShadow {
+  .positionPicker {
+    margin: 3px 5px 3px 0
+  }
+
+  label {
+    span {
+      margin-left: 3px
+      width: auto
+    }
+  }
+
+  .blur span, .color span {
+    width: 33px
+  }
+
+  .color span {
+    position relative
+    top: -6px
+  }
+}

public/assets/app/controllers/inspector.module.js

@@ -197,11 +197,11 @@ this.require.define({"app/controllers/inspector":function(exports, require, modu
     };
 
     function Inspector() {
+      this.changeHeader = __bind(this.changeHeader, this);
+
       this.render = __bind(this.render, this);
 
       this.paint = __bind(this.paint, this);
-
-      var _this = this;
       Inspector.__super__.constructor.apply(this, arguments);
       this.append(JST['app/views/inspector']());
       this.append(this.textInspector = new TextInspector({
@@ -212,12 +212,7 @@ this.require.define({"app/controllers/inspector":function(exports, require, modu
       }));
       this.manager = new Spine.Manager;
       this.manager.add(this.textInspector, this.displayInspector);
-      this.manager.bind('change', function(controller) {
-        var name;
-        name = controller.constructor.name;
-        _this.$headers.removeClass('active');
-        return _this.$headers.filter("[data-type=" + name + "]").addClass('active');
-      });
+      this.manager.bind('change', this.changeHeader);
       this.displayInspector.active();
       this.stage.selection.bind('change', this.paint);
       this.render();
@@ -254,6 +249,13 @@ this.require.define({"app/controllers/inspector":function(exports, require, modu
       }
     };
 
+    Inspector.prototype.changeHeader = function() {
+      var name;
+      name = this.manager.current.constructor.name;
+      this.$headers.removeClass('active');
+      return this.$headers.filter("[data-type=" + name + "]").addClass('active');
+    };
+
     Inspector.prototype.release = function() {
       this.textInspector.release();
       this.displayInspector.release();