Implemented the changes requested in the comments of #4456

Automattic · Jun 18, 2016 · 3c43fb5 · 3c43fb5
1 parent f656cae
commit 3c43fb5
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 56 deletions.
diff --git a/client/components/button/style.scss b/client/components/button/style.scss
@@ -102,7 +102,7 @@ button {
 }
 
 // Primary buttons
-@mixin is-primary {
+@mixin button-is-primary {
 	background: $blue-medium;
 	border-color: $blue-wordpress;
 	color: $white;
@@ -124,7 +124,7 @@ button {
 }
 
 .button.is-primary {
-	@include is-primary;
+	@include button-is-primary;
 }
 
 // Scary buttons

diff --git a/client/post-editor/editor-ground-control/index.jsx b/client/post-editor/editor-ground-control/index.jsx
@@ -34,6 +34,7 @@ export default React.createClass( {
 		isSaving: React.PropTypes.bool,
 		onPreview: React.PropTypes.func,
 		onPublish: React.PropTypes.func,
+		onSave: React.PropTypes.func,
 		onSaveDraft: React.PropTypes.func,
 		post: React.PropTypes.object,
 		savedPost: React.PropTypes.object,
@@ -287,8 +288,15 @@ export default React.createClass( {
 					</button>
 					<div className="editor-ground-control__publish-combo">
 						<EditorPublishButton
-							{ ...this.props }
+							site={ this.props.site }
+							post={ this.props.post }
+							savedPost={ this.props.savedPost }
+							onSave={ this.props.onSave }
+							onPublish={ this.props.onPublish }
 							tabIndex={ 5 }
+							isPublishing={ this.props.isPublishing }
+							isSaveBlocked={ this.props.isSaveBlocked }
+							hasContent={ this.props.hasContent }
 						/>
 						{ this.canSchedulePost() &&
 							<button
@@ -308,7 +316,7 @@ export default React.createClass( {
 								<span className="editor-ground-control__time-button__label">
 									{ postUtils.isFutureDated( this.props.post )
 										? this.moment( this.props.post.date ).calendar()
-										: this.translate( 'Choose date' )
+										: this.translate( 'Choose Date' )
 									}
 								</span>
 							</button>

diff --git a/client/post-editor/editor-ground-control/style.scss b/client/post-editor/editor-ground-control/style.scss
@@ -51,7 +51,7 @@
 
 .editor-ground-control__time-button {
 	@include breakpoint( ">660px" ) {
-		@include is-primary;
+		@include button-is-primary;
 
 		border-radius: 0 4px 4px 0;
 		padding-left: 8px;

diff --git a/client/post-editor/editor-mobile-navigation/index.jsx b/client/post-editor/editor-mobile-navigation/index.jsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import React, { PropTypes } from 'react';
-import PureRenderMixin from 'react-pure-render/mixin';
 import classnames from 'classnames';
 
 /**
@@ -11,6 +10,7 @@ import classnames from 'classnames';
 import Gridicon from 'components/gridicon';
 import layoutFocus from 'lib/layout-focus';
 import EditorPublishButton from 'post-editor/editor-publish-button';
+import Button from 'components/button';
 
 export default React.createClass( {
 	displayName: 'EditorMobileNavigation',
@@ -19,17 +19,15 @@ export default React.createClass( {
 		site: PropTypes.object,
 		post: PropTypes.object,
 		savedPost: PropTypes.object,
-		onSave: PropTypes.function,
-		onPublish: PropTypes.function,
+		onSave: PropTypes.func,
+		onPublish: PropTypes.func,
 		tabIndex: PropTypes.number,
 		isPublishing: PropTypes.bool,
 		isSaveBlocked: PropTypes.bool,
 		hasContent: PropTypes.bool,
-		onClose: PropTypes.function
+		onClose: PropTypes.func
 	},
 
-	mixins: [ PureRenderMixin ],
-
 	getInitialState: function() {
 		return {
 			sidebarOpen: false
@@ -58,24 +56,38 @@ export default React.createClass( {
 		return (
 			<div className="editor-mobile-navigation">
 				<div className="editor-mobile-navigation__actions">
-					<Gridicon
-						icon="chevron-left"
-						onClick={ this.props.onClose }
-						className="editor-mobile-navigation__icon separator-right" />
-					<Gridicon
-						icon="pencil"
-						onClick={ this.closeSidebar }
-						className={ classnames( 'editor-mobile-navigation__icon', {
-							'is-selected': ! this.state.sidebarOpen
-						} ) } />
-					<Gridicon
-						icon="cog"
-						onClick={ this.openSidebar }
-						className={ classnames( 'editor-mobile-navigation__icon', 'separator-right', {
-							'is-selected': this.state.sidebarOpen
-						} ) } />
+					<Button borderless onClick={ this.props.onClose }>
+						<Gridicon
+							icon="chevron-left"
+							className="editor-mobile-navigation__icon" />
+					</Button>
+					<div className="editor-mobile-navigation__tabs">
+						<Button borderless onClick={ this.closeSidebar }>
+							<Gridicon
+								icon="pencil"
+								className={ classnames( 'editor-mobile-navigation__icon', {
+									'is-selected': ! this.state.sidebarOpen
+								} ) } />
+						</Button>
+						<Button borderless onClick={ this.openSidebar }>
+							<Gridicon
+								icon="cog"
+								className={ classnames( 'editor-mobile-navigation__icon', {
+									'is-selected': this.state.sidebarOpen
+								} ) } />
+						</Button>
+					</div>
 				</div>
-				<EditorPublishButton { ...this.props } />
+				<EditorPublishButton
+					site={ this.props.site }
+					post={ this.props.post }
+					savedPost={ this.props.savedPost }
+					onSave={ this.props.onSave }
+					onPublish={ this.props.onPublish }
+					isPublishing={ this.props.isPublishing }
+					isSaveBlocked={ this.props.isSaveBlocked }
+					hasContent={ this.props.hasContent }
+				/>
 			</div>
 		);
 	}

diff --git a/client/post-editor/editor-mobile-navigation/style.scss b/client/post-editor/editor-mobile-navigation/style.scss
@@ -1,5 +1,4 @@
 .editor-mobile-navigation {
-	color: $gray;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -16,21 +15,24 @@
 	line-height: 0;
 }
 
+.editor-mobile-navigation__tabs {
+	display: inline-block;
+	border-left: 1px lighten( $gray, 20% ) solid;
+	border-right: 1px lighten( $gray, 20% ) solid;
+}
+
 .editor-mobile-navigation__icon {
 	cursor: pointer;
-	padding: 15px;
+	padding: 4px 12px;
+	color: lighten( $gray, 10% );
 
 	&:hover {
-		fill: $gray-dark;
+		color: $gray-dark;
 	}
 
 	&.is-selected {
 		cursor: default;
-		fill: $gray-dark;
-	}
-
-	&.separator-right {
-		border-right: 1px lighten( $gray, 20% ) solid;
+		color: $gray-dark;
 	}
 }
 

diff --git a/client/post-editor/editor-publish-button/index.jsx b/client/post-editor/editor-publish-button/index.jsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import React, { PropTypes } from 'react';
-import PureRenderMixin from 'react-pure-render/mixin';
 
 /**
  * Internal dependencies
@@ -17,28 +16,26 @@ export const EditorPublishButton = React.createClass( {
 		site: PropTypes.object,
 		post: PropTypes.object,
 		savedPost: PropTypes.object,
-		onSave: PropTypes.function,
-		onPublish: PropTypes.function,
+		onSave: PropTypes.func,
+		onPublish: PropTypes.func,
 		tabIndex: PropTypes.number,
 		isPublishing: PropTypes.bool,
 		isSaveBlocked: PropTypes.bool,
 		hasContent: PropTypes.bool
 	},
 
-	mixins: [ PureRenderMixin ],
-
 	trackClick: function() {
 		const postEvents = {
 			update: 'Clicked Update Post Button',
 			schedule: 'Clicked Schedule Post Button',
 			requestReview: 'Clicked Request-Review Post Button',
-			publish: 'Clicked Publish Post Button',
+			publish: 'Clicked Publish Post Button'
 		};
 		const pageEvents = {
 			update: 'Clicked Update Page Button',
 			schedule: 'Clicked Schedule Page Button',
 			requestReview: 'Clicked Request-Review Page Button',
-			publish: 'Clicked Publish Page Button',
+			publish: 'Clicked Publish Page Button'
 		};
 		const buttonState = this.getButtonState();
 		const eventString = postUtils.isPage( this.props.post ) ? pageEvents[ buttonState ] : postEvents[ buttonState ];
@@ -76,13 +73,16 @@ export const EditorPublishButton = React.createClass( {
 	},
 
 	getButtonLabel: function() {
-		const buttonLabels = {
-			update: this.props.translate( 'Update' ),
-			schedule: this.props.translate( 'Schedule' ),
-			publish: this.props.translate( 'Publish' ),
-			requestReview: this.props.translate( 'Submit for Review' )
-		};
-		return buttonLabels[ this.getButtonState() ];
+		switch ( this.getButtonState() ) {
+			case 'update':
+				return this.props.translate( 'Update' );
+			case 'schedule':
+				return this.props.translate( 'Schedule' );
+			case 'publish':
+				return this.props.translate( 'Publish' );
+			case 'requestReview':
+				return this.props.translate( 'Submit for Review' );
+		}
 	},
 
 	onClick: function() {

diff --git a/client/post-editor/editor-sidebar/index.jsx b/client/post-editor/editor-sidebar/index.jsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import React, { PropTypes } from 'react';
-import PureRenderMixin from 'react-pure-render/mixin';
 
 /**
  * Internal dependencies
@@ -15,11 +14,9 @@ import EditorSidebarHeader from './header';
 export default React.createClass( {
 	displayName: 'EditorSidebar',
 
-	mixins: [ PureRenderMixin ],
-
 	propTypes: {
 		allPostsUrl: PropTypes.string,
-		sites: PropTypes.array,
+		sites: PropTypes.object,
 		onTitleClick: PropTypes.func,
 		savedPost: PropTypes.object,
 		post: PropTypes.object,
@@ -52,8 +49,30 @@ export default React.createClass( {
 						selectedId={ this.props.post ? this.props.post.ID : null }
 					/>
 					: <div>
-					<EditorGroundControl { ...this.props } />
-					<EditorDrawer { ...this.props } />
+					<EditorGroundControl
+						hasContent={ this.props.hasContent }
+						isDirty={ this.props.isDirty }
+						isSaveBlocked={ this.props.isSaveBlocked }
+						isPublishing={ this.props.isPublishing }
+						isSaving={ this.props.isSaving }
+						onPreview={ this.props.onPreview }
+						onPublish={ this.props.onPublish }
+						onSave={ this.props.onSave }
+						onSaveDraft={ this.props.onSaveDraft }
+						post={ this.props.post }
+						setDate={ this.props.setDate }
+						savedPost={ this.props.savedPost }
+						site={ this.props.site }
+						type={ this.props.type }
+					/>
+					<EditorDrawer
+						site={ this.props.site }
+						post={ this.props.post }
+						postTypes={ this.props.postTypes }
+						isNew={ this.props.isNew }
+						setExcerpt={ this.props.setExcerpt }
+						type={ this.props.type }
+					/>
 				</div> }
 			</div>
 		);