9 files changed, 38 insertions, 36 deletions
diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.html b/js/components/layout/bread-crumb.reel/bread-crumb.html
index 67328479..c1b9ed61 100755
--- a/js/components/layout/bread-crumb.reel/bread-crumb.html
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.html
@@ -62,7 +62,7 @@
        <div id="breadcrumb_trail" class="breadcrumbtrail">
            <div id="breadcrumb_container" class="bread_crumb">
-                <div id="breadcrumb_button" class="toolbutton"></div>
+                <div id="breadcrumb_button"></div>
            </div>
        </div>
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 100755
--- 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 100755
--- 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/components/layout/tool-button.reel/tool-button.html b/js/components/layout/tool-button.reel/tool-button.html
index 81a9b927..476b66f3 100755
--- a/js/components/layout/tool-button.reel/tool-button.html
+++ b/js/components/layout/tool-button.reel/tool-button.html
@@ -16,8 +16,7 @@
                "module": "js/components/layout/tool-button.reel",
                "name": "ToolButton",
                "properties": {
-                    "element":             {"#": "buttonBackground"},
+                    "element": {"#": "toolBarButton"}
-                    "button":            {"#": "toolBarButton"}
                }
            }
        }
@@ -27,9 +26,7 @@
    </head>
    <body>
-        <div id="buttonBackground" class="buttonBackground">
+        <div id="toolBarButton"></div>
-            <div id="toolBarButton" class="toolBarButton"></div>
-        </div>
    </body>
 </html>
diff --git a/js/components/layout/tool-button.reel/tool-button.js b/js/components/layout/tool-button.reel/tool-button.js
index 72f46830..6cea0dc3 100755
--- a/js/components/layout/tool-button.reel/tool-button.js
+++ b/js/components/layout/tool-button.reel/tool-button.js
@@ -11,8 +11,6 @@ var defaultEventManager = require("montage/core/event/event-manager").defaultEve
 exports.ToolButton = Montage.create(Component, {
-    button:     { value: null },
    data:       { value: null },
    _selected:  { value: null },
@@ -64,32 +62,25 @@ exports.ToolButton = Montage.create(Component, {
                    oneway: true
                });
            }
+            this.element.classList.add(this.data.id)
        }
    },
    draw: {
        enumerable: false,
        value: function() {
-            var buttonid;
            if(this.data.container) {
-                buttonid = this.data.subtools[this._subselected].id;
                this.element.title = this.data.subtools[this._subselected].toolTip;
-                this.button.classList.remove( this.data.subtools[this._currentSubSelected].id + "Unpressed" );
+                this.element.classList.remove(this.data.subtools[this._currentSubSelected].id);
-                this.button.classList.remove( this.data.subtools[this._currentSubSelected].id + "Pressed" );
+                this.element.classList.add(this.data.subtools[this._subselected].id);
                this._currentSubSelected = this._subselected;
-            } else {
-                buttonid = this.data.id;
            }
            if(this._selected) {
-                this.element.classList.add( "buttonSelected" );
+                this.element.classList.add("active");
-                this.button.classList.remove( buttonid + "Unpressed" );
-                this.button.classList.add( buttonid + "Pressed" );
            } else {
-                this.element.classList.remove( "buttonSelected" );
+                this.element.classList.remove("active");
-                this.button.classList.remove( buttonid + "Pressed" );
-                this.button.classList.add( buttonid + "Unpressed" );
            }
        }
    },
diff --git a/js/components/layout/tools-list.reel/tools-list.html b/js/components/layout/tools-list.reel/tools-list.html
index e12fd59b..2c5617e5 100755
--- a/js/components/layout/tools-list.reel/tools-list.html
+++ b/js/components/layout/tools-list.reel/tools-list.html
@@ -25,6 +25,21 @@
                }
            },
+            "groupLine": {
+                "module": "montage/ui/condition.reel",
+                "name": "Condition",
+                "properties": {
+                    "element": {"#": "groupLine"}
+                },
+                "bindings": {
+                    "condition": {
+                        "boundObject": {"@": "repetition1"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.lastInGroup",
+                        "oneway": true
+                    }
+                }
+            },
            "repetition1": {
                "module": "montage/ui/repetition.reel",
                "name": "Repetition",
@@ -163,9 +178,11 @@
        <div id="toolsList" class="toolsList">
            <div id="toolscontainer" class="toolscontainer">
                <div id="toolbutton" class="toolbutton"></div>
+                <div id="groupLine">
+                    <hr />
+                </div>
            </div>
            <!-- TODO: Remove and add as a component -->
-            <hr class="toolbar_hr" />

diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.html b/js/components/layout/bread-crumb.reel/bread-crumb.html index 67328479..c1b9ed61 100755 --- a/js/components/layout/bread-crumb.reel/bread-crumb.html +++ b/js/components/layout/bread-crumb.reel/bread-crumb.html
@@ -62,7 +62,7 @@
62		62
63	<div id="breadcrumb_trail" class="breadcrumbtrail">	63	<div id="breadcrumb_trail" class="breadcrumbtrail">
64	<div id="breadcrumb_container" class="bread_crumb">	64	<div id="breadcrumb_container" class="bread_crumb">
65	<div id="breadcrumb_button" class="toolbutton"></div>	65	<div id="breadcrumb_button"></div>
66	</div>	66	</div>
67	</div>	67	</div>
68		68


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 100755 --- 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 100755 --- 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/components/layout/tool-button.reel/tool-button.html b/js/components/layout/tool-button.reel/tool-button.html index 81a9b927..476b66f3 100755 --- a/js/components/layout/tool-button.reel/tool-button.html +++ b/js/components/layout/tool-button.reel/tool-button.html
@@ -16,8 +16,7 @@
16	"module": "js/components/layout/tool-button.reel",	16	"module": "js/components/layout/tool-button.reel",
17	"name": "ToolButton",	17	"name": "ToolButton",
18	"properties": {	18	"properties": {
19	"element": {"#": "buttonBackground"},	19	"element": {"#": "toolBarButton"}
20	"button": {"#": "toolBarButton"}
21	}	20	}
22	}	21	}
23	}	22	}
@@ -27,9 +26,7 @@
27	</head>	26	</head>
28		27
29	<body>	28	<body>
30	<div id="buttonBackground" class="buttonBackground">	29	<div id="toolBarButton"></div>
31	<div id="toolBarButton" class="toolBarButton"></div>
32	</div>
33	</body>	30	</body>
34		31
35	</html>	32	</html>


