Refactored toolbar component. Added menu-item hover state.

mui · Oct 20, 2014 · 4c10336 · 4c10336
1 parent 2eeab12
commit 4c10336
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 42 deletions.
diff --git a/docs/dist/js/toolbar-group.jsx b/docs/dist/js/toolbar-group.jsx
@@ -1,16 +1,14 @@
-/**
- * @jsx React.DOM
- */
+/** @jsx React.DOM */
 
-var React = require('react'),
-    Classable = require('./mixins/classable.js');
+var Classable = require('./mixins/classable.js');
+var React = require('react');
 
 var ToolbarGroup = React.createClass({
 
   propTypes: {
-    key: React.PropTypes.number.isRequired,
     float: React.PropTypes.string,
-    groupItems: React.PropTypes.array
+    groupItems: React.PropTypes.array,
+    key: React.PropTypes.number.isRequired
   },
 
   mixins: [Classable],

diff --git a/docs/dist/js/toolbar.jsx b/docs/dist/js/toolbar.jsx
@@ -1,10 +1,9 @@
-/**
- * @jsx React.DOM
- */
+/** @jsx React.DOM */
 
-var React = require('react'),
-    ToolbarGroup = require('./toolbar-group.jsx'),
-    Classable = require('./mixins/classable.js');
+var Classable = require('./mixins/classable.js');
+var Paper = require('./paper.jsx');
+var React = require('react');
+var ToolbarGroup = require('./toolbar-group.jsx');
 
 var Toolbar = React.createClass({
 

diff --git a/docs/dist/less/components/drop-down-menu.less b/docs/dist/less/components/drop-down-menu.less
@@ -60,9 +60,14 @@
 
 	.mui-menu {
 		.mui-menu-item {
+			transition: none;
 			padding-right: (@icon-size + (@desktop-gutter-less*2));
 			height: @desktop-drop-down-menu-item-height;
 			line-height: @desktop-drop-down-menu-item-height;
+
+			&:hover {
+				background-color: @menu-item-hover-color;
+			}
 		}
 	}
 

diff --git a/docs/dist/less/components/menu.less b/docs/dist/less/components/menu.less
@@ -35,11 +35,16 @@
 	}
 
 	.mui-menu-item {
+		transition: none;
 		cursor: pointer;
 		line-height: @menu-item-height;
 		padding-left: @menu-item-padding;
 		padding-right: @menu-item-padding;
 
+		&:hover {
+			background-color: @menu-item-hover-color;
+		}
+
 		.mui-menu-item-number {
 			float: right;
 		}

diff --git a/docs/dist/less/components/toolbar.less b/docs/dist/less/components/toolbar.less
@@ -1,5 +1,9 @@
-@toolbar-height: 56px;
 @toolbar-background-color: darken(#eeeeee, 5%);
+@toolbar-height: 56px;
+@toolbar-icon-color: rgba(0, 0, 0, .40);
+@toolbar-separator-color: rgba(0, 0, 0, .11);
+@toolbar-menu-hover-color: rgba(0, 0, 0, .10);
+@toolbar-menu-hover-color: @white;
 
 .mui-toolbar-container {
 	background-color: @white;
@@ -8,54 +12,91 @@
 }
 
 .mui-toolbar {
-	width: 100%;
 	background-color: @toolbar-background-color;
 	height: @toolbar-height;
 	line-height: @toolbar-height;
 	padding: 0 @desktop-gutter;
+	width: 100%;
+	//.lh-box-shadow(0 1px 4px rgba(0, 0, 0, 0.24)); 
 
 	.mui-toolbar-group {
 		position: relative;
 
 		.mui-toolbar-title {
-			padding-right: 16px; 
+			padding-right: @desktop-gutter-less; 
 		}
 
 		.mui-toolbar-separator {
-			width: 1px;
-			background-color: rgba(0, 0, 0, .11);
+			background-color: @toolbar-separator-color;
 			display: inline-block;
+			height: @desktop-gutter-more;
+			margin-left: @desktop-gutter;
 			position: relative;
 			top: 12px;
-			height: 32px;
+			width: 1px;
 		}
 
 		.mui-paper-button {
-			vertical-align: middle;
-			top: -2px;
+			margin: 0 @desktop-gutter;
 			position: relative;
+			top: -2px;
+			vertical-align: middle;
 		}
 
 		.mui-drop-down-menu {
+			color: @light-black;
 			display: inline-block;
+			margin-right: -@desktop-gutter;
+
+			.mui-menu-control-bg {
+				background-color: @toolbar-menu-hover-color !important;
+				border-radius: 0 !important;
+			}
+
+			.mui-icon {
+				&:hover {
+					color: @toolbar-icon-color;
+
+					.mui-icon-highlight {
+						background-color: transparent;
+						border: none;
+						box-shadow: none;
+						transition: none;
+					}
+				}
+			}
 		}
 
 		.mui-icon {
-			line-height: @toolbar-height;
-			padding-left: 24px;
-			color: rgba(0, 0, 0, .40);
+			color: @toolbar-icon-color;
 			cursor: pointer;
+			line-height: @toolbar-height;
+			padding-left: @desktop-gutter;
 
 			&:hover {
+				color: @dark-black;
+				z-index: 1;
+
 				.mui-icon-highlight {
-					background-color: rgba(0, 0, 0, .075);
+					background-color: @white;
+					border: 1px solid @min-black;
 					transition: none;
+					z-index: -1;
+					.lh-box-shadow(0 1px 4px rgba(0, 0, 0, 0.24));
 				}
 			}
 		}
 
 		&.mui-left {
 			float: left;
+
+			.mui-drop-down-menu, .mui-icon, .mui-toolbar-separator, .mui-drop-down-icon  {
+				float: left !important;
+			}
+
+			&:first-child {
+				margin-left: -24px !important;
+			}
 		}
 
 		&.mui-right {
@@ -64,6 +105,14 @@
 			* {
 				vertical-align: top;
 			}
+
+			.mui-paper-button {
+				vertical-align: middle !important;
+			}
+
+			&:last-child {
+				margin-right: -24px !important;
+			}
 		}
 	}
 }
diff --git a/docs/dist/less/variables/custom-variables.less b/docs/dist/less/variables/custom-variables.less
@@ -33,6 +33,7 @@
 @menu-background-color: white;
 @menu-item-data-height: 32px;
 @menu-item-height: 48px;
+@menu-item-hover-color: rgba(0, 0, 0, .035);
 @menu-item-padding: @desktop-gutter;
 @menu-item-selected-text-color: @accent-1-color;
 @menu-container-background-color: white;

diff --git a/docs/src/app/components/pages/toolbars.jsx b/docs/src/app/components/pages/toolbars.jsx
@@ -1,11 +1,8 @@
-/**
- * @jsx React.DOM
- */
-
-var React = require('react'),
-    mui = require('mui')
-    PaperButton = mui.PaperButton;
+/** @jsx React.DOM */
 
+var mui = require('mui');
+var PaperButton = mui.PaperButton;
+var React = require('react');
 
 var ToolbarPage = React.createClass({
 
@@ -23,22 +20,20 @@ var ToolbarPage = React.createClass({
 
     iconMenuItems = [
       { payload: '1', text: 'Download' },
-      { payload: '2', text: 'Blah' }
+      { payload: '2', text: 'More Info' }
     ];
 
-    leftItems = [
-      //{ type: "title", title: "Broadcasts"},
-      <mui.PaperButton type={PaperButton.Types.RAISED} label="Create Broadcast" primary={true} />
-    ],
-
     rightItems = [
-      { type: "separator"},
-      <mui.DropDownMenu menuItems={filterOptions} />,
-      { type: "separator"},
       <mui.Icon icon='sort' />,
       <mui.Icon icon='filter' />,
       <mui.Icon icon='search' />,
-      <mui.DropDownIcon icon="chevron-down" menuItems={iconMenuItems} onChange={this._onDropDownMenuChange} />
+      <mui.DropDownIcon icon="chevron-down" menuItems={iconMenuItems} onChange={this._onDropDownMenuChange} />,
+      { type: "separator"},
+      <mui.PaperButton type={PaperButton.Types.RAISED} label="Create Broadcast" primary={true} />,
+    ],
+
+    leftItems = [
+      <mui.DropDownMenu menuItems={filterOptions} />,
     ];
 
     groups = [