diff options
author | Eric Guzman | 2012-04-05 17:26:03 -0700 |
---|---|---|
committer | Eric Guzman | 2012-04-05 17:26:03 -0700 |
commit | 72061f2cf3858f48a90f8cb21c5e7d766cb9552b (patch) | |
tree | 537fb2f27bf621efab06ab3b3609c5545cd445a1 /js | |
parent | 313e0336cc72a1dc773bfa0e3d41b2993339f9af (diff) | |
download | ninja-72061f2cf3858f48a90f8cb21c5e7d766cb9552b.tar.gz |
Style Sheets - Style update for edit view
Diffstat (limited to 'js')
-rw-r--r-- | js/panels/css-panel/style-sheet.reel/style-sheet.css | 52 | ||||
-rw-r--r-- | js/panels/css-panel/style-sheet.reel/style-sheet.html | 8 | ||||
-rw-r--r-- | js/panels/css-panel/style-sheet.reel/style-sheet.js | 26 |
3 files changed, 59 insertions, 27 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 37c94ef6..76bdbfe9 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.css +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.css | |||
@@ -35,20 +35,27 @@ | |||
35 | .style-sheet-container input[type="text"] { | 35 | .style-sheet-container input[type="text"] { |
36 | min-width: 30px; | 36 | min-width: 30px; |
37 | -webkit-box-flex: 1; | 37 | -webkit-box-flex: 1; |
38 | margin-right: 25px; | ||
38 | } | 39 | } |
39 | .style-sheet-container button { | 40 | |
40 | -webkit-box-flex: 0; | 41 | /* style sheet edit view */ |
42 | |||
43 | .style-sheet-container .ss-edit-button { | ||
41 | /* TODO: Use sass to minimize image redundancies */ | 44 | /* 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); | 45 | background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQkI4QzVEMTc3ODcxMUUxQTlCOUNDQUJBMEUyMTIwMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQkI4QzVEMjc3ODcxMUUxQTlCOUNDQUJBMEUyMTIwMSI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkNCQjhDNUNGNzc4NzExRTFBOUI5Q0NBQkEwRTIxMjAxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNCQjhDNUQwNzc4NzExRTFBOUI5Q0NBQkEwRTIxMjAxIi8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2Bs3B0RQAAAd9JREFUeNockbGL2nAUx%2FNLorHaJXKjJ6YcDkVcHByUQwQDbl26FqEu3dykLjoIXXTwDygKFcrRP%2BC8Q0HwQDlwOaRCKFiuCmo0d0Jr1ZjY923ghZfv9%2FN%2B7%2F1eOJ%2FPx%2BEpl8uKZVk3p9PpRlXV81QqdY4cGjww%2F9l2u81Fo1EuFotdbrdbzbbtX%2FP5%2FAqBHBo8MGB5RVF8yWTSv9%2FvXYIgsNVq9XcwGLxCIBdFkcEDA5YZhnFNJwXcbjc3Go32mUzmlsaYYAQ6QGk0GmooFJKoE8fz%2FE9%2BsVjIHo%2FHpes6y2azX8PhsNbtdtMI5NDggQHL0wW%2FdDodfTqdPm02m4dqtfqmXq9LCOTQ4IEBy3u93gdq9YfCplHM2Wz2gsZ7ptggJ%2B0ADwxYRuI1zfqaLvY7l8t9mkwmcqVSeWeapl0oFJqBQOCpVqt9lCTpJWnfWb%2Ffv6fKM2xot9s9FovFz71ez6ST7UQiIZVKpffUzU%2Ffp%2FV6vWLBYPDD8Xi8oJ%2FkarVaKhVatLlHxhgny7KfPCGdTt%2FS945W%2FEPUNO2KNihGIpH44XBI0Tak8Xh8hoJ4PC7RGCZN0BkOh3fEHUV6Gdi50%2BnUqaWxXC6FfD7%2FDQXNZvMtXdZyOBw6IUtw%2FwQYACT6GJDDh744AAAAAElFTkSuQmCC); |
43 | background-repeat: no-repeat; | 46 | background-repeat: no-repeat; |
44 | background-position: 0 1px; | 47 | background-position: center center; |
45 | border: none; | ||
46 | cursor: pointer; | 48 | cursor: pointer; |
47 | padding: 0; | 49 | padding: 0; |
48 | width: 21px; | 50 | width: 24px; |
49 | height: 21px; | 51 | height: 100%; |
50 | margin-left: 2px; | 52 | opacity: 1; |
51 | -webkit-transform: scale(.75); | 53 | position: relative; |
54 | left: -24px; | ||
55 | -webkit-transition: background-color .55s cubic-bezier(.44,.19,0,.99); | ||
56 | border-width: 0 0 0 1px; | ||
57 | border-style: none none none solid; | ||
58 | border-color: rgba(80, 80, 80, 0); | ||
52 | opacity: .7; | 59 | opacity: .7; |
53 | } | 60 | } |
54 | .style-sheet-container button:hover { | 61 | .style-sheet-container button:hover { |
@@ -59,18 +66,35 @@ | |||
59 | box-shadow: none; | 66 | box-shadow: none; |
60 | } | 67 | } |
61 | 68 | ||
62 | /* style sheet edit view */ | ||
63 | .style-sheet-edit { | 69 | .style-sheet-edit { |
64 | border-left: 1px solid #505050; | ||
65 | position: absolute; | 70 | position: absolute; |
66 | top: 0; | 71 | top: 0; |
67 | right: 0; | 72 | right: 0; |
68 | margin-right: -100%; | 73 | margin-right: -100%; |
69 | background-color: #363636; | ||
70 | height: 100%; | 74 | height: 100%; |
71 | width: 100%; | 75 | width: 100%; |
72 | -webkit-transition: -webkit-transform .6s cubic-bezier(.44,.19,0,.99); | 76 | -webkit-transition-property: -webkit-transform, background-color; |
77 | -webkit-transition-duration: .55s; | ||
78 | -webkit-transition-timing-function: cubic-bezier(.44,.19,0,.99); | ||
79 | } | ||
80 | .style-sheet-edit.expanded .ss-edit-button { | ||
81 | background-color: #363636; | ||
82 | border-color: rgba(80, 80, 80, 1); | ||
83 | opacity: 1; | ||
73 | } | 84 | } |
74 | .style-sheet-edit.expanded { | 85 | .style-sheet-edit.expanded { |
75 | -webkit-transform: translate3d(-250px, 0, 0); | 86 | background-color: #363636; |
87 | } | ||
88 | .style-sheet-edit button.nj-skinned { | ||
89 | height: 20px; | ||
90 | padding: 2px 10px; | ||
91 | margin-left: 5px; | ||
92 | position: relative; | ||
93 | left: -15px; | ||
94 | top: 2px; | ||
95 | text-transform: capitalize; | ||
96 | font-size: 10px; | ||
97 | } | ||
98 | .style-sheet-edit .ss-delete-button { | ||
99 | background: -webkit-linear-gradient(top, rgba(73,45,45,1) 0%,rgba(53,35,35,1) 100%); | ||
76 | } \ No newline at end of file | 100 | } \ 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 661a1582..9d406d0b 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.html +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.html | |||
@@ -56,7 +56,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
56 | "module": "montage/ui/button.reel", | 56 | "module": "montage/ui/button.reel", |
57 | "name": "Button", | 57 | "name": "Button", |
58 | "properties": { | 58 | "properties": { |
59 | "element": {"#": "editbutton"}, | 59 | "element": {"#": "edit-button"}, |
60 | "identifier": "editButton", | 60 | "identifier": "editButton", |
61 | "label": " " | 61 | "label": " " |
62 | }, | 62 | }, |
@@ -75,11 +75,13 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
75 | <span id="sheet-name"></span> | 75 | <span id="sheet-name"></span> |
76 | <label>Media:</label> | 76 | <label>Media:</label> |
77 | <div id="media-input"></div> | 77 | <div id="media-input"></div> |
78 | <button data-montage-id="editbutton"></button> | 78 | |
79 | <div data-montage-id="style-sheet-edit" class="style-sheet-edit"> | 79 | <div data-montage-id="style-sheet-edit" class="style-sheet-edit"> |
80 | <button data-montage-id="delete-button" class="nj-skinned">Delete</button> | 80 | |
81 | <button data-montage-id="edit-button" class="ss-edit-button"></button> | ||
81 | <button data-montage-id="import-button" class="nj-skinned">Import</button> | 82 | <button data-montage-id="import-button" class="nj-skinned">Import</button> |
82 | <button data-montage-id="disable-button" class="nj-skinned">Disable</button> | 83 | <button data-montage-id="disable-button" class="nj-skinned">Disable</button> |
84 | <button data-montage-id="delete-button" class="ss-delete-button nj-skinned">Delete</button> | ||
83 | </div> | 85 | </div> |
84 | </div> | 86 | </div> |
85 | </body> | 87 | </body> |
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 2396d625..4f9ad21f 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.js +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js | |||
@@ -8,36 +8,42 @@ var Montage = require("montage/core/core").Montage, | |||
8 | Component = require("montage/ui/component").Component; | 8 | Component = require("montage/ui/component").Component; |
9 | 9 | ||
10 | exports.StyleSheet = Montage.create(Component, { | 10 | exports.StyleSheet = Montage.create(Component, { |
11 | deserializedFromTemplate : { | 11 | _translateDistance: { |
12 | value: function() { | 12 | value: null |
13 | console.log("style sheet view - deserialized"); | ||
14 | } | ||
15 | }, | 13 | }, |
14 | |||
16 | willDraw : { | 15 | willDraw : { |
17 | value: function() { | 16 | value: function() { |
18 | console.log("style sheet view - will draw"); | 17 | console.log("style sheet view - will draw"); |
19 | 18 | ||
20 | if(this.editing) { | 19 | if(this.editing) { |
21 | document.body.addEventListener('click', this, false); | 20 | document.body.addEventListener('mousedown', this, false); |
21 | this._translateDistance = this._element.offsetWidth - this.editButton._element.offsetWidth; | ||
22 | |||
22 | } else { | 23 | } else { |
23 | document.body.removeEventListener('click', this, false); | 24 | document.body.removeEventListener('mousedown', this, false); |
24 | } | 25 | } |
25 | } | 26 | } |
26 | }, | 27 | }, |
27 | draw : { | 28 | draw : { |
28 | value: function() { | 29 | value: function() { |
30 | var transStr = '-webkit-transform'; | ||
29 | console.log("styles sheet view - draw"); | 31 | console.log("styles sheet view - draw"); |
30 | 32 | ||
31 | this.mediaInput.value = this._source.media.mediaText; | 33 | this.mediaInput.value = this._source.media.mediaText; |
32 | 34 | ||
33 | if(this.editing) { | 35 | if(this.editing) { |
34 | this.editView.classList.add('expanded'); | 36 | this.editView.classList.add('expanded'); |
37 | this.editView.style.setProperty(transStr, 'translate3d(-'+ this._translateDistance + 'px,0,0)'); | ||
35 | } else { | 38 | } else { |
36 | this.editView.classList.remove('expanded'); | 39 | this.editView.classList.remove('expanded'); |
40 | this.editView.style.removeProperty(transStr); | ||
37 | } | 41 | } |
38 | } | 42 | } |
39 | }, | 43 | }, |
40 | 44 | ||
45 | |||
46 | |||
41 | handleEditButtonAction: { | 47 | handleEditButtonAction: { |
42 | value: function(e) { | 48 | value: function(e) { |
43 | console.log('handle edit button action'); | 49 | console.log('handle edit button action'); |
@@ -57,10 +63,10 @@ exports.StyleSheet = Montage.create(Component, { | |||
57 | } | 63 | } |
58 | }, | 64 | }, |
59 | 65 | ||
60 | handleClick : { | 66 | handleMousedown : { |
61 | value: function(e) { | 67 | value: function(e) { |
62 | console.log("handle click"); | 68 | console.log("handle mousedown"); |
63 | if(e.target !== this.editView) { | 69 | if(e.target !== this.editView && e.target !== this.editButton) { |
64 | this.editing = false; | 70 | this.editing = false; |