CSS Panel - Stylesheet edit mode

4 files changed, 97 insertions, 22 deletions

diff --git a/js/components/toolbar.reel/toolbar.html b/js/components/toolbar.reel/toolbar.html
index 8ccce126..69eba194 100644
--- a/js/components/toolbar.reel/toolbar.html
+++ b/js/components/toolbar.reel/toolbar.html
@@ -18,7 +18,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 }
             },
             "button": {
-                "module": "js/components/button.reel",
+                "module": "montage/ui/button.reel",
                 "name": "Button",
                 "properties": {
 
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
     <span id="sheet-name"></span>
     <label>Media:</label>
     <div id="media-input"></div>
-    <div id="delete-button"></div>
+    <button data-montage-id="editbutton"></button>
+    <div data-montage-id="style-sheet-edit" class="style-sheet-edit">
+
+    </div>
 </div>
 </body>
 </html>
\ 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;