From c80e7df1702dff09b5cc8447ab0619747fed2024 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Fri, 11 May 2012 15:03:10 -0700 Subject: created the initial environment requirements for workspace to be manipulated. Signed-off-by: Armen Kesablyan --- css/ninja.css | 10 +++++++-- js/data/panels-data.js | 26 ++++++++++++++++++++++ js/ninja.reel/ninja.js | 18 +++++++++++++++ js/panels/Panel.reel/Panel.js | 10 +++++++++ js/panels/PanelContainer.reel/PanelContainer.html | 20 ++++++++++++++++- js/panels/PanelContainer.reel/PanelContainer.js | 16 ++++++++++++++ js/panels/binding.reel/binding.css | 0 js/panels/binding.reel/binding.html | 27 +++++++++++++++++++++++ js/panels/binding.reel/binding.js | 11 +++++++++ js/panels/objects.reel/objects.css | 0 js/panels/objects.reel/objects.html | 27 +++++++++++++++++++++++ js/panels/objects.reel/objects.js | 7 ++++++ js/tools/bindingTool.js | 23 +++++++++++++++++-- scss/imports/scss/_MainWindow.scss | 4 ++-- scss/imports/scss/_Workspace.scss | 19 ++++++++++++++++ scss/ninja.scss | 1 + 16 files changed, 212 insertions(+), 7 deletions(-) create mode 100644 js/panels/binding.reel/binding.css create mode 100644 js/panels/binding.reel/binding.html create mode 100644 js/panels/binding.reel/binding.js create mode 100644 js/panels/objects.reel/objects.css create mode 100644 js/panels/objects.reel/objects.html create mode 100644 js/panels/objects.reel/objects.js create mode 100755 scss/imports/scss/_Workspace.scss diff --git a/css/ninja.css b/css/ninja.css index 1531b76c..ebf16395 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; border-right: 11px solid black; } +#mainContainer .rulerTop { display: none; background: gray url("../images/temp/ruler-top.png"); height: 15px; margin-bottom: 0px; } -.rulerLeft { display: none; background: gray url("../images/temp/ruler-left.png"); width: 16px; border-bottom: 11px solid black; } +.rulerLeft { display: none; background: gray url("../images/temp/ruler-left.png"); width: 16px; } #stateBar { height: 20px; background-color: #282828; margin-bottom: 0px; } @@ -997,4 +997,10 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1 .montage-invisible { display: none; } +body .panel.ws-binding { display: none; } + +body.ws-binding .rightPanelContent .panel { display: none; } + +body.ws-binding .rightPanelContent .panel.ws-binding { display: block; } + /*77*/ diff --git a/js/data/panels-data.js b/js/data/panels-data.js index f613a3be..7fa22995 100644 --- a/js/data/panels-data.js +++ b/js/data/panels-data.js @@ -105,6 +105,32 @@ exports.PanelsData = Montage.create(Montage, { open: true, modulePath: "js/panels/history-panel/history.reel", moduleName: "History" + }, + { + name: "Binding", + groups: ["ws-binding"], + minHeight: 100, + height: 100, + maxHeight: null, + flexible: true, + collapsed: true, + scrollable: true, + open: true, + modulePath: "js/panels/binding.reel", + moduleName: "BindingPanel" + }, + { + name: "Objects", + groups: ["ws-binding"], + minHeight: 100, + height: 100, + maxHeight: null, + flexible: true, + collapsed: true, + scrollable: true, + open: true, + modulePath: "js/panels/objects.reel", + moduleName: "ObjectsPanel" } ] } diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index edc1efa4..7ab8e52c 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -18,6 +18,24 @@ exports.Ninja = Montage.create(Component, { value: null }, + _workspaceMode: { + value: null + }, + + workspaceMode: { + get: function() { + return this.workspaceMode; + }, + set: function(val) { + if( this._workspaceMode === val ) { + if(this._workspaceMode !== null) { + document.body.classList.remove("ws-" + val); + } + document.body.classList.add("ws-" + val); + } + } + }, + toolsData: { value: null }, appData: { value: AppData }, diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js index 613bef4b..bd9b4e2f 100755 --- a/js/panels/Panel.reel/Panel.js +++ b/js/panels/Panel.reel/Panel.js @@ -13,6 +13,10 @@ exports.Panel = Montage.create(Component, { value: "Panel" }, + groups: { + value: [] + }, + _collapsed: { value: false }, @@ -119,6 +123,12 @@ exports.Panel = Montage.create(Component, { this.application.ninja.colorController.colorView = this.application.ninja.colorController.colorPanelBase.create(); } + if(this.groups) { + this.groups.forEach(function(className) { + this.element.classList.add(className); + }.bind(this)); + } + if(this.modulePath && this.moduleName) { // Load the slot content var that = this; diff --git a/js/panels/PanelContainer.reel/PanelContainer.html b/js/panels/PanelContainer.reel/PanelContainer.html index ccefd3ae..f1d1a855 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.html +++ b/js/panels/PanelContainer.reel/PanelContainer.html @@ -62,6 +62,20 @@ } }, + "panel_7": { + "prototype": "js/panels/Panel.reel", + "properties": { + "element": {"#": "panel_7"} + } + }, + + "panel_8": { + "prototype": "js/panels/Panel.reel", + "properties": { + "element": {"#": "panel_8"} + } + }, + "owner": { "prototype": "js/panels/PanelContainer.reel", "properties": { @@ -73,7 +87,9 @@ "panel_3": {"@": "panel_3"}, "panel_4": {"@": "panel_4"}, "panel_5": {"@": "panel_5"}, - "panel_6": {"@": "panel_6"} + "panel_6": {"@": "panel_6"}, + "panel_7": {"@": "panel_7"}, + "panel_8": {"@": "panel_8"} }, "listeners": [ { @@ -104,6 +120,8 @@
+
+
diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js index 8d1d6a5e..044fd598 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer.reel/PanelContainer.js @@ -21,6 +21,18 @@ exports.PanelContainer = Montage.create(Component, { value: [] }, + panelsAvailable: { + value: function() { + var pAvail = []; + this.panels.forEach(function(obj) { + if (window.getComputedStyle(obj.element).display !== "none") { + pAvail.push(obj); + } + }); + return pAvail; + } + }, + currentPanelState: { value: {} }, @@ -49,6 +61,8 @@ exports.PanelContainer = Montage.create(Component, { this['panel_'+i].modulePath = p.modulePath; this['panel_'+i].moduleName = p.moduleName; this['panel_'+i].disabled = true; + this['panel_'+i].groups = p.groups; + this.currentPanelState[p.name] = {}; this.currentPanelState.version = "1.0"; @@ -144,6 +158,7 @@ exports.PanelContainer = Montage.create(Component, { _setPanelsSizes: { value: function(panelActivated) { + this.panelsAvailable(); var len = this.panels.length, setLocked = true; for(var i = 0; i < len; i++) { @@ -160,6 +175,7 @@ exports.PanelContainer = Montage.create(Component, { _redrawPanels: { value: function(panelActivated, unlockPanels) { var maxHeight = this.element.offsetHeight, setLocked = true; + var availablePanels = this.panelsAvailable(); var len = this.panels.length; if(unlockPanels === true) { diff --git a/js/panels/binding.reel/binding.css b/js/panels/binding.reel/binding.css new file mode 100644 index 00000000..e69de29b diff --git a/js/panels/binding.reel/binding.html b/js/panels/binding.reel/binding.html new file mode 100644 index 00000000..50e839ab --- /dev/null +++ b/js/panels/binding.reel/binding.html @@ -0,0 +1,27 @@ + + + + + + + + + +
+
+ + \ No newline at end of file diff --git a/js/panels/binding.reel/binding.js b/js/panels/binding.reel/binding.js new file mode 100644 index 00000000..e9676c4d --- /dev/null +++ b/js/panels/binding.reel/binding.js @@ -0,0 +1,11 @@ +var Montage = require("montage/core/core").Montage, + PanelBase = require("js/panels/panelbase").PanelBase; +//////////////////////////////////////////////////////////////////////// +//Exporting as ColorPanel +exports.BindingPanel = Montage.create(PanelBase, { + //////////////////////////////////////////////////////////////////// + //Panel Configuration + panelName: { + value: "Color" + } +}); \ No newline at end of file diff --git a/js/panels/objects.reel/objects.css b/js/panels/objects.reel/objects.css new file mode 100644 index 00000000..e69de29b diff --git a/js/panels/objects.reel/objects.html b/js/panels/objects.reel/objects.html new file mode 100644 index 00000000..b21097e7 --- /dev/null +++ b/js/panels/objects.reel/objects.html @@ -0,0 +1,27 @@ + + + + + + + + + +
+
+ + \ No newline at end of file diff --git a/js/panels/objects.reel/objects.js b/js/panels/objects.reel/objects.js new file mode 100644 index 00000000..c1451cc0 --- /dev/null +++ b/js/panels/objects.reel/objects.js @@ -0,0 +1,7 @@ +var Montage = require("montage/core/core").Montage, + PanelBase = require("js/panels/panelbase").PanelBase; +//////////////////////////////////////////////////////////////////////// +//Exporting as ColorPanel +exports.ObjectsPanel = Montage.create(PanelBase, { + +}); \ No newline at end of file diff --git a/js/tools/bindingTool.js b/js/tools/bindingTool.js index 05a4965f..282e3408 100644 --- a/js/tools/bindingTool.js +++ b/js/tools/bindingTool.js @@ -5,11 +5,30 @@ 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; + DrawingTool = require("js/tools/drawing-tool").DrawingTool, +ModifierToolBase = require("js/tools/modifier-tool-base").ModifierToolBase; -exports.BindingTool = Montage.create(DrawingTool, { + +exports.BindingTool = Montage.create(ModifierToolBase, { drawingFeedback: { value: { mode: "Draw2D", type: "" } }, + Configure: { + value: function (doActivate) + { + if (doActivate) + { + NJevent("enableStageMove"); + document.body.classList.add("ws-binding"); + + } + else + { + NJevent("disableStageMove"); + document.body.classList.remove("ws-binding"); + } + } + }, + HandleLeftButtonDown: { value: function(event) { NJevent("enableStageMove"); diff --git a/scss/imports/scss/_MainWindow.scss b/scss/imports/scss/_MainWindow.scss index 2fdf0ac6..31ac97ea 100755 --- a/scss/imports/scss/_MainWindow.scss +++ b/scss/imports/scss/_MainWindow.scss @@ -206,7 +206,7 @@ background:$color-stage url('../images/temp/ruler-top.png'); height:15px; margin-bottom: 0px; - border-right: 11px solid black; + //border-right: 11px solid black; } .rulerLeft { @@ -214,7 +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; + //border-bottom: 11px solid black; } #stateBar { diff --git a/scss/imports/scss/_Workspace.scss b/scss/imports/scss/_Workspace.scss new file mode 100755 index 00000000..7bac37ab --- /dev/null +++ b/scss/imports/scss/_Workspace.scss @@ -0,0 +1,19 @@ +// +// 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. +// + +//Binding Mode + +body .panel.ws-binding { + display:none; +} + +body.ws-binding .rightPanelContent .panel { + display:none; +} + +body.ws-binding .rightPanelContent .panel.ws-binding { + display:block; +} \ No newline at end of file diff --git a/scss/ninja.scss b/scss/ninja.scss index 13db5588..73ca8ff2 100755 --- a/scss/ninja.scss +++ b/scss/ninja.scss @@ -32,6 +32,7 @@ @import "imports/scss/ScrollBars"; @import "imports/scss/Components"; @import "imports/scss/MontageOverrides"; +@import "imports/scss/Workspace"; body { } -- cgit v1.2.3