Press This: convert the Preview | Save | Publish buttons to a split button.
See #32757. git-svn-id: https://develop.svn.wordpress.org/trunk@32920 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Ozz
parent
447550ec7b
commit
9911a1cbe6
|
|
@ -390,6 +390,140 @@ strong {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.split-button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.split-button-body {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 37px;
|
||||
right: 0;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #fff;
|
||||
min-width: 160px;
|
||||
max-width: 100%;
|
||||
padding: 5px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: 1px 0 4px rgba( 0, 0, 0, 0.15 );
|
||||
box-shadow: 1px 0 4px rgba( 0, 0, 0, 0.15 );
|
||||
}
|
||||
|
||||
.split-button-body:before,
|
||||
.split-button-body:after {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.split-button-body:before {
|
||||
bottom: -18px;
|
||||
border-top-color: #a0a5aa;
|
||||
border-width: 9px;
|
||||
right: 11px;
|
||||
}
|
||||
|
||||
.split-button-body:after {
|
||||
bottom: -16px;
|
||||
border-top-color: #fff;
|
||||
border-width: 8px;
|
||||
}
|
||||
|
||||
.split-button-body .split-button-option {
|
||||
display: block;
|
||||
padding: 4px 10px;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.is-open .split-button-body {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.split-button-primary,
|
||||
.split-button-toggle {
|
||||
-webkit-border-radius: 0;
|
||||
border-radius: 0;
|
||||
display: block;
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
line-height: 2;
|
||||
padding: 0 10px 1px;
|
||||
background: #00a0d2;
|
||||
border-color: #0073aa;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5), 0 1px 0 rgba( 0, 0, 0, 0.15 );
|
||||
box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 );
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.split-button-primary {
|
||||
-webkit-border-top-left-radius: 3px;
|
||||
border-top-left-radius: 3px;
|
||||
-webkit-border-bottom-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-right: 0 none;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.split-button-toggle {
|
||||
padding: 0;
|
||||
-webkit-border-top-right-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
-webkit-border-bottom-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-left: 0 none;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.split-button-toggle i {
|
||||
margin: 4px 20px 3px 0;
|
||||
padding: 0 10px;
|
||||
border-left: 1px solid #fff;
|
||||
}
|
||||
|
||||
.split-button-primary:hover,
|
||||
.split-button-toggle:hover {
|
||||
outline: none;
|
||||
background: #0091cd;
|
||||
border-color: #0073aa;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
|
||||
box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
|
||||
}
|
||||
|
||||
.split-button-primary:focus,
|
||||
.split-button-toggle:focus {
|
||||
outline: none;
|
||||
border-color: #0e3950;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
}
|
||||
|
||||
.split-button-primary:active,
|
||||
.split-button-toggle:active {
|
||||
background: #0073aa;
|
||||
border-color: #005082;
|
||||
color: rgba( 255, 255, 255, 0.95 );
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
|
||||
box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
|
||||
}
|
||||
|
||||
/**
|
||||
* Forms
|
||||
|
|
@ -1753,16 +1887,6 @@ html {
|
|||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.draft-button.is-hidden,
|
||||
.draft-button .saving-draft,
|
||||
.draft-button.is-saving .save-draft {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.draft-button.is-saving .saving-draft {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* TinyMCE styles */
|
||||
.editor .wp-media-buttons {
|
||||
float: none;
|
||||
|
|
|
|||
|
|
@ -1449,13 +1449,21 @@ class WP_Press_This {
|
|||
</div>
|
||||
<div class="post-actions">
|
||||
<span class="spinner"> </span>
|
||||
<button type="button" class="button-subtle draft-button" aria-live="polite">
|
||||
<span class="save-draft"><?php _e( 'Save Draft' ); ?></span>
|
||||
<span class="saving-draft"><?php _e( 'Saving...' ); ?></span>
|
||||
</button>
|
||||
<a href="<?php echo esc_url( get_edit_post_link( $post_ID ) ); ?>" class="edit-post-link" style="display: none;" target="_blank"><?php _e( 'Standard Editor' ); ?></a>
|
||||
<button type="button" class="button-subtle preview-button"><?php _e( 'Preview' ); ?></button>
|
||||
<button type="button" class="button-primary publish-button"><?php echo ( current_user_can( 'publish_posts' ) ) ? __( 'Publish' ) : __( 'Submit for Review' ); ?></button>
|
||||
<div class="split-button">
|
||||
<div class="split-button-body">
|
||||
<button type="button" class="button-subtle draft-button split-button-option" aria-live="polite"><?php _e( 'Save Draft' ); ?></button>
|
||||
<a href="<?php echo esc_url( get_edit_post_link( $post_ID ) ); ?>" class="edit-post-link split-button-option" target="_blank"><?php _e( 'Standard Editor' ); ?></a>
|
||||
<button type="button" class="button-subtle preview-button split-button-option"><?php _e( 'Preview' ); ?></button>
|
||||
</div>
|
||||
<div class="split-button-head">
|
||||
<button type="button" class="publish-button split-button-primary"><?php
|
||||
echo ( current_user_can( 'publish_posts' ) ) ? __( 'Publish' ) : __( 'Submit for Review' );
|
||||
?></button><button type="button" class="split-button-toggle" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="dashicons dashicons-arrow-down-alt2"></i>
|
||||
<span class="screen-reader-text"><?php _e('Toggle dropdown'); ?></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
var PressThis = function() {
|
||||
var editor, $mediaList, $mediaThumbWrap,
|
||||
saveAlert = false,
|
||||
editLinkVisible = false,
|
||||
textarea = document.createElement( 'textarea' ),
|
||||
sidebarIsOpen = false,
|
||||
settings = window.wpPressThisConfig || {},
|
||||
|
|
@ -163,8 +162,7 @@
|
|||
* @param action string publish|draft
|
||||
*/
|
||||
function submitPost( action ) {
|
||||
var data,
|
||||
keepFocus = $( document.activeElement ).hasClass( 'draft-button' );
|
||||
var data;
|
||||
|
||||
saveAlert = false;
|
||||
showSpinner();
|
||||
|
|
@ -184,8 +182,6 @@
|
|||
hideSpinner();
|
||||
clearNotices();
|
||||
}).done( function( response ) {
|
||||
var $link, $button;
|
||||
|
||||
if ( ! response.success ) {
|
||||
renderError( response.data.errorMessage );
|
||||
} else if ( response.data.redirect ) {
|
||||
|
|
@ -199,36 +195,13 @@
|
|||
window.location.href = response.data.redirect;
|
||||
}
|
||||
} else if ( response.data.postSaved ) {
|
||||
$link = $( '.edit-post-link' );
|
||||
$button = $( '.draft-button' );
|
||||
editLinkVisible = true;
|
||||
|
||||
$button.fadeOut( 200, function() {
|
||||
$button.removeClass( 'is-saving' );
|
||||
$link.fadeIn( 200, function() {
|
||||
var active = document.activeElement;
|
||||
// Different browsers move the focus to different places when the button is disabled.
|
||||
if ( keepFocus && ( active === $button[0] || $( active ).hasClass( 'post-actions' ) || active.nodeName === 'BODY' ) ) {
|
||||
$link.focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
// consider showing "Saved" message
|
||||
}
|
||||
}).fail( function() {
|
||||
renderError( __( 'serverError' ) );
|
||||
});
|
||||
}
|
||||
|
||||
function resetDraftButton() {
|
||||
if ( editLinkVisible ) {
|
||||
editLinkVisible = false;
|
||||
|
||||
$( '.edit-post-link' ).fadeOut( 200, function() {
|
||||
$( '.draft-button' ).removeClass( 'is-saving' ).fadeIn( 200 );
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Inserts the media a user has selected from the presented list inside the editor, as an image or embed, based on type
|
||||
*
|
||||
|
|
@ -550,7 +523,6 @@
|
|||
|
||||
$titleField.on( 'focus', function() {
|
||||
$placeholder.addClass( 'is-hidden' );
|
||||
resetDraftButton();
|
||||
}).on( 'blur', function() {
|
||||
if ( ! $titleField.text() && ! $titleField.html() ) {
|
||||
$placeholder.removeClass( 'is-hidden' );
|
||||
|
|
@ -626,6 +598,11 @@
|
|||
});
|
||||
}
|
||||
|
||||
function splitButtonClose() {
|
||||
$( '.split-button' ).removeClass( 'is-open' );
|
||||
$( '.split-button-toggle' ).attr( 'aria-expanded', 'false' );
|
||||
}
|
||||
|
||||
/* ***************************************************************
|
||||
* PROCESSING FUNCTIONS
|
||||
*************************************************************** */
|
||||
|
|
@ -648,17 +625,26 @@
|
|||
* Set app events and other state monitoring related code.
|
||||
*/
|
||||
function monitor() {
|
||||
var $splitButton = $( '.split-button' );
|
||||
|
||||
$( document ).on( 'tinymce-editor-init', function( event, ed ) {
|
||||
editor = ed;
|
||||
|
||||
editor.on( 'nodechange', function() {
|
||||
hasSetFocus = true;
|
||||
resetDraftButton();
|
||||
} );
|
||||
});
|
||||
|
||||
editor.on( 'focus', function() {
|
||||
splitButtonClose();
|
||||
});
|
||||
}).on( 'click.press-this keypress.press-this', '.suggested-media-thumbnail', function( event ) {
|
||||
if ( event.type === 'click' || event.keyCode === 13 ) {
|
||||
insertSelectedMedia( $( this ) );
|
||||
}
|
||||
}).on( 'click.press-this', function( event ) {
|
||||
if ( ! $( event.target ).closest( 'button' ).hasClass( 'split-button-toggle' ) ) {
|
||||
splitButtonClose();
|
||||
}
|
||||
});
|
||||
|
||||
// Publish, Draft and Preview buttons
|
||||
|
|
@ -668,7 +654,6 @@
|
|||
|
||||
if ( $button.length ) {
|
||||
if ( $button.hasClass( 'draft-button' ) ) {
|
||||
$button.addClass( 'is-saving' );
|
||||
submitPost( 'draft' );
|
||||
} else if ( $button.hasClass( 'publish-button' ) ) {
|
||||
submitPost( 'publish' );
|
||||
|
|
@ -679,6 +664,14 @@
|
|||
$( '#wp-preview' ).val( 'dopreview' );
|
||||
$( '#pressthis-form' ).attr( 'target', '_blank' ).submit().attr( 'target', '' );
|
||||
$( '#wp-preview' ).val( '' );
|
||||
} else if ( $button.hasClass( 'split-button-toggle' ) ) {
|
||||
if ( $splitButton.hasClass( 'is-open' ) ) {
|
||||
$splitButton.removeClass( 'is-open' );
|
||||
$button.attr( 'aria-expanded', 'false' );
|
||||
} else {
|
||||
$splitButton.addClass( 'is-open' );
|
||||
$button.attr( 'aria-expanded', 'true' );
|
||||
}
|
||||
}
|
||||
} else if ( $target.hasClass( 'edit-post-link' ) && window.opener ) {
|
||||
window.opener.focus();
|
||||
|
|
|
|||
Loading…
Reference in New Issue