From 725bb869618b9e0ebb2820a24bca5d1cf53a4810 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 15 Mar 2012 15:14:28 -0700 Subject: Initial Data Binding Mediator Signed-off-by: Armen Kesablyan --- js/mediators/binding-mediator.js | 14 ++++++++++++++ js/mediators/keyboard-mediator.js | 2 ++ 2 files changed, 16 insertions(+) create mode 100644 js/mediators/binding-mediator.js diff --git a/js/mediators/binding-mediator.js b/js/mediators/binding-mediator.js new file mode 100644 index 00000000..10d3f7c6 --- /dev/null +++ b/js/mediators/binding-mediator.js @@ -0,0 +1,14 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +var Montage = require("montage/core/core").Montage; +var Component = require("montage/ui/component").Component; + +exports.bindingMediator = Montage.create(Component, { + + + +}); \ No newline at end of file diff --git a/js/mediators/keyboard-mediator.js b/js/mediators/keyboard-mediator.js index 65dd34cd..85a46739 100755 --- a/js/mediators/keyboard-mediator.js +++ b/js/mediators/keyboard-mediator.js @@ -203,6 +203,8 @@ exports.KeyboardMediator = Montage.create(Component, { } + + if((evt.keyCode == Keyboard.ENTER) && (evt.ctrlKey || evt.metaKey)) { this.application.ninja.executeChromePreview(); return; -- cgit v1.2.3 From fea875906664f12feaad0f282901fa8d9a8b054a Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 22 Mar 2012 11:52:44 -0700 Subject: Presets Panel - Adding presets controller and removing functionality from panel code --- js/controllers/presets-controller.js | 108 +++++++++++++++++++++ .../templates/montage-html/default_html.css | 5 + .../animations-presets.reel/animations-presets.js | 47 +-------- js/panels/presets/default-animation-presets.js | 2 - js/panels/presets/default-style-presets.js | 11 ++- js/panels/presets/default-transition-presets.js | 8 -- .../presets/style-presets.reel/style-presets.js | 49 +--------- .../transitions-presets.js | 20 +--- 8 files changed, 122 insertions(+), 128 deletions(-) create mode 100644 js/controllers/presets-controller.js 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 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + + +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + +exports.PresetsController = Montage.create(Component, { + + hasTemplate : { + value: false + }, + + transitionClass : { + value : "nj-preset-transition" + }, + + addTransition: { + value: function(element) { + element.classList.add(this.transitionClass); + element.addEventListener("webkitTransitionEnd", this, true); + } + }, + + captureWebkitTransitionEnd : { + value : function(e) { + var el = e.target; + el.classList.remove(this.transitionClass); + el.removeEventListener("webkitTransitionEnd", this, true); + } + }, + + applyPreset : { + value: function(presetData, useTransition) { + var selection = this.application.ninja.selectedElements; + + if(!selection || !selection.length || selection.length === 0) { return false; } + + var stylesController = this.application.ninja.stylesController, + selectorBase = presetData.selectorBase, + rules = []; + + selectorBase = stylesController.generateClassName(selectorBase); + + presetData.rules.forEach(function(rule, i) { + ///// Treat keyframed rules differently + if(rule.isKeyFrameRule) { + this.application.ninja.stylesController.addRule( + '@-webkit-keyframes ' + presetData.selectorBase, + this.stringifyKeys(rule.keys) + ); + } else { + var suffix = rule.selectorSuffix || ''; + rules.push(stylesController.addRule('.'+selectorBase + suffix, rule.styles)); + } + }, this); + + selection.forEach(function(element) { + var el = element._element; + + if(useTransition) { + this.addTransition(el); + } + + el.classList.add(selectorBase); + + //// Keep track of elements with presets and don't add duplicates + this.setCachedPreset(el, presetData.id, rules); + + }, this); + + } + }, + + setCachedPreset : { + value: function(el, presetId, rules) { + + } + }, + + getPresets : { + value: function(element) { + + } + + }, + + stringifyKeys : { + value: function(keysArray) { + var keysString = ''; + + keysArray.forEach(function(key) { + var styles = '', style; + + for(style in key.styles) { + styles += style + ':' + key.styles[style] + '; '; + } + + keysString += key.keyText + ' {' + styles + ' }'; + }); + + return keysString; + } + } +}); \ No newline at end of file diff --git a/js/document/templates/montage-html/default_html.css b/js/document/templates/montage-html/default_html.css index 68300edf..24a752bc 100755 --- a/js/document/templates/montage-html/default_html.css +++ b/js/document/templates/montage-html/default_html.css @@ -72,4 +72,9 @@ body .elem-red-outline { outline: red solid thin; +} + +.nj-preset-transition { + -webkit-transition: all 450ms linear !important; + background-color: red; } \ No newline at end of file diff --git a/js/panels/presets/animations-presets.reel/animations-presets.js b/js/panels/presets/animations-presets.reel/animations-presets.js index ab200212..6a16da54 100644 --- a/js/panels/presets/animations-presets.reel/animations-presets.js +++ b/js/panels/presets/animations-presets.reel/animations-presets.js @@ -22,52 +22,7 @@ exports.AnimationsLibrary = Montage.create(Component, { }, handleNodeActivation: { value: function(presetData) { - //debugger; - var selection = this.application.ninja.selectedElements, - stylesController = this.application.ninja.stylesController, - selectorBase = presetData.selectorBase, - self = this; - - if(!selection || !selection.length || selection.length === 0) { - return false; - } - - selectorBase = stylesController.generateClassName(selectorBase); - - presetData.rules.forEach(function(rule) { - if(rule.isKeyFrameRule) { - this.application.ninja.stylesController.addRule( - '@-webkit-keyframes ' + presetData.selectorBase, - this.stringifyKeys(rule.keys) - ); - } else { - this.application.ninja.stylesController.addRule('.' + selectorBase + rule.selectorSuffix, rule.styles); - } - - }, this); - - selection.forEach(function(el) { - el._element.classList.add(selectorBase); - }, this); - - } - }, - - stringifyKeys : { - value: function(keysArray) { - var keysString = ''; - - keysArray.forEach(function(key) { - var styles = '', style; - - for(style in key.styles) { - styles += style + ':' + key.styles[style] + '; '; - } - - keysString += key.keyText + ' {' + styles + ' }'; - }); - - return keysString; + this.application.ninja.presetsController.applyPreset(presetData); } } }); diff --git a/js/panels/presets/default-animation-presets.js b/js/panels/presets/default-animation-presets.js index 10a3e906..fa0127c2 100644 --- a/js/panels/presets/default-animation-presets.js +++ b/js/panels/presets/default-animation-presets.js @@ -13,7 +13,6 @@ exports.animationPresets = { "text": "Border Morph", "selectorBase" : "border-morph", "rules" : [{ - "selectorSuffix" : "", "styles" : { "-webkit-animation": "border-morph 2s infinite" } @@ -43,7 +42,6 @@ exports.animationPresets = { "text": "Rotater", "selectorBase" : "rotate-with-alpha-keyframes", "rules" : [{ - "selectorSuffix" : "", "styles" : { "-webkit-animation-name": "rotate-with-alpha-keyframes", "-webkit-animation-duration": "5s", diff --git a/js/panels/presets/default-style-presets.js b/js/panels/presets/default-style-presets.js index 3677d976..109faae2 100644 --- a/js/panels/presets/default-style-presets.js +++ b/js/panels/presets/default-style-presets.js @@ -11,9 +11,9 @@ exports.stylePresets = { "children": [ { "text": "Border-Radius", + "id": "njBorderRadius", "selectorBase" : "border-radius-preset", "rules" : [{ - "selectorSuffix" : "", "styles" : { "border-radius": "100px", "border" : "1px solid #333" @@ -22,9 +22,9 @@ exports.stylePresets = { }, { "text": "Drop Shadow", + "id": "njDropShadow", "selectorBase" : "drop-shadow", "rules" : [{ - "selectorSuffix" : "", "styles" : { "box-shadow": "2px 2px 50px rgba(0,0,0,0.5)", "border" : "1px solid #CCC" @@ -33,9 +33,10 @@ exports.stylePresets = { }, { "text": "Fancy Box", + "id": "njFancyBox", "selectorBase" : "fancy-box", "rules" : [{ - "selectorSuffix" : "", + "selectorSuffix": "", "styles" : { "box-shadow": "inset 0 0 0 1px #666, inset 0 0 0 2px rgba(225, 225, 225, 0.4), 0 0 20px -10px #333", "border" : "1px solid #FFF", @@ -50,9 +51,9 @@ exports.stylePresets = { "children": [ { "text": "Italic", + "id": "njItalic", "selectorBase" : "italicize", "rules" : [{ - "selectorSuffix" : "", "styles" : { "font-style": "italic" } @@ -60,9 +61,9 @@ exports.stylePresets = { }, { "text": "Text Shadow", + "id": "njTextShadow", "selectorBase" : "italicize", "rules" : [{ - "selectorSuffix" : "", "styles" : { "text-shadow": "1px 1px 3px #333" } diff --git a/js/panels/presets/default-transition-presets.js b/js/panels/presets/default-transition-presets.js index 15f4882f..f8968085 100644 --- a/js/panels/presets/default-transition-presets.js +++ b/js/panels/presets/default-transition-presets.js @@ -13,7 +13,6 @@ exports.transitionPresets = { "text": "Fade In", "selectorBase" : "fade-in", "rules" : [{ - "selectorSuffix": "", "styles" : { "opacity": "0.25", "-webkit-transition": "all 0.4s ease-in" @@ -29,7 +28,6 @@ exports.transitionPresets = { "text": "Fade Out", "selectorBase" : "fade-out", "rules" : [{ - "selectorSuffix": "", "styles" : { "opacity": "1", "-webkit-transition": "all 0.4s ease-in" @@ -48,7 +46,6 @@ exports.transitionPresets = { "text": "Slide Right", "selectorBase" : "slide-right", "rules" : [{ - "selectorSuffix": "", "styles" : { "-webkit-transition": "all 0.4s ease-in" } @@ -63,7 +60,6 @@ exports.transitionPresets = { "text": "Slide Left", "selectorBase" : "slide-left", "rules" : [{ - "selectorSuffix": "", "styles" : { "-webkit-transition": "all 0.4s ease-in" } @@ -78,7 +74,6 @@ exports.transitionPresets = { "text": "Rotate", "selectorBase" : "rotate", "rules" : [{ - "selectorSuffix" : "", "styles" : { "-webkit-transition": "all 0.4s ease-in" } @@ -92,7 +87,6 @@ exports.transitionPresets = { "text": "Scale Up", "selectorBase" : "scale-up", "rules" : [{ - "selectorSuffix" : "", "styles" : { "-webkit-transition": "-webkit-transform 0.4s ease-in" } @@ -107,7 +101,6 @@ exports.transitionPresets = { "text": "Scale Down", "selectorBase" : "scale-down", "rules" : [{ - "selectorSuffix" : "", "styles" : { "-webkit-transition": "-webkit-transform 0.4s ease-in" } @@ -122,7 +115,6 @@ exports.transitionPresets = { "text": "Remove 3D", "selectorBase" : "remove-3d", "rules" : [{ - "selectorSuffix": "", "styles" : { "-webkit-transition": "all 0.4s ease-in" } diff --git a/js/panels/presets/style-presets.reel/style-presets.js b/js/panels/presets/style-presets.reel/style-presets.js index 11f41822..6a28e069 100644 --- a/js/panels/presets/style-presets.reel/style-presets.js +++ b/js/panels/presets/style-presets.reel/style-presets.js @@ -22,60 +22,13 @@ exports.StylesLibrary = Montage.create(Component, { }, handleNodeActivation: { value: function(presetData) { - var selection = this.application.ninja.selectedElements, - stylesController = this.application.ninja.stylesController, - selectorBase = presetData.selectorBase, - self = this, className; - - if(!selection || !selection.length || selection.length === 0) { - return false; - } - - function setStopRuleSelector(selector) { - self.application.ninja - .currentDocument.documentRoot - .elementModel.controller - .changeSelector(self.application.ninja.currentDocument.documentRoot, null, selector); - } - - selectorBase = stylesController.generateClassName(selectorBase); - - presetData.rules.forEach(function(rule) { - stylesController.addRule('.'+selectorBase + rule.selectorSuffix, rule.styles); - }, this); - - selection.forEach(function(el) { - el._element.style.webkitTransition = "all 450ms linear"; - - el._element.addEventListener("webkitTransitionEnd", function presetTransition(e) { - el._element.style.webkitTransition = ''; - setStopRuleSelector("*"); - this.removeEventListener("webkitTransitionEnd", presetTransition, true); - - }, true); - setStopRuleSelector("transitionStopRule"); - el._element.classList.add(selectorBase); - - //// Keep track of elements with presets and don't add duplicates - - }, this); - - + this.application.ninja.presetsController.applyPreset(presetData, true); } }, handleDragEnd : { value: function(sourceObject) { console.log(sourceObject); } - }, - shouldChangeSelection : { - value : function(controller, newSelection, oldSelection) { - // - //debugger; - console.log('1Handle should change selection'); - return false; - } } - }); diff --git a/js/panels/presets/transitions-presets.reel/transitions-presets.js b/js/panels/presets/transitions-presets.reel/transitions-presets.js index f7d84085..ace38dbb 100644 --- a/js/panels/presets/transitions-presets.reel/transitions-presets.js +++ b/js/panels/presets/transitions-presets.reel/transitions-presets.js @@ -22,25 +22,7 @@ exports.TransitionsLibrary = Montage.create(Component, { }, handleNodeActivation: { value: function(presetData) { - var selection = this.application.ninja.selectedElements, - stylesController = this.application.ninja.stylesController, - selectorBase = presetData.selectorBase, - self = this; - - if(!selection || !selection.length || selection.length === 0) { - return false; - } - - selectorBase = stylesController.generateClassName(selectorBase); - - presetData.rules.forEach(function(rule) { - this.application.ninja.stylesController.addRule('.' + selectorBase + rule.selectorSuffix, rule.styles); - }, this); - - selection.forEach(function(el) { - el._element.classList.add(selectorBase); - }, this); - + this.application.ninja.presetsController.applyPreset(presetData); } } }); -- cgit v1.2.3 From da03585a0b03220281f6d54d9acf0ae0fafaef16 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 22 Mar 2012 11:53:21 -0700 Subject: Presets Panel - Adding presets controller to serialization --- js/ninja.reel/ninja.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index f9e1efdd..a4779ee3 100755 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html @@ -267,6 +267,11 @@ "name": "StylesController" }, + "presetsController": { + "module": "js/controllers/presets-controller", + "name": "PresetsController" + }, + "filePickerController": { "module": "js/io/ui/file-picker/file-picker-controller", "name": "FilePickerController" @@ -315,6 +320,7 @@ "popupManager": {"@": "popupManager1"}, "colorController": {"@": "colorController1"}, "stylesController": {"@": "stylesController"}, + "presetsController": {"@": "presetsController"}, "filePickerController": {"@": "filePickerController"}, "newFileController": {"@": "newFileController"}, "coreIoApi": {"@": "coreIoApi1"}, -- cgit v1.2.3 From 49596f2a6b518ed0ee945006787d3c69e40a5757 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 22 Mar 2012 14:31:12 -0700 Subject: Updated Resizers for Panels and timeline Signed-off-by: Armen Kesablyan --- css/ninja.css | 28 ++++++--- js/ninja.reel/ninja.html | 97 +++++++++++++++++++++--------- js/ninja.reel/ninja.js | 107 +++++++++++++++++++++++++++++++++ js/panels/Splitter.js | 2 +- js/panels/resize-composer.js | 23 ++++++- js/stage/stage-view.reel/stage-view.js | 12 ++-- scss/imports/scss/_MainWindow.scss | 39 ++++++++---- scss/imports/scss/_ScrollBars.scss | 27 ++++++++- 8 files changed, 279 insertions(+), 56 deletions(-) diff --git a/css/ninja.css b/css/ninja.css index 8213ec26..af1cdef8 100755 --- a/css/ninja.css +++ b/css/ninja.css @@ -76,11 +76,11 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co #topMenu { background-color: #474747; position: absolute; height: 28px; width: 100%; top: 0px; left: 0px; z-index: 6995; } -#topPanelContainer, #leftPanelContainer, #rightPanelContainer, #bottomPanelContainer { background-color: #282828; } +#topPanelContainer, #leftPanelContainer, #rightPanelContainer, .timelinePanel { background-color: #282828; } #topPanelContainer { overflow: hidden; margin-bottom: 2px; height: 32px; } -#bottomPanelContainer { background: transparent; height: 150px; min-height: 80px; max-height: 50%; overflow: auto; } +.timelinePanel { background: transparent; height: 150px; min-height: 46px; max-height: 50%; overflow: auto; } .panelContainer { display: -webkit-box; -webkit-box-orient: vertical; position: relative; } @@ -92,7 +92,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co .mainContainerContent { position: absolute; display: -webkit-box; width: 100%; height: 100%; -webkit-box-orient: vertical; } -.mainContainerContent > #mainContent { -webkit-box-flex: 1; display: -webkit-box; -webkit-box-orient: horizontal; margin-top: 0px; } +.mainContainerContent > #mainContent { -webkit-box-flex: 1; display: -webkit-box; -webkit-box-orient: horizontal; margin-top: 0px; position: relative; } .mainContainerContent > section { margin-top: 2px; -webkit-box-flex: 0; } @@ -118,14 +118,16 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co #sceneBar { height: 70px; background-color: #474747; } -#mainContainer #rulerTop { background: gray; height: 15px; margin-bottom: 0px; } +#mainContainer #rulerTop { display: none; background: gray url("../images/temp/ruler-top.png"); height: 15px; margin-bottom: 0px; } -#rulerLeft { background: gray; width: 16px; } +#rulerLeft { display: none; background: gray url("../images/temp/ruler-left.png"); width: 16px; } #stateBar { height: 20px; background-color: #282828; margin-bottom: 0px; } #stageContainer { -webkit-box-flex: 1; position: relative; } +.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; } + .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; } .timelineResizer.collapsed { height: 0px !important; margin: 0px !important; padding: 0px !important; } @@ -136,7 +138,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co .resizeBar { -webkit-transition: all 0.15s linear; } -.panelContainer, .panelContainer.collapsed { -webkit-transition: all 0.15s ease-in; } +.panelContainer.collapsed { -webkit-transition: all 0.15s ease-in; } .panel.disableTransition { -webkit-transition: none !important; -webkit-box-flex: 0.1 !important; } @@ -144,7 +146,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co #rightPanelContainer.collapsed, #leftPanelContainer.collapsed { width: 0px !important; min-width: 0px !important; overflow: hidden; border: 0px; margin: 0px; padding: 0px; } -#topPanelContainer.collapsed, #bottomPanelContainer.collapsed { height: 0px !important; min-height: 0px !important; overflow: hidden; border: 0px; margin: 0px; padding: 0px; } +#topPanelContainer.collapsed, .timelinePanel.collapsed { height: 0px !important; min-height: 0px !important; overflow: hidden; border: 0px; margin: 0px; padding: 0px; } .leftSplitter.collapsed { -webkit-transform: rotate(180deg); } @@ -975,7 +977,17 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1 ::-webkit-scrollbar-corner:disabled { display: none; } -::-webkit-resizer:disabled { display: none; } +#iframeContainer::-webkit-resizer:disabled { display: block; } + +#iframeContainer::-webkit-scrollbar-track:vertical:disabled { display: block; } + +#iframeContainer::-webkit-scrollbar-track:horizontal:disabled { display: block; } + +#iframeContainer::-webkit-scrollbar-track-piece:disabled { display: block; } + +#iframeContainer::-webkit-scrollbar-corner:disabled { display: block; } + +#iframeContainer::-webkit-resizer:disabled { display: block; } .tree { -webkit-user-select: none; cursor: default; float: left; padding-left: 0; color: white; } diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index f9e1efdd..b3545329 100755 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html @@ -77,34 +77,79 @@ "name": "Splitter", "properties": { "element": {"#": "bottomSplitter"}, - "panel": {"#": "bottomPanelContainer"}, - "resizeBar": {"#": "timelineResizer"} + "panel": {"@": "timeline"} } }, "resizer1": { - "module": "js/panels/Resizer", - "name": "Resizer", + "module": "js/panels/resize-composer", + "name": "ResizeComposer", "properties": { "element": {"#": "rightPanelResizer"}, - "id": "rightPanelResizer", - "panel": {"#": "rightPanelContainer"}, - "isVertical": false, - "redrawStage": true - } + "component": {"@": "owner"}, + "yAxis": false + }, + "listeners": [ + { + "type": "resizeStart", + "listener": {"@": "owner"} + }, + { + "type": "resizeMove", + "listener": {"@": "owner"} + }, + { + "type": "resizeEnd", + "listener": {"@": "owner"} + } + ] }, "resizer2": { - "module": "js/panels/Resizer", - "name": "Resizer", + "module": "js/panels/resize-composer", + "name": "ResizeComposer", "properties": { "element": {"#": "timelineResizer"}, - "id": "timelineResizer", - "panel": {"#": "bottomPanelContainer"}, - "isVertical": true, - "isInversed": true, - "redrawStage": true - } + "component": {"@": "owner"}, + "xAxis": false + }, + "listeners": [ + { + "type": "resizeStart", + "listener": {"@": "owner"} + }, + { + "type": "resizeMove", + "listener": {"@": "owner"} + }, + { + "type": "resizeEnd", + "listener": {"@": "owner"} + } + ] + }, + + "Resizer": { + "module": "js/panels/resize-composer", + "name": "ResizeComposer", + "properties": { + "element": {"#": "pasteboardResizer"}, + "component": {"@": "owner"} + }, + "listeners": [ + { + "type": "resizeStart", + "listener": {"@": "owner"} + }, + { + "type": "resizeMove", + "listener": {"@": "owner"} + }, + { + "type": "resizeEnd", + "listener": {"@": "owner"} + } + ] }, "stageMode": { @@ -321,7 +366,10 @@ "documentBar": {"@": "documentBar"}, "ioMediator": {"@": "ioMediator"}, "timeline": {"@": "timeline"}, - "mainMenuController": {"@": "mainMenuController"} + "mainMenuController": {"@": "mainMenuController"}, + "rightPanelContainer": {"#": "rightPanelContainer" }, + "panelSplitter": {"@": "splitter3"}, + "timelineSplitter": {"@": "splitter4"} } } } @@ -374,7 +422,9 @@
+
+
@@ -382,20 +432,13 @@
- -
- -
-
-
-
-
+
-
+
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index 2a6e49f7..e29c5057 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -23,6 +23,80 @@ exports.Ninja = Montage.create(Component, { value: null }, + _isResizing: { + value: false + }, + _resizedHeight : { + value: 0 + }, + _height: { + value: null + }, + + height: { + get: function() { + return this._height; + }, + set: function(val) { + if(this._height != val) { + this._height = val; + this.needsDraw = true; + } + + } + }, + + _resizedWidth : { + value: 0 + }, + _width: { + value: null + }, + + width: { + get: function() { + return this._width; + }, + set: function(val) { + if(this._width != val) { + this._width = val; + this.needsDraw = true; + } + + } + }, + + handleResizeStart: { + value:function(e) { + this.isResizing = true; + this.height = parseInt(this.timeline.element.offsetHeight); + this.width = parseInt(this.rightPanelContainer.offsetWidth); + this.needsDraw = true; + } + }, + + handleResizeMove: { + value:function(e) { + this._resizedHeight = e._event.dY; + this._resizedWidth = e._event.dX; + console.log("resizing"); + this.stage.resizeCanvases = true; + this.needsDraw = true; + } + }, + + handleResizeEnd: { + value: function(e) { + this.height -= this._resizedHeight; + this.width -= this._resizedWidth; + this.stage.resizeCanvases = true; + this._resizedHeight = 0; + this._resizedWidth = 0; + this.isResizing = false; + this.needsDraw = true; + } + }, + selectedElements: { value: [] }, @@ -78,12 +152,45 @@ exports.Ninja = Montage.create(Component, { } }, + willDraw: { + value: function() { + if (this.height === null) { + this.height = parseInt(this.timeline.element.offsetHeight); + } + if (this.width === null) { + this.width = parseInt(this.rightPanelContainer.offsetWidth); + } + } + }, + + draw: { + value: function() { + if (this.height - this._resizedHeight < 30) { + this.timelineSplitter.collapsed = true; + } else { + this.timelineSplitter.collapsed = false; + } + if (this.width - this._resizedWidth < 30) { + this.panelSplitter.collapsed = true; + } else { + this.panelSplitter.collapsed = false; + } + + this.timeline.element.style.height = (this.height - this._resizedHeight) + "px"; + this.rightPanelContainer.style.width = (this.width - this._resizedWidth) + "px"; + } + }, + _didDraw: { value: false }, didDraw: { value: function() { + if (!this.isResizing) { + this.height = this.timeline.element.offsetHeight; + this.width = this.rightPanelContainer.offsetWidth; + } if(!this._didDraw) { if (!this.application.ninja.coreIoApi.ioServiceDetected) { var check = this.application.ninja.coreIoApi.cloudAvailable(); diff --git a/js/panels/Splitter.js b/js/panels/Splitter.js index e92cb2dd..6791e0d5 100755 --- a/js/panels/Splitter.js +++ b/js/panels/Splitter.js @@ -55,7 +55,7 @@ exports.Splitter = Montage.create(Component, { }, set: function(value) { this._collapsed = value; - + this.needsDraw = true; this.application.localStorage.setItem(this.element.getAttribute("data-montage-id"), {"version": this.version, "value": value}); } }, diff --git a/js/panels/resize-composer.js b/js/panels/resize-composer.js index 6e5e89f8..450dc7b6 100644 --- a/js/panels/resize-composer.js +++ b/js/panels/resize-composer.js @@ -9,6 +9,14 @@ var Composer = require("montage/ui/composer/composer").Composer; exports.ResizeComposer = Montage.create(Composer, { + xAxis: { + value: true + }, + + yAxis: { + value: true + }, + enabled : { enumerable: false, value: true @@ -104,8 +112,19 @@ exports.ResizeComposer = Montage.create(Composer, { captureMousemove: { value: function(e) { - this._deltaX = e.clientX - this._startX; - this._deltaY = e.clientY - this._startY; + + if (this.xAxis) { + this._deltaX = e.clientX - this._startX; + } + else { + this._deltaX = 0; + } + if (this.yAxis) { + this._deltaY = e.clientY - this._startY; + } + else { + this._deltaY = 0; + } this._executeEvent("resizeMove"); } }, diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js index ad67cada..1f471431 100755 --- a/js/stage/stage-view.reel/stage-view.js +++ b/js/stage/stage-view.reel/stage-view.js @@ -200,14 +200,18 @@ exports.StageView = Montage.create(Component, { }, showRulers:{ value:function(){ - this.application.ninja.rulerTop.style.background = "url('../images/temp/ruler-top.png')"; - this.application.ninja.rulerLeft.style.background = "url('../images/temp/ruler-left.png')"; + this.application.ninja.rulerTop.style.display = "block"; + this.application.ninja.rulerLeft.style.display = "block"; +// this.application.ninja.rulerTop.style.background = "url('../images/temp/ruler-top.png')"; +// this.application.ninja.rulerLeft.style.background = "url('../images/temp/ruler-left.png')"; } }, hideRulers:{ value:function(){ - this.application.ninja.rulerTop.style.background = "rgb(128,128,128)"; - this.application.ninja.rulerLeft.style.background = "rgb(128,128,128)"; + this.application.ninja.rulerTop.style.display = "none"; + this.application.ninja.rulerLeft.style.display = "none"; +// this.application.ninja.rulerTop.style.background = "rgb(128,128,128)"; +// this.application.ninja.rulerLeft.style.background = "rgb(128,128,128)"; } }, diff --git a/scss/imports/scss/_MainWindow.scss b/scss/imports/scss/_MainWindow.scss index 4c1ed592..eec931ab 100755 --- a/scss/imports/scss/_MainWindow.scss +++ b/scss/imports/scss/_MainWindow.scss @@ -73,7 +73,7 @@ #topPanelContainer, #leftPanelContainer, #rightPanelContainer, -#bottomPanelContainer { +.timelinePanel { background-color: #282828; } #topPanelContainer { @@ -82,11 +82,11 @@ height:32px; } -#bottomPanelContainer { +.timelinePanel { //border: 1px solid #333; background: transparent; height: 150px; - min-height:80px; + min-height:46px; max-height:50%; overflow:auto; @@ -136,6 +136,7 @@ display: -webkit-box; -webkit-box-orient: horizontal; margin-top:0px; + position :relative; } .mainContainerContent > section { margin-top: 2px; @@ -200,15 +201,17 @@ } #mainContainer #rulerTop { + display: none; // TODO: temporary background please replace when component is implemented - background:$color-stage; + background:$color-stage url('../images/temp/ruler-top.png'); height:15px; margin-bottom: 0px; } #rulerLeft { + display: none; // TODO: temporary background please replace when component is implemented - background:$color-stage; + background:$color-stage url('../images/temp/ruler-left.png'); width:16px; } @@ -223,11 +226,25 @@ position:relative; } +.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; + +} .timelineResizer { - background: #000 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; + background: #000 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; } .timelineResizer.collapsed { height:0px !important; @@ -247,12 +264,12 @@ .resizeBar { -webkit-transition: all 0.15s linear; } // Splitters Collapsed -.panelContainer, .panelContainer.collapsed { -webkit-transition: all 0.15s ease-in; } +.panelContainer.collapsed { -webkit-transition: all 0.15s ease-in; } .panel.disableTransition { -webkit-transition: none !important; -webkit-box-flex:0.1 !important; } .disableTransition { -webkit-transition: none !important; -webkit-box-flex:0 !important; } #rightPanelContainer.collapsed, #leftPanelContainer.collapsed { width:0px !important; min-width:0px !important; overflow: hidden; border: 0px; margin: 0px; padding: 0px; } -#topPanelContainer.collapsed, #bottomPanelContainer.collapsed { height:0px !important; min-height:0px !important; overflow: hidden; border: 0px; margin: 0px; padding: 0px; } +#topPanelContainer.collapsed, .timelinePanel.collapsed { height:0px !important; min-height:0px !important; overflow: hidden; border: 0px; margin: 0px; padding: 0px; } .leftSplitter.collapsed { -webkit-transform:rotate(180deg); } .rightSplitter.collapsed { -webkit-transform:rotate(0deg); } .topSplitter.collapsed { -webkit-transform:rotate(180deg); } diff --git a/scss/imports/scss/_ScrollBars.scss b/scss/imports/scss/_ScrollBars.scss index 1c2f30ea..2e79d9c8 100755 --- a/scss/imports/scss/_ScrollBars.scss +++ b/scss/imports/scss/_ScrollBars.scss @@ -110,8 +110,9 @@ background-color: $color-sb-border; } + ::-webkit-scrollbar-corner:window-inactive { - background-color: $color-sb-border; + background-color: $color-sb-border; } ::-webkit-resizer { @@ -150,8 +151,28 @@ display: none; } -::-webkit-resizer:disabled { - display: none; +#iframeContainer::-webkit-resizer:disabled { + display: block; +} + +#iframeContainer::-webkit-scrollbar-track:vertical:disabled { + display: block; +} + +#iframeContainer::-webkit-scrollbar-track:horizontal:disabled { + display: block; +} + +#iframeContainer::-webkit-scrollbar-track-piece:disabled { + display: block; +} + +#iframeContainer::-webkit-scrollbar-corner:disabled { + display: block; +} + +#iframeContainer::-webkit-resizer:disabled { + display: block; } // End: Scroll Bar Skinning -- cgit v1.2.3 From 94a4be4b7b77f4c1498e8fb65e00d73ccbd56813 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Fri, 23 Mar 2012 14:33:41 -0700 Subject: Resizers updated Signed-off-by: Armen Kesablyan --- css/ninja.css | 6 +++--- js/components/layout/bread-crumb.reel/bread-crumb.css | 10 ++++++++-- js/ninja.reel/ninja.html | 4 ++++ js/ninja.reel/ninja.js | 13 +++++++++++++ js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | 4 ++-- js/panels/resize-composer.js | 13 +++++++------ scss/imports/scss/_MainWindow.scss | 4 +++- 7 files changed, 40 insertions(+), 14 deletions(-) diff --git a/css/ninja.css b/css/ninja.css index af1cdef8..4aea3aac 100755 --- a/css/ninja.css +++ b/css/ninja.css @@ -118,9 +118,9 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co #sceneBar { height: 70px; background-color: #474747; } -#mainContainer #rulerTop { display: none; background: gray url("../images/temp/ruler-top.png"); height: 15px; margin-bottom: 0px; } +#mainContainer #rulerTop { display: none; background: gray url("../images/temp/ruler-top.png"); height: 15px; margin-bottom: 0px; border-right: 11px solid black; } -#rulerLeft { display: none; background: gray url("../images/temp/ruler-left.png"); width: 16px; } +#rulerLeft { display: none; background: gray url("../images/temp/ruler-left.png"); width: 16px; border-bottom: 11px solid black; } #stateBar { height: 20px; background-color: #282828; margin-bottom: 0px; } @@ -128,7 +128,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co .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; } -.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; } +.timelineResizer { background: #282828; width: 100%; height: 6px; cursor: row-resize; } .timelineResizer.collapsed { height: 0px !important; margin: 0px !important; padding: 0px !important; } 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 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ -.breadcrumbTrail{ +.breadcrumbTrail { + background-color: #282828; - border-style: double; height: 26px; position:relative; -webkit-box-flex: 0; } +.mainContentContainer > section.breadcrumbTrail { + border:0; + margin:0; + border-bottom:1px solid #000; + margin-bottom:1px; +} .breadcrumbTrail button.nj-skinned { float: left; width: 60px; diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index b3545329..7b5a6e52 100755 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html @@ -148,6 +148,10 @@ { "type": "resizeEnd", "listener": {"@": "owner"} + }, + { + "type": "resizeReset", + "listener": {"@": "owner"} } ] }, diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index e29c5057..b432755f 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -97,6 +97,19 @@ exports.Ninja = Montage.create(Component, { } }, + handleResizeReset: { + value: function(e) { + this.width = 253; + this.height = 140; + this._resizedHeight = 0; + this._resizedWidth = 0; + this.needsDraw = true; + this.timelineSplitter.collapsed = false; + this.panelSplitter.collapsed = false; + } + }, + + selectedElements: { value: [] }, diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index 129b9771..067285ae 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css @@ -10,12 +10,12 @@ height: 100%; } .maintimeline{ - border-style: double; -webkit-box-flex: 1; display: -webkit-box; - -webkit-box-orient: horizontal + -webkit-box-orient: horizontal; height : 100%; position: relative; + margin-top:1px; } .leftinside{ height: 100%; diff --git a/js/panels/resize-composer.js b/js/panels/resize-composer.js index 450dc7b6..0d1774cd 100644 --- a/js/panels/resize-composer.js +++ b/js/panels/resize-composer.js @@ -77,6 +77,7 @@ exports.ResizeComposer = Montage.create(Composer, { load: { value: function() { this.element.addEventListener("mousedown", this, true); + this.element.addEventListener("dblclick", this, true); } }, @@ -112,7 +113,6 @@ exports.ResizeComposer = Montage.create(Composer, { captureMousemove: { value: function(e) { - if (this.xAxis) { this._deltaX = e.clientX - this._startX; } @@ -129,12 +129,13 @@ exports.ResizeComposer = Montage.create(Composer, { } }, - deserializedFromTemplate: { - value: function() { - if (this.component) { - this.component.addComposer(this); - } + captureDblclick: { + value:function(e) { + this._reset(); + this._executeEvent("resizeReset"); } } + + }); \ No newline at end of file diff --git a/scss/imports/scss/_MainWindow.scss b/scss/imports/scss/_MainWindow.scss index eec931ab..ba9851da 100755 --- a/scss/imports/scss/_MainWindow.scss +++ b/scss/imports/scss/_MainWindow.scss @@ -206,6 +206,7 @@ background:$color-stage url('../images/temp/ruler-top.png'); height:15px; margin-bottom: 0px; + border-right: 11px solid black; } #rulerLeft { @@ -213,6 +214,7 @@ // TODO: temporary background please replace when component is implemented background:$color-stage url('../images/temp/ruler-left.png'); width:16px; + border-bottom: 11px solid black; } #stateBar { @@ -241,7 +243,7 @@ } .timelineResizer { - background: #000 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=='); + background: #282828; width:100%; height:6px; cursor: row-resize; -- cgit v1.2.3 From 3a4ddfc232372d2d8d956778f060d8cabe316818 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Fri, 23 Mar 2012 14:37:39 -0700 Subject: Removing old code Signed-off-by: Armen Kesablyan --- js/mediators/binding-mediator.js | 14 -------------- js/mediators/keyboard-mediator.js | 2 -- 2 files changed, 16 deletions(-) delete mode 100644 js/mediators/binding-mediator.js diff --git a/js/mediators/binding-mediator.js b/js/mediators/binding-mediator.js deleted file mode 100644 index 10d3f7c6..00000000 --- a/js/mediators/binding-mediator.js +++ /dev/null @@ -1,14 +0,0 @@ -/* - This file contains proprietary software owned by Motorola Mobility, Inc.
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
- (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. - */ - -var Montage = require("montage/core/core").Montage; -var Component = require("montage/ui/component").Component; - -exports.bindingMediator = Montage.create(Component, { - - - -}); \ No newline at end of file diff --git a/js/mediators/keyboard-mediator.js b/js/mediators/keyboard-mediator.js index 85a46739..65dd34cd 100755 --- a/js/mediators/keyboard-mediator.js +++ b/js/mediators/keyboard-mediator.js @@ -203,8 +203,6 @@ exports.KeyboardMediator = Montage.create(Component, { } - - if((evt.keyCode == Keyboard.ENTER) && (evt.ctrlKey || evt.metaKey)) { this.application.ninja.executeChromePreview(); return; -- cgit v1.2.3 From 28b7e870ac4cd023ddf1ffee7a1b122257f57190 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Fri, 23 Mar 2012 15:30:17 -0700 Subject: minor glitch in calculations in snap code Signed-off-by: Armen Kesablyan --- js/ninja.reel/ninja.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index b432755f..50343a18 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -178,7 +178,7 @@ exports.Ninja = Montage.create(Component, { draw: { value: function() { - if (this.height - this._resizedHeight < 30) { + if (this.height - this._resizedHeight < 46) { this.timelineSplitter.collapsed = true; } else { this.timelineSplitter.collapsed = false; -- cgit v1.2.3 From 668a3e832c0f4dd1ea0c3d56e3a79756c0a236b1 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 27 Mar 2012 11:43:37 -0700 Subject: Presets Controller - Removing test background from transition class --- js/document/templates/montage-html/default_html.css | 1 - 1 file changed, 1 deletion(-) diff --git a/js/document/templates/montage-html/default_html.css b/js/document/templates/montage-html/default_html.css index 24a752bc..6c2b415f 100755 --- a/js/document/templates/montage-html/default_html.css +++ b/js/document/templates/montage-html/default_html.css @@ -76,5 +76,4 @@ body .nj-preset-transition { -webkit-transition: all 450ms linear !important; - background-color: red; } \ No newline at end of file -- cgit v1.2.3 From bfd796e47c856c6620dc4b32ac6c710d4a493d3a Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 27 Mar 2012 15:24:30 -0700 Subject: Text Tool - Remove inline style from user document --- js/tools/TextTool.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js index 4c464173..d27a32bb 100755 --- a/js/tools/TextTool.js +++ b/js/tools/TextTool.js @@ -6,7 +6,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, DrawingTool = require("js/tools/drawing-tool").DrawingTool; - RichTextEditor = require("node_modules/labs/rich-text-editor.reel").RichTextEditor; + RichTextEditor = require("node_modules/labs/rich-text-editor.reel").RichTextEditor, + ElementsMediator = require("js/mediators/element-mediator").ElementMediator; exports.TextTool = Montage.create(DrawingTool, { @@ -21,7 +22,7 @@ exports.TextTool = Montage.create(DrawingTool, { this.selectedElement.innerHTML = this.application.ninja.stage.textTool.value; this.application.ninja.stage.textTool.value = ""; this.application.ninja.stage.textTool.element.style.display = "none"; - this.applyElementStyles(this.application.ninja.stage.textTool.element.firstChild, this.selectedElement, ["color"]); + ElementsMediator.setProperty(this.application.ninja.selectedElements, "color", [window.getComputedStyle(this.application.ninja.stage.textTool.element.firstChild)["color"]], "Change", "textTool"); } //Set Selected Element this._selectedElement = val; -- cgit v1.2.3