Merge pull request #11536 from Automattic/try/edito-chrome-update

Editor: updating layout and design

assets/stylesheets/_components.scss

@@ -387,7 +387,6 @@
 @import 'my-sites/upgrades/domain-management/style';
 @import 'my-sites/upgrades/domain-management/components/icann-verification/style';
 @import 'post-editor/style';
-@import 'post-editor/drafts-button/style';
 @import 'post-editor/edit-post-status/style';
 @import 'post-editor/editor-action-bar/style';
 @import 'post-editor/editor-author/style';
@@ -402,7 +401,6 @@
 @import 'post-editor/editor-ground-control/style';
 @import 'post-editor/editor-html-toolbar/style';
 @import 'post-editor/editor-location/style';
-@import 'post-editor/editor-mobile-navigation/style';
 @import 'post-editor/editor-notice/style';
 @import 'post-editor/editor-more-options/style';
 @import 'post-editor/editor-notice/style';

assets/stylesheets/shared/functions/_z-index.scss

@@ -101,6 +101,7 @@ $z-layers: (
 		'.main': 20, //TODO: this doesn't always have a stacking context
 		//'tinymce-toolbar': 20, client/components/tinymce/index.jsx
 		'.search': 22,
+		'.editor-ground-control': 22,
 		'.reader-mobile-sidebar': 23,
 		'.community-translator': 99,
 		'.author-selector__popover.popover': 100,

assets/stylesheets/shared/mixins/_clear-fix.scss

@@ -7,6 +7,7 @@
 		content: ".";
 		display: block;
 		height: 0;
+		width: 0;
 		clear: both;
 		visibility: hidden;
 	}

client/blocks/author-selector/index.jsx

