From 95bef3bbd77c6c3bd01b5222986f2dd35a7218b4 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Sat, 19 May 2012 14:48:35 -0700 Subject: Changes to binding view Signed-off-by: Armen Kesablyan --- css/ninja.css | 154 ++++++++++----------------- js/controllers/objects-controller.js | 6 -- js/document/templates/html/index.html | 5 +- js/ninja.reel/ninja.html | 5 +- js/stage/binding-view.reel/binding-view.html | 36 ++++++- js/stage/binding-view.reel/binding-view.js | 10 ++ scss/imports/scss/_toolbar.scss | 3 + 7 files changed, 109 insertions(+), 110 deletions(-) diff --git a/css/ninja.css b/css/ninja.css index 39acfe60..34b0b296 100755 --- a/css/ninja.css +++ b/css/ninja.css @@ -518,10 +518,6 @@ div.pp-button.button-divider div { height: 1px; width: 24px; background-color: b #pp-container-assets input.inline-editor { height: 11px; width: 80%; background-color: #242424 !important; color: #b2b2b2 !important; top: -2px; border-width: 0px; font-size: 11px; } -.subToolHolderPanel { margin-left: 42px; } - -.subToolPanel { margin-top: -6px; } - .properties_panel { overflow-x: hidden; color: white; } .properties_panel select { -webkit-appearance: none; font-size: 9px; color: white; background-color: #444444; border: 1px solid #313131; width: 120px; height: 15px; outline: none; background-image: url("../images/dropdown-bg.png"); background-repeat: no-repeat; background-position: right center; } @@ -669,25 +665,25 @@ nav.menuBar ul ul, nav.menuBar ul li:hover ul ul, nav.menuBar ul ul li:hover ul nav.menuBar ul li:hover ul, nav.menuBar ul ul li:hover ul, nav.menuBar ul ul ul li:hover ul { display: block; } -.subToolHolderPanel .toolbutton { float: left; -webkit-transform: scale(0.6); } +.subToolHolderPanel { margin-left: 42px; padding: 6px; float: left; } -.subToolHolderPanel .toolbutton:hover, .subToolHolderPanel .toolbutton.active { -webkit-transform: scale(0.75); } +.subToolHolderPanel .toolbutton { float: left; -webkit-transform: scale(0.6); margin-top: -4px; } -.subOption { float: left; margin-top: 5px; margin-left: 10px; margin-right: 10px; } +.subToolHolderPanel .toolbutton:hover, .subToolHolderPanel .toolbutton.active { -webkit-transform: scale(0.75); } -.toolSeparator { height: 1px; width: 30px; } +.toolOptionsFloatChildren > * { float: left; } -.toolSeparatorTop { margin-top: 3px; margin-bottom: 0px; } +.toolOptionsSpacer { margin-right: 9px; } -.toolSeparatorMiddle { margin-top: 0px; margin-bottom: 0px; } +.toolColorChipCtrl { width: 18px; height: 18px; margin-top: 1px; margin-left: 3px; margin-right: 8px; border: 1px black solid; } -.toolSeparatorBottom { margin-top: 0px; margin-bottom: 3px; } +.toolColorChipIcon { width: 20px; height: 20px; margin-top: 1px; -webkit-transform: scale(0.8); background-color: #282828; } -.toolImageBase { padding: 0px; width: 26px; height: 23px; opacity: 0.7; background-repeat: no-repeat; } +.subToolHolderPanel input.toolOptsRadioButton { width: 24px; height: 24px; margin: 0px 5px 0px 0px; padding: 0px; cursor: pointer; border-radius: 3px; -webkit-user-select: none; border: 1px solid transparent; background: none; background-repeat: no-repeat; background-position: center center; -webkit-transform: scale(0.9); } -.toolImageBase:hover { opacity: 1.0; } +.subToolHolderPanel input.toolOptsRadioButton:hover { box-shadow: 0px 0px 2px 2px #999; -webkit-transform: scale(1); } -.drawingMode { outline: blue solid thin; } +.subToolHolderPanel input.toolOptsRadioButton:checked { box-shadow: inset 0px 0px 2px 2px #999; background-color: #363636; background-position: center center; background-repeat: no-repeat; -webkit-transform: scale(1); } .textBox { padding-top: 3px; min-width: 10em; margin-left: 5px; position: relative; margin-top: 0px; } @@ -703,13 +699,13 @@ nav.menuBar ul li:hover ul, nav.menuBar ul ul li:hover ul, nav.menuBar ul ul ul .cornerRadius:hover, .cornerRadius:active { opacity: 1; } -.cornerRadius.topLeft { -webkit-transform: rotate(0deg); } +.cornerRadius.topLeft { -webkit-transform: rotate(0deg); margin-top: 1px; margin-right: 3px; } -.cornerRadius.topRight { -webkit-transform: rotate(90deg); margin-right: -2px; } +.cornerRadius.topRight { -webkit-transform: rotate(90deg); margin-right: 3px; margin-top: 1px; } -.cornerRadius.bottomLeft { margin-top: 3px; -webkit-transform: rotate(270deg); } +.cornerRadius.bottomLeft { -webkit-transform: rotate(270deg); margin-right: 2px; margin-top: -1px; } -.cornerRadius.bottomRight { margin-top: 3px; -webkit-transform: rotate(180deg); margin-right: -2px; } +.cornerRadius.bottomRight { -webkit-transform: rotate(180deg); margin-right: 4px; margin-top: -1px; } #toolOptionsContainer { display: inline; float: left; } @@ -753,59 +749,71 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1 .optionLabel { margin-top: 5px; } -#tagToolContainer input.tag-type, #rotateObjectToolContainer input.tag-type, #translateObjectToolContainer input.tag-type { background: none; width: 20px; height: 20px; display: block; float: left; margin: 0px; padding: 0px; margin-right: 5px; margin-top: 4px; background-repeat: no-repeat; opacity: 0.8; text-indent: -9999px; cursor: pointer; -webkit-border-radius: 3px; -webkit-user-select: none; border: 1px solid transparent; } +.tagRadioButtons input.divTool { background-image: url("../images/optionsbar/tag/div-tag.png"); } + +.tagRadioButtons input.imageTool { background-image: url("../images/optionsbar/tag/img-tag.png"); } + +.tagRadioButtons input.videoTool { background-image: url("../images/optionsbar/tag/vid-tag.png"); } + +.tagRadioButtons input.canvasTool { background-image: url("../images/optionsbar/tag/canvas-tag.png"); } + +.tagRadioButtons input.customTool { background-image: url("../images/optionsbar/tag/custom-tag.png"); } -#tagToolContainer input.tag-type { background-image: url("../images/tools/sprite-toolbar-tag.png"); } +.tagRadioButtons .nj-divider { height: 100%; float: left; position: relative; } -#rotateObjectToolContainer input.tag-type { background-image: url("../images/tools/sprite-toolbar-3d.png"); } +.tagRadioButtons select.nj-skinned { visibility: visible; position: relative; margin-top: 1px; } -#translateObjectToolContainer input.tag-type { background-image: url("../images/tools/sprite-toolbar-3d.png"); } +.tagRadioButtons select[disabled="true"].nj-skinned, .tagRadioButtons select[disabled].nj-skinned { visibility: hidden; } -#tagToolContainer input.tag-type:active, #rotateObjectToolContainer input.tag-type:active, #translateObjectToolContainer input.tag-type:active { border: 1px solid transparent; } +#zoomToolOptionHolder .zoomOutToolIcon { background-image: url("../images/optionsbar/zoom/zoom_minus.png"); } -#tagToolContainer input.tag-type:hover, #rotateObjectToolContainer input.tag-type:hover, #translateObjectToolContainer input.tag-type:hover { opacity: 1.0; -webkit-box-shadow: 0px 0px 4px #fff; } +#zoomToolOptionHolder .zoomInToolIcon { background-image: url("../images/optionsbar/zoom/zoom_plus.png"); } -#tagToolContainer input.tag-type:checked, #rotateObjectToolContainer input.tag-type:checked, #translateObjectToolContainer input.tag-type:checked { background-color: transparent; opacity: 1.0; cursor: default; -webkit-box-shadow: none; } +.object3DToolContainer input.rotateLocally { background-image: url("../images/optionsbar/options3D/rotate-locally.png"); } -#tagToolContainer input#divTool { background-position: -40px 0px; } +.object3DToolContainer input.rotateGlobally { background-image: url("../images/optionsbar/options3D/rotate-globally.png"); } -#tagToolContainer input#divTool:checked { background-position: -40px -20px; } +.optionsSelectionTool button { padding-top: 0px; } -#tagToolContainer input#imageTool { background-position: -60px 0px; } +.selectionToolIcon { width: 16px; height: 16px; background-repeat: no-repeat; background-position: 1px 2px; } -#tagToolContainer input#imageTool:checked { background-position: -60px -20px; } +.alignTopIcon { background-image: url("../images/optionsbar/selection/AlignTop.png"); } -#tagToolContainer input#videoTool { background-position: -100px 0px; } +.alignMiddleIcon { background-image: url("../images/optionsbar/selection/AlignMiddle.png"); } -#tagToolContainer input#videoTool:checked { background-position: -100px -20px; } +.alignBottomIcon { background-image: url("../images/optionsbar/selection/AlignBottom.png"); } -#tagToolContainer input#canvasTool, #rotateObjectToolContainer input#rotateLocally, #translateObjectToolContainer input#translateLocally { background-position: -20px 0px; } +.alignLeftIcon { background-image: url("../images/optionsbar/selection/AlignLeft.png"); } -#tagToolContainer input#canvasTool:checked, #rotateObjectToolContainer input#rotateLocally:checked, #translateObjectToolContainer input#translateLocally:checked { background-position: -20px -20px; } +.alignCenterIcon { background-image: url("../images/optionsbar/selection/AlignCenter.png"); } -#tagToolContainer input#flashTool { background-position: -80px 0px; } +.alignRightIcon { background-image: url("../images/optionsbar/selection/AlignRight.png"); } -#tagToolContainer input#flashTool:checked { background-position: -80px -20px; } +.arrangeBringForwardIcon { background-image: url("../images/optionsbar/selection/ArrangeBringForward.png"); } -#tagToolContainer input#customTool, #rotateObjectToolContainer input#rotateGlobally, #translateObjectToolContainer input#translateGlobally { background-position: 0px 0px; } +.arrangeSendBackwardIcon { background-image: url("../images/optionsbar/selection/ArrangeSendBackward.png"); } -#tagToolContainer input#customTool:checked, #rotateObjectToolContainer input#rotateGlobally:checked, #translateObjectToolContainer input#translateGlobally:checked { background-position: 0px -20px; } +.arrangeBringToFrontIcon { background-image: url("../images/optionsbar/selection/ArrangeBringToFront.png"); } -#tagToolContainer .nj-divider { height: 100%; float: left; position: relative; top: 5px; } +.arrangeSendToBackIcon { background-image: url("../images/optionsbar/selection/ArrangeSendToBack.png"); } -#tagToolContainer select.nj-skinned { visibility: visible; position: relative; } +.distTopIcon { background-image: url("../images/optionsbar/selection/DistTop.png"); } -#tagToolContainer select[disabled="true"].nj-skinned, #tagToolContainer select[disabled].nj-skinned { visibility: hidden; } +.distMiddleIcon { background-image: url("../images/optionsbar/selection/DistMiddle.png"); } -#zoomToolOptionHolder input#zoomInTool:checked { border-style: solid; border-width: 1px; border-color: white; background-image: url("../images/optionsbar/zoom/zoom_plus.png"); background-repeat: no-repeat; background-position: 4px 3px; } +.distBottomIcon { background-image: url("../images/optionsbar/selection/DistBottom.png"); } -#zoomToolOptionHolder input#zoomOutTool:checked { border-style: solid; border-width: 1px; border-color: white; background-image: url("../images/optionsbar/zoom/zoom_minus.png"); background-repeat: no-repeat; background-position: 4px 3px; } +.distLeftIcon { background-image: url("../images/optionsbar/selection/DistLeft.png"); } -#zoomToolOptionHolder input#zoomInTool { border-style: solid; border-width: 1px; background-image: url("../images/optionsbar/zoom/zoom_plus.png"); background-repeat: no-repeat; background-position: 4px 3px; } +.distCenterIcon { background-image: url("../images/optionsbar/selection/DistCenter.png"); } -#zoomToolOptionHolder input#zoomOutTool { border-style: solid; border-width: 1px; background-image: url("../images/optionsbar/zoom/zoom_minus.png"); background-repeat: no-repeat; background-position: 4px 3px; } +.distRightIcon { background-image: url("../images/optionsbar/selection/DistRight.png"); } -#zoomToolOptionHolder input.zoom-option { background: none; } +.optionsPenTool input.penToolIcon { background-image: url("../images/tools/Tool-Pen.png"); } + +.optionsPenTool input.penPlusToolIcon { background-image: url("../images/optionsbar/pen/penPlus.png"); } + +.optionsPenTool input.penMinusToolIcon { background-image: url("../images/optionsbar/pen/penMinus.png"); } #toolsPanelContent { width: 40px; } @@ -819,12 +827,10 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1 .toolbutton:active { background-color: #8c8c8c; } -.toolbutton.active { box-shadow: inset 0px 0px 2px 2px #555; background-color: #363636; } +.toolbutton.active { box-shadow: inset 0px 0px 2px 2px #999; background-color: #363636; } .SelectionTool { background-image: url("../images/tools/Tool-Selection.png"); } -.SubselectionTool { background-image: url("../images/tools/Tool-Subselect.png"); } - .RotateTool3D { background-image: url("../images/tools/Tool-3DRotate.png"); } .Translate3D { background-image: url("../images/tools/Tool-3DTranslate.png"); } @@ -849,8 +855,6 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1 .FillTool { background-image: url("../images/tools/Tool-Fill.png"); } -.EyedropperTool { background-image: url("../images/tools/Tool-EyeDropper.png"); } - .EraserTool { background-image: url("../images/tools/Tool-Erase.png"); } .RotateStageTool3D { background-image: url("../images/tools/Tool-3DRotateStage.png"); } @@ -865,56 +869,6 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1 .bindingTool { background-image: url("../images/tools/binding.png"); } -.toolsList .colortoolbar { padding-left: 1px; padding-top: 4px; } - -.toolsList .colortoolbar button { width: 27px; height: 27px; background: black; border: 1px solid #000; padding: 0; margin: 0px; } - -.toolsList .colortoolbar div { width: 27px; height: 27px; margin: 0; margin-top: 3px; } - -.toolsList .colortoolbar div.cpe_colortoolbar_container { margin: 0; } - -/*.InkBottleToolPressed {*/ -/*background-image: url("../images/tools/inkbottle_down.png");*/ -/*background-repeat: no-repeat;*/ -/*height: 23px;*/ -/*width: 26px;*/ -/*opacity: 1;*/ -/*}*/ -/*.InkBottleToolUnpressed {*/ -/*background-image: url("../images/tools/inkbottle_down.png");*/ -/*background-repeat: no-repeat;*/ -/*height: 23px;*/ -/*width: 26px;*/ -/*opacity: 0.7;*/ -/*}*/ -.topAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -240px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } - -.rightAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -270px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } - -.bottomAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -300px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } - -.verticalLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } - -.verticalCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -360px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } - -.verticalRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -390px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } - -.distRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: 0px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } - -.distLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -420px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } - -.distCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -60px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } - -.distTopUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -30px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } - -.distBottomUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -90px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } - -.distVCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -450px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } - -.bucketToolUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px 0px; background-repeat: no-repeat; height: 23px; width: 26px; } - -.pencilToolUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -270px -27px; background-repeat: no-repeat; height: 23px; width: 26px; } - .blueDiv { background: blue; opacity: 0.2; } ::-webkit-scrollbar { width: 11px; height: 11px; } diff --git a/js/controllers/objects-controller.js b/js/controllers/objects-controller.js index 70a3974c..543aa96f 100644 --- a/js/controllers/objects-controller.js +++ b/js/controllers/objects-controller.js @@ -16,12 +16,6 @@ var objectsController = exports.ObjectsController = Montage.create(Component, { value: function() { ///// Bind app's activeDocument property to ///// objects controller's _activeDocument property - - Object.defineBinding(this, "activeDocument", { - boundObject: this.application.ninja, - boundObjectPropertyPath: "currentDocument", - oneway: true - }); } }, diff --git a/js/document/templates/html/index.html b/js/document/templates/html/index.html index 933df157..1bd3da1b 100755 --- a/js/document/templates/html/index.html +++ b/js/document/templates/html/index.html @@ -67,7 +67,10 @@ diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index 12dbf660..1f0582b1 100755 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html @@ -324,7 +324,10 @@ }, "objectsController" : { - "prototype": "js/controllers/objects-controller" + "prototype": "js/controllers/objects-controller", + "bindings": { + "activeDocument": {"<-": "@owner.currentDocument"} + } }, "owner": { diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html index e3495542..43fa0112 100755 --- a/js/stage/binding-view.reel/binding-view.html +++ b/js/stage/binding-view.reel/binding-view.html @@ -14,10 +14,11 @@ "owner": { "prototype": "js/stage/binding-view.reel", "properties": { - "element": {"#": "bindingView"} + "element": {"#": "bindingView"}, + "hudRepeater": {"@": "hudRepeater"} } }, - "repeater": { + "hudRepeater": { "prototype": "montage/ui/repetition.reel", "properties": { "element": {"#": "hudRepetition"} @@ -35,6 +36,37 @@ "properties": { "element": {"#" : "hud"} } + }, + "nonVisualRepeater": { + "prototype": "montage/ui/repetition.reel", + "properties": { + "element": {"#": "nonVisualRepeater"} + }, + "bindings": { + "objects": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "nonVisualComponents", + "oneway": true + } + } + }, + "nonVisualComponent": { + "prototype": "js/stage/binding-view.reel/non-visual-component.reel", + "properties": { + "element": {"#": "nonVisualComponent"} + }, + "bindings": { + "objectName": { + "boundObject": {"@": "hudRepetition"}, + "boundObjectPropertyPath": "objectAtCurrentIteration.objectName", + "oneway": true + }, + "objectImage": { + "boundObject": {"@": "undoList"}, + "boundObjectPropertyPath": "objectAtCurrentIteration.objectImage", + "oneway": true + } + } } } diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index 4daa85b3..d3d988c1 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -22,5 +22,15 @@ exports.bindingView = Montage.create(Component, { set: function(val) { this._bindables = val; } + }, + + + nonVisualComponents: { + get: function() { + return this._bindables; + }, + set: function(val) { + this._bindables = val; + } } }); \ No newline at end of file diff --git a/scss/imports/scss/_toolbar.scss b/scss/imports/scss/_toolbar.scss index 9440fa85..422e79e7 100755 --- a/scss/imports/scss/_toolbar.scss +++ b/scss/imports/scss/_toolbar.scss @@ -133,3 +133,6 @@ background-image:url("../images/tools/Tool-FillColor.png"); } +.bindingTool { + background-image:url("../images/tools/binding.png"); +} -- cgit v1.2.3