Do more of the background inspector

README.md

@@ -12,7 +12,7 @@ Phase 1:
 * Inspector panel (Element/Text/Ruler)
   * ½ Background (type/direction)
   * ✓ Border
-  * ½ Shadow (inset)
+  * ✓ Shadow
   * ✓ Text-shadow
   * Rotation
   * ✓ Opacity

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

@@ -4,6 +4,7 @@ GradientPicker  = require('lib/gradient_picker')
 Color           = require('app/models/properties/color')
 Background      = require('app/models/properties/background')
 BackgroundImage = Background.BackgroundImage
+PopupMenu       = require('app/controllers/inspector/popup_menu')
 
 class Backgrounds extends Collection
   getColor: ->
@@ -58,6 +59,23 @@ class Edit extends Spine.Controller
       @background.url = @$('input').val()
       @trigger 'change', @background
 
+class BackgroundType extends PopupMenu
+  className: 'backgroundType'
+
+  events:
+    'click [data-type]': 'choose'
+
+  constructor: ->
+    super
+    @render()
+
+  render: ->
+    @html JST['app/views/inspector/background/menu'](@)
+
+  choose: (e) ->
+    @trigger 'choose', $(e.currentTarget).data('type')
+    @close()
+
 class List extends Spine.Controller
   className: 'list'
 
@@ -85,20 +103,53 @@ class List extends Spine.Controller
     @trigger 'change', @current
     @render()
 
-  plus: ->
+  plus: (e) ->
+    menu = new BackgroundType
+
+    menu.bind 'choose', (type) =>
+      if type is 'backgroundColor'
+        @addBackgroundColor()
+
+      else if type is 'linearGradient'
+        @addLinearGradient()
+
+      else if type is 'url'
+        @addURL()
+
+    menu.open(
+      left: e.pageX,
+      top:  e.pageY
+    )
+
+  minus: ->
+    @backgrounds.remove(@current)
+    @current = @backgrounds.first()
+    @trigger 'change', @current
+
+  # Private
+
+  addBackgroundColor: ->
+    @current = new Background.Color.White
+
+    @backgrounds.push(@current)
+    @trigger 'change', @current
+
+  addLinearGradient: ->
     @current = new Background.LinearGradient(
       new Background.Position(0),
       [
         new Background.ColorStop(new Color.Black, 0),
         new Background.ColorStop(new Color.White, 100)
       ]
     )
+
     @backgrounds.push(@current)
     @trigger 'change', @current
 
-  minus: ->
-    @backgrounds.remove(@current)
-    @current = @backgrounds.first()
+  addURL: ->
+    @current = new Background.URL
+
+    @backgrounds.push(@current)
     @trigger 'change', @current
 
 class BackgroundInspector extends Spine.Controller

assets/javascripts/app/models/properties/background.module.coffee

@@ -58,7 +58,7 @@ class URL extends BackgroundImage
   constructor: (@url) ->
 
   toString: ->
-    "url('#{@url}')"
+    "url('#{@url or ''}')"
 
   toValue: -> @url
 
@@ -78,4 +78,5 @@ module.exports.BackgroundImage = BackgroundImage
 module.exports.LinearGradient  = LinearGradient
 module.exports.URL             = URL
 module.exports.Position        = Position
-module.exports.ColorStop       = ColorStop
+module.exports.ColorStop       = ColorStop
+module.exports.Color           = Color

assets/javascripts/app/views/inspector/background/menu.jst.eco

@@ -0,0 +1,4 @@
+<div data-type="backgroundColor">Add Background Color</div>
+<div data-type="linearGradient">Add Linear Gradient</div>
+<!-- <div data-type="radialGradient">Add Radial Gradient</div> -->
+<div data-type="url">Add Image URL</div>

assets/stylesheets/app/context_menu.css.styl

@@ -2,12 +2,12 @@
 
 .contextMenu {
   position: absolute
-  width: 150px
+  min-width: 150px
   background: rgba(255, 255, 255, 0.95)
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1)
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2)
   border-radius: 3px
-  border: 1px solid rgba(0, 0, 0, 0.1)
-  border-bottom-color: rgba(0, 0, 0, 0.15)
+  border: 1px solid rgba(0, 0, 0, 0.2)
+  border-bottom-color: rgba(0, 0, 0, 0.25)
 
   color: #000
   font-size: 13px
