From 0088f8e5f3a0be4b6e5e497afbe34de11211493c Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Wed, 9 May 2012 11:36:13 -0700 Subject: -Put new selection tool icons in the options bar -Styled the selection tool options bar --- css/ninja.css | 40 ++++++---- images/tools/AlignBottom.png | Bin 0 -> 2887 bytes images/tools/AlignCenter.png | Bin 0 -> 2859 bytes images/tools/AlignLeft.png | Bin 0 -> 2847 bytes images/tools/AlignMiddle.png | Bin 0 -> 2864 bytes images/tools/AlignRight.png | Bin 0 -> 2851 bytes images/tools/AlignTop.png | Bin 0 -> 2856 bytes images/tools/ArrangeBringForward.png | Bin 0 -> 2877 bytes images/tools/ArrangeBringToFront.png | Bin 0 -> 2877 bytes images/tools/ArrangeSendBackward.png | Bin 0 -> 2873 bytes images/tools/ArrangeSendToBack.png | Bin 0 -> 2877 bytes images/tools/DistBottom.png | Bin 0 -> 2888 bytes images/tools/DistCenter.png | Bin 0 -> 2868 bytes images/tools/DistLeft.png | Bin 0 -> 2856 bytes images/tools/DistMiddle.png | Bin 0 -> 2868 bytes images/tools/DistRight.png | Bin 0 -> 2851 bytes images/tools/DistTop.png | Bin 0 -> 2856 bytes .../selection-properties.html | 69 ++++++++++++---- .../selection-properties.js | 30 ++++++- scss/imports/scss/_Tools.scss | 87 +++++++++++---------- 20 files changed, 151 insertions(+), 75 deletions(-) create mode 100644 images/tools/AlignBottom.png create mode 100644 images/tools/AlignCenter.png create mode 100644 images/tools/AlignLeft.png create mode 100644 images/tools/AlignMiddle.png create mode 100644 images/tools/AlignRight.png create mode 100644 images/tools/AlignTop.png create mode 100644 images/tools/ArrangeBringForward.png create mode 100644 images/tools/ArrangeBringToFront.png create mode 100644 images/tools/ArrangeSendBackward.png create mode 100644 images/tools/ArrangeSendToBack.png create mode 100644 images/tools/DistBottom.png create mode 100644 images/tools/DistCenter.png create mode 100644 images/tools/DistLeft.png create mode 100644 images/tools/DistMiddle.png create mode 100644 images/tools/DistRight.png create mode 100644 images/tools/DistTop.png diff --git a/css/ninja.css b/css/ninja.css index 0a74acf8..d309b34e 100755 --- a/css/ninja.css +++ b/css/ninja.css @@ -681,9 +681,7 @@ nav.menuBar ul li:hover ul, nav.menuBar ul ul li:hover ul, nav.menuBar ul ul ul .subToolHolderPanel .toolbutton:hover, .subToolHolderPanel .toolbutton.active { -webkit-transform: scale(0.75); } -.subOption { float: left; margin-top: 0px; margin-left: 1px; margin-right: 0px; } - -.subOptionSpacer { margin-right: 16px; } +.toolOptionsSpacer { margin-right: 9px; } .toolSeparator { height: 1px; width: 30px; } @@ -835,29 +833,41 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1 .optionsSelectionTool > * { float: left; } -.topAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -240px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } +.optionsSelectionTool button { padding-top: 0px; } + +.selectionToolIcon { width: 16px; height: 16px; background-repeat: no-repeat; background-position: 1px 2px; } + +.alignTopIcon { background-image: url("../images/tools/AlignTop.png"); } + +.alignMiddleIcon { background-image: url("../images/tools/AlignMiddle.png"); } + +.alignBottomIcon { background-image: url("../images/tools/AlignBottom.png"); } + +.alignLeftIcon { background-image: url("../images/tools/AlignLeft.png"); } + +.alignCenterIcon { background-image: url("../images/tools/AlignCenter.png"); } -.rightAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -270px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } +.alignRightIcon { background-image: url("../images/tools/AlignRight.png"); } -.bottomAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -300px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } +.arrangeBringForwardIcon { background-image: url("../images/tools/ArrangeBringForward.png"); } -.verticalLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } +.arrangeSendBackwardIcon { background-image: url("../images/tools/ArrangeSendBackward.png"); } -.verticalCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -360px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } +.arrangeBringToFrontIcon { background-image: url("../images/tools/ArrangeBringToFront.png"); } -.verticalRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -390px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } +.arrangeSendToBackIcon { background-image: url("../images/tools/ArrangeSendToBack.png"); } -.distRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: 0px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } +.distTopIcon { background-image: url("../images/tools/DistTop.png"); } -.distLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -420px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } +.distMiddleIcon { background-image: url("../images/tools/DistMiddle.png"); } -.distCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -60px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } +.distBottomIcon { background-image: url("../images/tools/DistBottom.png"); } -.distTopUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -30px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } +.distLeftIcon { background-image: url("../images/tools/DistLeft.png"); } -.distBottomUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -90px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } +.distCenterIcon { background-image: url("../images/tools/DistCenter.png"); } -.distVCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -450px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } +.distRightIcon { background-image: url("../images/tools/DistRight.png"); } #toolsPanelContent { width: 40px; } diff --git a/images/tools/AlignBottom.png b/images/tools/AlignBottom.png new file mode 100644 index 00000000..f68d62c8 Binary files /dev/null and b/images/tools/AlignBottom.png differ diff --git a/images/tools/AlignCenter.png b/images/tools/AlignCenter.png new file mode 100644 index 00000000..64bb4014 Binary files /dev/null and b/images/tools/AlignCenter.png differ diff --git a/images/tools/AlignLeft.png b/images/tools/AlignLeft.png new file mode 100644 index 00000000..822c5243 Binary files /dev/null and b/images/tools/AlignLeft.png differ diff --git a/images/tools/AlignMiddle.png b/images/tools/AlignMiddle.png new file mode 100644 index 00000000..03dffad5 Binary files /dev/null and b/images/tools/AlignMiddle.png differ diff --git a/images/tools/AlignRight.png b/images/tools/AlignRight.png new file mode 100644 index 00000000..07d6d7ef Binary files /dev/null and b/images/tools/AlignRight.png differ diff --git a/images/tools/AlignTop.png b/images/tools/AlignTop.png new file mode 100644 index 00000000..378d8aab Binary files /dev/null and b/images/tools/AlignTop.png differ diff --git a/images/tools/ArrangeBringForward.png b/images/tools/ArrangeBringForward.png new file mode 100644 index 00000000..55861b5a Binary files /dev/null and b/images/tools/ArrangeBringForward.png differ diff --git a/images/tools/ArrangeBringToFront.png b/images/tools/ArrangeBringToFront.png new file mode 100644 index 00000000..1344e618 Binary files /dev/null and b/images/tools/ArrangeBringToFront.png differ diff --git a/images/tools/ArrangeSendBackward.png b/images/tools/ArrangeSendBackward.png new file mode 100644 index 00000000..2e8ea0ad Binary files /dev/null and b/images/tools/ArrangeSendBackward.png differ diff --git a/images/tools/ArrangeSendToBack.png b/images/tools/ArrangeSendToBack.png new file mode 100644 index 00000000..699ae5ba Binary files /dev/null and b/images/tools/ArrangeSendToBack.png differ diff --git a/images/tools/DistBottom.png b/images/tools/DistBottom.png new file mode 100644 index 00000000..c7ed75ce Binary files /dev/null and b/images/tools/DistBottom.png differ diff --git a/images/tools/DistCenter.png b/images/tools/DistCenter.png new file mode 100644 index 00000000..cf8f2bf5 Binary files /dev/null and b/images/tools/DistCenter.png differ diff --git a/images/tools/DistLeft.png b/images/tools/DistLeft.png new file mode 100644 index 00000000..3849e9e6 Binary files /dev/null and b/images/tools/DistLeft.png differ diff --git a/images/tools/DistMiddle.png b/images/tools/DistMiddle.png new file mode 100644 index 00000000..bb32a441 Binary files /dev/null and b/images/tools/DistMiddle.png differ diff --git a/images/tools/DistRight.png b/images/tools/DistRight.png new file mode 100644 index 00000000..e350b53e Binary files /dev/null and b/images/tools/DistRight.png differ diff --git a/images/tools/DistTop.png b/images/tools/DistTop.png new file mode 100644 index 00000000..1d474b3c Binary files /dev/null and b/images/tools/DistTop.png differ diff --git a/js/components/tools-properties/selection-properties.reel/selection-properties.html b/js/components/tools-properties/selection-properties.reel/selection-properties.html index 2a791542..a05bb7a1 100755 --- a/js/components/tools-properties/selection-properties.reel/selection-properties.html +++ b/js/components/tools-properties/selection-properties.reel/selection-properties.html @@ -16,31 +16,66 @@ "prototype": "js/components/tools-properties/selection-properties.reel", "properties": { "element": {"#": "selectionProperties"}, - "transform": {"#": "transformCheck"} + "transform": {"#": "transformCheck"}, + + "topAlign": {"#": "topAlignBtn"}, + "middleAlign": {"#": "middleAlignBtn"}, + "bottomAlign": {"#": "bottomAlignBtn"}, + + "leftAlign": {"#": "leftAlignBtn"}, + "centerAlign": {"#": "centerAlignBtn"}, + "rightAlign": {"#": "rightAlignBtn"}, + + "distTop": {"#": "distTopBtn"}, + "distMiddle": {"#": "distMiddleBtn"}, + "distBottom": {"#": "distBottomBtn"}, + + "distLeft": {"#": "distLeftBtn"}, + "distCenter": {"#": "distCenterBtn"}, + "distRight": {"#": "distRightBtn"}, + + "arrangeBringForward": {"#": "arrangeBringForwardBtn"}, + "arrangeSendBackward": {"#": "arrangeSendBackwardBtn"}, + "arrangeBringToFront": {"#": "arrangeBringToFrontBtn"}, + "arrangeSendToBack": {"#": "arrangeSendToBackBtn"} } } } - +
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
+ + +
 
