auto and fixed size for text. Fix few bugs

README.md

@@ -42,12 +42,11 @@ Phase 3:
 
 Nice to have:
 
+* HTML import
 * ✓ Keyboard shortcuts
 * Versioning
-* Exporting HTML?
 * ✓ Exporting CSS
 * Share (dropbox/email?)
-* Clone HTML components
 * WebFonts
 * Layers?
 * ✓ Context menu
@@ -78,20 +77,6 @@ Nice to have:
 
 -------------------------------------------------------------------------------------------------------------------------------------
 
-##Rulers & Snap
-
-When moving element - cycle through all the other elements, compare the sides - inject rulers if necessary. Also show rulers for center of page. Need to think about how multiple selected items works.
-
-Two types of snapping:
-
-* Line snapping to:
-  * Center of page (x/y) axis
-  * Bottom/left/right side of pages?
-  * Sides of elements?
-  * Middle of elements
-* Width snapping:
-  * Detect distance between elements - snap when two distances are the same.
-
 #Save to png
 
 https://github.com/paulhammond/webkit2png/blob/master/webkit2png

assets/javascripts/app/controllers/elements/text.module.coffee

@@ -16,18 +16,26 @@ class Text extends Rectangle
 
     $.extend({}, super, result)
 
+  startEditing: ->
+    return if @editing
+    super
+
+    @autoSize()
+
   stopEditing: ->
     return unless @editing
     super
 
     if @text()
-      @fitToText()
+      @fixSize()
     else
       # Remove the element if empty
       @remove()
 
-  fitToText: ->
+  autoSize: ->
     @el.css(width: 'auto', height: 'auto')
+
+  fixSize: ->
     @set(
       width:  @el.outerWidth(),
       height: @el.outerHeight()

assets/javascripts/app/models/properties/shadow.module.coffee

@@ -23,8 +23,11 @@ class Shadow extends Property
 
   toValue: ->
     value =
+      inset: @inset
       x: @x
       y: @y
+      blur: @blur
+      spread: @spread
       color: @color
 
 module.exports = Shadow

assets/stylesheets/app/inspector.css.styl

@@ -180,6 +180,14 @@
       border-bottom: 1px solid rgba(0, 0, 0, 0.2)
       ellipsis()
 
+      .preview {
+        margin: 0 3px 0 0
+        width: 8px
+        height: 8px
+        display: inline-block
+        border: 1px solid rgba(0, 0, 0, 0.1)
+      }
+
       &:last-child {
         border-bottom: none
       }
@@ -190,12 +198,8 @@
         vbg-gradient(#BCC6DE, #9BA8C7)
       }
 
-      .preview {
-        margin: 0 3px 0 0
-        width: 8px
-        height: 8px
-        display: inline-block
-        border: 1px solid rgba(0, 0, 0, 0.1)
+      &.selected .preview {
+        border: none
       }
    }
 

public/assets/app/controllers/elements/text.module.js

@@ -95,23 +95,34 @@ this.require.define({"app/controllers/elements/text":function(exports, require,
       return $.extend({}, Text.__super__.defaults.apply(this, arguments), result);
     };
 
+    Text.prototype.startEditing = function() {
+      if (this.editing) {
+        return;
+      }
+      Text.__super__.startEditing.apply(this, arguments);
+      return this.autoSize();
+    };
+
     Text.prototype.stopEditing = function() {
       if (!this.editing) {
         return;
       }
       Text.__super__.stopEditing.apply(this, arguments);
       if (this.text()) {
-        return this.fitToText();
+        return this.fixSize();
       } else {
         return this.remove();
       }
     };
 
-    Text.prototype.fitToText = function() {
-      this.el.css({
+    Text.prototype.autoSize = function() {
+      return this.el.css({
         width: 'auto',
         height: 'auto'
       });
+    };
+
+    Text.prototype.fixSize = function() {
       return this.set({
         width: this.el.outerWidth(),
         height: this.el.outerHeight()

public/assets/app/models/properties/shadow.module.js

@@ -110,8 +110,11 @@ this.require.define({"app/models/properties/shadow":function(exports, require, m
     Shadow.prototype.toValue = function() {
       var value;
       return value = {
+        inset: this.inset,
         x: this.x,
         y: this.y,
+        blur: this.blur,
+        spread: this.spread,
         color: this.color
       };
     };

public/assets/application.css

@@ -498,6 +498,13 @@ body {
   overflow: hidden;
   white-space: nowrap;
 }
+#app .inspector .list .item .preview {
+  margin: 0 3px 0 0;
+  width: 8px;
+  height: 8px;
+  display: inline-block;
+  border: 1px solid rgba(0,0,0,0.10);
+}
 #app .inspector .list .item:last-child {
   border-bottom: none;
 }
@@ -510,12 +517,8 @@ body {
   background: -moz-linear-gradient(top, #bcc6de, #9ba8c7);
   background: linear-gradient(top, #bcc6de, #9ba8c7);
 }
-#app .inspector .list .item .preview {
-  margin: 0 3px 0 0;
-  width: 8px;
-  height: 8px;
-  display: inline-block;
-  border: 1px solid rgba(0,0,0,0.10);
+#app .inspector .list .item.selected .preview {
+  border: none;
 }
 #app .inspector .list footer {
   border-top: 1px solid rgba(0,0,0,0.15);

public/assets/application.js

@@ -13207,23 +13207,34 @@ this.require.define({"app/controllers/elements/text":function(exports, require,
       return $.extend({}, Text.__super__.defaults.apply(this, arguments), result);
     };
 
+    Text.prototype.startEditing = function() {
+      if (this.editing) {
+        return;
+      }
+      Text.__super__.startEditing.apply(this, arguments);
+      return this.autoSize();
+    };
+
     Text.prototype.stopEditing = function() {
       if (!this.editing) {
         return;
       }
       Text.__super__.stopEditing.apply(this, arguments);
       if (this.text()) {
-        return this.fitToText();
+        return this.fixSize();
       } else {
         return this.remove();
       }
     };
 
-    Text.prototype.fitToText = function() {
-      this.el.css({
+    Text.prototype.autoSize = function() {
+      return this.el.css({
         width: 'auto',
         height: 'auto'
       });
+    };
+
+    Text.prototype.fixSize = function() {
       return this.set({
         width: this.el.outerWidth(),
         height: this.el.outerHeight()
@@ -17316,8 +17327,11 @@ this.require.define({"app/models/properties/shadow":function(exports, require, m
     Shadow.prototype.toValue = function() {
       var value;
       return value = {
+        inset: this.inset,
         x: this.x,
         y: this.y,
+        blur: this.blur,
+        spread: this.spread,
         color: this.color
       };
     };