Tool Button Fixes

Signed-off-by: Armen Kesablyan <armen@motorola.com>
author: Armen Kesablyan 2012-02-16 11:33:18 -0800
committer: Armen Kesablyan 2012-02-16 11:33:18 -0800
commit: 7e08bdbd9db21880783b56a31b480ba33f3b5327 (patch)
tree: 36fab73805cd5d9cec34b6f4fcf3f4bbdd0dba50
parent: ed18ea232174cceaa95b57315a4f993ea4d6c6ec (diff)
download: ninja-7e08bdbd9db21880783b56a31b480ba33f3b5327.tar.gz
8 files changed, 132 insertions, 133 deletions
diff --git a/css/ninja.css b/css/ninja.css
index 179a67da..9a1db6f3 100644
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -666,7 +666,9 @@ 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; }
-.subToolButton { float: left; }
+.subToolHolderPanel .toolbutton { float: left; -webkit-transform: scale(0.6); }
+.subToolHolderPanel .toolbutton:hover, .subToolHolderPanel .toolbutton.active { -webkit-transform: scale(0.75); }
 .subOption { float: left; margin-top: 5px; margin-left: 10px; margin-right: 10px; }
@@ -814,11 +816,11 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1
 .toolbutton { width: 29px; height: 29px; background-position: center center; background-repeat: no-repeat; border-radius: 3px; opacity: 1; margin-bottom: 2px; -webkit-transform: scale(0.8); -webkit-transition: 0.15s all cubic-bezier(0.44, 0.19, 0, 0.99); }