@@ -94,6 +94,7 @@ const SwitcherShell = React.createClass( {
 					ignoreContext={ this.props.ignoreContext } >
 					{ ( this.props.fetchOptions.search || users.length > 10 ) &&
 						<Search
+							compact
 							onSearch={ this._onSearch }
 							placeholder={ this.translate( 'Find Author…', { context: 'search label' } ) }
 							delaySearch={ true }

client/blocks/author-selector/style.scss

@@ -40,6 +40,10 @@
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
+
+	.user__name {
+		font-size: 13px;
+	}
 }
 
 .author-selector__popover.popover {
@@ -51,16 +55,10 @@
 		border-top: 0px;
 		border-bottom: 1px solid lighten( $gray, 30 );
 		border-radius: 5px;
-		// .search should be cleaned up to not force height
-		height: 43px;
 		margin-bottom: 0;
 
-	&.is-open {
-		width: 200px;
-	}
-
-		.search__input[type="search"] {
-			font-size: 14px;
+		&.is-open {
+			width: 200px;
 		}
 
 		& + .author-selector__infinite-list {

client/blocks/site/index.jsx

@@ -33,7 +33,9 @@ export default React.createClass( {
 			isSelected: false,
 
 			homeLink: false,
-			showHomeIcon: true // if homeLink is enabled
+			// if homeLink is enabled
+			showHomeIcon: true,
+			compact: false
 		};
 	},
 
@@ -48,7 +50,8 @@ export default React.createClass( {
 		isHighlighted: React.PropTypes.bool,
 		site: React.PropTypes.object,
 		homeLink: React.PropTypes.bool,
-		showHomeIcon: React.PropTypes.bool
+		showHomeIcon: React.PropTypes.bool,
+		compact: React.PropTypes.bool
 	},
 
 	onSelect( event ) {
@@ -78,7 +81,8 @@ export default React.createClass( {
 			'is-private': site.is_private,
 			'is-redirect': site.options && site.options.is_redirect,
 			'is-selected': this.props.isSelected,
-			'is-highlighted': this.props.isHighlighted
+			'is-highlighted': this.props.isHighlighted,
+			'is-compact': this.props.compact,
 		} );
 
 		return (
@@ -103,7 +107,7 @@ export default React.createClass( {
 						} )
 					}
 				>
-					<SiteIcon site={ site } />
+					<SiteIcon site={ site } size={ this.props.compact ? 24 : null } />
 					<div className="site__info">
 						<div className="site__title">
 							{ /* eslint-disable wpcalypso/jsx-gridicon-size */ }

client/blocks/site/style.scss

@@ -35,6 +35,30 @@
 		}
 
 	}
+
+	&.is-compact {
+		.site__content {
+			padding: 0 16px;
+		}
+
+		.site__domain {
+			display: none;
+		}
+
+		.site__title {
+			line-height: 46px;
+		}
+
+		.site__home {
+			top: 11px;
+			line-height: 18px;
+		}
+
+		.site__home .gridicon {
+			margin-top: 0;
+		}
+
+	}
 }
 
 // Wraps the anchor element
@@ -114,6 +138,11 @@
 		vertical-align: middle;
 	}
 
+	.site.is-compact & {
+		width: 24px;
+		height: 24px;
+	}
+
 	&:hover {
 		color: $white;
 	}

client/blocks/term-tree-selector/index.jsx

@@ -21,6 +21,7 @@ export default React.createClass( {
 		analyticsPrefix: PropTypes.string,
 		taxonomy: PropTypes.string,
 		height: PropTypes.number,
+		compact: PropTypes.bool,
 	},
 
 	getDefaultProps() {
@@ -54,7 +55,7 @@ export default React.createClass( {
 	},
 
 	render() {
-		const { className, taxonomy, onChange, selected, createLink, multiple, height } = this.props;
+		const { className, taxonomy, onChange, selected, createLink, multiple, height, compact } = this.props;
 
 		const classes = classNames( className );
 		const { search } = this.state;
@@ -74,6 +75,7 @@ export default React.createClass( {
 					createLink={ createLink }
 					multiple={ multiple }
 					height={ height }
+					compact={ compact }
 				/>
 			</div>
 		);

client/blocks/term-tree-selector/style.scss

@@ -5,7 +5,7 @@
 	background-color: $white;
 	border: 1px solid lighten( $gray, 20% );
 
-	&.is-compact {
+	&.is-small {
 		background-color: transparent;
 		border: none;
 	}
@@ -52,14 +52,18 @@ input[type=checkbox].term-tree-selector__input {
 }
 
 .term-tree-selector__nested-list {
-	margin-left: 1em;
+	margin-left: 24px;
 }
 
 .term-tree-selector__list-item {
 	position: relative;
-	padding: 2px 8px;
+	padding: 4px 8px;
 	font-size: 13px;
 
+	.term-tree-selector.is-compact.is-small & {
+		padding-left: 0;
+	}
+
 	&.is-empty {
 		padding-top: 4px;
 	}
@@ -77,7 +81,7 @@ input[type=checkbox].term-tree-selector__input {
 	margin-top: 2px;
 
 	.term-tree-selector.is-compact & {
-		font-size: 14px;
+		font-size: 12px;
 		margin-top: 0;
 	}
 

client/blocks/term-tree-selector/terms.jsx

@@ -128,9 +128,9 @@ const TermTreeSelectorList = React.createClass( {
 
 		this.list.recomputeRowHeights();
 
-		// Compact mode passes the height of the scrollable region as a derived
+		// Small mode passes the height of the scrollable region as a derived
 		// number, and will not be updated unless our component re-renders
-		if ( this.isCompact() ) {
+		if ( this.isSmall() ) {
 			this.forceUpdate();
 		}
 	},
@@ -202,7 +202,7 @@ const TermTreeSelectorList = React.createClass( {
 		}
 	},
 
-	isCompact() {
+	isSmall() {
 		if ( ! this.props.terms || this.state.searchTerm ) {
 			return false;
 		}
@@ -400,15 +400,16 @@ const TermTreeSelectorList = React.createClass( {
 
 	render() {
 		const rowCount = this.getRowCount();
-		const isCompact = this.isCompact();
+		const isSmall = this.isSmall();
 		const searchLength = this.state.searchTerm.length;
-		const showSearch = ( searchLength > 0 || ! isCompact ) &&
+		const showSearch = ( searchLength > 0 || ! isSmall ) &&
 			( this.props.terms || ( ! this.props.terms && searchLength > 0 ) );
 		const { className, isError, loading, siteId, taxonomy, query, height } = this.props;
 		const classes = classNames( 'term-tree-selector', className, {
 			'is-loading': loading,
-			'is-compact': isCompact,
-			'is-error': isError
+			'is-small': isSmall,
+			'is-error': isError,
+			'is-compact': this.props.compact,
 		} );
 
 		return (
@@ -428,7 +429,7 @@ const TermTreeSelectorList = React.createClass( {
 				<List
 					ref={ this.setListRef }
 					width={ this.getResultsWidth() }
-					height={ isCompact ? this.getCompactContainerHeight() : height }
+					height={ isSmall ? this.getCompactContainerHeight() : height }
 					onRowsRendered={ this.setRequestedPages }
 					rowCount={ rowCount }
 					estimatedRowSize={ ITEM_HEIGHT }

client/components/accordion/index.jsx

@@ -4,6 +4,7 @@
 import React, { Component, PropTypes } from 'react';
 import { noop } from 'lodash';
 import classNames from 'classnames';
+import Gridicon from 'gridicons';
 
 /**
  * Internal dependencies
@@ -55,6 +56,7 @@ export default class Accordion extends Component {
 						{ icon && <span className="accordion__icon">{ icon }</span> }
 						<span className="accordion__title">{ title }</span>
 						{ subtitle && <span className="accordion__subtitle">{ subtitle }</span> }
+						<span className="accordion__arrow"><Gridicon icon="dropdown" /></span>
 					</button>
 					{ status && <AccordionStatus { ...status } /> }
 				</header>

client/components/accordion/style.scss

@@ -1,7 +1,7 @@
 $accordion-padding: 16px;
 $accordion-subtitle-height: 16px;
-$accordion-background-collapsed: $gray-light; // same as body
-$accordion-background-hover: lighten( $gray, 30% );
+$accordion-background-collapsed: $white; // same as body
+$accordion-background-hover: $white;
 $accordion-background-expanded: $white;
 
 .accordion {
@@ -30,13 +30,16 @@ $accordion-background-expanded: $white;
 		background-color: $accordion-background-hover;
 	}
 
-	&::after {
-		@include noticon( '\f431', 22px );
+	.accordion__arrow {
 		position: absolute;
 			top: 50%;
-			right: $accordion-padding;
+			right: ( $accordion-padding - 4px );
 		transform: translateY( -50% );
-		color: lighten( $gray, 10% );
+		color: darken( $gray, 10% );
+		height: 24px;
+		.gridicon {
+			transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease-in;
+		}
 	}
 
 	.accordion.has-subtitle & {
@@ -46,14 +49,14 @@ $accordion-background-expanded: $white;
 }
 
 .accordion.is-expanded {
-	box-shadow: 0 0 0 1px lighten( $gray, 20% );
 
 	.accordion__toggle {
 		background-color: $accordion-background-expanded;
-		box-shadow: 0 0 0 1px lighten( $gray, 20% );
 
-		&::after {
-			content: '\f432';
+		.accordion__arrow {
+			.gridicon {
+				transform: rotate( 180deg );
+			}
 		}
 	}
 
@@ -78,6 +81,9 @@ $accordion-background-expanded: $white;
 .accordion__title,
 .accordion__subtitle {
 	display: block;
+	font-size: 13px;
+	font-weight: 500;
+	line-height: $accordion-subtitle-height;
 
 	.accordion.has-icon & {
 		padding-left: 28px;
@@ -89,9 +95,9 @@ $accordion-background-expanded: $white;
 }
 
 .accordion__subtitle {
-	font-size: 0.8em;
-	font-style: italic;
-	color: $gray-dark;
+	font-size: 11px;
+	color: $gray-text-min;
+	font-weight: 400;
 	white-space: nowrap;
 	overflow: hidden;
 	position: relative;
@@ -127,7 +133,7 @@ $accordion-background-expanded: $white;
 }
 
 .accordion__content-wrap {
-	padding: $accordion-padding;
+	padding: 0 $accordion-padding $accordion-padding $accordion-padding;
 }
 
 .accordion__section {