diff options
Diffstat (limited to 'js/panels/css-panel')
-rw-r--r-- | js/panels/css-panel/style-sheet.reel/style-sheet.css | 40 | ||||
-rw-r--r-- | js/panels/css-panel/style-sheet.reel/style-sheet.html | 33 | ||||
-rw-r--r-- | js/panels/css-panel/style-sheet.reel/style-sheet.js | 44 |
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; | ||
65 | } | ||