From 30e3f3d6c19025c37694127ac148146277681994 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 3 Apr 2012 14:43:52 -0700 Subject: CSS Panel - Stylesheet edit mode --- .../css-panel/style-sheet.reel/style-sheet.css | 40 ++++++++++++++++---- .../css-panel/style-sheet.reel/style-sheet.html | 33 ++++++++++------ .../css-panel/style-sheet.reel/style-sheet.js | 44 +++++++++++++++++++++- 3 files changed, 96 insertions(+), 21 deletions(-) (limited to 'js/panels/css-panel/style-sheet.reel') diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.css b/js/panels/css-panel/style-sheet.reel/style-sheet.css index 41c5ab12..5690c870 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.css +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.css @@ -9,6 +9,7 @@ -webkit-box-orient: horizontal; padding: 4px 0 3px; white-space: nowrap; + position: relative; } .style-sheet-container > * { -webkit-box-flex: 1; @@ -33,17 +34,42 @@ } .style-sheet-container input[type="text"] { min-width: 30px; + -webkit-box-flex: 1; } .style-sheet-container button { - background: none; - color: #FFF; + -webkit-box-flex: 0; + /* TODO: Use sass to minimize image redundancies */ + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1%2BjfqAAAACXBIWXMAAAsTAAALEwEAmpwYAAADGGlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjaY2BgnuDo4uTKJMDAUFBUUuQe5BgZERmlwH6egY2BmYGBgYGBITG5uMAxIMCHgYGBIS8%2FL5UBFTAyMHy7xsDIwMDAcFnX0cXJlYE0wJpcUFTCwMBwgIGBwSgltTiZgYHhCwMDQ3p5SUEJAwNjDAMDg0hSdkEJAwNjAQMDg0h2SJAzAwNjCwMDE09JakUJAwMDg3N%2BQWVRZnpGiYKhpaWlgmNKflKqQnBlcUlqbrGCZ15yflFBflFiSWoKAwMD1A4GBgYGXpf8EgX3xMw8BSMDVQYqg4jIKAUICxE%2BCDEESC4tKoMHJQODAIMCgwGDA0MAQyJDPcMChqMMbxjFGV0YSxlXMN5jEmMKYprAdIFZmDmSeSHzGxZLlg6WW6x6rK2s99gs2aaxfWMPZ9%2FNocTRxfGFM5HzApcj1xZuTe4FPFI8U3mFeCfxCfNN45fhXyygI7BD0FXwilCq0A%2FhXhEVkb2i4aJfxCaJG4lfkaiQlJM8JpUvLS19QqZMVl32llyfvIv8H4WtioVKekpvldeqFKiaqP5UO6jepRGqqaT5QeuA9iSdVF0rPUG9V%2FpHDBYY1hrFGNuayJsym740u2C%2B02KJ5QSrOutcmzjbQDtXe2sHY0cdJzVnJRcFV3k3BXdlD3VPXS8Tbxsfd99gvwT%2F%2FID6wIlBS4N3hVwMfRnOFCEXaRUVEV0RMzN2T9yDBLZE3aSw5IaUNak30zkyLDIzs%2BZmX8xlz7PPryjYVPiuWLskq3RV2ZsK%2FcqSql01jLVedVPrHzbqNdU0n22VaytsP9op3VXUfbpXta%2Bx%2F%2B5Em0mzJ%2F%2BdGj%2Ft8AyNmf2zvs9JmHt6vvmCpYtEFrcu%2BbYsc%2Fm9lSGrTq9xWbtvveWGbZtMNm%2FZarJt%2Bw6rnft3u%2B45uy9s%2F4ODOYd%2BHmk%2FJn58xUnrU%2BfOJJ%2F9dX7SRe1LR68kXv13fc5Nm1t379TfU75%2F4mHeY7En%2B59lvhB5efB1%2Flv5dxc%2BNH0y%2Ffzq64Lv4T8Ffp360%2FrP8f9%2FAA0ADzT6lvFdAAAAIGNIUk0AAHolAACAgwAA%2Bf8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAHXSURBVHjaVJBPaJJhAIef1zmX37YiIw0KixpYYnqQ2cFB0A4hFBSUENTmoMugYB5ajeo2oT8XaaedgrHDlosYlTEWHYICBYPZGJptOMVKbEYqifp9vh087Xd84IGHHzVUELOWSkRLF6YwYChMtdOVyKwFoVJDD3XoUoaMzjbmQGQDzAENo1MZYrmuCkQNSX8P7vpzds04RqLaEOhippIXEbRqaBRaC7mFXKHVpk3Qiih5YyaRf7nP0XEeb4fiFAHLfc%2Fdox32d13f61ABmNkIvb68M3EGwrHQluHibbtA0uvoOnb2lAWKjatz1wrPpi2ug3af98ermZ8jg0Y9vEjqxpfGEhqlKpnRYZ3iX%2FWv6pTRYTK%2Fq20CifElHXFzSkVqtLLdKkpRKWpku2lJTcWcIi4%2BPbRel9Sb%2Fonaoeg9xQD1pu9R369IeI8BcvMim%2B70rn%2B4MHfYe9NdbS4mC5%2FfjDjOCSQgVj4OWEAiyKxMLif7kM7ak0sD5wUA34viyK3TnncVj2neDZI%2FKdh%2FUiC5kYiXfXu%2FxgU2DgAnNh7svto%2BzSawo2eTLGLS1gYkwTUIu0ByR%2F%2F0CxJNn1H%2Fqa6et%2FnBss0U2XofhcX%2BK8e%2FlaN55FpD4f8AhDjCIVQtJ0gAAAAASUVORK5CYII%3D); + background-repeat: no-repeat; + background-position: 0 1px; + border: none; cursor: pointer; + padding: 0; + width: 21px; + height: 21px; + margin-left: 2px; + -webkit-transform: scale(.75); + opacity: .7; } -.style-sheet-container button:after { - content: "\2716"; - opacity: 0.7; +.style-sheet-container button:hover { + opacity: 1; +} +.style-sheet-container button:focus { + outline: 0 none; + box-shadow: none; } -.style-sheet-container button:hover:after { - opacity: 1; +/* style sheet edit view */ +.style-sheet-edit { + position: absolute; + top: 0; + right: 0; + margin-right: -100%; + background-color: red; + height: 100%; + width: 80%; + -webkit-transition: -webkit-transform .6s cubic-bezier(.44,.19,0,.99); +} +.style-sheet-edit.expanded { + -webkit-transform: translate3d(-200px, 0, 0); } \ No newline at end of file diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.html b/js/panels/css-panel/style-sheet.reel/style-sheet.html index 64b8e8ae..2619258a 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.html +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.html @@ -15,13 +15,14 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "name" : "StyleSheet", "properties" : { "element" : {"#" : "style-sheet-container"}, - "disableCheckbox": {"@": "disableCheckbox1"}, - "nameText": {"@": "name1"}, - "mediaInput": {"@": "mediaInput1"}, - "deleteButton": {"@": "deleteButton1"} + "disableCheckbox": {"@": "disableCheckbox"}, + "nameText": {"@": "name"}, + "mediaInput": {"@": "mediaInput"}, + "editButton": {"@": "editButton"}, + "editView": {"#": "style-sheet-edit"} } }, - "disableCheckbox1": { + "disableCheckbox": { "module": "js/components/checkbox.reel", "name": "Checkbox", "properties": { @@ -29,7 +30,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "checked": true } }, - "name1": { + "name": { "module": "montage/ui/dynamic-text.reel", "name": "DynamicText", "properties": { @@ -44,20 +45,25 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot } } }, - "mediaInput1": { + "mediaInput": { "module": "js/components/textfield.reel", "name": "TextField", "properties": { "element": {"#": "media-input"} } }, - "deleteButton1": { - "module": "js/components/button.reel", + "editButton": { + "module": "montage/ui/button.reel", "name": "Button", "properties": { - "element": {"#": "delete-button"}, + "element": {"#": "editbutton"}, + "identifier": "editButton", "label": " " - } + }, + "listeners": [{ + "type": "action", + "listener": {"@": "owner"} + }] } } @@ -69,7 +75,10 @@ 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-sheet.reel/style-sheet.js b/js/panels/css-panel/style-sheet.reel/style-sheet.js index 5caf69a4..2396d625 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.js +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js @@ -13,9 +13,15 @@ exports.StyleSheet = Montage.create(Component, { console.log("style sheet view - deserialized"); } }, - prepareForDraw : { + willDraw : { value: function() { - console.log("style sheet view - prepare for draw"); + console.log("style sheet view - will draw"); + + if(this.editing) { + document.body.addEventListener('click', this, false); + } else { + document.body.removeEventListener('click', this, false); + } } }, draw : { @@ -23,6 +29,40 @@ exports.StyleSheet = Montage.create(Component, { console.log("styles sheet view - draw"); this.mediaInput.value = this._source.media.mediaText; + + if(this.editing) { + this.editView.classList.add('expanded'); + } else { + this.editView.classList.remove('expanded'); + } + } + }, + + handleEditButtonAction: { + value: function(e) { + console.log('handle edit button action'); + this.editing = true; + } + }, + _editing : { + value: null + }, + editing : { + get: function() { + return this._editing; + }, + set: function(enterEditingMode) { + this._editing = enterEditingMode; + this.needsDraw = true; + } + }, + + handleClick : { + value: function(e) { + console.log("handle click"); + if(e.target !== this.editView) { + this.editing = false; + } } }, -- cgit v1.2.3