WordPress.org
Get WordPress

Make WordPress Core

Changeset 32920


Ignore:
Timestamp:
06/24/2015 02:45:38 AM (8 years ago)
Author:
azaozz
Message:

Press This: convert the Preview | Save | Publish buttons to a split button.
See #32757.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/press-this.css

    r32704 r32920  
    391391}
    392392
     393.split-button {
     394    position: relative;
     395    display: inline-block;
     396}
     397
     398.split-button-body {
     399    display: none;
     400    position: absolute;
     401    bottom: 37px;
     402    right: 0;
     403    border: 1px solid #ccc;
     404    background-color: #fff;
     405    min-width: 160px;
     406    max-width: 100%;
     407    padding: 5px;
     408    -webkit-border-radius: 3px;
     409    border-radius: 3px;
     410    -webkit-box-shadow: 1px 0 4px rgba( 0, 0, 0, 0.15 );
     411    box-shadow: 1px 0 4px rgba( 0, 0, 0, 0.15 );
     412}
     413
     414.split-button-body:before,
     415.split-button-body:after {
     416    position: absolute;
     417    right: 12px;
     418    display: block;
     419    width: 0;
     420    height: 0;
     421    border-style: solid;
     422    border-color: transparent;
     423    content: '';
     424}
     425
     426.split-button-body:before {
     427    bottom: -18px;
     428    border-top-color: #a0a5aa;
     429    border-width: 9px;
     430    right: 11px;
     431}
     432
     433.split-button-body:after {
     434    bottom: -16px;
     435    border-top-color: #fff;
     436    border-width: 8px;
     437}
     438
     439.split-button-body .split-button-option {
     440    display: block;
     441    padding: 4px 10px;
     442    margin: 0;
     443    width: 100%;
     444    text-align: left;
     445}
     446
     447.is-open .split-button-body {
     448    display: block;
     449}
     450
     451.split-button-primary,
     452.split-button-toggle {
     453    -webkit-border-radius: 0;
     454    border-radius: 0;
     455    display: block;
     456    margin: 0;
     457    font-size: 13px;
     458    text-decoration: none;
     459    white-space: nowrap;
     460    cursor: pointer;
     461    -webkit-appearance: none;
     462    line-height: 2;
     463    padding: 0 10px 1px;
     464    background: #00a0d2;
     465    border-color: #0073aa;
     466    border-width: 1px;
     467    border-style: solid;
     468    -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5), 0 1px 0 rgba( 0, 0, 0, 0.15 );
     469    box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 );
     470    color: #fff;
     471}
     472
     473.split-button-primary {
     474    -webkit-border-top-left-radius: 3px;
     475    border-top-left-radius: 3px;
     476    -webkit-border-bottom-left-radius: 3px;
     477    border-bottom-left-radius: 3px;
     478    border-right: 0 none;
     479    float: left;
     480}
     481
     482.split-button-toggle {
     483    padding: 0;
     484    -webkit-border-top-right-radius: 3px;
     485    border-top-right-radius: 3px;
     486    -webkit-border-bottom-right-radius: 3px;
     487    border-bottom-right-radius: 3px;
     488    border-left: 0 none;
     489    float: right;
     490}
     491
     492.split-button-toggle i {
     493    margin: 4px 20px 3px 0;
     494    padding: 0 10px;
     495    border-left: 1px solid #fff;
     496}
     497
     498.split-button-primary:hover,
     499.split-button-toggle:hover {
     500    outline: none;
     501    background: #0091cd;
     502    border-color: #0073aa;
     503    -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
     504    box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
     505}
     506
     507.split-button-primary:focus,
     508.split-button-toggle:focus {
     509    outline: none;
     510    border-color: #0e3950;
     511    -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
     512        0 0 0 1px #5b9dd9,
     513        0 0 2px 1px rgba(30, 140, 190, .8);
     514    box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
     515        0 0 0 1px #5b9dd9,
     516        0 0 2px 1px rgba(30, 140, 190, .8);
     517}
     518
     519.split-button-primary:active,
     520.split-button-toggle:active {
     521    background: #0073aa;
     522    border-color: #005082;
     523    color: rgba( 255, 255, 255, 0.95 );
     524    -webkit-box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
     525    box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
     526}
    393527
    394528/**
    … …  
    17541888}
    17551889
    1756 .draft-button.is-hidden,
    1757 .draft-button .saving-draft,
    1758 .draft-button.is-saving .save-draft {
    1759     display: none;
    1760 }
    1761 
    1762 .draft-button.is-saving .saving-draft {
    1763     display: inline;
    1764 }
    1765 
    17661890/* TinyMCE styles */
    17671891.editor .wp-media-buttons {

  • trunk/src/wp-admin/includes/class-wp-press-this.php

    r32901 r32920  
    14501450        <div class="post-actions">
    14511451            <span class="spinner">&nbsp;</span>
    1452             <button type="button" class="button-subtle draft-button" aria-live="polite">
    1453                 <span class="save-draft"><?php _e( 'Save Draft' ); ?></span>
    1454                 <span class="saving-draft"><?php _e( 'Saving...' ); ?></span>
    1455             </button>
    1456             <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>
    1457             <button type="button" class="button-subtle preview-button"><?php _e( 'Preview' ); ?></button>
    1458             <button type="button" class="button-primary publish-button"><?php echo ( current_user_can( 'publish_posts' ) ) ? __( 'Publish' ) : __( 'Submit for Review' ); ?></button>
     1452            <div class="split-button">
     1453                <div class="split-button-body">
     1454                    <button type="button" class="button-subtle draft-button split-button-option" aria-live="polite"><?php _e( 'Save Draft' ); ?></button>
     1455                    <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>
     1456                    <button type="button" class="button-subtle preview-button split-button-option"><?php _e( 'Preview' ); ?></button>
     1457                </div>
     1458                <div class="split-button-head">
     1459                    <button type="button" class="publish-button split-button-primary"><?php
     1460                        echo ( current_user_can( 'publish_posts' ) ) ? __( 'Publish' ) : __( 'Submit for Review' );
     1461                    ?></button><button type="button" class="split-button-toggle" aria-haspopup="true" aria-expanded="false">
     1462                        <i class="dashicons dashicons-arrow-down-alt2"></i>
     1463                        <span class="screen-reader-text"><?php _e('Toggle dropdown'); ?></span>
     1464                    </button>
     1465                </div>
     1466            </div>
    14591467        </div>
    14601468    </div>

  • trunk/src/wp-admin/js/press-this.js

    r32106 r32920  
    77        var editor, $mediaList, $mediaThumbWrap,
    88            saveAlert             = false,
    9             editLinkVisible       = false,
    109            textarea              = document.createElement( 'textarea' ),
    1110            sidebarIsOpen         = false,
    … …  
    164163         */
    165164        function submitPost( action ) {
    166             var data,
    167                 keepFocus = $( document.activeElement ).hasClass( 'draft-button' );
     165            var data;
    168166
    169167            saveAlert = false;
    … …  
    185183                clearNotices();
    186184            }).done( function( response ) {
    187                 var $link, $button;
    188 
    189185                if ( ! response.success ) {
    190186                    renderError( response.data.errorMessage );
    … …  
    200196                    }
    201197                } else if ( response.data.postSaved ) {
    202                     $link = $( '.edit-post-link' );
    203                     $button = $( '.draft-button' );
    204                     editLinkVisible = true;
    205 
    206                     $button.fadeOut( 200, function() {
    207                         $button.removeClass( 'is-saving' );
    208                         $link.fadeIn( 200, function() {
    209                             var active = document.activeElement;
    210                             // Different browsers move the focus to different places when the button is disabled.
    211                             if ( keepFocus && ( active === $button[0] || $( active ).hasClass( 'post-actions' ) || active.nodeName === 'BODY' ) ) {
    212                                 $link.focus();
    213                             }
    214                         });
    215                     });
     198                    // consider showing "Saved" message
    216199                }
    217200            }).fail( function() {
    218201                renderError( __( 'serverError' ) );
    219202            });
    220         }
    221 
    222         function resetDraftButton() {
    223             if ( editLinkVisible ) {
    224                 editLinkVisible = false;
    225 
    226                 $( '.edit-post-link' ).fadeOut( 200, function() {
    227                     $( '.draft-button' ).removeClass( 'is-saving' ).fadeIn( 200 );
    228                 });
    229             }
    230203        }
    231204
    … …  
    551524            $titleField.on( 'focus', function() {
    552525                $placeholder.addClass( 'is-hidden' );
    553                 resetDraftButton();
    554526            }).on( 'blur', function() {
    555527                if ( ! $titleField.text() && ! $titleField.html() ) {
    … …  
    627599        }
    628600
     601        function splitButtonClose() {
     602            $( '.split-button' ).removeClass( 'is-open' );
     603            $( '.split-button-toggle' ).attr( 'aria-expanded', 'false' );
     604        }
     605
    629606        /* ***************************************************************
    630607         * PROCESSING FUNCTIONS
    … …  
    649626         */
    650627        function monitor() {
     628            var $splitButton = $( '.split-button' );
     629
    651630            $( document ).on( 'tinymce-editor-init', function( event, ed ) {
    652631                editor = ed;
    … …  
    654633                editor.on( 'nodechange', function() {
    655634                    hasSetFocus = true;
    656                     resetDraftButton();
    657                 } );
     635                });
     636
     637                editor.on( 'focus', function() {
     638                    splitButtonClose();
     639                });
    658640            }).on( 'click.press-this keypress.press-this', '.suggested-media-thumbnail', function( event ) {
    659641                if ( event.type === 'click' || event.keyCode === 13 ) {
    660642                    insertSelectedMedia( $( this ) );
     643                }
     644            }).on( 'click.press-this', function( event ) {
     645                if ( ! $( event.target ).closest( 'button' ).hasClass( 'split-button-toggle' ) ) {
     646                    splitButtonClose();
    661647                }
    662648            });
    … …  
    669655                if ( $button.length ) {
    670656                    if ( $button.hasClass( 'draft-button' ) ) {
    671                         $button.addClass( 'is-saving' );
    672657                        submitPost( 'draft' );
    673658                    } else if ( $button.hasClass( 'publish-button' ) ) {
    … …  
    680665                        $( '#pressthis-form' ).attr( 'target', '_blank' ).submit().attr( 'target', '' );
    681666                        $( '#wp-preview' ).val( '' );
     667                    } else if ( $button.hasClass( 'split-button-toggle' ) ) {
     668                        if ( $splitButton.hasClass( 'is-open' ) ) {
     669                            $splitButton.removeClass( 'is-open' );
     670                            $button.attr( 'aria-expanded', 'false' );
     671                        } else {
     672                            $splitButton.addClass( 'is-open' );
     673                            $button.attr( 'aria-expanded', 'true' );
     674                        }
    682675                    }
    683676                } else if ( $target.hasClass( 'edit-post-link' ) && window.opener ) {
Note: See TracChangeset for help on using the changeset viewer.