+ + + + +
 
+ + + + +
 
+ + + + +
 
+ + + + +
 
+ + + + + +
diff --git a/js/components/tools-properties/selection-properties.reel/selection-properties.js b/js/components/tools-properties/selection-properties.reel/selection-properties.js index c25e96d1..43622960 100755 --- a/js/components/tools-properties/selection-properties.reel/selection-properties.js +++ b/js/components/tools-properties/selection-properties.reel/selection-properties.js @@ -14,15 +14,39 @@ exports.SelectionProperties = Montage.create(ToolProperties, { _controls: { value: false }, _subPrepare: { - value: function() { + value: function () { this.transform.addEventListener("change", this, false); + + // The functionality for these buttons is not currently implemented + // Until it is we will make them all disabled by default. + this.topAlign.disabled = true; + + this.middleAlign.disabled = true; + this.bottomAlign.disabled = true; + + this.leftAlign.disabled = true; + this.centerAlign.disabled = true; + this.rightAlign.disabled = true; + + this.distTop.disabled = true; + this.distMiddle.disabled = true; + this.distBottom.disabled = true; + + this.distLeft.disabled = true; + this.distCenter.disabled = true; + this.distRight.disabled = true; + + this.arrangeBringForward.disabled = true; + this.arrangeSendBackward.disabled = true; + this.arrangeBringToFront.disabled = true; + this.arrangeSendToBack.disabled = true; } }, handleChange: { - value: function(event) { + value: function (event) { this._controls = this.transform.checked; - NJevent("toolOptionsChange", {source: "SelectionProperties", inTransformMode: this.transform.checked}); + NJevent("toolOptionsChange", { source: "SelectionProperties", inTransformMode: this.transform.checked }); } } diff --git a/scss/imports/scss/_Tools.scss b/scss/imports/scss/_Tools.scss index ab71e374..57519043 100755 --- a/scss/imports/scss/_Tools.scss +++ b/scss/imports/scss/_Tools.scss @@ -23,15 +23,8 @@ -webkit-transform: scale(0.75); } -.subOption{ - float:left; - margin-top: 0px; - margin-left: 1px; - margin-right: 0px; -} - -.subOptionSpacer{ - margin-right: 16px; +.toolOptionsSpacer{ + margin-right: 9px; } .toolSeparator { @@ -484,62 +477,76 @@ input[type="radio"]:disabled { float:left; } -.topAlignUp { - - @include background-pos(8,2,26px,23px); +.optionsSelectionTool button { + padding-top: 0px; } -.rightAlignUp { - - @include background-pos(9,2,26px,23px); +.selectionToolIcon { + width: 16px; + height: 16px; + background-repeat:no-repeat; + background-position: 1px 2px; } - -.bottomAlignUp { - - @include background-pos(10,2,26px,23px); +.alignTopIcon { + background-image: url("../images/tools/AlignTop.png"); } -.verticalLeftUp { - - @include background-pos(11,2,26px,23px); +.alignMiddleIcon { + background-image: url("../images/tools/AlignMiddle.png"); } -.verticalCenterUp { - - @include background-pos(12,2,26px,23px); +.alignBottomIcon { + background-image: url("../images/tools/AlignBottom.png"); } -.verticalRightUp { - - @include background-pos(13,2,26px,23px); +.alignLeftIcon { + background-image: url("../images/tools/AlignLeft.png"); } -.distRightUp { +.alignCenterIcon { + background-image: url("../images/tools/AlignCenter.png"); +} - @include background-pos(0,3,26px,23px); +.alignRightIcon { + background-image: url("../images/tools/AlignRight.png"); } -.distLeftUp { +.arrangeBringForwardIcon { + background-image: url("../images/tools/ArrangeBringForward.png"); +} - @include background-pos(14,2,26px,23px); +.arrangeSendBackwardIcon { + background-image: url("../images/tools/ArrangeSendBackward.png"); } -.distCenterUp { +.arrangeBringToFrontIcon { + background-image: url("../images/tools/ArrangeBringToFront.png"); +} - @include background-pos(2,3,26px,23px); +.arrangeSendToBackIcon { + background-image: url("../images/tools/ArrangeSendToBack.png"); } -.distTopUp { +.distTopIcon { + background-image: url("../images/tools/DistTop.png"); +} - @include background-pos(1,3,26px,23px); +.distMiddleIcon { + background-image: url("../images/tools/DistMiddle.png"); } -.distBottomUp { +.distBottomIcon { + background-image: url("../images/tools/DistBottom.png"); +} - @include background-pos(3,3,26px,23px); +.distLeftIcon { + background-image: url("../images/tools/DistLeft.png"); } -.distVCenterUp { +.distCenterIcon { + background-image: url("../images/tools/DistCenter.png"); +} - @include background-pos(15,2,26px,23px); +.distRightIcon { + background-image: url("../images/tools/DistRight.png"); } \ No newline at end of file -- cgit v1.2.3