diff --git a/js/components/layout/tool-button.reel/tool-button.js b/js/components/layout/tool-button.reel/tool-button.js index 72f46830..6cea0dc3 100755 --- a/js/components/layout/tool-button.reel/tool-button.js +++ b/js/components/layout/tool-button.reel/tool-button.js
@@ -11,8 +11,6 @@ var defaultEventManager = require("montage/core/event/event-manager").defaultEve
11		11
12	exports.ToolButton = Montage.create(Component, {	12	exports.ToolButton = Montage.create(Component, {
13		13
14	button: { value: null },
15
16	data: { value: null },	14	data: { value: null },
17		15
18	_selected: { value: null },	16	_selected: { value: null },
@@ -64,32 +62,25 @@ exports.ToolButton = Montage.create(Component, {
64	oneway: true	62	oneway: true
65	});	63	});
66	}	64	}
		65
		66	this.element.classList.add(this.data.id)
67	}	67	}
68	},	68	},
69		69
70	draw: {	70	draw: {
71	enumerable: false,	71	enumerable: false,
72	value: function() {	72	value: function() {
73	var buttonid;
74
75	if(this.data.container) {	73	if(this.data.container) {
76	buttonid = this.data.subtools[this._subselected].id;
77	this.element.title = this.data.subtools[this._subselected].toolTip;	74	this.element.title = this.data.subtools[this._subselected].toolTip;
78	this.button.classList.remove( this.data.subtools[this._currentSubSelected].id + "Unpressed" );	75	this.element.classList.remove(this.data.subtools[this._currentSubSelected].id);
79	this.button.classList.remove( this.data.subtools[this._currentSubSelected].id + "Pressed" );	76	this.element.classList.add(this.data.subtools[this._subselected].id);
80	this._currentSubSelected = this._subselected;	77	this._currentSubSelected = this._subselected;
81	} else {
82	buttonid = this.data.id;
83	}	78	}
84		79
85	if(this._selected) {	80	if(this._selected) {
86	this.element.classList.add( "buttonSelected" );	81	this.element.classList.add("active");
87	this.button.classList.remove( buttonid + "Unpressed" );
88	this.button.classList.add( buttonid + "Pressed" );
89	} else {	82	} else {
90	this.element.classList.remove( "buttonSelected" );	83	this.element.classList.remove("active");
91	this.button.classList.remove( buttonid + "Pressed" );
92	this.button.classList.add( buttonid + "Unpressed" );
93	}	84	}
94	}	85	}
95	},	86	},


diff --git a/js/components/layout/tools-list.reel/tools-list.html b/js/components/layout/tools-list.reel/tools-list.html index e12fd59b..2c5617e5 100755 --- a/js/components/layout/tools-list.reel/tools-list.html +++ b/js/components/layout/tools-list.reel/tools-list.html
@@ -25,6 +25,21 @@
25	}	25	}
26	},	26	},
27		27
		28	"groupLine": {
		29	"module": "montage/ui/condition.reel",
		30	"name": "Condition",
		31	"properties": {
		32	"element": {"#": "groupLine"}
		33	},
		34	"bindings": {
		35	"condition": {
		36	"boundObject": {"@": "repetition1"},
		37	"boundObjectPropertyPath": "objectAtCurrentIteration.lastInGroup",
		38	"oneway": true
		39	}
		40	}
		41	},
		42
28	"repetition1": {	43	"repetition1": {
29	"module": "montage/ui/repetition.reel",	44	"module": "montage/ui/repetition.reel",
30	"name": "Repetition",	45	"name": "Repetition",
@@ -163,9 +178,11 @@
163	<div id="toolsList" class="toolsList">	178	<div id="toolsList" class="toolsList">
164	<div id="toolscontainer" class="toolscontainer">	179	<div id="toolscontainer" class="toolscontainer">
165	<div id="toolbutton" class="toolbutton"></div>	180	<div id="toolbutton" class="toolbutton"></div>
		181	<div id="groupLine">
		182	<hr />
		183	</div>
166	</div>	184	</div>
167	<!-- TODO: Remove and add as a component -->	185	<!-- TODO: Remove and add as a component -->
168	<hr class="toolbar_hr" />