fix font

maccman · Apr 17, 2012 · 55e1450 · 55e1450
1 parent 810990b
commit 55e1450
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 57 deletions.
diff --git a/assets/javascripts/app/controllers/elements/text.module.coffee b/assets/javascripts/app/controllers/elements/text.module.coffee
@@ -9,16 +9,16 @@ class Text extends Rectangle
     'dblclick': 'startEditing'
     'dblclick .thumb.br': 'fitToText'
 
-  textDefaults: ->
+  defaults: ->
     result =
       height: 30
       fontSize: 18
       backgroundColor: new Color.Transparent
 
+    $.extend({}, super, result)
+
   constructor: (attrs = {}) ->
     super
-
-    @set(@textDefaults())
     @text(attrs.text)
 
   startEditing: ->

diff --git a/assets/javascripts/app/controllers/inspector/font.module.coffee b/assets/javascripts/app/controllers/inspector/font.module.coffee
@@ -10,7 +10,8 @@ class Font extends Spine.Controller
     'select[name=family]': '$family'
 
   events:
-    'change input, select': 'change'
+    'change input': 'change'
+    'change select': 'change'
 
   constructor: ->
     super

diff --git a/assets/javascripts/app/views/inspector/font.jst.eco b/assets/javascripts/app/views/inspector/font.jst.eco
@@ -16,7 +16,9 @@
     <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>
+      <option value="'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif">Helvetica Neue, Arial, Helvetica, Geneva, sans-serif</option>
+      <option value="Georgia, 'Times New Roman', Times, serif">Georgia, Times New Roman, Times, serif</option>
+      <option value="'Courier New', Courier, mono">Courier New, Courier, mono</option>
     </select>
   </label>
 </article>
diff --git a/assets/stylesheets/app/inspector.css.styl b/assets/stylesheets/app/inspector.css.styl
@@ -25,7 +25,7 @@
     border-left: 1px solid #C6C6C6
     border-bottom: 1px solid darken(#DDDDDD, 10%)
     // text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8)
-    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5)
+    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3)
     text-transform: uppercase
     font-weight: bold
     font-size: 11px
@@ -42,7 +42,7 @@
       }
 
       &:active, &.active {
-        background: rgba(255, 255, 255, 0.13)
+        background: rgba(255, 255, 255, 0.18)
       }
     }
   }
@@ -100,17 +100,6 @@
     inset-box-shadow(0, 1px, 2px, rgba(0, 0, 0, 0.1))
   }
 
-  input[type=text], input[type=url], input[type=number], input[type=color], textarea, select {
-    &:focus {
-      outline: none
-      border-color: rgba(104, 189, 244, 0.8)
-
-      -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(104, 189, 244, 0.6)
-      -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(104, 189, 244, 0.6)
-      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(104, 189, 244, 0.6)
-    }
-  }
-
   input[disabled] {
     opacity: 0.8
   }
