Browse files

add font

  • Loading branch information...
1 parent 19693b7 commit 810990b4107bb5da5fdf6a2bafcd0d90d33c34b2 @maccman committed Apr 16, 2012
View
11 README.md
@@ -19,7 +19,7 @@ Phase 1:
* ✓ content editable
* ✓ context menu
* Font alignment
- * Font family/size/style/color
+ * Font family/size/color
* ✓ Text-shadow
* ✓ Text-spacing (line height)
@@ -113,4 +113,11 @@ https://typekit.com/
Issue with border radius is that properties are being applied in the wrong order.
Should 'selected' not be a property?
Only save selection in history.
-We should have a benchmarking testing library.
+We should have a benchmarking testing library.
+
+--------------
+
+# Style
+# Decoration
+# Capitalize
+# Alignment
View
8 assets/javascripts/app/controllers/inspector.module.coffee
@@ -6,24 +6,28 @@ BoxShadow = require('./inspector/box_shadow')
TextShadow = require('./inspector/text_shadow')
Dimensions = require('./inspector/dimensions')
TextPosition = require('./inspector/text_position')
+Font = require('./inspector/font')
Utils = require('lib/utils')
class TextInspector extends Spine.Controller
className: 'textInspector'
constructor: ->
super
+ @append(@font = new Font(stage: @stage))
@append(@textPosition = new TextPosition(stage: @stage))
@append(@textShadow = new TextShadow(stage: @stage))
render: ->
+ @font.render()
@textPosition.render()
@textShadow.render()
this
release: ->
- @textPosition.release()
- @textShadow.release()
+ @font?.release()
+ @textPosition?.release()
+ @textShadow?.release()
super
class DisplayInspector extends Spine.Controller
View
36 assets/javascripts/app/controllers/inspector/font.module.coffee
@@ -1,25 +1,37 @@
+Color = require('app/models/properties/color')
+ColorPicker = require('lib/color_picker')
+
class Font extends Spine.Controller
className: 'font'
elements:
'input': '$inputs'
+ 'input[name=size]': '$size'
+ 'select[name=family]': '$family'
- render: =>
- @disabled = not @stage.selection.isAny()
- @fontSize = @stage.selection.get('fontSize') ? 12
+ events:
+ 'change input, select': 'change'
+ constructor: ->
+ super
@html JST['app/views/inspector/font'](this)
- # Color
- # Size
- # Font family
+ @$color = new ColorPicker.Preview
+ @$color.bind 'change', => @change()
+
+ @$('input[type=color]').replaceWith(@$color.el)
+
+ render: =>
+ @disabled = not @stage.selection.isAny()
+ @$color.val(@stage.selection.get('color') or new Color.Black)
+ @$size.val(@stage.selection.get('fontSize'))
+ @$family.val(@stage.selection.get('fontFamily'))
change: (e) ->
- # val = parseFloat($(e.currentTarget).val())
- # val = Math.round(val * 100) / 100
- #
- # @stage.history.record('opacity')
- # @stage.selection.set('opacity', val)
- # @$inputs.val(val)
+ @stage.history.record('font')
+
+ @stage.selection.set('color', @$color.val())
+ @stage.selection.set('fontSize', parseInt(@$size.val(), 10))
+ @stage.selection.set('fontFamily', @$family.val())
module.exports = Font
View
37 assets/javascripts/app/views/inspector/font.jst.eco
@@ -1,23 +1,22 @@
<h3>Font</h3>
-<label>
- <span>Color</span>
- <input type="color" name="color">
-</label>
+<article>
+ <label>
+ <span>Size</span>
+ <input type="number" name="size" placeholder="0px">
+ </label>
-<label>
- <span>Size</span>
- <input type="number" name="size">
-</label>
+ <label class="color">
+ <span>Color</span>
+ <input type="color" name="color">
+ </label>
-# Color
-# Size
-# Line-height
-# Style
-# Decoration
-# Capitalize
-# Font family
-# Alignment
-# text-indent
-# letter-spacing
-# word-spacing
+ <label>
+ <span>Family</span>
+ <select name="family">
+ <option></option>
+ <option value="'Lucida Grande', Lucida, Verdana, sans-serif">Lucida Grande, Lucida, Verdana, sans-serif</option>
+ <option value="'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif">'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif</option>
+ </select>
+ </label>
+</article>
View
40 assets/stylesheets/app/inspector.css.styl
@@ -17,25 +17,32 @@
header {
hbox()
-webkit-box-pack: center
- vbg-gradient(#FFF, rgba(238, 238, 238, 0.9))
+ // vbg-gradient(#FFF, rgba(238, 238, 238, 1))
+ // vbg-gradient(#8F9398, #5D646D)
+ vbg-gradient(#959A9B, #767B7C)
+ color: #FFF
+
border-left: 1px solid #C6C6C6
border-bottom: 1px solid darken(#DDDDDD, 10%)
- text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8)
- font-size: 13px
+ // text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8)
+ text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5)
+ text-transform: uppercase
+ font-weight: bold
+ font-size: 11px
div {
box-flex(1)
padding: 8px 15px
cursor: pointer
- border-right: 1px solid rgba(0, 0, 0, 0.1)
+ border-right: 1px solid #767B7C
text-align: center
&:last-child {
border-right: none
}
&:active, &.active {
- vbg-gradient(darken(rgba(238, 238, 238, 0.9), 10%), rgba(238, 238, 238, 0.9))
+ background: rgba(255, 255, 255, 0.13)
}
}
}
@@ -145,19 +152,6 @@
}
}
- // .preview {
- // border: 1px solid rgba(0, 0, 0, 0.3)
- // padding: 3px
- // cursor: pointer
- // margin: 5px 0 0 0
- // background: url(grid.png) repeat
- // }
- //
- // .preview, .preview .inner {
- // width: 30px
- // height: 30px
- // }
-
.positionPicker {
width: 40px
height: 40px
@@ -204,9 +198,9 @@
}
&.selected {
- color: #FFF
- text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1)
- vbg-gradient(#BAC4D8, #9AA8C7)
+ text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8)
+ color: #5B5B5B
+ vbg-gradient(rgb(245, 245, 245), rgb(230, 230, 230))
}
.preview {
@@ -229,8 +223,8 @@
display: block
float: left
- color: #5B5B5B;
- font-size: 14px;
+ color: #5B5B5B
+ font-size: 14px
font-weight: bold
text-transform: uppercase
text-shadow: 0 1px 1px #FFF;
View
14 assets/stylesheets/app/inspector/font.css.styl
@@ -0,0 +1,14 @@
+#app .inspector .font {
+ label span {
+ width: 40px
+ }
+
+ select {
+ width: 120px
+ }
+
+ .color span {
+ position relative
+ top: -6px
+ }
+}
View
1 assets/stylesheets/app/stage.css.styl
@@ -14,6 +14,7 @@
.element {
border-box()
+ color: #000
}
.element.text.editing, .element.text.selected {
View
20 public/assets/app/controllers/inspector.module.js
@@ -59,7 +59,7 @@
return this.require;
}).call(this);
this.require.define({"app/controllers/inspector":function(exports, require, module){(function() {
- var Background, Border, BorderRadius, BoxShadow, Dimensions, DisplayInspector, Inspector, Opacity, TextInspector, TextPosition, TextShadow, Utils,
+ var Background, Border, BorderRadius, BoxShadow, Dimensions, DisplayInspector, Font, Inspector, Opacity, TextInspector, TextPosition, TextShadow, Utils,
__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); }; };
@@ -80,6 +80,8 @@ this.require.define({"app/controllers/inspector":function(exports, require, modu
TextPosition = require('./inspector/text_position');
+ Font = require('./inspector/font');
+
Utils = require('lib/utils');
TextInspector = (function(_super) {
@@ -92,6 +94,9 @@ this.require.define({"app/controllers/inspector":function(exports, require, modu
function TextInspector() {
TextInspector.__super__.constructor.apply(this, arguments);
+ this.append(this.font = new Font({
+ stage: this.stage
+ }));
this.append(this.textPosition = new TextPosition({
stage: this.stage
}));
@@ -101,14 +106,23 @@ this.require.define({"app/controllers/inspector":function(exports, require, modu
}
TextInspector.prototype.render = function() {
+ this.font.render();
this.textPosition.render();
this.textShadow.render();
return this;
};
TextInspector.prototype.release = function() {
- this.textPosition.release();
- this.textShadow.release();
+ var _ref, _ref1, _ref2;
+ if ((_ref = this.font) != null) {
+ _ref.release();
+ }
+ if ((_ref1 = this.textPosition) != null) {
+ _ref1.release();
+ }
+ if ((_ref2 = this.textShadow) != null) {
+ _ref2.release();
+ }
return TextInspector.__super__.release.apply(this, arguments);
};
View
45 public/assets/app/controllers/inspector/font.module.js
@@ -59,36 +59,59 @@
return this.require;
}).call(this);
this.require.define({"app/controllers/inspector/font":function(exports, require, module){(function() {
- var Font,
+ var Color, ColorPicker, Font,
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
__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; };
+ Color = require('app/models/properties/color');
+
+ ColorPicker = require('lib/color_picker');
+
Font = (function(_super) {
__extends(Font, _super);
Font.name = 'Font';
- function Font() {
- this.render = __bind(this.render, this);
- return Font.__super__.constructor.apply(this, arguments);
- }
-
Font.prototype.className = 'font';
Font.prototype.elements = {
- 'input': '$inputs'
+ 'input': '$inputs',
+ 'input[name=size]': '$size',
+ 'select[name=family]': '$family'
+ };
+
+ Font.prototype.events = {
+ 'change input, select': 'change'
};
+ function Font() {
+ this.render = __bind(this.render, this);
+
+ var _this = this;
+ Font.__super__.constructor.apply(this, arguments);
+ this.html(JST['app/views/inspector/font'](this));
+ this.$color = new ColorPicker.Preview;
+ this.$color.bind('change', function() {
+ return _this.change();
+ });
+ this.$('input[type=color]').replaceWith(this.$color.el);
+ }
+
Font.prototype.render = function() {
- var _ref;
this.disabled = !this.stage.selection.isAny();
- this.fontSize = (_ref = this.stage.selection.get('fontSize')) != null ? _ref : 12;
- return this.html(JST['app/views/inspector/font'](this));
+ this.$color.val(this.stage.selection.get('color') || new Color.Black);
+ this.$size.val(this.stage.selection.get('fontSize'));
+ return this.$family.val(this.stage.selection.get('fontFamily'));
};
- Font.prototype.change = function(e) {};
+ Font.prototype.change = function(e) {
+ this.stage.history.record('font');
+ this.stage.selection.set('color', this.$color.val());
+ this.stage.selection.set('fontSize', parseInt(this.$size.val(), 10));
+ return this.stage.selection.set('fontFamily', this.$family.val());
+ };
return Font;
View
50 public/assets/application.css
@@ -305,35 +305,34 @@ body {
-moz-box-align: stretch;
-moz-box-pack: start;
-webkit-box-pack: center;
- background: #fff;
- background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(rgba(238,238,238,0.90)));
- background: -webkit-linear-gradient(top, #fff, rgba(238,238,238,0.90));
- background: -moz-linear-gradient(top, #fff, rgba(238,238,238,0.90));
- background: linear-gradient(top, #fff, rgba(238,238,238,0.90));
+ background: #959a9b;
+ background: -webkit-gradient(linear, left top, left bottom, from(#959a9b), to(#767b7c));
+ background: -webkit-linear-gradient(top, #959a9b, #767b7c);
+ background: -moz-linear-gradient(top, #959a9b, #767b7c);
+ background: linear-gradient(top, #959a9b, #767b7c);
+ color: #fff;
border-left: 1px solid #c6c6c6;
border-bottom: 1px solid #c7c7c7;
- text-shadow: 0px 1px 0px rgba(255,255,255,0.80);
- font-size: 13px;
+ text-shadow: 0px -1px 0px rgba(0,0,0,0.50);
+ text-transform: uppercase;
+ font-weight: bold;
+ font-size: 11px;
}
#app .inspector header div {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
padding: 8px 15px;
cursor: pointer;
- border-right: 1px solid rgba(0,0,0,0.10);
+ border-right: 1px solid #767b7c;
text-align: center;
}
#app .inspector header div:last-child {
border-right: none;
}
#app .inspector header div:active,
#app .inspector header div.active {
- background: rgba(214,214,214,0.90);
- background: -webkit-gradient(linear, left top, left bottom, from(rgba(214,214,214,0.90)), to(rgba(238,238,238,0.90)));
- background: -webkit-linear-gradient(top, rgba(214,214,214,0.90), rgba(238,238,238,0.90));
- background: -moz-linear-gradient(top, rgba(214,214,214,0.90), rgba(238,238,238,0.90));
- background: linear-gradient(top, rgba(214,214,214,0.90), rgba(238,238,238,0.90));
+ background: rgba(255,255,255,0.13);
}
#app .inspector .textInspector,
#app .inspector .displayInspector {
@@ -489,13 +488,13 @@ body {
border-bottom: none;
}
#app .inspector .list .item.selected {
- color: #fff;
- text-shadow: 0 -1px 1px rgba(0,0,0,0.10);
- 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);
+ text-shadow: 0 1px 1px rgba(255,255,255,0.80);
+ color: #5b5b5b;
+ background: #f5f5f5;
+ background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e6e6e6));
+ background: -webkit-linear-gradient(top, #f5f5f5, #e6e6e6);
+ background: -moz-linear-gradient(top, #f5f5f5, #e6e6e6);
+ background: linear-gradient(top, #f5f5f5, #e6e6e6);
}
#app .inspector .list .item .preview {
margin: 0 3px 0 0;
@@ -755,6 +754,16 @@ body {
#app .inspector .dimensions label:last-child span {
width: 15px;
}
+#app .inspector .font label span {
+ width: 40px;
+}
+#app .inspector .font select {
+ width: 120px;
+}
+#app .inspector .font .color span {
+ position: relative;
+ top: -6px;
+}
#app .inspector .opacity label {
display: -webkit-box;
-webkit-box-orient: horizontal;
@@ -871,6 +880,7 @@ body {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
+ color: #000;
}
#app .stage .element.text.editing,
#app .stage .element.text.selected {
View
67 public/assets/application.js
@@ -13292,7 +13292,7 @@ this.require.define({"app/controllers/header":function(exports, require, module)
}).call(this);
;}});
this.require.define({"app/controllers/inspector":function(exports, require, module){(function() {
- var Background, Border, BorderRadius, BoxShadow, Dimensions, DisplayInspector, Inspector, Opacity, TextInspector, TextPosition, TextShadow, Utils,
+ var Background, Border, BorderRadius, BoxShadow, Dimensions, DisplayInspector, Font, Inspector, Opacity, TextInspector, TextPosition, TextShadow, Utils,
__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); }; };
@@ -13313,6 +13313,8 @@ this.require.define({"app/controllers/inspector":function(exports, require, modu
TextPosition = require('./inspector/text_position');
+ Font = require('./inspector/font');
+
Utils = require('lib/utils');
TextInspector = (function(_super) {
@@ -13325,6 +13327,9 @@ this.require.define({"app/controllers/inspector":function(exports, require, modu
function TextInspector() {
TextInspector.__super__.constructor.apply(this, arguments);
+ this.append(this.font = new Font({
+ stage: this.stage
+ }));
this.append(this.textPosition = new TextPosition({
stage: this.stage
}));
@@ -13334,14 +13339,23 @@ this.require.define({"app/controllers/inspector":function(exports, require, modu
}
TextInspector.prototype.render = function() {
+ this.font.render();
this.textPosition.render();
this.textShadow.render();
return this;
};
TextInspector.prototype.release = function() {
- this.textPosition.release();
- this.textShadow.release();
+ var _ref, _ref1, _ref2;
+ if ((_ref = this.font) != null) {
+ _ref.release();
+ }
+ if ((_ref1 = this.textPosition) != null) {
+ _ref1.release();
+ }
+ if ((_ref2 = this.textShadow) != null) {
+ _ref2.release();
+ }
return TextInspector.__super__.release.apply(this, arguments);
};
@@ -14260,36 +14274,59 @@ this.require.define({"app/controllers/inspector/dimensions":function(exports, re
}).call(this);
;}});
this.require.define({"app/controllers/inspector/font":function(exports, require, module){(function() {
- var Font,
+ var Color, ColorPicker, Font,
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
__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; };
+ Color = require('app/models/properties/color');
+
+ ColorPicker = require('lib/color_picker');
+
Font = (function(_super) {
__extends(Font, _super);
Font.name = 'Font';
- function Font() {
- this.render = __bind(this.render, this);
- return Font.__super__.constructor.apply(this, arguments);
- }
-
Font.prototype.className = 'font';
Font.prototype.elements = {
- 'input': '$inputs'
+ 'input': '$inputs',
+ 'input[name=size]': '$size',
+ 'select[name=family]': '$family'
};
+ Font.prototype.events = {
+ 'change input, select': 'change'
+ };
+
+ function Font() {
+ this.render = __bind(this.render, this);
+
+ var _this = this;
+ Font.__super__.constructor.apply(this, arguments);
+ this.html(JST['app/views/inspector/font'](this));
+ this.$color = new ColorPicker.Preview;
+ this.$color.bind('change', function() {
+ return _this.change();
+ });
+ this.$('input[type=color]').replaceWith(this.$color.el);
+ }
+
Font.prototype.render = function() {
- var _ref;
this.disabled = !this.stage.selection.isAny();
- this.fontSize = (_ref = this.stage.selection.get('fontSize')) != null ? _ref : 12;
- return this.html(JST['app/views/inspector/font'](this));
+ this.$color.val(this.stage.selection.get('color') || new Color.Black);
+ this.$size.val(this.stage.selection.get('fontSize'));
+ return this.$family.val(this.stage.selection.get('fontFamily'));
};
- Font.prototype.change = function(e) {};
+ Font.prototype.change = function(e) {
+ this.stage.history.record('font');
+ this.stage.selection.set('color', this.$color.val());
+ this.stage.selection.set('fontSize', parseInt(this.$size.val(), 10));
+ return this.stage.selection.set('fontFamily', this.$family.val());
+ };
return Font;
@@ -17867,7 +17904,7 @@ this.require.define({"app/models/serialize":function(exports, require, module){(
(function() {
(function() {
- __out.push('<h3>Font</h3>\n\n<label>\n <span>Color</span>\n <input type="color" name="color">\n</label>\n\n<label>\n <span>Size</span>\n <input type="number" name="size">\n</label>\n\n# Color\n# Size\n# Line-height\n# Style\n# Decoration\n# Capitalize\n# Font family\n# Alignment\n# text-indent\n# letter-spacing\n# word-spacing\n');
+ __out.push('<h3>Font</h3>\n\n<article>\n <label>\n <span>Size</span>\n <input type="number" name="size" placeholder="0px">\n </label>\n\n <label class="color">\n <span>Color</span>\n <input type="color" name="color">\n </label>\n\n <label>\n <span>Family</span>\n <select name="family">\n <option></option>\n <option value="\'Lucida Grande\', Lucida, Verdana, sans-serif">Lucida Grande, Lucida, Verdana, sans-serif</option>\n <option value="\'Helvetica Neue\', Arial, Helvetica, Geneva, sans-serif">\'Helvetica Neue\', Arial, Helvetica, Geneva, sans-serif</option>\n </select>\n </label>\n</article>\n');
}).call(this);

0 comments on commit 810990b

Please sign in to comment.