diff options
author | Eric Guzman | 2012-04-09 15:43:10 -0700 |
---|---|---|
committer | Eric Guzman | 2012-04-09 15:43:10 -0700 |
commit | afcaa157f7bc067cf00de91b43b2a71e9b64b7b3 (patch) | |
tree | 1d219f5edf0578ed55b444622a2265c9c5647260 /js/panels | |
parent | 8ff9dde2053e41d85bb27d9c91808a30e551a138 (diff) | |
download | ninja-afcaa157f7bc067cf00de91b43b2a71e9b64b7b3.tar.gz |
Style sheet - Style update
Diffstat (limited to 'js/panels')
-rw-r--r-- | js/panels/css-panel/style-sheet.reel/style-sheet.css | 34 | ||||
-rw-r--r-- | js/panels/css-panel/style-sheet.reel/style-sheet.html | 57 | ||||
-rw-r--r-- | js/panels/css-panel/style-sheet.reel/style-sheet.js | 162 |
3 files changed, 220 insertions, 33 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 b64c1d69..9ea03be8 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.css +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.css | |||
@@ -20,6 +20,20 @@ | |||
20 | position: relative; | 20 | position: relative; |
21 | -webkit-box-flex: 0; | 21 | -webkit-box-flex: 0; |
22 | } | 22 | } |
23 | .ss-icon { | ||
24 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89%2BbN%2FrXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz%2FSMBAPh%2BPDwrIsAHvgABeNMLCADATZvAMByH%2Fw%2FqQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf%2BbTAICd%2BJl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA%2Fg88wAAKCRFRHgg%2FP9eM4Ors7ONo62Dl8t6r8G%2FyJiYuP%2B5c%2BrcEAAAOF0ftH%2BLC%2BzGoA7BoBt%2FqIl7gRoXgugdfeLZrIPQLUAoOnaV%2FNw%2BH48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl%2FAV%2F1s%2BX48%2FPf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H%2FLcL%2F%2Fwd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s%2BwM%2B3zUAsGo%2BAXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93%2F%2B8%2F%2FUegJQCAZkmScQAAXkQkLlTKsz%2FHCAAARKCBKrBBG%2FTBGCzABhzBBdzBC%2FxgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD%2FphCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8%2BQ8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8%2BxdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR%2BcQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI%2BksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG%2BQh8lsKnWJAcaT4U%2BIoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr%2Bh0uhHdlR5Ol9BX0svpR%2BiX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK%2BYTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI%2BpXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q%2FpH5Z%2FYkGWcNMw09DpFGgsV%2FjvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY%2FR27iz2qqaE5QzNKM1ezUvOUZj8H45hx%2BJx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4%2FOBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up%2B6Ynr5egJ5Mb6feeb3n%2Bhx9L%2F1U%2FW36p%2FVHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm%2Beb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw%2B6TvZN9un2N%2FT0HDYfZDqsdWh1%2Bc7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc%2BLpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26%2FuNu5p7ofcn8w0nymeWTNz0MPIQ%2BBR5dE%2FC5%2BVMGvfrH5PQ0%2BBZ7XnIy9jL5FXrdewt6V3qvdh7xc%2B9j5yn%2BM%2B4zw33jLeWV%2FMN8C3yLfLT8Nvnl%2BF30N%2FI%2F9k%2F3r%2F0QCngCUBZwOJgUGBWwL7%2BHp8Ib%2BOPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo%2Bqi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt%2F87fOH4p3iC%2BN7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi%2FRNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z%2Bpn5mZ2y6xlhbL%2BxW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a%2FzYnKOZarnivN7cyzytuQN5zvn%2F%2FtEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1%2B1dT1gvWd%2B1YfqGnRs%2BFYmKrhTbF5cVf9go3HjlG4dvyr%2BZ3JS0qavEuWTPZtJm6ebeLZ5bDpaql%2BaXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO%2FPLi8ZafJzs07P1SkVPRU%2BlQ27tLdtWHX%2BG7R7ht7vPY07NXbW7z3%2FT7JvttVAVVN1WbVZftJ%2B7P3P66Jqun4lvttXa1ObXHtxwPSA%2F0HIw6217nU1R3SPVRSj9Yr60cOxx%2B%2B%2Fp3vdy0NNg1VjZzG4iNwRHnk6fcJ3%2FceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w%2B0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb%2B%2B6EHTh0kX%2Fi%2Bc7vDvOXPK4dPKy2%2BUTV7hXmq86X23qdOo8%2FpPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb%2F1tWeOT3dvfN6b%2FfF9%2FXfFt1%2Bcif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v%2B3Njv3H9qwHeg89HcR%2FcGhYPP%2FpH1jw9DBY%2BZj8uGDYbrnjg%2BOTniP3L96fynQ89kzyaeF%2F6i%2FsuuFxYvfvjV69fO0ZjRoZfyl5O%2FbXyl%2FerA6xmv28bCxh6%2ByXgzMV70VvvtwXfcdx3vo98PT%2BR8IH8o%2F2j5sfVT0Kf7kxmTk%2F8EA5jz%2FGMzLdsAAAAgY0hSTQAAeiUAAICDAAD5%2FwAAgOkAAHUwAADqYAAAOpgAABdvkl%2FFRgAAAKJJREFUeNrUU7ERwyAMfOU8BDUrxNukcCf3HsQ96SgyiqnwCq69xadKLtiYAqr8nQr%2BBNKLl5BEC25oRPMDXXJagek1FTXNj1lw%2FyFIfkNVuSwLc1BVMhKMTO50xwrGGGzbVikBwL7v2cRhGDA%2BRzp1cjlEp0689w1DPEip%2BsZSFx8Z1T7IdXUpwVp74kIIJ06SXViBfuyLRoouJkaS%2F1%2Bm9wA1r162GS72SwAAAABJRU5ErkJggg%3D%3D); | ||
25 | background-position: 0 1px; | ||
26 | background-repeat: no-repeat; | ||
27 | height: 15px; | ||
28 | margin-right: 4px; | ||
29 | width: 15px; | ||
30 | -webkit-box-flex: 0; | ||
31 | } | ||
32 | .ss-locked .ss-icon { | ||
33 | background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAMCAYAAAC0qUeeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEMDA5RjUwNDc3Q0IxMUUxOThGODg2OTQ2NzQzQTM4QyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEMDA5RjUwNTc3Q0IxMUUxOThGODg2OTQ2NzQzQTM4QyI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQwMDlGNTAyNzdDQjExRTE5OEY4ODY5NDY3NDNBMzhDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQwMDlGNTAzNzdDQjExRTE5OEY4ODY5NDY3NDNBMzhDIi8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2B5IAEXQAAAD1JREFUeNpi%2FP%2F%2FPwMInD17FsLAAkxMTBhBNBMDCYAJn0kYihkZGRlAGF0hNg2MZ86c%2BU%2BRM0YVEwMAAgwAPiAMV%2F3dGHMAAAAASUVORK5CYII%3D); | ||
34 | background-position: center center; | ||
35 | background-repeat: no-repeat; | ||
36 | } | ||
23 | .style-sheet-container span { | 37 | .style-sheet-container span { |
24 | min-width: 50px; | 38 | min-width: 50px; |
25 | overflow: hidden; | 39 | overflow: hidden; |
@@ -65,8 +79,13 @@ | |||
65 | outline: 0 none; | 79 | outline: 0 none; |
66 | box-shadow: none; | 80 | box-shadow: none; |
67 | } | 81 | } |
68 | 82 | .style-sheet-container .ss-edit-button:active { | |
83 | -webkit-transition: -webkit-transform 3s cubic-bezier(.44,.19,0,.99); | ||
84 | -webkit-transform: rotate(360deg); | ||
85 | } | ||
69 | .style-sheet-edit { | 86 | .style-sheet-edit { |
87 | display: -webkit-box; | ||
88 | -webkit-box-orient: horizontal; | ||
70 | position: absolute; | 89 | position: absolute; |
71 | top: 0; | 90 | top: 0; |
72 | right: 0; | 91 | right: 0; |
@@ -80,17 +99,21 @@ | |||
80 | .style-sheet-edit.expanded .ss-edit-button { | 99 | .style-sheet-edit.expanded .ss-edit-button { |
81 | background-color: #363636; | 100 | background-color: #363636; |
82 | border-color: rgba(80, 80, 80, 1); | 101 | border-color: rgba(80, 80, 80, 1); |
102 | -webkit-box-flex: 0; | ||
83 | opacity: 1; | 103 | opacity: 1; |
84 | } | 104 | } |
105 | |||
85 | .style-sheet-edit.expanded { | 106 | .style-sheet-edit.expanded { |
86 | background-color: #363636; | 107 | background-color: #363636; |
87 | } | 108 | } |
88 | .style-sheet-edit button.nj-skinned { | 109 | .style-sheet-edit button.nj-skinned { |
110 | -webkit-box-flex: .2; | ||
89 | height: 20px; | 111 | height: 20px; |
90 | padding: 2px 10px; | 112 | padding: 2px 10px; |
91 | margin-left: 9px; | 113 | margin-left: 9px; |
92 | margin-right: -4px; | 114 | margin-right: -4px; |
93 | top: 2px; | 115 | top: 2px; |
116 | max-width: 40px; | ||
94 | position: relative; | 117 | position: relative; |
95 | text-transform: capitalize; | 118 | text-transform: capitalize; |
96 | font-size: 10px; | 119 | font-size: 10px; |
@@ -99,6 +122,11 @@ | |||
99 | background: -webkit-linear-gradient(top, rgba(91,57,56,1) 0%,rgba(53,35,35,1) 100%); | 122 | background: -webkit-linear-gradient(top, rgba(91,57,56,1) 0%,rgba(53,35,35,1) 100%); |
100 | } | 123 | } |
101 | .style-sheet-edit button.ss-disable-button { | 124 | .style-sheet-edit button.ss-disable-button { |
102 | position: absolute; | 125 | /*position: absolute;*/ |
103 | right: 25px; | 126 | /*right: 25px;*/ |
127 | margin-right: 25px; | ||
128 | } | ||
129 | |||
130 | .ss-invisible { | ||
131 | display: none; | ||
104 | } \ No newline at end of file | 132 | } \ 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 1c47ce3f..1820f780 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.html +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.html | |||
@@ -15,11 +15,13 @@ 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": {"@": "disableCheckbox"}, | ||
19 | "nameText": {"@": "name"}, | 18 | "nameText": {"@": "name"}, |
20 | "mediaInput": {"@": "mediaInput"}, | 19 | "mediaInput": {"@": "mediaInput"}, |
21 | "editButton": {"@": "editButton"}, | 20 | "editButton": {"@": "editButton"}, |
22 | "editView": {"#": "style-sheet-edit"} | 21 | "editView": {"#": "style-sheet-edit"}, |
22 | "disableButton": {"@": "disableButton"}, | ||
23 | "importButton": {"@": "importButton"}, | ||
24 | "deleteButton": {"@": "deleteButton"} | ||
23 | } | 25 | } |
24 | }, | 26 | }, |
25 | "disableCheckbox": { | 27 | "disableCheckbox": { |
@@ -65,13 +67,56 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
65 | "listener": {"@": "owner"} | 67 | "listener": {"@": "owner"} |
66 | }] | 68 | }] |
67 | 69 | ||
70 | }, | ||
71 | "disableButton": { | ||
72 | "module": "montage/ui/button.reel", | ||
73 | "name": "Button", | ||
74 | "properties": { | ||
75 | "element": {"#": "disable-button"}, | ||
76 | "identifier": "disableButton", | ||
77 | "label": "Disable" | ||
78 | }, | ||
79 | "listeners": [{ | ||
80 | "type": "action", | ||
81 | "listener": {"@": "owner"} | ||
82 | }] | ||
83 | |||
84 | }, | ||
85 | "importButton": { | ||
86 | "module": "montage/ui/button.reel", | ||
87 | "name": "Button", | ||
88 | "properties": { | ||
89 | "element": {"#": "import-button"}, | ||
90 | "identifier": "importButton", | ||
91 | "label": "Import" | ||
92 | }, | ||
93 | "listeners": [{ | ||
94 | "type": "action", | ||
95 | "listener": {"@": "owner"} | ||
96 | }] | ||
97 | |||
98 | }, | ||
99 | "deleteButton": { | ||
100 | "module": "montage/ui/button.reel", | ||
101 | "name": "Button", | ||
102 | "properties": { | ||
103 | "element": {"#": "delete-button"}, | ||
104 | "identifier": "deleteButton", | ||
105 | "label": "Delete" | ||
106 | }, | ||
107 | "listeners": [{ | ||
108 | "type": "action", | ||
109 | "listener": {"@": "owner"} | ||
110 | }] | ||
111 | |||
68 | } | 112 | } |
69 | } | 113 | } |
70 | </script> | 114 | </script> |
71 | </head> | 115 | </head> |
72 | <body> | 116 | <body> |
73 | <div id="style-sheet-container" class="style-sheet-container"> | 117 | <div id="style-sheet-container" class="style-sheet-container"> |
74 | <div id="disable-checkbox"></div> | 118 | <div class="ss-icon"></div> |
119 | <!--<div id="disable-checkbox"></div>--> | ||
75 | <span id="sheet-name"></span> | 120 | <span id="sheet-name"></span> |
76 | <label>Media:</label> | 121 | <label>Media:</label> |
77 | <div id="media-input"></div> | 122 | <div id="media-input"></div> |
@@ -79,9 +124,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
79 | <div data-montage-id="style-sheet-edit" class="style-sheet-edit"> | 124 | <div data-montage-id="style-sheet-edit" class="style-sheet-edit"> |
80 | 125 | ||
81 | <button data-montage-id="edit-button" class="ss-edit-button"></button> | 126 | <button data-montage-id="edit-button" class="ss-edit-button"></button> |
82 | <button data-montage-id="delete-button" class="ss-delete-button nj-skinned">Delete</button> | 127 | <button data-montage-id="delete-button" class="ss-delete-button nj-skinned"></button> |
83 | <button data-montage-id="import-button" class="nj-skinned">Import</button> | 128 | <button data-montage-id="import-button" class="ss-import-button nj-skinned"></button> |
84 | <button data-montage-id="disable-button" class="ss-disable-button nj-skinned">Disable</button> | 129 | <button data-montage-id="disable-button" class="ss-disable-button nj-skinned"></button> |
85 | 130 | ||
86 | </div> | 131 | </div> |
87 | </div> | 132 | </div> |
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 4f9ad21f..9ad48a62 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.js +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js | |||
@@ -14,8 +14,6 @@ exports.StyleSheet = Montage.create(Component, { | |||