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(-) (limited to 'js') 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
+
\ No newline at end of file diff --git a/js/panels/css-panel/style.reel/style.js b/js/panels/css-panel/style.reel/style.js index c3e9efdf..adf17a84 100644 --- a/js/panels/css-panel/style.reel/style.js +++ b/js/panels/css-panel/style.reel/style.js @@ -11,6 +11,9 @@ exports.Style = Montage.create(TreeNode, { disabledClass : { value: 'style-item-disabled' }, + editNewEmptyClass : { + value: 'edit-empty-style' + }, propertyText : { value: "property" }, @@ -28,6 +31,30 @@ exports.Style = Montage.create(TreeNode, { this.needsDraw = true; } }, + + + dirty : { + get: function() { + return this.propertyField.isDirty || this.valueField.isDirty; + }, + set: function(value) { + + } + }, + + _editingNewStyle : { + value: null + }, + editingNewStyle : { + get: function() { + return this._editingNewStyle; + }, + set: function(value) { + this._editingNewStyle = value; + this.needsDraw = true; + } + }, + handleEvent : { value: function(e) { console.log(e); @@ -65,9 +92,37 @@ exports.Style = Montage.create(TreeNode, { this.valueText = this.sourceObject.value; } }, - templateDidLoad : { - value: function() { - console.log("style - template did load"); + handleWebkitTransitionEnd : { + value: function(e) { + console.log("trans end"); + } + }, + handleClick : { + value: function(e) { + console.log("handleAction"); + this.editingNewStyle = true; + } + }, + + //// Handler for both hintable components + handleStop : { + value: function(e) { + var event = e; + ///// Function to determine if an empty (new) style should return + ///// to showing the add button, i.e. the fields were not clicked + function shouldStopEditing() { + var clicked; + if(e._event.detail.originalEventType === 'mousedown') { + clicked = e._event.detail.originalEvent.target; + return clicked !== this.propertyField.element && clicked !== this.valueField.element; + } + return + } + + if(this.sourceObject.isEmpty && !this.dirty && shouldStopEditing.bind(this)()) { + + this.editingNewStyle = false; + } } }, prepareForDraw : { @@ -75,12 +130,22 @@ exports.Style = Montage.create(TreeNode, { console.log("style's prepare for draw"); this.element.addEventListener('dragstart', this, false); this.element.addEventListener('drag', this, false); -// this.element.addEventListener('dragenter', this, false); -// this.element.addEventListener('dragleave', this, false); this.element.addEventListener('dragend', this, false); this.element.addEventListener('drop', this, false); + this.element.addEventListener('webkitTransitionEnd', this, false); + + if(this.sourceObject.isEmpty) { + this.element.draggable = false; + this.addStyleButton.addEventListener('click', this, false); + this.propertyField.addEventListener('stop', this, false); + this.valueField.addEventListener('stop', this, false); + } else { + this.element.removeChild(this.addStyleButton); + delete this.addStyleButton; + } } }, + draw : { value : function() { //debugger; @@ -90,12 +155,24 @@ exports.Style = Montage.create(TreeNode, { console.log("Label key unknown"); } + if(this.sourceObject.isEmpty) { + this.element.classList.add('empty-css-style'); + } else { + this.element.classList.remove('empty-css-style'); + } + if(this._enabled) { this.element.classList.remove(this.disabledClass); } else { this.element.classList.add(this.disabledClass); } + if(this._editingNewStyle) { + this.propertyField.start(); + this.element.classList.add(this.editNewEmptyClass); + } else { + this.element.classList.remove(this.editNewEmptyClass); + } } } }); \ No newline at end of file -- cgit v1.2.3