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.

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

Demo: Publish via full screen modal #17225

Draft
wants to merge 12 commits into
base: master
from

Clean up styling and class names in post publish modal

  • Loading branch information...
brentswisher committed Aug 23, 2019
commit 6da6edfcbf4b9a5345f9660209d49f758b113e33
@@ -101,7 +101,7 @@ export class PostPublishModal extends Component {
<div className="editor-post-publish-modal__content" { ...propsForModal }>
{ isPrePublish && (
isSaving ?
<div className="editor-post-publish-modal-pending">
<div className="editor-post-publish-modal__publishing-animation">
<Spinner />
</div> :
<>
@@ -113,16 +113,15 @@ export class PostPublishModal extends Component {
checked={ isPublishSidebarEnabled }
onChange={ onTogglePublishSidebar }
/>
<div className="editor-post-publish-modal__content-publish-controls">
<div className="editor-post-publish-modal__prepublish-controls">
<Button
isLink
className="editor-post-publish-modal__content-cancel-button"
className="editor-post-publish-modal__prepublish-cancel-button"
onClick={ onClose }
>
{ __( 'Cancel' ) }
</Button>
<PostPublishButton isLarge className="editor-post-publish-modal__content-cancel-button" focusOnMount={ true } onSubmit={ this.onSubmit } forceIsDirty={ forceIsDirty } forceIsSaving={ forceIsSaving } />
<span className="editor-post-publish-modal__spacer"></span>
<PostPublishButton isLarge className="editor-post-publish-modal__content-publish-button" focusOnMount={ true } onSubmit={ this.onSubmit } forceIsDirty={ forceIsDirty } forceIsSaving={ forceIsSaving } />
</div>
</>
) }
@@ -62,19 +62,19 @@ class PostPublishModalPostpublish extends Component {
const viewPostLabel = get( postType, [ 'labels', 'view_item' ] );

return (
<div className="post-publish-modal__postpublish">
<p className="post-publish-modal__postpublish-post-text">
<div className="editor-editor-post-publish-modal__prepublish">
<p className="editor-post-publish-modal__postpublish-post-text">
{
sprintf(
/* translators: %s: post type singular name */
__( 'Great Work! You\'ve just published your first %s. You can review it here to check for any mistakes, or start on a new %s.' ), postLabel.toLowerCase(), postLabel.toLowerCase()
)
}
</p>
<div className="post-publish-modal__postpublish-post-address">
<div className="editor-post-publish-modal__postpublish-post-address">
<TextControl
disabled
className="post-publish-modal__postpublish-post-url"
className="editor-post-publish-modal__postpublish-post-url"
label={
sprintf(
/* translators: %s: post type singular name */
@@ -86,15 +86,15 @@ class PostPublishModalPostpublish extends Component {
<ClipboardButton
isDefault
isLarge
className="post-publish-modal__postpublish-post-copy"
className="editor-post-publish-modal__postpublish-post-copy"
text={ post.link }
onCopy={ this.onCopy }
>
{ this.state.showCopyConfirmation ? __( 'Copied!' ) : __( 'Copy Link' ) }
</ClipboardButton>
</div>
{ ! isScheduled && (
<div className="editor-post-publish-modal__content-publish-controls">
<div className="editor-post-publish-modal__postpublish-controls">
<Button
href={ post.link }
isPrimary
@@ -3,6 +3,7 @@
width: 35vw;
}

/* Override default modal styles */
.editor-post-publish-modal .components-modal__header {
border-bottom: none;
margin-bottom: 12px;
@@ -44,30 +45,40 @@
clear: both;
}

.editor-post-publish-modal-pending {
/* Pre-publish Modal Styles */
.editor-post-publish-modal__prepublish-controls {
text-align: right;
padding: 24px 0 0;
}

.editor-post-publish-modal__prepublish-controls .editor-post-publish-modal__prepublish-cancel-button,
.editor-post-publish-modal__prepublish-controls .editor-post-publish-modal__prepublish-publish-button {
padding: 0 24px 2px;
}

/* Publishing Modal Styles */
.editor-post-publish-modal__publishing-animation {
display: flex;
justify-content: center;
}

.post-publish-modal__postpublish-post-address {
/* Post Publish Modal Styles */
.editor-post-publish-modal__postpublish-post-address {
display: flex;
align-items: flex-end;
padding: 12px 0;
}
.post-publish-modal__postpublish-post-url {

.editor-post-publish-modal__postpublish-post-url {
flex: auto;
padding-right: 8px;
}
.post-publish-modal__postpublish-post-copy {

.editor-post-publish-modal__postpublish-post-copy {
margin-bottom: 9px;
}

.editor-post-publish-modal__content-publish-controls {
.editor-post-publish-modal__postpublish-controls {
text-align: right;
padding: 24px 0 0;
}

.editor-post-publish-modal__content-publish-controls button.is-link,
.editor-post-publish-modal__content-publish-controls button.is-large {
padding: 0 24px 2px;
}
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.