Skip to content
Browse files

refactoring, styling

  • Loading branch information...
1 parent 20534f2 commit 19693b7ff02c24f47c9bc0e96cec760991f6e6b8 @maccman committed Apr 16, 2012
View
10 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()
View
12 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
View
7 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
View
35 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
View
2 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)
View
28 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
View
4 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>
View
37 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>
View
21 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
+ }
+}
View
18 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();
View
21 public/assets/app/controllers/inspector/border.module.js
@@ -74,11 +74,6 @@ this.require.define({"app/controllers/inspector/border":function(exports, requir
BorderController.name = 'BorderController';
- function BorderController() {
- this.render = __bind(this.render, this);
- return BorderController.__super__.constructor.apply(this, arguments);
- }
-
BorderController.prototype.className = 'border';
BorderController.prototype.events = {
@@ -95,18 +90,24 @@ this.require.define({"app/controllers/inspector/border":function(exports, requir
BorderController.prototype.current = 'border';
- BorderController.prototype.render = function() {
+ function BorderController() {
+ this.render = __bind(this.render, this);
+
var _this = this;
- this.disabled = !this.stage.selection.isAny();
- if (this.stage.selection.get('border') === false) {
- this.disabled = true;
- }
+ BorderController.__super__.constructor.apply(this, arguments);
this.html(JST['app/views/inspector/border'](this));
this.$color = new ColorPicker.Preview;
this.$color.bind('change', function() {
return _this.inputChange();
});
this.$('input[type=color]').replaceWith(this.$color.el);
+ }
+
+ BorderController.prototype.render = function() {
+ this.disabled = !this.stage.selection.isAny();
+ if (this.stage.selection.get('border') === false) {
+ this.disabled = true;
+ }
this.change(this.current);
this.el.toggleClass('disabled', this.disabled);
this.$inputs.attr('disabled', this.disabled);
View
12 public/assets/app/controllers/inspector/border_radius.module.js
@@ -70,11 +70,6 @@ this.require.define({"app/controllers/inspector/border_radius":function(exports,
BorderRadius.name = 'BorderRadius';
- function BorderRadius() {
- this.render = __bind(this.render, this);
- return BorderRadius.__super__.constructor.apply(this, arguments);
- }
-
BorderRadius.prototype.className = 'borderRadius';
BorderRadius.prototype.events = {
@@ -89,12 +84,17 @@ this.require.define({"app/controllers/inspector/border_radius":function(exports,
BorderRadius.prototype.current = 'borderRadius';
+ function BorderRadius() {
+ this.render = __bind(this.render, this);
+ BorderRadius.__super__.constructor.apply(this, arguments);
+ this.html(JST['app/views/inspector/border_radius'](this));
+ }
+
BorderRadius.prototype.render = function() {
this.disabled = !this.stage.selection.isAny();
if (this.stage.selection.get('borderRadius') === false) {
this.disabled = true;
}
- this.html(JST['app/views/inspector/border_radius'](this));
this.change(this.current);
this.el.toggleClass('disabled', this.disabled);
this.$inputs.attr('disabled', this.disabled);
View
32 public/assets/app/controllers/inspector/box_shadow.module.js
@@ -105,55 +105,53 @@ this.require.define({"app/controllers/inspector/box_shadow":function(exports, re
BoxShadowEdit.prototype.render = function() {
var _this = this;
- this.html(JST['app/views/inspector/box_shadow'](this));
- this.colorInput = new ColorPicker.Preview({
- color: this.shadow.color,
- el: this.$('.colorInput')
+ this.$color = new ColorPicker.Preview({
+ color: this.shadow.color
});
- this.colorInput.bind('change', function(color) {
- _this.shadow.color.set(color);
- _this.trigger('change', _this.shadow);
- return _this.update();
+ this.$color.bind('change', function(color) {
+ return _this.inputChange();
});
- this.positionPicker = new PositionPicker({
- el: this.$('.positionInput')
- });
- this.positionPicker.bind('change', function(position) {
+ this.$position = new PositionPicker;
+ this.$position.bind('change', function(position) {
_this.shadow.x = position.left;
_this.shadow.y = position.top;
_this.trigger('change', _this.shadow);
return _this.update();
});
+ this.html(JST['app/views/inspector/box_shadow'](this));
+ this.$('input[type=color]').replaceWith(this.$color.el);
+ this.$('input[type=position]').replaceWith(this.$position.el);
this.update();
return this;
};
BoxShadowEdit.prototype.update = function() {
this.$inputs.attr('disabled', this.disabled);
- this.positionPicker.disabled = this.disabled;
- this.positionPicker.change({
+ this.$position.change({
left: this.shadow.x,
top: this.shadow.y
});
this.$x.val(this.shadow.x);
this.$y.val(this.shadow.y);
- return this.$blur.val(this.shadow.blur);
+ this.$blur.val(this.shadow.blur);
+ return this.$color.val(this.shadow.color);
};
BoxShadowEdit.prototype.inputChange = function(e) {
this.shadow.x = parseFloat(this.$x.val());
this.shadow.y = parseFloat(this.$y.val());
this.shadow.blur = parseFloat(this.$blur.val()) || 0;
+ this.shadow.color = this.$color.val();
this.trigger('change', this.shadow);
return this.update();
};
BoxShadowEdit.prototype.release = function() {
var _ref, _ref1;
- if ((_ref = this.colorInput) != null) {
+ if ((_ref = this.$color) != null) {
_ref.release();
}
- if ((_ref1 = this.positionPicker) != null) {
+ if ((_ref1 = this.$position) != null) {
_ref1.release();
}
return BoxShadowEdit.__super__.release.apply(this, arguments);
View
2 public/assets/app/controllers/inspector/dimensions.module.js
@@ -90,11 +90,11 @@ this.require.define({"app/controllers/inspector/dimensions":function(exports, re
this.render = __bind(this.render, this);
Dimensions.__super__.constructor.apply(this, arguments);
$(document).bind('resize.element move.element', this.update);
+ this.html(JST['app/views/inspector/dimensions'](this));
}
Dimensions.prototype.render = function() {
this.disabled = !this.stage.selection.isSingle();
- this.html(JST['app/views/inspector/dimensions'](this));
this.update();
this.el.toggleClass('disabled', this.disabled);
this.$inputs.attr('disabled', this.disabled);
View
33 public/assets/app/controllers/inspector/text_shadow.module.js
@@ -90,26 +90,26 @@ this.require.define({"app/controllers/inspector/text_shadow":function(exports, r
function TextShadow() {
var _this = this;
TextShadow.__super__.constructor.apply(this, arguments);
- this.positionPicker = new PositionPicker;
- this.positionPicker.bind('change', function(position) {
+ this.$position = new PositionPicker;
+ this.$position.bind('change', function(position) {
_this.shadow.x = position.left;
_this.shadow.y = position.top;
- _this.stage.selection.set('textShadow', _this.shadow);
+ _this.set();
return _this.update();
});
this.$color = new ColorPicker.Preview;
this.$color.bind('change', function() {
return _this.change();
});
+ this.html(JST['app/views/inspector/text_shadow'](this));
+ this.$('input[type=color]').replaceWith(this.$color.el);
+ this.$('input[type=position]').replaceWith(this.$position.el);
}
TextShadow.prototype.render = function() {
this.disabled = !this.stage.selection.isAny();
this.shadow = this.stage.selection.get('textShadow');
this.shadow || (this.shadow = new Shadow);
- this.html(JST['app/views/inspector/text_shadow'](this));
- this.$('input[type=color]').replaceWith(this.$color.el);
- this.append(this.positionPicker);
this.update();
return this;
};
@@ -127,20 +127,31 @@ this.require.define({"app/controllers/inspector/text_shadow":function(exports, r
this.shadow.y = parseFloat(this.$y.val());
this.shadow.blur = parseFloat(this.$blur.val());
this.shadow.color = this.$color.val();
- this.positionPicker.change({
+ this.$position.change({
left: this.shadow.x,
top: this.shadow.y
});
- this.stage.history.record('textShadow');
- this.stage.selection.set('textShadow', this.shadow);
+ this.set();
return this.update();
};
+ TextShadow.prototype.set = function() {
+ var _base;
+ if ((_base = this.shadow).blur == null) {
+ _base.blur = 0;
+ }
+ this.stage.history.record('textShadow');
+ return this.stage.selection.set('textShadow', this.shadow);
+ };
+
TextShadow.prototype.release = function() {
- var _ref;
- if ((_ref = this.positionPicker) != null) {
+ var _ref, _ref1;
+ if ((_ref = this.$position) != null) {
_ref.release();
}
+ if ((_ref1 = this.$color) != null) {
+ _ref1.release();
+ }
return TextShadow.__super__.release.apply(this, arguments);
};
View
15 public/assets/application.css
@@ -781,6 +781,21 @@ body {
#app .inspector .textPosition label span {
width: 85px;
}
+#app .inspector .textShadow .positionPicker {
+ margin: 3px 5px 3px 0;
+}
+#app .inspector .textShadow label span {
+ margin-left: 3px;
+ width: auto;
+}
+#app .inspector .textShadow .blur span,
+#app .inspector .textShadow .color span {
+ width: 33px;
+}
+#app .inspector .textShadow .color span {
+ position: relative;
+ top: -6px;
+}
.popup {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
View
122 public/assets/application.js
@@ -13430,11 +13430,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({
@@ -13445,12 +13445,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();
@@ -13487,6 +13482,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();
@@ -13756,11 +13758,6 @@ this.require.define({"app/controllers/inspector/border":function(exports, requir
BorderController.name = 'BorderController';
- function BorderController() {
- this.render = __bind(this.render, this);
- return BorderController.__super__.constructor.apply(this, arguments);
- }
-
BorderController.prototype.className = 'border';
BorderController.prototype.events = {
@@ -13777,18 +13774,24 @@ this.require.define({"app/controllers/inspector/border":function(exports, requir
BorderController.prototype.current = 'border';
- BorderController.prototype.render = function() {
+ function BorderController() {
+ this.render = __bind(this.render, this);
+
var _this = this;
- this.disabled = !this.stage.selection.isAny();
- if (this.stage.selection.get('border') === false) {
- this.disabled = true;
- }
+ BorderController.__super__.constructor.apply(this, arguments);
this.html(JST['app/views/inspector/border'](this));
this.$color = new ColorPicker.Preview;
this.$color.bind('change', function() {
return _this.inputChange();
});
this.$('input[type=color]').replaceWith(this.$color.el);
+ }
+
+ BorderController.prototype.render = function() {
+ this.disabled = !this.stage.selection.isAny();
+ if (this.stage.selection.get('border') === false) {
+ this.disabled = true;
+ }
this.change(this.current);
this.el.toggleClass('disabled', this.disabled);
this.$inputs.attr('disabled', this.disabled);
@@ -13866,11 +13869,6 @@ this.require.define({"app/controllers/inspector/border_radius":function(exports,
BorderRadius.name = 'BorderRadius';
- function BorderRadius() {
- this.render = __bind(this.render, this);
- return BorderRadius.__super__.constructor.apply(this, arguments);
- }
-
BorderRadius.prototype.className = 'borderRadius';
BorderRadius.prototype.events = {
@@ -13885,12 +13883,17 @@ this.require.define({"app/controllers/inspector/border_radius":function(exports,
BorderRadius.prototype.current = 'borderRadius';
+ function BorderRadius() {
+ this.render = __bind(this.render, this);
+ BorderRadius.__super__.constructor.apply(this, arguments);
+ this.html(JST['app/views/inspector/border_radius'](this));
+ }
+
BorderRadius.prototype.render = function() {
this.disabled = !this.stage.selection.isAny();
if (this.stage.selection.get('borderRadius') === false) {
this.disabled = true;
}
- this.html(JST['app/views/inspector/border_radius'](this));
this.change(this.current);
this.el.toggleClass('disabled', this.disabled);
this.$inputs.attr('disabled', this.disabled);
@@ -13989,55 +13992,53 @@ this.require.define({"app/controllers/inspector/box_shadow":function(exports, re
BoxShadowEdit.prototype.render = function() {
var _this = this;
- this.html(JST['app/views/inspector/box_shadow'](this));
- this.colorInput = new ColorPicker.Preview({
- color: this.shadow.color,
- el: this.$('.colorInput')
- });
- this.colorInput.bind('change', function(color) {
- _this.shadow.color.set(color);
- _this.trigger('change', _this.shadow);
- return _this.update();
+ this.$color = new ColorPicker.Preview({
+ color: this.shadow.color
});
- this.positionPicker = new PositionPicker({
- el: this.$('.positionInput')
+ this.$color.bind('change', function(color) {
+ return _this.inputChange();
});
- this.positionPicker.bind('change', function(position) {
+ this.$position = new PositionPicker;
+ this.$position.bind('change', function(position) {
_this.shadow.x = position.left;
_this.shadow.y = position.top;
_this.trigger('change', _this.shadow);
return _this.update();
});
+ this.html(JST['app/views/inspector/box_shadow'](this));
+ this.$('input[type=color]').replaceWith(this.$color.el);
+ this.$('input[type=position]').replaceWith(this.$position.el);
this.update();
return this;
};
BoxShadowEdit.prototype.update = function() {
this.$inputs.attr('disabled', this.disabled);
- this.positionPicker.disabled = this.disabled;
- this.positionPicker.change({
+ this.$position.change({
left: this.shadow.x,
top: this.shadow.y
});
this.$x.val(this.shadow.x);
this.$y.val(this.shadow.y);
- return this.$blur.val(this.shadow.blur);
+ this.$blur.val(this.shadow.blur);
+ return this.$color.val(this.shadow.color);
};
BoxShadowEdit.prototype.inputChange = function(e) {
this.shadow.x = parseFloat(this.$x.val());
this.shadow.y = parseFloat(this.$y.val());
this.shadow.blur = parseFloat(this.$blur.val()) || 0;
+ this.shadow.color = this.$color.val();
this.trigger('change', this.shadow);
return this.update();
};
BoxShadowEdit.prototype.release = function() {
var _ref, _ref1;
- if ((_ref = this.colorInput) != null) {
+ if ((_ref = this.$color) != null) {
_ref.release();
}
- if ((_ref1 = this.positionPicker) != null) {
+ if ((_ref1 = this.$position) != null) {
_ref1.release();
}
return BoxShadowEdit.__super__.release.apply(this, arguments);
@@ -14214,11 +14215,11 @@ this.require.define({"app/controllers/inspector/dimensions":function(exports, re
this.render = __bind(this.render, this);
Dimensions.__super__.constructor.apply(this, arguments);
$(document).bind('resize.element move.element', this.update);
+ this.html(JST['app/views/inspector/dimensions'](this));
}
Dimensions.prototype.render = function() {
this.disabled = !this.stage.selection.isSingle();
- this.html(JST['app/views/inspector/dimensions'](this));
this.update();
this.el.toggleClass('disabled', this.disabled);
this.$inputs.attr('disabled', this.disabled);
@@ -14448,26 +14449,26 @@ this.require.define({"app/controllers/inspector/text_shadow":function(exports, r
function TextShadow() {
var _this = this;
TextShadow.__super__.constructor.apply(this, arguments);
- this.positionPicker = new PositionPicker;
- this.positionPicker.bind('change', function(position) {
+ this.$position = new PositionPicker;
+ this.$position.bind('change', function(position) {
_this.shadow.x = position.left;
_this.shadow.y = position.top;
- _this.stage.selection.set('textShadow', _this.shadow);
+ _this.set();
return _this.update();
});
this.$color = new ColorPicker.Preview;
this.$color.bind('change', function() {
return _this.change();
});
+ this.html(JST['app/views/inspector/text_shadow'](this));
+ this.$('input[type=color]').replaceWith(this.$color.el);
+ this.$('input[type=position]').replaceWith(this.$position.el);
}
TextShadow.prototype.render = function() {
this.disabled = !this.stage.selection.isAny();
this.shadow = this.stage.selection.get('textShadow');
this.shadow || (this.shadow = new Shadow);
- this.html(JST['app/views/inspector/text_shadow'](this));
- this.$('input[type=color]').replaceWith(this.$color.el);
- this.append(this.positionPicker);
this.update();
return this;
};
@@ -14485,20 +14486,31 @@ this.require.define({"app/controllers/inspector/text_shadow":function(exports, r
this.shadow.y = parseFloat(this.$y.val());
this.shadow.blur = parseFloat(this.$blur.val());
this.shadow.color = this.$color.val();
- this.positionPicker.change({
+ this.$position.change({
left: this.shadow.x,
top: this.shadow.y
});
- this.stage.history.record('textShadow');
- this.stage.selection.set('textShadow', this.shadow);
+ this.set();
return this.update();
};
+ TextShadow.prototype.set = function() {
+ var _base;
+ if ((_base = this.shadow).blur == null) {
+ _base.blur = 0;
+ }
+ this.stage.history.record('textShadow');
+ return this.stage.selection.set('textShadow', this.shadow);
+ };
+
TextShadow.prototype.release = function() {
- var _ref;
- if ((_ref = this.positionPicker) != null) {
+ var _ref, _ref1;
+ if ((_ref = this.$position) != null) {
_ref.release();
}
+ if ((_ref1 = this.$color) != null) {
+ _ref1.release();
+ }
return TextShadow.__super__.release.apply(this, arguments);
};
@@ -17689,7 +17701,7 @@ this.require.define({"app/models/serialize":function(exports, require, module){(
(function() {
(function() {
- __out.push('<article>\n <div class="hbox">\n <div class="positionInput"></div>\n\n <div class="vbox">\n <label>\n <span>X</span>\n <input type="number" name="x" placeholder="0px">\n </label>\n\n <label>\n <span>Y</span>\n <input type="number" name="y" placeholder="0px">\n </label>\n </div>\n\n <div class="vbox">\n <label class="blur">\n <span>Blur</span>\n <input type="number" name="blur" placeholder="0px">\n </label>\n\n <label class="color">\n <span>Color</span>\n <div class="colorInput"></div>\n </label>\n </div>\n </div>\n</article>\n');
+ __out.push('<article>\n <div class="hbox">\n <input type="position" name="position">\n\n <div class="vbox">\n <label>\n <span>X</span>\n <input type="number" name="x" placeholder="0px">\n </label>\n\n <label>\n <span>Y</span>\n <input type="number" name="y" placeholder="0px">\n </label>\n </div>\n\n <div class="vbox">\n <label class="blur">\n <span>Blur</span>\n <input type="number" name="blur" placeholder="0px">\n </label>\n\n <label class="color">\n <span>Color</span>\n <input type="color" name="color">\n </label>\n </div>\n </div>\n</article>\n');
}).call(this);
@@ -18028,7 +18040,7 @@ this.require.define({"app/models/serialize":function(exports, require, module){(
(function() {
(function() {
- __out.push('<h3>Text Shadow</h3>\n\n<article>\n <label>\n <span>X</span>\n <input type="number" name="x" placeholder="0px">\n </label>\n\n <label>\n <span>Y</span>\n <input type="number" name="y" placeholder="0px">\n </label>\n\n <label>\n <span>Blur</span>\n <input type="number" name="blur" placeholder="0px">\n </label>\n\n <input type="color" name="color">\n</article>\n');
+ __out.push('<h3>Text Shadow</h3>\n\n<article>\n <div class="hbox">\n <input type="position" name="position">\n\n <div class="vbox">\n <label>\n <span>X</span>\n <input type="number" name="x" placeholder="0px">\n </label>\n\n <label>\n <span>Y</span>\n <input type="number" name="y" placeholder="0px">\n </label>\n </div>\n\n <div class="vbox">\n <label class="blur">\n <span>Blur</span>\n <input type="number" name="blur" placeholder="0px">\n </label>\n\n <label class="color">\n <span>Color</span>\n <input type="color" name="color">\n </label>\n </div>\n </div>\n</article>\n');
}).call(this);

0 comments on commit 19693b7

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