diff options
20 files changed, 447 insertions, 198 deletions
diff --git a/css/ninja.css b/css/ninja.css index 2f3be9ce..605951e4 100755 --- a/css/ninja.css +++ b/css/ninja.css | |||
@@ -76,11 +76,11 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co | |||
76 | 76 | ||
77 | #topMenu { background-color: #474747; position: absolute; height: 28px; width: 100%; top: 0px; left: 0px; z-index: 6995; } | 77 | #topMenu { background-color: #474747; position: absolute; height: 28px; width: 100%; top: 0px; left: 0px; z-index: 6995; } |
78 | 78 | ||
79 | #topPanelContainer, #leftPanelContainer, #rightPanelContainer, #bottomPanelContainer { background-color: #282828; } | 79 | #topPanelContainer, #leftPanelContainer, #rightPanelContainer, .timelinePanel { background-color: #282828; } |
80 | 80 | ||
81 | #topPanelContainer { overflow: hidden; margin-bottom: 2px; height: 32px; } | 81 | #topPanelContainer { overflow: hidden; margin-bottom: 2px; height: 32px; } |
82 | 82 | ||
83 | #bottomPanelContainer { background: transparent; height: 150px; min-height: 80px; max-height: 50%; overflow: auto; } | 83 | .timelinePanel { background: transparent; height: 150px; min-height: 46px; max-height: 50%; overflow: auto; } |
84 | 84 | ||
85 | .panelContainer { display: -webkit-box; -webkit-box-orient: vertical; position: relative; } | 85 | .panelContainer { display: -webkit-box; -webkit-box-orient: vertical; position: relative; } |
86 | 86 | ||
@@ -92,7 +92,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co | |||
92 | 92 | ||
93 | .mainContainerContent { position: absolute; display: -webkit-box; width: 100%; height: 100%; -webkit-box-orient: vertical; } | 93 | .mainContainerContent { position: absolute; display: -webkit-box; width: 100%; height: 100%; -webkit-box-orient: vertical; } |
94 | 94 | ||
95 | .mainContainerContent > #mainContent { -webkit-box-flex: 1; display: -webkit-box; -webkit-box-orient: horizontal; margin-top: 0px; } | 95 | .mainContainerContent > #mainContent { -webkit-box-flex: 1; display: -webkit-box; -webkit-box-orient: horizontal; margin-top: 0px; position: relative; } |
96 | 96 | ||
97 | .mainContainerContent > section { margin-top: 2px; -webkit-box-flex: 0; } | 97 | .mainContainerContent > section { margin-top: 2px; -webkit-box-flex: 0; } |
98 | 98 | ||
@@ -118,15 +118,17 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co | |||
118 | 118 | ||
119 | #sceneBar { height: 70px; background-color: #474747; } | 119 | #sceneBar { height: 70px; background-color: #474747; } |
120 | 120 | ||
121 | #mainContainer #rulerTop { background: gray; height: 15px; margin-bottom: 0px; } | 121 | #mainContainer #rulerTop { display: none; background: gray url("../images/temp/ruler-top.png"); height: 15px; margin-bottom: 0px; border-right: 11px solid black; } |
122 | 122 | ||
123 | #rulerLeft { background: gray; width: 16px; } | 123 | #rulerLeft { display: none; background: gray url("../images/temp/ruler-left.png"); width: 16px; border-bottom: 11px solid black; } |
124 | 124 | ||
125 | #stateBar { height: 20px; background-color: #282828; margin-bottom: 0px; } | 125 | #stateBar { height: 20px; background-color: #282828; margin-bottom: 0px; } |
126 | 126 | ||
127 | #stageContainer { -webkit-box-flex: 1; position: relative; } | 127 | #stageContainer { -webkit-box-flex: 1; position: relative; } |
128 | 128 | ||
129 | .timelineResizer { background: black center center no-repeat url("data:image/gif;base64,R0lGODlhGQADAMQAAD49PXx8fGppaSYmJl9fXysrKykpKW5uboqJiUxMTGlpaV9eXjo6OoeHhyUkJD09PSoqKmpqaj8/P4qKiiQkJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjdEMUI3NjM1QkQ1QTExRTBBMTJFQzE1RDk5REVFRkI4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjdEMUI3NjM2QkQ1QTExRTBBMTJFQzE1RDk5REVFRkI4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6N0QxQjc2MzNCRDVBMTFFMEExMkVDMTVEOTlERUVGQjgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6N0QxQjc2MzRCRDVBMTFFMEExMkVDMTVEOTlERUVGQjgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQAAAAAACwAAAAAGQADAAAFH6ABDVRpnujpQAXxKFIUz3JNzwKwMEcz/cCgMIgIJEIAOw=="); width: 100%; height: 6px; cursor: row-resize; } | 129 | .pasteboardResizer { position: absolute; width: 11px; height: 11px; bottom: 0px; right: 0px; z-index: 20; background-image: url("../images/scrollbars/scrollbar_resizer.png"); background-repeat: no-repeat; background-color: #000; cursor: se-resize; } |
130 | |||
131 | .timelineResizer { background: #282828; width: 100%; height: 6px; cursor: row-resize; } | ||
130 | 132 | ||
131 | .timelineResizer.collapsed { height: 0px !important; margin: 0px !important; padding: 0px !important; } | 133 | .timelineResizer.collapsed { height: 0px !important; margin: 0px !important; padding: 0px !important; } |
132 | 134 | ||
@@ -136,7 +138,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co | |||
136 | 138 | ||
137 | .resizeBar { -webkit-transition: all 0.15s linear; } | 139 | .resizeBar { -webkit-transition: all 0.15s linear; } |
138 | 140 | ||
139 | .panelContainer, .panelContainer.collapsed { -webkit-transition: all 0.15s ease-in; } | 141 | .panelContainer.collapsed { -webkit-transition: all 0.15s ease-in; } |
140 | 142 | ||
141 | .panel.disableTransition { -webkit-transition: none !important; -webkit-box-flex: 0.1 !important; } | 143 | .panel.disableTransition { -webkit-transition: none !important; -webkit-box-flex: 0.1 !important; } |
142 | 144 | ||
@@ -144,7 +146,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co | |||
144 | 146 | ||
145 | #rightPanelContainer.collapsed, #leftPanelContainer.collapsed { width: 0px !important; min-width: 0px !important; overflow: hidden; border: 0px; margin: 0px; padding: 0px; } | 147 | #rightPanelContainer.collapsed, #leftPanelContainer.collapsed { width: 0px !important; min-width: 0px !important; overflow: hidden; border: 0px; margin: 0px; padding: 0px; } |
146 | 148 | ||
147 | #topPanelContainer.collapsed, #bottomPanelContainer.collapsed { height: 0px !important; min-height: 0px !important; overflow: hidden; border: 0px; margin: 0px; padding: 0px; } | 149 | #topPanelContainer.collapsed, .timelinePanel.collapsed { height: 0px !important; min-height: 0px !important; overflow: hidden; border: 0px; margin: 0px; padding: 0px; } |
148 | 150 | ||
149 | .leftSplitter.collapsed { -webkit-transform: rotate(180deg); } | 151 | .leftSplitter.collapsed { -webkit-transform: rotate(180deg); } |
150 | 152 | ||
@@ -971,7 +973,17 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1 | |||
971 | 973 | ||
972 | ::-webkit-scrollbar-corner:disabled { display: none; } | 974 | ::-webkit-scrollbar-corner:disabled { display: none; } |
973 | 975 | ||
974 | ::-webkit-resizer:disabled { display: none; } | 976 | #iframeContainer::-webkit-resizer:disabled { display: block; } |
977 | |||
978 | #iframeContainer::-webkit-scrollbar-track:vertical:disabled { display: block; } | ||
979 | |||
980 | #iframeContainer::-webkit-scrollbar-track:horizontal:disabled { display: block; } | ||
981 | |||
982 | #iframeContainer::-webkit-scrollbar-track-piece:disabled { display: block; } | ||
983 | |||
984 | #iframeContainer::-webkit-scrollbar-corner:disabled { display: block; } | ||
985 | |||
986 | #iframeContainer::-webkit-resizer:disabled { display: block; } | ||
975 | 987 | ||
976 | .tree { -webkit-user-select: none; cursor: default; float: left; padding-left: 0; color: white; } | 988 | .tree { -webkit-user-select: none; cursor: default; float: left; padding-left: 0; color: white; } |
977 | 989 | ||
diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.css b/js/components/layout/bread-crumb.reel/bread-crumb.css index dcfd471c..26a56b45 100755 --- a/js/components/layout/bread-crumb.reel/bread-crumb.css +++ b/js/components/layout/bread-crumb.reel/bread-crumb.css | |||
@@ -4,14 +4,20 @@ | |||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | 4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. |
5 | </copyright> */ | 5 | </copyright> */ |
6 | 6 | ||
7 | .breadcrumbTrail{ | 7 | .breadcrumbTrail { |
8 | |||
8 | background-color: #282828; | 9 | background-color: #282828; |
9 | border-style: double; | ||
10 | height: 26px; | 10 | height: 26px; |
11 | position:relative; | 11 | position:relative; |
12 | -webkit-box-flex: 0; | 12 | -webkit-box-flex: 0; |
13 | } | 13 | } |
14 | 14 | ||
15 | .mainContentContainer > section.breadcrumbTrail { | ||
16 | border:0; | ||
17 | margin:0; | ||
18 | border-bottom:1px solid #000; | ||
19 | margin-bottom:1px; | ||
20 | } | ||
15 | .breadcrumbTrail button.nj-skinned { | 21 | .breadcrumbTrail button.nj-skinned { |
16 | float: left; | 22 | float: left; |
17 | width: 60px; | 23 | width: 60px; |
diff --git a/js/controllers/presets-controller.js b/js/controllers/presets-controller.js new file mode 100644 index 00000000..7152ba93 --- /dev/null +++ b/js/controllers/presets-controller.js | |||
@@ -0,0 +1,108 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | |||
8 | var Montage = require("montage/core/core").Montage, | ||
9 | Component = require("montage/ui/component").Component; | ||
10 | |||
11 | exports.PresetsController = Montage.create(Component, { | ||
12 | |||
13 | hasTemplate : { | ||
14 | value: false | ||
15 | }, | ||
16 | |||
17 | transitionClass : { | ||
18 | value : "nj-preset-transition" | ||
19 | }, | ||
20 | |||
21 | addTransition: { | ||
22 | value: function(element) { | ||
23 | element.classList.add(this.transitionClass); | ||
24 | element.addEventListener("webkitTransitionEnd", this, true); | ||
25 | } | ||
26 | }, | ||
27 | |||
28 | captureWebkitTransitionEnd : { | ||
29 | value : function(e) { | ||
30 | var el = e.target; | ||
31 | el.classList.remove(this.transitionClass); | ||
32 | el.removeEventListener("webkitTransitionEnd", this, true); | ||
33 | } | ||
34 | }, | ||
35 | |||
36 | applyPreset : { | ||
37 | value: function(presetData, useTransition) { | ||
38 | var selection = this.application.ninja.selectedElements; | ||
39 | |||
40 | if(!selection || !selection.length || selection.length === 0) { return false; } | ||
41 | |||
42 | var stylesController = this.application.ninja.stylesController, | ||
43 | selectorBase = presetData.selectorBase, | ||
44 | rules = []; | ||
45 | |||
46 | selectorBase = stylesController.generateClassName(selectorBase); | ||
47 | |||
48 | presetData.rules.forEach(function(rule, i) { | ||
49 | ///// Treat keyframed rules differently | ||
50 | if(rule.isKeyFrameRule) { | ||
51 | this.application.ninja.stylesController.addRule( | ||
52 | '@-webkit-keyframes ' + presetData.selectorBase, | ||
53 | this.stringifyKeys(rule.keys) | ||
54 | ); | ||
55 | } else { | ||
56 | var suffix = rule.selectorSuffix || ''; | ||
57 | rules.push(stylesController.addRule('.'+selectorBase + suffix, rule.styles)); | ||
58 | } | ||
59 | }, this); | ||
60 | |||
61 | selection.forEach(function(element) { | ||
62 | var el = element._element; | ||
63 | |||
64 | if(useTransition) { | ||
65 | this.addTransition(el); | ||
66 | } | ||
67 | |||
68 | el.classList.add(selectorBase); | ||
69 | |||