Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Editor: Mobile editor redesign #4456

Closed
wants to merge 17 commits into from
Closed

Editor: Mobile editor redesign #4456

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
cbba98c
Refactored EditorSidebarHeader component to be a React class component.
DanReyLop Mar 30, 2016
d6ca0ab
Remove mobile-specific code from the EditorSidebarHeader component
DanReyLop Mar 30, 2016
c3c2917
Extracted the desktop sidebar to its own component
DanReyLop Mar 30, 2016
93f5ab4
First approach to the new metadata/editor panels on mobile
DanReyLop Mar 31, 2016
1aebe7f
Implemented the switch between editor and metadata
DanReyLop Mar 31, 2016
2435867
Extracted the primary editor button (publish/update) to its own compo…
DanReyLop Mar 31, 2016
357afff
Re-applied changes lost in the rebase with master
DanReyLop Apr 3, 2016
d738c4d
Fixed tests, moved the relevant GroundControl tests to the EditorPubl…
DanReyLop Apr 4, 2016
f71bffa
Moved the primary button to the navigation bar, only in mobile
DanReyLop Apr 5, 2016
6136f6c
Added the proper styles to the mobile navigation bar
DanReyLop Apr 5, 2016
05f0c35
Improved the Date picker button in mobile so it shows the selected date
DanReyLop Apr 5, 2016
ddd5885
Implemented the changes requested in the comments of #4456
DanReyLop Apr 9, 2016
10cf63c
Fixed white background below the post drawer on mobile
DanReyLop Apr 11, 2016
72f10e0
Fixed opening and closing preview leaving the tabs in an inconsistent…
DanReyLop Apr 12, 2016
3a72d0e
Renamed canSchedulePost function to canPublishPost to make it more clear
DanReyLop Apr 20, 2016
ae7c1a8
Removed the state in the EditorMobileNavigation component, make it re…
DanReyLop Apr 20, 2016
ea7ba8d
Make the publish button always blue (primary), even in mobile
DanReyLop Apr 20, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion client/components/button/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ button {
}

