From 0e5520008925f480d5d1bb8356220c773d1c5e37 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 23 Apr 2012 11:51:02 -0700 Subject: CSS Panel - Add editing and adding new styles in declaration and style --- .../css-panel/declaration.reel/declaration.js | 15 +++- js/panels/css-panel/style.reel/style.css | 56 +++++++++++++- js/panels/css-panel/style.reel/style.html | 6 +- js/panels/css-panel/style.reel/style.js | 87 ++++++++++++++++++++-- 4 files changed, 155 insertions(+), 9 deletions(-) diff --git a/js/panels/css-panel/declaration.reel/declaration.js b/js/panels/css-panel/declaration.reel/declaration.js index 0cc98951..55fe0e18 100644 --- a/js/panels/css-panel/declaration.reel/declaration.js +++ b/js/panels/css-panel/declaration.reel/declaration.js @@ -9,6 +9,9 @@ var Montage = require("montage/core/core").Montage, ShorthandProps = require("js/panels/CSSPanel/css-shorthand-map"); exports.Declaration = Montage.create(Component, { + includeEmptyStyle : { + value: true + }, templateDidLoad : { value: function() { console.log("declaration - template did load"); @@ -31,10 +34,18 @@ exports.Declaration = Montage.create(Component, { }, set: function(dec) { this._declaration = dec; - console.log('here'); + ///// creates data structure to use with tree component this.buildStyleTree(); - console.log('there'); + + if(this.includeEmptyStyle) { + this.styleTree.properties.push({ + "name": "property", + "value" : "value", + "isEmpty": true + }); + } +//debugger; this.needsDraw = true; } }, diff --git a/js/panels/css-panel/style.reel/style.css b/js/panels/css-panel/style.reel/style.css index 66c25fe0..f8750eea 100644 --- a/js/panels/css-panel/style.reel/style.css +++ b/js/panels/css-panel/style.reel/style.css @@ -11,7 +11,7 @@ border-bottom: 1px solid rgba(0,0,0,0); cursor: url(/js/../images/tools/hand_down.png), default; display: block; - overflow: hidden; + /*overflow: hidden;*/ white-space: nowrap; text-overflow: ellipsis; } @@ -92,6 +92,60 @@ right: -1px; } +/* ------------------------ + Empty Style (Add Style) +------------------------ */ +.add-style-button { + display: none; +} +.empty-css-style { + cursor: default; + -webkit-transition: -webkit-transform .2s cubic-bezier(0.44, 0.19, 0, 0.99); + -webkit-transform: translate3d(-120px, 0, 0); +} +.empty-css-style:hover { + border-right-style: none; +} +.empty-css-style .add-style-button { + cursor: pointer; + color: #333; + display: inline-block; + font-family: "Droid Sans", sans-serif; + background: -webkit-linear-gradient(top, rgba(242,242,242,1) 1%,rgba(221,221,221,1) 100%); + border-radius: 5px; + border: 1px solid #CCC; + padding: 1px 10px 0; + position: absolute; + left: 140px; + text-shadow: 1px 1px 0 #FFF; + -webkit-transition: opacity .2s cubic-bezier(0.44, 0.19, 0, 0.99); +} +.empty-css-style .add-style-button:hover { + background: -webkit-linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%); +} +.empty-css-style .add-style-button:active { + background: -webkit-linear-gradient(top, rgba(234,234,234,1) 0%,rgba(252,252,252,1) 99%); +} +.empty-css-style .css-property, .empty-css-style .css-value { + -webkit-transition: opacity .2s cubic-bezier(0.44, 0.19, 0, 0.99); + opacity: 0; +} +.empty-css-style.edit-empty-style .css-property, .empty-css-style.edit-empty-style .css-value { + opacity: 1; +} +.empty-css-style.edit-empty-style { + border-right-style: none; + -webkit-transform: translate3d(0, 0, 0); +} +.empty-css-style.edit-empty-style .css-property, .empty-css-style.edit-empty-style .css-value { + color: #adadad; +} +.empty-css-style.edit-empty-style .add-style-button { + opacity: 0; +} +.empty-css-style input[type="checkbox"] { + visibility: hidden; +} /* ------------------------ Drag/Drop Styles ------------------------ */ diff --git a/js/panels/css-panel/style.reel/style.html b/js/panels/css-panel/style.reel/style.html index 587dedb5..0d438ead 100644 --- a/js/panels/css-panel/style.reel/style.html +++ b/js/panels/css-panel/style.reel/style.html @@ -14,7 +14,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "module" : "js/panels/css-panel/style.reel", "name" : "Style", "properties" : { - "element" : {"#" : "container"} + "element" : {"#" : "container"}, + "addStyleButton": {"#": "add-style-button"}, + "propertyField": {"@": "property"}, + "valueField": {"@": "value"} } }, "checkbox": { @@ -68,6 +71,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot