aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorEric Guzman2012-04-05 17:26:03 -0700
committerEric Guzman2012-04-05 17:26:03 -0700
commit72061f2cf3858f48a90f8cb21c5e7d766cb9552b (patch)
tree537fb2f27bf621efab06ab3b3609c5545cd445a1
parent313e0336cc72a1dc773bfa0e3d41b2993339f9af (diff)
downloadninja-72061f2cf3858f48a90f8cb21c5e7d766cb9552b.tar.gz
Style Sheets - Style update for edit view
-rw-r--r--js/panels/css-panel/style-sheet.reel/style-sheet.css52
-rw-r--r--js/panels/css-panel/style-sheet.reel/style-sheet.html8
-rw-r--r--js/panels/css-panel/style-sheet.reel/style-sheet.js26
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
10exports.StyleSheet = Montage.create(Component, { 10exports.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;
65 }