// Primary buttons
.button.is-primary {
@mixin button-is-primary {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We shouldn't make a mixin out of this. What is the purpose? To switch a button style based on viewport? That seems like something we should do programatically like:

viewport.isMobile() ? <Button> : <Button primary>

Switching the CSS seems very fragile.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this redesign, all the changes between mobile and desktop are made using CSS media queries, so the UI can change accordingly even if the user resizes the window (very uncommon, but probably will be more common with the side-by-side app mode in tablets). This particular mixin is not pretty, but it would be worse changing only this one thing on JS code.

background: $blue-medium;
border-color: $blue-wordpress;
color: $white;
Expand All @@ -123,6 +123,10 @@ button {
}
}

.button.is-primary {
@include button-is-primary;
}

// Scary buttons
.button.is-scary {
color: $alert-red;
Expand Down
120 changes: 24 additions & 96 deletions client/post-editor/editor-ground-control/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const Card = require( 'components/card' ),
PostListFetcher = require( 'components/post-list-fetcher' ),
stats = require( 'lib/posts/stats' );
import { setDate } from 'state/ui/editor/post/actions';
import EditorPublishButton from 'post-editor/editor-publish-button';

const EditorGroundControl = React.createClass( {
displayName: 'EditorGroundControl',
Expand All @@ -33,9 +34,9 @@ const EditorGroundControl = React.createClass( {
isSaveBlocked: React.PropTypes.bool,
isPublishing: React.PropTypes.bool,
isSaving: React.PropTypes.bool,
onClose: React.PropTypes.func,
onPreview: React.PropTypes.func,
onPublish: React.PropTypes.func,
onSave: React.PropTypes.func,
onSaveDraft: React.PropTypes.func,
post: React.PropTypes.object,
setDate: React.PropTypes.func,
Expand All @@ -53,12 +54,11 @@ const EditorGroundControl = React.createClass( {
isSaveBlocked: false,
isPublishing: false,
isSaving: false,
onClose: noop,
onPublish: noop,
onSaveDraft: noop,
post: null,
savedPost: null,
setDate: () => {},
setDate: noop,
site: {}
};
},
Expand Down Expand Up @@ -94,65 +94,6 @@ const EditorGroundControl = React.createClass( {
return this.translate( 'Preview' );
},

trackPrimaryButton: function() {
const postEvents = {
update: 'Clicked Update Post Button',
schedule: 'Clicked Schedule Post Button',
requestReview: 'Clicked Request-Review 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',
};
const buttonState = this.getPrimaryButtonState();
const eventString = postUtils.isPage( this.props.post ) ? pageEvents[ buttonState ] : postEvents[ buttonState ];
stats.recordEvent( eventString );
stats.recordEvent( 'Clicked Primary Button' );
},

getPrimaryButtonState: function() {
if (
postUtils.isPublished( this.props.savedPost ) &&
! postUtils.isBackDatedPublished( this.props.savedPost ) &&
! postUtils.isFutureDated( this.props.post ) ||
(
this.props.savedPost &&
this.props.savedPost.status === 'future' &&
postUtils.isFutureDated( this.props.post )
)
) {
return 'update';
}

if ( postUtils.isFutureDated( this.props.post ) ) {
return 'schedule';
}

if ( siteUtils.userCan( 'publish_posts', this.props.site ) ) {
return 'publish';
}

if ( this.props.savedPost && this.props.savedPost.status === 'pending' ) {
return 'update';
}

return 'requestReview';
},

getPrimaryButtonLabel: function() {
const primaryButtonState = this.getPrimaryButtonState();
const buttonLabels = {
update: this.translate( 'Update' ),
schedule: this.translate( 'Schedule' ),
publish: this.translate( 'Publish' ),
requestReview: this.translate( 'Submit for Review' ),
};
return buttonLabels[ primaryButtonState ];
},

toggleSchedulePopover: function() {
this.setState( { showSchedulePopover: ! this.state.showSchedulePopover } );
},
Expand Down Expand Up @@ -251,36 +192,14 @@ const EditorGroundControl = React.createClass( {
! this.props.isSaveBlocked;
},

isPrimaryButtonEnabled: function() {
return ! this.props.isPublishing &&
! this.props.isSaveBlocked &&
this.props.hasContent;
canPublishPost: function() {
return siteUtils.userCan( 'publish_posts', this.props.site );
},

toggleAdvancedStatus: function() {
this.setState( { showAdvanceStatus: ! this.state.showAdvanceStatus } );
},

onPrimaryButtonClick: function() {
this.trackPrimaryButton();

if ( postUtils.isFutureDated( this.props.post ) ) {
return this.props.onSave( 'future' );
}

if ( postUtils.isPublished( this.props.savedPost ) &&
! postUtils.isBackDatedPublished( this.props.savedPost )
) {
return this.props.onSave();
}

if ( siteUtils.userCan( 'publish_posts', this.props.site ) ) {
return this.props.onPublish();
}

return this.props.onSave( 'pending' );
},

onSaveButtonClick: function() {
this.props.onSave();
const eventLabel = postUtils.isPage( this.props.page ) ? 'Clicked Save Page Button' : 'Clicked Save Post Button';
Expand Down Expand Up @@ -373,18 +292,21 @@ const EditorGroundControl = React.createClass( {
{ this.getPreviewLabel() }
</button>
<div className="editor-ground-control__publish-combo">
<button
className="editor-ground-control__publish-button button is-primary"
onClick={ this.onPrimaryButtonClick }
disabled={ ! this.isPrimaryButtonEnabled() }
<EditorPublishButton
site={ this.props.site }
post={ this.props.post }
savedPost={ this.props.savedPost }
onSave={ this.props.onSave }
onPublish={ this.props.onPublish }
tabIndex={ 5 }
>
{ this.getPrimaryButtonLabel() }
</button>
{ siteUtils.userCan( 'publish_posts', this.props.site ) &&
isPublishing={ this.props.isPublishing }
isSaveBlocked={ this.props.isSaveBlocked }
hasContent={ this.props.hasContent }
/>
{ this.canPublishPost() &&
<button
ref="schedulePost"
className="editor-ground-control__time-button button is-primary"
className="editor-ground-control__time-button button"
onClick={ this.toggleSchedulePopover }
onMouseEnter={ this.showDateTooltip }
onMouseLeave={ this.hideDateTooltip }
Expand All @@ -396,11 +318,17 @@ const EditorGroundControl = React.createClass( {
? <Gridicon icon="scheduled" size={ 18 } />
: <Gridicon icon="calendar" size={ 18 } />
}
<span className="editor-ground-control__time-button__label">
{ postUtils.isFutureDated( this.props.post )
? this.moment( this.props.post.date ).calendar()
: this.translate( 'Choose Date' )
}
</span>
</button>
}
{ this.renderDateTooltip() }
</div>
{ siteUtils.userCan( 'publish_posts', this.props.site ) &&
{ this.canPublishPost() &&
this.schedulePostPopover()
}
</div>
Expand Down
29 changes: 25 additions & 4 deletions client/post-editor/editor-ground-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,36 @@
margin: 0 4px 8px;
}

.editor-ground-control__publish-button {
.editor-ground-control .editor-publish-button {
border-radius: 4px 0 0 4px;
flex-grow: 1;

@include breakpoint( "<660px" ) {
display: none;
}
}

.editor-ground-control__time-button {
border-radius: 0 4px 4px 0;
@include breakpoint( ">660px" ) {
@include button-is-primary;

border-radius: 0 4px 4px 0;
padding-left: 8px;
padding-right: 8px;
margin-left: -1px;
}

@include breakpoint( "<660px" ) {
width: 100%;
}
}

.editor-ground-control__time-button__label {
padding-left: 8px;
padding-right: 8px;
margin-left: -1px;

@include breakpoint( ">660px" ) {
display: none;
}
}

.editor-ground-control__save.button.is-link,
Expand Down
Loading