@@ -29,7 +29,7 @@
 
     &:not(.disabled):hover {
       color: #FFF
-      text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1)
+      text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2)
       vbg-gradient(#BAC4D8, #9AA8C7)
 
       &:active {

assets/stylesheets/app/inspector.css.styl

@@ -171,7 +171,7 @@
     .items {
       min-height: 35px
       max-height: 100px
-      // overflow-x: auto
+      overflow-x: auto
     }
 
     .item {
@@ -195,6 +195,7 @@
         width: 8px
         height: 8px
         display: inline-block
+        border: 1px solid rgba(0, 0, 0, 0.1)
       }
    }
 

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

@@ -1,8 +1,10 @@
 @import 'mixins'
 
 .popupMenu {
+  -webkit-user-select: none
+
   position: absolute
-  width: 130px
+  min-width: 130px
   background: rgba(255, 255, 255, 0.95)
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2)
   border-radius: 3px

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

@@ -59,7 +59,7 @@
   return this.require;
 }).call(this);
 this.require.define({"app/controllers/inspector/background":function(exports, require, module){(function() {
-  var Background, BackgroundImage, BackgroundInspector, Backgrounds, Collection, Color, ColorPicker, Edit, GradientPicker, List,
+  var Background, BackgroundImage, BackgroundInspector, BackgroundType, Backgrounds, Collection, Color, ColorPicker, Edit, GradientPicker, List, PopupMenu,
     __hasProp = {}.hasOwnProperty,
     __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; },
     __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
@@ -76,6 +76,8 @@ this.require.define({"app/controllers/inspector/background":function(exports, re
 
   BackgroundImage = Background.BackgroundImage;
 
+  PopupMenu = require('app/controllers/inspector/popup_menu');
+
   Backgrounds = (function(_super) {
 
     __extends(Backgrounds, _super);
@@ -165,6 +167,36 @@ this.require.define({"app/controllers/inspector/background":function(exports, re
 
   })(Spine.Controller);
 
+  BackgroundType = (function(_super) {
+
+    __extends(BackgroundType, _super);
+
+    BackgroundType.name = 'BackgroundType';
+
+    BackgroundType.prototype.className = 'backgroundType';
+
+    BackgroundType.prototype.events = {
+      'click [data-type]': 'choose'
+    };
+
+    function BackgroundType() {
+      BackgroundType.__super__.constructor.apply(this, arguments);
+      this.render();
+    }
+
+    BackgroundType.prototype.render = function() {
+      return this.html(JST['app/views/inspector/background/menu'](this));
+    };
+
+    BackgroundType.prototype.choose = function(e) {
+      this.trigger('choose', $(e.currentTarget).data('type'));
+      return this.close();
+    };
+
+    return BackgroundType;
+
+  })(PopupMenu);
+
   List = (function(_super) {
 
     __extends(List, _super);
@@ -203,10 +235,23 @@ this.require.define({"app/controllers/inspector/background":function(exports, re
       return this.render();
     };
 
-    List.prototype.plus = function() {
-      this.current = new Background.LinearGradient(new Background.Position(0), [new Background.ColorStop(new Color.Black, 0), new Background.ColorStop(new Color.White, 100)]);
-      this.backgrounds.push(this.current);
-      return this.trigger('change', this.current);
+    List.prototype.plus = function(e) {
+      var menu,
+        _this = this;
+      menu = new BackgroundType;
+      menu.bind('choose', function(type) {
+        if (type === 'backgroundColor') {
+          return _this.addBackgroundColor();
+        } else if (type === 'linearGradient') {
+          return _this.addLinearGradient();
+        } else if (type === 'url') {
+          return _this.addURL();
+        }
+      });
+      return menu.open({
+        left: e.pageX,
+        top: e.pageY
+      });
     };
 
     List.prototype.minus = function() {
@@ -215,6 +260,24 @@ this.require.define({"app/controllers/inspector/background":function(exports, re
       return this.trigger('change', this.current);
     };
 
+    List.prototype.addBackgroundColor = function() {
+      this.current = new Background.Color.White;
+      this.backgrounds.push(this.current);
+      return this.trigger('change', this.current);
+    };
+
+    List.prototype.addLinearGradient = function() {
+      this.current = new Background.LinearGradient(new Background.Position(0), [new Background.ColorStop(new Color.Black, 0), new Background.ColorStop(new Color.White, 100)]);
+      this.backgrounds.push(this.current);
+      return this.trigger('change', this.current);
+    };
+
+    List.prototype.addURL = function() {
+      this.current = new Background.URL;
+      this.backgrounds.push(this.current);
+      return this.trigger('change', this.current);
+    };
+
     return List;
 
   })(Spine.Controller);

public/assets/app/models/properties/background.module.js

@@ -198,7 +198,7 @@ this.require.define({"app/models/properties/background":function(exports, requir
     }
 
     URL.prototype.toString = function() {
-      return "url('" + this.url + "')";
+      return "url('" + (this.url || '') + "')";
     };
 
     URL.prototype.toValue = function() {
@@ -244,5 +244,7 @@ this.require.define({"app/models/properties/background":function(exports, requir
 
   module.exports.ColorStop = ColorStop;
 
+  module.exports.Color = Color;
+
 }).call(this);
 ;}});