-.toolsList .toolbutton:hover, .toolsList .active { box-shadow: 0px 0px 2px 2px #999; -webkit-transform: scale(1); opacity: 1; }
+.toolbutton:hover, .toolbutton.active { box-shadow: 0px 0px 2px 2px #999; -webkit-transform: scale(1); opacity: 1; }
-.toolsList .toolbutton:active { background-color: #8c8c8c; }
+.toolbutton:active { background-color: #8c8c8c; }
-.toolsList .active { box-shadow: inset 0px 0px 2px 2px #555; background-color: #363636; }
+.toolbutton.active { box-shadow: inset 0px 0px 2px 2px #555; background-color: #363636; }
 .SelectionTool { background-image: url("../images/tools/Tool-Selection.png"); }
diff --git a/js/components/layout/subtool-button.reel/subtool-button.html b/js/components/layout/subtool-button.reel/subtool-button.html
index 9dad007d..24fce57c 100644
--- a/js/components/layout/subtool-button.reel/subtool-button.html
+++ b/js/components/layout/subtool-button.reel/subtool-button.html
@@ -16,8 +16,7 @@
                "module": "js/components/layout/subtool-button.reel",
                "name": "SubToolButton",
                "properties": {
-                    "element":             {"#": "buttonBackground"},
+                    "element":             {"#": "toolButton"}
-                    "button":            {"#": "toolBarButton"}
                }
            }
        }
@@ -26,9 +25,7 @@
    </head>
    <body>
-        <div id="buttonBackground" class="buttonBackground">
+        <div id="toolButton" class="toolbutton"></div>
-            <div id="toolBarButton" class="buttonBackground"></div>
-        </div>
    </body>
 </html>
diff --git a/js/components/layout/subtool-button.reel/subtool-button.js b/js/components/layout/subtool-button.reel/subtool-button.js
index d1adca43..2b066f24 100644
--- a/js/components/layout/subtool-button.reel/subtool-button.js
+++ b/js/components/layout/subtool-button.reel/subtool-button.js
@@ -35,7 +35,7 @@ exports.SubToolButton = Montage.create(Component, {
              boundObjectPropertyPath: "selected",
              oneway: false
            });
+            this.element.classList.add(this.data.id);
        }
    },
@@ -43,13 +43,9 @@ exports.SubToolButton = Montage.create(Component, {
        enumerable: false,
        value: function() {
            if(this._selected) {
-                this.element.classList.add( "buttonSelected" );
+                this.element.classList.add("active");
-                this.button.classList.remove( this.data.id + "Unpressed" );
-                this.button.classList.add( this.data.id + "Pressed" );
            } else {
-                this.element.classList.remove( "buttonSelected" );
+                this.element.classList.remove("active");
-                this.button.classList.remove( this.data.id + "Pressed" );
-                this.button.classList.add( this.data.id + "Unpressed" );
            }
        }
    },
diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html
index c8625159..1db5373e 100644
--- a/js/ninja.reel/ninja.html
+++ b/js/ninja.reel/ninja.html
@@ -340,9 +340,6 @@
                            <section id="rulerLeft"></section>
                            <section id="stageAndScenesContainer"></section>
                        </section>
-                        <section id="sceneBar" style="display: none;"></section>
                        <section id="stateBar">
                            <section id="documentBarContainer">
                                <div id="documentBar" class="documentBar"><a href="#">HTML</a></div>
diff --git a/scss/.sass-cache/bf7669b9251ffa007260472c0d41aebd1dfdcf8a/_Tools.scssc b/scss/.sass-cache/bf7669b9251ffa007260472c0d41aebd1dfdcf8a/_Tools.scssc
index 13e0ffc9..75baa48d 100644
--- a/scss/.sass-cache/bf7669b9251ffa007260472c0d41aebd1dfdcf8a/_Tools.scssc
+++ b/scss/.sass-cache/bf7669b9251ffa007260472c0d41aebd1dfdcf8a/_Tools.scssc
@@ -1,11 +1,11 @@
 3.0.24 (Classy Cassidy)
-d13bec2b6761e63701ae6297725d5434048f64ff
+b621b9b6f8ebccf9ea7facc45dd7388d550fb0e5
 o:Sass::Tree::RootNode
 :
 @linei:
 @options{:
 style:compact:load_paths[",/Users/DHG637/Sites/ninja-internal/scss"o/Applications/compass.app/Contents/Resources/ruby/gem/gems/compass-0.10.6/frameworks/blueprint/stylesheets"~/Applications/compass.app/Contents/Resources/ruby/gem/gems/compass-0.10.6/frameworks/_blueprint_deprecated_imports/stylesheets"m/Applications/compass.app/Contents/Resources/ruby/gem/gems/compass-0.10.6/frameworks/compass/stylesheets"|/Applications/compass.app/Contents/Resources/ruby/gem/gems/compass-0.10.6/frameworks/_compass_deprecated_imports/stylesheets"l/Applications/compass.app/Contents/Resources/ruby/gem/gems/compass-960-plugin-0.10.0/lib/../stylesheets"j/Applications/compass.app/Contents/Resources/ruby/gem/gems/html5-boilerplate-0.2.6/lib/../stylesheets:
 cacheT:cache_location"8/Users/DHG637/Sites/ninja-internal/scss/.sass-cache:syntax:    scss:
-quietT:
-filename"E/Users/DHG637/Sites/ninja-internal/scss/imports/scss/_Tools.scss:css_filename"=/Users/DHG637/Sites/ninja-internal/scss/../css/ninja.css:line_comments0:property_syntax0:@has_childrenT:@template"�$// <copyright>
+quietT:
+filename"E/Users/DHG637/Sites/ninja-internal/scss/imports/scss/_Tools.scss:css_filename"=/Users/DHG637/Sites/ninja-internal/scss/../css/ninja.css:line_comments0:property_syntax0:@has_childrenT:@template"%// <copyright>
 // This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
 // No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
 // (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
@@ -19,14 +19,15 @@ quietT:
filename"E/Users/DHG637/Sites/ninja-internal/scss/imports/scss/_Tools.sc
 // 
  
-// Made changes to toolButton  
+// Made changes to toolButton  }
-.subToolButton {
+.subToolHolderPanel .toolbutton {
    float:left;
+    -webkit-transform: scale(0.6);
 }
-#topPanelContainer .subToolButton {
+.subToolHolderPanel .toolbutton:hover, .subToolHolderPanel .toolbutton.active {
+    -webkit-transform: scale(0.75);
 }
 .subOption{
@@ -476,117 +477,122 @@ input[type="radio"]:disabled {
 * For individual tool styles in the toolbar, see toolbar.scss.
 * Note that colors and font definitions go in 
 * _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss
- *  */;i;[
+ *  */;i;[
 @tabsi
-@rule[".subToolButton;T;i;[o:Sass::Tree::PropNode;i
+@rule["$.subToolHolderPanel .toolbutton;T;i;[o:Sass::Tree::PropNode;i
 @name["
-float;@:@prop_syntax:new;o:Sass::Script::String:
-@context:default;"    left:
+float;@:@prop_syntax:new;o:Sass::Script::String:
+@context:default:
-@type:identifier;i;[
+@type:identifier;"    left;i;[
-o;;i
-float;@; ;!;o;";#;$;"      left;%;&;i;[
-width;@; ;!;o;";#;$;"      30px;%;&;i(;[
- * margin-right: 3px;  */;i);[
-o;;i
-width;@; ;!;o;";#;$;"      26px;%;&;i>;[
-width;@; ;!;o;";#;$;"      10em;%;&;i[;[
-float;@; ;!;o;";#;$;"      left;%;&;i^;[
-block;%;&;i_;[
-;#;$;ib;@;"
-solid;%;&;0o;'  ;#;$;ib;"color-tool-select-border;@;ib;[
-color;@; ;!;o;'      ;#;$;ic;"color-tool-text;{
-color;@; ;!;o;'      ;#;$;ij;"color-tool-select-border;{
- * line-height:10px;  */;iq;[
-float;@; ;!;o;";#;$;"      left;%;&;is;[
-o;;i
 :
-@args[o;"
+@args[o:Sass::Script::Number;#;$;{
-;#;$;i};{
+scale;i;@0;i;[
-width;@; ;!;o;";#;$;"      17px;%;&;i;[
+;([o;);#;$;{
-o;;i
+scale;i;@A;i;[
author	Armen Kesablyan	2012-02-16 11:33:18 -0800
committer	Armen Kesablyan	2012-02-16 11:33:18 -0800
commit	7e08bdbd9db21880783b56a31b480ba33f3b5327 (patch)
tree	36fab73805cd5d9cec34b6f4fcf3f4bbdd0dba50
parent	ed18ea232174cceaa95b57315a4f993ea4d6c6ec (diff)
download	ninja-7e08bdbd9db21880783b56a31b480ba33f3b5327.tar.gz

diff --git a/css/ninja.css b/css/ninja.css index 179a67da..9a1db6f3 100644 --- a/css/ninja.css +++ b/css/ninja.css
@@ -666,7 +666,9 @@ nav.menuBar ul ul, nav.menuBar ul li:hover ul ul, nav.menuBar ul ul li:hover ul
666		666
667	nav.menuBar ul li:hover ul, nav.menuBar ul ul li:hover ul, nav.menuBar ul ul ul li:hover ul { display: block; }	667	nav.menuBar ul li:hover ul, nav.menuBar ul ul li:hover ul, nav.menuBar ul ul ul li:hover ul { display: block; }
668		668
669	.subToolButton { float: left; }	669	.subToolHolderPanel .toolbutton { float: left; -webkit-transform: scale(0.6); }
		670
		671	.subToolHolderPanel .toolbutton:hover, .subToolHolderPanel .toolbutton.active { -webkit-transform: scale(0.75); }
670		672
671	.subOption { float: left; margin-top: 5px; margin-left: 10px; margin-right: 10px; }	673	.subOption { float: left; margin-top: 5px; margin-left: 10px; margin-right: 10px; }
672		674
@@ -814,11 +816,11 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1
814		816
815	.toolbutton { width: 29px; height: 29px; background-position: center center; background-repeat: no-repeat; border-radius: 3px; opacity: 1; margin-bottom: 2px; -webkit-transform: scale(0.8); -webkit-transition: 0.15s all cubic-bezier(0.44, 0.19, 0, 0.99); }	817	.toolbutton { width: 29px; height: 29px; background-position: center center; background-repeat: no-repeat; border-radius: 3px; opacity: 1; margin-bottom: 2px; -webkit-transform: scale(0.8); -webkit-transition: 0.15s all cubic-bezier(0.44, 0.19, 0, 0.99); }
816		818
817	.toolsList .toolbutton:hover, .toolsList .active { box-shadow: 0px 0px 2px 2px #999; -webkit-transform: scale(1); opacity: 1; }	819	.toolbutton:hover, .toolbutton.active { box-shadow: 0px 0px 2px 2px #999; -webkit-transform: scale(1); opacity: 1; }
818		820
819	.toolsList .toolbutton:active { background-color: #8c8c8c; }	821	.toolbutton:active { background-color: #8c8c8c; }
820		822
821	.toolsList .active { box-shadow: inset 0px 0px 2px 2px #555; background-color: #363636; }	823	.toolbutton.active { box-shadow: inset 0px 0px 2px 2px #555; background-color: #363636; }
822		824
823	.SelectionTool { background-image: url("../images/tools/Tool-Selection.png"); }	825	.SelectionTool { background-image: url("../images/tools/Tool-Selection.png"); }
824		826


diff --git a/js/components/layout/subtool-button.reel/subtool-button.html b/js/components/layout/subtool-button.reel/subtool-button.html index 9dad007d..24fce57c 100644 --- a/js/components/layout/subtool-button.reel/subtool-button.html +++ b/js/components/layout/subtool-button.reel/subtool-button.html
@@ -16,8 +16,7 @@
16	"module": "js/components/layout/subtool-button.reel",	16	"module": "js/components/layout/subtool-button.reel",
17	"name": "SubToolButton",	17	"name": "SubToolButton",
18	"properties": {	18	"properties": {
19	"element": {"#": "buttonBackground"},	19	"element": {"#": "toolButton"}
20	"button": {"#": "toolBarButton"}
21	}	20	}
22	}	21	}
23	}	22	}
@@ -26,9 +25,7 @@
26	</head>	25	</head>
27		26
28	<body>	27	<body>
29	<div id="buttonBackground" class="buttonBackground">	28	<div id="toolButton" class="toolbutton"></div>
30	<div id="toolBarButton" class="buttonBackground"></div>
31	</div>
32	</body>	29	</body>
33		30
34	</html>	31	</html>


diff --git a/js/components/layout/subtool-button.reel/subtool-button.js b/js/components/layout/subtool-button.reel/subtool-button.js index d1adca43..2b066f24 100644 --- a/js/components/layout/subtool-button.reel/subtool-button.js +++ b/js/components/layout/subtool-button.reel/subtool-button.js
@@ -35,7 +35,7 @@ exports.SubToolButton = Montage.create(Component, {
35	boundObjectPropertyPath: "selected",	35	boundObjectPropertyPath: "selected",
36	oneway: false	36	oneway: false
37	});	37	});
38		38	this.element.classList.add(this.data.id);
39	}	39	}
40	},	40	},
41		41
@@ -43,13 +43,9 @@ exports.SubToolButton = Montage.create(Component, {
43	enumerable: false,	43	enumerable: false,
44	value: function() {	44	value: function() {
45	if(this._selected) {	45	if(this._selected) {
46	this.element.classList.add( "buttonSelected" );	46	this.element.classList.add("active");
47	this.button.classList.remove( this.data.id + "Unpressed" );
48	this.button.classList.add( this.data.id + "Pressed" );
49	} else {	47	} else {
50	this.element.classList.remove( "buttonSelected" );	48	this.element.classList.remove("active");
51	this.button.classList.remove( this.data.id + "Pressed" );
52	this.button.classList.add( this.data.id + "Unpressed" );
53	}	49	}
54	}	50	}
55	},	51	},


diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index c8625159..1db5373e 100644 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html
@@ -340,9 +340,6 @@
340	<section id="rulerLeft"></section>	340	<section id="rulerLeft"></section>
341	<section id="stageAndScenesContainer"></section>	341	<section id="stageAndScenesContainer"></section>
342	</section>	342	</section>
343
344	<section id="sceneBar" style="display: none;"></section>
345
346	<section id="stateBar">	343	<section id="stateBar">
347	<section id="documentBarContainer">	344	<section id="documentBarContainer">
348	<div id="documentBar" class="documentBar"><a href="#">HTML</a></div>	345	<div id="documentBar" class="documentBar"><a href="#">HTML</a></div>


diff --git a/scss/.sass-cache/bf7669b9251ffa007260472c0d41aebd1dfdcf8a/_Tools.scssc b/scss/.sass-cache/bf7669b9251ffa007260472c0d41aebd1dfdcf8a/_Tools.scssc index 13e0ffc9..75baa48d 100644 --- a/scss/.sass-cache/bf7669b9251ffa007260472c0d41aebd1dfdcf8a/_Tools.scssc +++ b/scss/.sass-cache/bf7669b9251ffa007260472c0d41aebd1dfdcf8a/_Tools.scssc
@@ -1,11 +1,11 @@
1	3.0.24 (Classy Cassidy)	1	3.0.24 (Classy Cassidy)
2	d13bec2b6761e63701ae6297725d5434048f64ff	2	b621b9b6f8ebccf9ea7facc45dd7388d550fb0e5
3	o:Sass::Tree::RootNode	3	o:Sass::Tree::RootNode
4	:	4	:
5	@linei: @options{:	5	@linei: @options{:
6	style:compact:load_paths[",/Users/DHG637/Sites/ninja-internal/scss"o/Applications/compass.app/Contents/Resources/ruby/gem/gems/compass-0.10.6/frameworks/blueprint/stylesheets"~/Applications/compass.app/Contents/Resources/ruby/gem/gems/compass-0.10.6/frameworks/_blueprint_deprecated_imports/stylesheets"m/Applications/compass.app/Contents/Resources/ruby/gem/gems/compass-0.10.6/frameworks/compass/stylesheets"\|/Applications/compass.app/Contents/Resources/ruby/gem/gems/compass-0.10.6/frameworks/_compass_deprecated_imports/stylesheets"l/Applications/compass.app/Contents/Resources/ruby/gem/gems/compass-960-plugin-0.10.0/lib/../stylesheets"j/Applications/compass.app/Contents/Resources/ruby/gem/gems/html5-boilerplate-0.2.6/lib/../stylesheets:	6	style:compact:load_paths[",/Users/DHG637/Sites/ninja-internal/scss"o/Applications/compass.app/Contents/Resources/ruby/gem/gems/compass-0.10.6/frameworks/blueprint/stylesheets"~/Applications/compass.app/Contents/Resources/ruby/gem/gems/compass-0.10.6/frameworks/_blueprint_deprecated_imports/stylesheets"m/Applications/compass.app/Contents/Resources/ruby/gem/gems/compass-0.10.6/frameworks/compass/stylesheets"\|/Applications/compass.app/Contents/Resources/ruby/gem/gems/compass-0.10.6/frameworks/_compass_deprecated_imports/stylesheets"l/Applications/compass.app/Contents/Resources/ruby/gem/gems/compass-960-plugin-0.10.0/lib/../stylesheets"j/Applications/compass.app/Contents/Resources/ruby/gem/gems/html5-boilerplate-0.2.6/lib/../stylesheets:
7	cacheT:cache_location"8/Users/DHG637/Sites/ninja-internal/scss/.sass-cache:syntax: scss:	7	cacheT:cache_location"8/Users/DHG637/Sites/ninja-internal/scss/.sass-cache:syntax: scss:
8	quietT: filename"E/Users/DHG637/Sites/ninja-internal/scss/imports/scss/_Tools.scss:css_filename"=/Users/DHG637/Sites/ninja-internal/scss/../css/ninja.css:line_comments0:property_syntax0:@has_childrenT:@template"�$// <copyright>	8	quietT: filename"E/Users/DHG637/Sites/ninja-internal/scss/imports/scss/_Tools.scss:css_filename"=/Users/DHG637/Sites/ninja-internal/scss/../css/ninja.css:line_comments0:property_syntax0:@has_childrenT:@template"%// <copyright>
9	// This file contains proprietary software owned by Motorola Mobility, Inc.<br/>	9	// This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
10	// No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>	10	// No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
11	// (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.	11	// (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
@@ -19,14 +19,15 @@ quietT: filename"E/Users/DHG637/Sites/ninja-internal/scss/imports/scss/_Tools.sc
19	//	19	//
20		20
21		21
22	// Made changes to toolButton	22	// Made changes to toolButton }
23		23
24	.subToolButton {	24	.subToolHolderPanel .toolbutton {
25	float:left;	25	float:left;
		26	-webkit-transform: scale(0.6);
26	}	27	}
27		28
28	#topPanelContainer .subToolButton {	29	.subToolHolderPanel .toolbutton:hover, .subToolHolderPanel .toolbutton.active {
29		30	-webkit-transform: scale(0.75);
30	}	31	}
31		32
32	.subOption{	33	.subOption{
@@ -476,117 +477,122 @@ input[type="radio"]:disabled {
476	* For individual tool styles in the toolbar, see toolbar.scss.	477	* For individual tool styles in the toolbar, see toolbar.scss.
477	* Note that colors and font definitions go in	478	* Note that colors and font definitions go in
478	* _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss	479	* _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss
479	* */;i;[	480	* */;i;[
480	@tabsi	481	@tabsi
481	@rule[".subToolButton;T;i;[o:Sass::Tree::PropNode;i	482	@rule["$.subToolHolderPanel .toolbutton;T;i;[o:Sass::Tree::PropNode;i
482	@name["	483	@name["
483	float;@:@prop_syntax:new;o:Sass::Script::String: @context:default;" left:	484	float;@:@prop_syntax:new;o:Sass::Script::String: @context:default:
484	@type:identifier;i;[	485	@type:identifier;" left;i;[
485	o;;i
486	float;@; ;!;o;";#;$;" left;%;&;i;[
487	width;@; ;!;o;";#;$;" 30px;%;&;i(;[
488	* margin-right: 3px; */;i);[
489	o;;i
490	width;@; ;!;o;";#;$;" 26px;%;&;i>;[
491	width;@; ;!;o;";#;$;" 10em;%;&;i[;[
492	float;@; ;!;o;";#;$;" left;%;&;i^;[
493	block;%;&;i_;[
494	;#;$;ib;@;"
495	solid;%;&;0o;' ;#;$;ib;"color-tool-select-border;@;ib;[
496	color;@; ;!;o;' ;#;$;ic;"color-tool-text;{
497	color;@; ;!;o;' ;#;$;ij;"color-tool-select-border;{
498	* line-height:10px; */;iq;[
499	float;@; ;!;o;";#;$;" left;%;&;is;[
500	o;;i
501	:	486	:
502	@args[o;"	487	@args[o:Sass::Script::Number;#;$;{
503	;#;$;i};{	488	scale;i;@0;i;[
504	width;@; ;!;o;";#;$;" 17px;%;&;i;[	489	;([o;);#;$;{
505	o;;i	490	scale;i;@A;i;[