diff --git a/src/wp-admin/css/press-this.css b/src/wp-admin/css/press-this.css index 9cd44bb2e8..e6b2940c10 100644 --- a/src/wp-admin/css/press-this.css +++ b/src/wp-admin/css/press-this.css @@ -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; diff --git a/src/wp-admin/includes/class-wp-press-this.php b/src/wp-admin/includes/class-wp-press-this.php index 232fbb47e6..6dc72dfd39 100644 --- a/src/wp-admin/includes/class-wp-press-this.php +++ b/src/wp-admin/includes/class-wp-press-this.php @@ -1449,13 +1449,21 @@ class WP_Press_This {
- - - - +
+
+ + + +
+
+ +
+
diff --git a/src/wp-admin/js/press-this.js b/src/wp-admin/js/press-this.js index b8f28c98a2..c42e8f40f5 100644 --- a/src/wp-admin/js/press-this.js +++ b/src/wp-admin/js/press-this.js @@ -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();