Skip to content
Browse files

Do more of the background inspector

  • Loading branch information...
1 parent 5a75823 commit a0e404f267eb6be94e97e5817759cc3668450dab @maccman committed
View
2 README.md
@@ -12,7 +12,7 @@ Phase 1:
* Inspector panel (Element/Text/Ruler)
* ½ Background (type/direction)
* ✓ Border
- * ½ Shadow (inset)
+ * Shadow
* ✓ Text-shadow
* Rotation
* ✓ Opacity
View
59 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,7 +103,38 @@ 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),
[
@@ -93,12 +142,14 @@ class List extends Spine.Controller
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
View
5 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
View
4 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>
View
10 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 {
View
3 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)
}
}
View
4 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
View
56 assets/stylesheets/app/popup.css.styl
@@ -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)
- }
- }
-}
View
73 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);
View
4 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);
;}});
View
81 public/assets/application.css
@@ -100,16 +100,16 @@ body {
}
.contextMenu {
position: absolute;
- width: 150px;
+ min-width: 150px;
background: rgba(255,255,255,0.95);
- -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.10);
- -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.10);
- box-shadow: 0 2px 5px rgba(0,0,0,0.10);
+ -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.20);
+ -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.20);
+ box-shadow: 0 2px 5px rgba(0,0,0,0.20);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
- border: 1px solid rgba(0,0,0,0.10);
- border-bottom-color: rgba(0,0,0,0.15);
+ border: 1px solid rgba(0,0,0,0.20);
+ border-bottom-color: rgba(0,0,0,0.25);
color: #000;
font-size: 13px;
z-index: 10002;
@@ -128,7 +128,7 @@ body {
}
.contextMenu div:not(.disabled):hover {
color: #fff;
- text-shadow: 0 -1px 1px rgba(0,0,0,0.10);
+ text-shadow: 0 -1px 1px rgba(0,0,0,0.20);
background: #bac4d8;
background: -webkit-gradient(linear, left top, left bottom, from(#bac4d8), to(#9aa8c7));
background: -webkit-linear-gradient(top, #bac4d8, #9aa8c7);
@@ -488,6 +488,7 @@ body {
#app .inspector .list .items {
min-height: 35px;
max-height: 100px;
+ overflow-x: auto;
}
#app .inspector .list .item {
padding: 8px;
@@ -514,6 +515,7 @@ body {
width: 8px;
height: 8px;
display: inline-block;
+ border: 1px solid rgba(0,0,0,0.10);
}
#app .inspector .list footer {
border-top: 1px solid rgba(0,0,0,0.15);
@@ -801,8 +803,9 @@ body {
width: 40px;
}
.popupMenu {
+ -webkit-user-select: none;
position: absolute;
- width: 130px;
+ min-width: 130px;
background: rgba(255,255,255,0.95);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,0.20);
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.20);
@@ -862,68 +865,6 @@ body {
position: relative;
top: -6px;
}
-.popup {
- -moz-border-radius: 4px;
- -webkit-border-radius: 4px;
- border-radius: 4px;
- border: 1px solid #b5b5b5;
- border-bottom-color: #a7a7a7;
- border-top-color: #d8d8d8;
- -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.24);
- -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.24);
- box-shadow: 0 4px 8px rgba(0,0,0,0.24);
- background: #fff;
- min-width: 400px;
- color: #000;
- z-index: 10000;
-}
-.popup article {
- padding: 5px;
-}
-.popup footer {
- border-top: 1px solid rgba(0,0,0,0.15);
- -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.80);
- -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.80);
- -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.80);
- -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.80);
- box-shadow: inset 0 1px 0 rgba(255,255,255,0.80);
- background: #fcfcfc;
- background: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(rgba(238,238,238,0.90)));
- background: -webkit-linear-gradient(top, #fcfcfc, rgba(238,238,238,0.90));
- background: -moz-linear-gradient(top, #fcfcfc, rgba(238,238,238,0.90));
- background: linear-gradient(top, #fcfcfc, rgba(238,238,238,0.90));
- -webkit-border-radius: 0 0 4px 4px;
-}
-.popup footer button {
- margin: 0;
- color: #717a81;
- font-size: 11px;
- font-weight: bold;
- text-transform: uppercase;
- text-shadow: 0 1px 1px #fff;
- padding: 8px 13px;
- -moz-box-shadow: inset -1px 0 1px rgba(255,255,255,0.50);
- -webkit-box-shadow: inset -1px 0 1px rgba(255,255,255,0.50);
- box-shadow: inset -1px 0 1px rgba(255,255,255,0.50);
- border: none;
- border-right: 1px solid rgba(0,0,0,0.15);
- background: none;
-}
-.popup.list .items {
- min-height: 180px;
-}
-.popup.list .item {
- padding: 10px;
- cursor: pointer;
-}
-.popup.list .item.selected {
- color: #fff;
- background: #bac4d8;
- background: -webkit-gradient(linear, left top, left bottom, from(#bac4d8), to(#9aa8c7));
- background: -webkit-linear-gradient(top, #bac4d8, #9aa8c7);
- background: -moz-linear-gradient(top, #bac4d8, #9aa8c7);
- background: linear-gradient(top, #bac4d8, #9aa8c7);
-}
#app .stage {
position: absolute;
top: 0;
View
128 public/assets/application.js
@@ -13576,7 +13576,7 @@ this.require.define({"app/controllers/inspector":function(exports, require, modu
}).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); }; };
@@ -13593,6 +13593,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);
@@ -13682,6 +13684,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);
@@ -13720,10 +13752,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() {
@@ -13732,6 +13777,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);
@@ -16966,7 +17029,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() {
@@ -17012,6 +17075,8 @@ this.require.define({"app/models/properties/background":function(exports, requir
module.exports.ColorStop = ColorStop;
+ module.exports.Color = Color;
+
}).call(this);
;}});
this.require.define({"app/models/properties/border":function(exports, require, module){(function() {
@@ -19909,6 +19974,57 @@ this.require.define({"app/parsers/import":function(exports, require, module){(fu
}).call(this);
(function() {
this.JST || (this.JST = {});
+ this.JST["app/views/inspector/background/menu"] = function(__obj) {
+ if (!__obj) __obj = {};
+ var __out = [], __capture = function(callback) {
+ var out = __out, result;
+ __out = [];
+ callback.call(this);
+ result = __out.join('');
+ __out = out;
+ return __safe(result);
+ }, __sanitize = function(value) {
+ if (value && value.ecoSafe) {
+ return value;
+ } else if (typeof value !== 'undefined' && value != null) {
+ return __escape(value);
+ } else {
+ return '';
+ }
+ }, __safe, __objSafe = __obj.safe, __escape = __obj.escape;
+ __safe = __obj.safe = function(value) {
+ if (value && value.ecoSafe) {
+ return value;
+ } else {
+ if (!(typeof value !== 'undefined' && value != null)) value = '';
+ var result = new String(value);
+ result.ecoSafe = true;
+ return result;
+ }
+ };
+ if (!__escape) {
+ __escape = __obj.escape = function(value) {
+ return ('' + value)
+ .replace(/&/g, '&amp;')
+ .replace(/</g, '&lt;')
+ .replace(/>/g, '&gt;')
+ .replace(/"/g, '&quot;');
+ };
+ }
+ (function() {
+ (function() {
+
+ __out.push('<div data-type="backgroundColor">Add Background Color</div>\n<div data-type="linearGradient">Add Linear Gradient</div>\n<!-- <div data-type="radialGradient">Add Radial Gradient</div> -->\n<div data-type="url">Add Image URL</div>\n');
+
+ }).call(this);
+
+ }).call(__obj);
+ __obj.safe = __objSafe, __obj.escape = __escape;
+ return __out.join('');
+ };
+}).call(this);
+(function() {
+ this.JST || (this.JST = {});
this.JST["app/views/inspector/background/url"] = function(__obj) {
if (!__obj) __obj = {};
var __out = [], __capture = function(callback) {

0 comments on commit a0e404f

Please sign in to comment.
Something went wrong with that request. Please try again.