Permalink
Browse files

Do more of the background inspector

  • Loading branch information...
maccman committed May 1, 2012
1 parent 5a75823 commit a0e404f267eb6be94e97e5817759cc3668450dab
View
@@ -12,7 +12,7 @@ Phase 1:
* Inspector panel (Element/Text/Ruler)
* ½ Background (type/direction)
* ✓ Border
- * ½ Shadow (inset)
+ * Shadow
* ✓ Text-shadow
* Rotation
* ✓ Opacity
@@ -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
@@ -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
@@ -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>
@@ -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 {
@@ -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)
}
}
@@ -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
@@ -1,56 +0,0 @@
-@import 'mixins'
-
-.popup {
- border-radius: 4px
- border: 1px solid rgba(181,181,181, 1)
- border-bottom-color: rgba(167,167,167,1)
- border-top-color: rgba(216,216,216,1)
-
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.24)
- background: #FFF
- min-width: 400px
- color: #000
- z-index: 10000
-
- article {
- padding: 5px
- }
-
- footer {
- border-top: 1px solid rgba(0, 0, 0, 0.15)
- inset-line(0.8)
- vbg-gradient(lighten(rgba(238, 238, 238, 1), 80%), rgba(238, 238, 238, 0.9))
- -webkit-border-radius: 0 0 4px 4px
-
- button {
- margin: 0
-
- color: #717A81;
- font-size: 11px;
- font-weight: bold
- text-transform: uppercase
- text-shadow: 0 1px 1px #FFF;
- padding: 8px 13px
- box-shadow: inset -1px 0 1px rgba(255, 255, 255, 0.5)
- border: none
- border-right: 1px solid rgba(0, 0, 0, 0.15)
- background: none
- }
- }
-}
-
-.popup.list {
- .items {
- min-height: 180px
- }
-
- .item {
- padding: 10px
- cursor: pointer
-
- &.selected {
- color: #FFF
- vbg-gradient(#BAC4D8, #9AA8C7)
- }
- }
-}
@@ -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);
@@ -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);
;}});
Oops, something went wrong.

0 comments on commit a0e404f

Please sign in to comment.