@@ -190,17 +179,17 @@
     .item {
       padding: 8px
       cursor: pointer
-      border-bottom: 1px solid rgba(0, 0, 0, 0.25)
+      border-bottom: 1px solid rgba(0, 0, 0, 0.2)
       ellipsis()
 
       &:last-child {
         border-bottom: none
       }
 
       &.selected {
-        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8)
+        color: #FFF
-        color: #5B5B5B
+        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2)
-        vbg-gradient(rgb(245, 245, 245), rgb(230, 230, 230))
+        vbg-gradient(#BCC6DE, #9BA8C7)
       }
 
       .preview {

diff --git a/assets/stylesheets/app/inspector/font.css.styl b/assets/stylesheets/app/inspector/font.css.styl
@@ -1,6 +1,6 @@
 #app .inspector .font {
   label span {
-    width: 40px
+    width: 45px
   }
 
   select {

diff --git a/public/assets/app/controllers/elements/text.module.js b/public/assets/app/controllers/elements/text.module.js
@@ -82,21 +82,21 @@ this.require.define({"app/controllers/elements/text":function(exports, require,
       'dblclick .thumb.br': 'fitToText'
     };
 
-    Text.prototype.textDefaults = function() {
+    Text.prototype.defaults = function() {
       var result;
-      return result = {
+      result = {
         height: 30,
         fontSize: 18,
         backgroundColor: new Color.Transparent
       };
+      return $.extend({}, Text.__super__.defaults.apply(this, arguments), result);
     };
 
     function Text(attrs) {
       if (attrs == null) {
         attrs = {};
       }
       Text.__super__.constructor.apply(this, arguments);
-      this.set(this.textDefaults());
       this.text(attrs.text);
     }
 

diff --git a/public/assets/app/controllers/inspector/font.module.js b/public/assets/app/controllers/inspector/font.module.js
@@ -83,7 +83,8 @@ this.require.define({"app/controllers/inspector/font":function(exports, require,
     };
 
     Font.prototype.events = {
-      'change input, select': 'change'
+      'change input': 'change',
+      'change select': 'change'
     };
 
     function Font() {

diff --git a/public/assets/application.css b/public/assets/application.css
@@ -313,7 +313,7 @@ body {
   color: #fff;
   border-left: 1px solid #c6c6c6;
   border-bottom: 1px solid #c7c7c7;
-  text-shadow: 0px -1px 0px rgba(0,0,0,0.50);
+  text-shadow: 0px -1px 0px rgba(0,0,0,0.30);
   text-transform: uppercase;
   font-weight: bold;
   font-size: 11px;
@@ -332,7 +332,7 @@ body {
 }
 #app .inspector header div:active,
 #app .inspector header div.active {
-  background: rgba(255,255,255,0.13);
+  background: rgba(255,255,255,0.18);
 }
 #app .inspector .textInspector,
 #app .inspector .displayInspector {
@@ -393,20 +393,6 @@ body {
   -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.10);
   box-shadow: inset 0 1px 2px rgba(0,0,0,0.10);
 }
-#app .inspector input[type=text]:focus,
-#app .inspector input[type=url]:focus,
-#app .inspector input[type=number]:focus,
-#app .inspector input[type=color]:focus,
-#app .inspector textarea:focus,
-#app .inspector select:focus {
-  outline: none;
-  border-color: rgba(104,189,244,0.80);
-  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.20), 0 1px 5px 0 rgba(104,189,244,0.60);
-  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.20), 0 1px 5px 0 rgba(104,189,244,0.60);
-  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.20), 0 1px 5px 0 rgba(104,189,244,0.60);
-  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.20), 0 1px 5px 0 rgba(104,189,244,0.60);
-  box-shadow: inset 0 1px 2px rgba(0,0,0,0.20), 0 1px 5px 0 rgba(104,189,244,0.60);
-}
 #app .inspector input[disabled] {
   opacity: 0.8;
 }
@@ -479,7 +465,7 @@ body {
 #app .inspector .list .item {
   padding: 8px;
   cursor: pointer;
-  border-bottom: 1px solid rgba(0,0,0,0.25);
+  border-bottom: 1px solid rgba(0,0,0,0.20);
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -488,13 +474,13 @@ body {
   border-bottom: none;
 }
 #app .inspector .list .item.selected {
-  text-shadow: 0 1px 1px rgba(255,255,255,0.80);
+  color: #fff;
-  color: #5b5b5b;
+  text-shadow: 0 -1px 0 rgba(0,0,0,0.20);
-  background: #f5f5f5;
+  background: #bcc6de;
-  background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e6e6e6));
+  background: -webkit-gradient(linear, left top, left bottom, from(#bcc6de), to(#9ba8c7));
-  background: -webkit-linear-gradient(top, #f5f5f5, #e6e6e6);
+  background: -webkit-linear-gradient(top, #bcc6de, #9ba8c7);
-  background: -moz-linear-gradient(top, #f5f5f5, #e6e6e6);
+  background: -moz-linear-gradient(top, #bcc6de, #9ba8c7);
-  background: linear-gradient(top, #f5f5f5, #e6e6e6);
+  background: linear-gradient(top, #bcc6de, #9ba8c7);
 }
 #app .inspector .list .item .preview {
   margin: 0 3px 0 0;
@@ -755,7 +741,7 @@ body {
   width: 15px;
 }
 #app .inspector .font label span {
-  width: 40px;
+  width: 45px;
 }
 #app .inspector .font select {
   width: 120px;

diff --git a/public/assets/application.js b/public/assets/application.js
@@ -13093,21 +13093,21 @@ this.require.define({"app/controllers/elements/text":function(exports, require,
       'dblclick .thumb.br': 'fitToText'
     };
 
-    Text.prototype.textDefaults = function() {
+    Text.prototype.defaults = function() {
       var result;
-      return result = {
+      result = {
         height: 30,
         fontSize: 18,
         backgroundColor: new Color.Transparent
       };
+      return $.extend({}, Text.__super__.defaults.apply(this, arguments), result);
     };
 
     function Text(attrs) {
       if (attrs == null) {
         attrs = {};
       }
       Text.__super__.constructor.apply(this, arguments);
-      this.set(this.textDefaults());
       this.text(attrs.text);
     }
 
@@ -14298,7 +14298,8 @@ this.require.define({"app/controllers/inspector/font":function(exports, require,
     };
 
     Font.prototype.events = {
-      'change input, select': 'change'
+      'change input': 'change',
+      'change select': 'change'
     };
 
     function Font() {
@@ -17904,7 +17905,7 @@ this.require.define({"app/models/serialize":function(exports, require, module){(
     (function() {
       (function() {
 
-        __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');
+        __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      <option value="Georgia, \'Times New Roman\', Times, serif">Georgia, Times New Roman, Times, serif</option>\n      <option value="\'Courier New\', Courier, mono">Courier New, Courier, mono</option>\n    </select>\n  </label>\n</article>\n');
 
       }).call(this);