aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/css-panel')
-rw-r--r--js/panels/css-panel/style-sheet.reel/style-sheet.css40
-rw-r--r--js/panels/css-panel/style-sheet.reel/style-sheet.html33
-rw-r--r--js/panels/css-panel/style-sheet.reel/style-sheet.js44
3 files changed, 96 insertions, 21 deletions
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 @@
9 -webkit-box-orient: horizontal; 9 -webkit-box-orient: horizontal;
10 padding: 4px 0 3px; 10 padding: 4px 0 3px;
11 white-space: nowrap; 11 white-space: nowrap;
12 position: relative;
12} 13}
13.style-sheet-container > * { 14.style-sheet-container > * {
14 -webkit-box-flex: 1; 15 -webkit-box-flex: 1;
@@ -33,17 +34,42 @@
33} 34}
34.style-sheet-container input[type="text"] { 35.style-sheet-container input[type="text"] {
35 min-width: 30px; 36 min-width: 30px;
37 -webkit-box-flex: 1;
36} 38}
37.style-sheet-container button { 39.style-sheet-container button {
38 background: none; 40 -webkit-box-flex: 0;
39 color: #FFF; 41 /* TODO: Use sass to minimize image redundancies */
42 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);
43 background-repeat: no-repeat;
44 background-position: 0 1px;
45 border: none;
40 cursor: pointer; 46 cursor: pointer;
47 padding: 0;
48 width: 21px;
49 height: 21px;
50 margin-left: 2px;
51 -webkit-transform: scale(.75);
52 opacity: .7;
41} 53}
42.style-sheet-container button:after { 54.style-sheet-container button:hover {
43 content: "\2716"; 55 opacity: 1;
44 opacity: 0.7; 56}
57.style-sheet-container button:focus {
58 outline: 0 none;
59 box-shadow: none;
45} 60}
46 61
47.style-sheet-container button:hover:after { 62/* style sheet edit view */
48 opacity: 1; 63.style-sheet-edit {
64 position: absolute;
65 top: 0;
66 right: 0;
67 margin-right: -100%;
68 background-color: red;
69 height: 100%;
70 width: 80%;
71 -webkit-transition: -webkit-transform .6s cubic-bezier(.44,.19,0,.99);
72}
73.style-sheet-edit.expanded {
74 -webkit-transform: translate3d(-200px, 0, 0);
49} \ No newline at end of file 75} \ 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
15 "name" : "StyleSheet", 15 "name" : "StyleSheet",
16 "properties" : { 16 "properties" : {
17 "element" : {"#" : "style-sheet-container"}, 17 "element" : {"#" : "style-sheet-container"},
18 "disableCheckbox": {"@": "disableCheckbox1"}, 18 "disableCheckbox": {"@": "disableCheckbox"},
19 "nameText": {"@": "name1"}, 19 "nameText": {"@": "name"},
20 "mediaInput": {"@": "mediaInput1"}, 20 "mediaInput": {"@": "mediaInput"},
21 "deleteButton": {"@": "deleteButton1"} 21 "editButton": {"@": "editButton"},
22 "editView": {"#": "style-sheet-edit"}
22 } 23 }
23 }, 24 },
24 "disableCheckbox1": { 25 "disableCheckbox": {
25 "module": "js/components/checkbox.reel", 26 "module": "js/components/checkbox.reel",
26 "name": "Checkbox", 27 "name": "Checkbox",
27 "properties": { 28 "properties": {
@@ -29,7 +30,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
29 "checked": true 30 "checked": true
30 } 31 }
31 }, 32 },
32 "name1": { 33 "name": {
33 "module": "montage/ui/dynamic-text.reel", 34 "module": "montage/ui/dynamic-text.reel",
34 "name": "DynamicText", 35 "name": "DynamicText",
35 "properties": { 36 "properties": {
@@ -44,20 +45,25 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
44 } 45 }
45 } 46 }
46 }, 47 },
47 "mediaInput1": { 48 "mediaInput": {
48 "module": "js/components/textfield.reel", 49 "module": "js/components/textfield.reel",
49 "name": "TextField", 50 "name": "TextField",
50 "properties": { 51 "properties": {
51 "element": {"#": "media-input"} 52 "element": {"#": "media-input"}
52 } 53 }
53 }, 54 },
54 "deleteButton1": { 55 "editButton": {
55 "module": "js/components/button.reel", 56 "module": "montage/ui/button.reel",
56 "name": "Button", 57 "name": "Button",
57 "properties": { 58 "properties": {
58 "element": {"#": "delete-button"}, 59 "element": {"#": "editbutton"},
60 "identifier": "editButton",
59 "label": " " 61 "label": " "
60 } 62 },
63 "listeners": [{
64 "type": "action",
65 "listener": {"@": "owner"}
66 }]
61 67
62 } 68 }
63 } 69 }
@@ -69,7 +75,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
69 <span id="sheet-name"></span> 75 <span id="sheet-name"></span>
70 <label>Media:</label> 76 <label>Media:</label>
71 <div id="media-input"></div> 77 <div id="media-input"></div>
72 <div id="delete-button"></div> 78 <button data-montage-id="editbutton"></button>
79 <div data-montage-id="style-sheet-edit" class="style-sheet-edit">
80
81 </div>
73</div> 82</div>
74</body> 83</body>
75</html> \ No newline at end of file 84</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, {
13 console.log("style sheet view - deserialized"); 13 console.log("style sheet view - deserialized");
14 } 14 }
15 }, 15 },
16 prepareForDraw : { 16 willDraw : {
17 value: function() { 17 value: function() {
18 console.log("style sheet view - prepare for draw"); 18 console.log("style sheet view - will draw");
19
20 if(this.editing) {
21 document.body.addEventListener('click', this, false);
22 } else {
23 document.body.removeEventListener('click', this, false);
24 }
19 } 25 }
20 }, 26 },
21 draw : { 27 draw : {
@@ -23,6 +29,40 @@ exports.StyleSheet = Montage.create(Component, {
23 console.log("styles sheet view - draw"); 29 console.log("styles sheet view - draw");
24 30
25 this.mediaInput.value = this._source.media.mediaText; 31 this.mediaInput.value = this._source.media.mediaText;
32
33 if(this.editing) {
34 this.editView.classList.add('expanded');
35 } else {
36 this.editView.classList.remove('expanded');
37 }
38 }
39 },
40
41 handleEditButtonAction: {
42 value: function(e) {
43 console.log('handle edit button action');
44 this.editing = true;
45 }
46 },
47 _editing : {
48 value: null
49 },
50 editing : {
51 get: function() {
52 return this._editing;
53 },
54 set: function(enterEditingMode) {
55 this._editing = enterEditingMode;
56 this.needsDraw = true;
57 }
58 },
59
60 handleClick : {
61 value: function(e) {
62 console.log("handle click");
63 if(e.target !== this.editView) {
64 this.editing = false;