In progress: heavy refactoring, part 1.

Masterbar structure was very complicated, both on React and on CSS side. This refactoring will clear up both the issues. And introduce Gridicons.
Automattic · Dec 8, 2015 · ffbdec0 · ffbdec0
1 parent ce76469
commit ffbdec0
Show file tree

Hide file tree

Showing 3 changed files with 259 additions and 8 deletions.
diff --git a/assets/stylesheets/layout/_masterbar.scss b/assets/stylesheets/layout/_masterbar.scss
@@ -2,6 +2,142 @@ $masterbar-height: 46px;
 $autobar-height: 20px;
 
 // The WordPress.com Masterbar
+.masterbar {
+	background: $blue-wordpress;
+	border-bottom: 1px solid darken( $blue-wordpress, 4% );
+	color: $white;
+	font-size: 16px;
+	display: flex;
+	height: $masterbar-height;
+	margin: 0;
+	position: absolute;
+		left: 0;
+		top: 0;
+	width: 100%;
+	z-index: 180;
+	-webkit-font-smoothing: subpixel-antialiased;
+
+	@include breakpoint( ">660px" ) {
+		position: fixed;
+		backface-visibility: hidden;
+	}
+}
+
+.masterbar__item {
+	flex: 0 1 auto;
+	display: flex;
+		align-items: center;
+	position: relative;
+	color: $white;
+	font-size: 14px;
+	height: $masterbar-height;
+	line-height: $masterbar-height;
+	padding: 0 15px;
+	cursor: pointer;
+	text-decoration: none;
+	transition: all 150ms ease-in;
+
+	.masterbar__item-content {
+		color: $white;
+		padding: 0 6px;
+	}
+
+	&:hover,
+	&:focus {
+		background: $blue-medium;
+		background: rgba( 255, 255, 255, 0.15 );
+		color: $white;
+		outline: 0;
+	}
+
+	&.is-active {
+		background: $blue-dark;
+	}
+
+	@include breakpoint( "<480px" ) {
+		flex: 1 1 auto;
+
+		.gridicon {
+			margin: 0 auto;
+		}
+
+		.masterbar__item-content {
+			display: none;
+		}
+	}
+}
+
+.masterbar__item-logo {
+	font-size: 17px;
+	font-weight: 300;
+
+	.tld {
+		color: rgba(255, 255, 255, 0.6);
+	}
+}
+
+.masterbar__item-new {
+	background: $white;
+	border-radius: 3px;
+	color: $blue-wordpress;
+	height: 36px;
+	margin: 5px;
+
+
+	.masterbar__item-content {
+		display: none;
+	}
+
+	&:hover,
+	&:focus {
+		background: $gray-light;
+		color: $blue-wordpress;
+	}
+
+	@include breakpoint( ">480px" ) {
+		margin-left: auto;
+	}
+}
+
+.masterbar__item-me {
+	.gravatar {
+		position: absolute;
+    left: 16px;
+    top: 12px;
+
+		border: 2px solid $white;
+	}
+
+	.masterbar__item-content {
+		padding: 0;
+	}
+
+	.masterbar__item-me-label {
+		display: none;
+	}
+}
+
+.masterbar__item-notifications {
+
+	.masterbar__item-content {
+		display: none;
+	}
+}
+
+
+
+/****************************************************************************************************/
+/****************************************************************************************************/
+/****************************************************************************************************/
+/****************************************************************************************************/
+/****************************************************************************************************/
+/****************************************************************************************************/
+/****************************************************************************************************/
+/****************************************************************************************************/
+/****************************************************************************************************/
+
+
+.off {
 .masterbar {
 	background: $blue-wordpress;
 	border-bottom: 1px solid darken( $blue-wordpress, 4% );
@@ -333,3 +469,4 @@ $autobar-height: 20px;
 		padding-left: 0;
 	}
 }
+}
diff --git a/client/layout/masterbar-item.jsx b/client/layout/masterbar-item.jsx
@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import classNames from 'classnames';
+import noop from 'lodash/utility/noop';
+
+/**
+ * Internal dependencies
+ */
+import Gridicon from 'components/gridicon';
+
+import MasterbarLoggedOutMenu from './masterbar-logged-out-menu';
+import MasterbarSectionsMenu from './masterbar-sections-menu';
+import Notifications from 'notifications';
+import store from 'store';
+
+export default React.createClass( {
+	displayName: 'MasterbarItem',
+
+	propTypes: {
+		url: React.PropTypes.string,
+		onClick: React.PropTypes.func,
+		tooltip: React.PropTypes.string,
+		icon: React.PropTypes.string,
+		className: React.PropTypes.string,
+		isActive: React.PropTypes.bool
+	},
+
+	getDefaultProps: function() {
+		return {
+			icon: '',
+			onClick: noop
+		};
+	},
+
+	render() {
+		var itemClasses = classNames( 'masterbar__item', this.props.className, {
+			'is-active': this.props.isActive,
+		} );
+
+		return (
+			<a href={ this.props.url } onClick={ this.props.onClick } title={ this.props.tooltip } className={ itemClasses }>
+				{ !! this.props.icon &&
+					<Gridicon icon={ this.props.icon } size={ 24 } />
+				}
+				<span className="masterbar__item-content">{
+						this.props.children
+				}</span>
+			</a>
+		);
+	}
+} );
diff --git a/client/layout/masterbar.jsx b/client/layout/masterbar.jsx
@@ -7,6 +7,12 @@ import classNames from 'classnames';
 /**
  * Internal dependencies
  */
+import MasterbarItem from './masterbar-item';
+import Gravatar from 'components/gravatar';
+import layoutFocus from 'lib/layout-focus';
+import config from 'config';
+import paths from 'lib/paths';
+
 import MasterbarLoggedOutMenu from './masterbar-logged-out-menu';
 import MasterbarSectionsMenu from './masterbar-sections-menu';
 import Notifications from 'notifications';
@@ -37,6 +43,23 @@ export default React.createClass( {
 		};
 	},
 
+	clickMySites() {
+		layoutFocus.setNext( 'sidebar' );
+	},
+
+	clickReader() {
+		layoutFocus.setNext( 'content' );
+	},
+
+	checkIsActive( section ) {
+		return !! ( section === this.props.section && ! this.props.showNotes );
+	},
+
+	getNewPostPath() {
+		var currentSite = this.props.sites.getSelectedSite() || this.props.user.get().primarySiteSlug;
+		return paths.newPost( currentSite );
+	},
+
 	getNotificationLinkDomNode() {
 		return this.refs.masterbar.refs.notificationLink.getDOMNode();
 	},
@@ -110,6 +133,15 @@ export default React.createClass( {
 		} );
 	},
 
+	wordpressIcon() {
+		// WP icon replacement for "horizon" environment
+		if ( config( 'hostname' ) === 'horizon.wordpress.com' ) {
+			return 'my-sites-horizon';
+		}
+
+		return 'my-sites';
+	},
+
 	renderMenu() {
 		if ( this.props.user ) {
 			return (
@@ -147,13 +179,42 @@ export default React.createClass( {
 
 		masterbarClass = classNames( masterbarClassObject );
 
-		return (
-			<header id="header" className={ masterbarClass }>
-				<div className="masterbar__navigation" role="navigation">
-					{ this.renderMenu() }
-				</div>
-				{ this.renderNotifications() }
-			</header>
-		);
+		if ( this.props.user ) { // Logged in
+			return (
+				<header id="header" className={ masterbarClass }>
+					<MasterbarItem url="/stats" icon={ this.wordpressIcon() } onClick={ this.clickMySites } isActive={ this.checkIsActive( 'sites' ) }>
+						{ this.props.user.get().visible_site_count > 1
+							? this.translate( 'My Sites', { comment: 'Toolbar, must be shorter than ~12 chars' } )
+							: this.translate( 'My Site', { comment: 'Toolbar, must be shorter than ~12 chars' } )
+						}
+					</MasterbarItem>
+					<MasterbarItem url="/" icon="reader" onClick={ this.clickReader } isActive={ this.checkIsActive( 'reader' ) }>
+						{ this.translate( 'Reader', { comment: 'Toolbar, must be shorter than ~12 chars' } ) }
+					</MasterbarItem>
+
+					<MasterbarItem url={ this.getNewPostPath() } icon="create" isActive={ this.checkIsActive( 'post' ) } className="masterbar__item-new">
+						{ this.translate( 'New Post' ) }
+					</MasterbarItem>
+					<MasterbarItem url="/me" icon="user-circle" isActive={ this.checkIsActive( 'me' ) } className="masterbar__item-me">
+						<Gravatar user={ this.props.user.get() } alt="Me" size={ 18 } />
+						<span className="masterbar__item-me-label">{ this.translate( 'Me', { context: 'Toolbar, must be shorter than ~12 chars' } ) }</span>
+					</MasterbarItem>
+					<MasterbarItem url="/notifications" icon="bell" isActive={ this.checkIsActive( 'notifications' ) } className="masterbar__item-notifications">
+						{ this.translate( 'Notifications', { comment: 'Toolbar, must be shorter than ~12 chars' } ) }
+					</MasterbarItem>
+
+					{ this.renderNotifications() }
+				</header>
+			);
+
+		} else { // Logged out
+			return (
+				<header id="header" className={ masterbarClass }>
+					<MasterbarItem url="/" icon="my-sites" className="masterbar__item-logo">
+						WordPress<span className="tld">.com</span>
+					</MasterbarItem>
+				</header>
+			);
+		}
 	}
 } );