Make WordPress Core

Changeset 26271


Ignore:
Timestamp:
11/19/2013 06:02:14 PM (10 years ago)
Author:
azaozz
Message:

Widgets: move the chooser inside the selected widget so it inherits the width, add some keyboard shortcuts: tab to select, enter to append and escape to cancel. Props shaunandrews, see #25821

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

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/wp-admin.css

    r26259 r26271  
    1019110191#available-widgets .widget .widget-description {
    1019210192    display: block;
    10193 padding: 10px 16px;
    10194 font-size: 12px;
     10193    padding: 10px 16px;
     10194    font-size: 12px;
    1019510195}
    1019610196
     
    1049610496
    1049710497
    10498 /* Widgets Area Chooser merge */
     10498/* Widgets Area Chooser */
    1049910499.widget-liquid-left #widgets-left.chooser #available-widgets .widget,
    1050010500.widget-liquid-left #widgets-left.chooser .inactive-sidebar {
    10501     transition: opacity 0.2s ease-in-out;
     10501    transition: opacity 0.1s linear;
    1050210502}
    1050310503
     
    1052410524    clear: both;
    1052510525    display: none;
    10526     margin: auto;
    10527     padding-bottom: 10px;
    1052810526    max-width: 400px;
    1052910527}
    1053010528
    1053110529#widgets-chooser h3 {
    10532     font-size: 14px;
    10533     margin: 15px 0;
     10530    font-size: 12px;
     10531    padding: 15px 0 12px 35px;
     10532    margin: 0;
     10533    border-top: 1px solid #ccc;
     10534    background: rgba(0,0,0,0.6);
     10535    color: #fff;
    1053410536}
    1053510537
    1053610538#widgets-chooser ul.widgets-chooser-sidebars {
    10537     margin: 0 0 20px 0;
     10539    margin: 0;
    1053810540    list-style-type: none;
    10539 }
    10540 
    10541 #widgets-chooser ul.widgets-chooser-sidebars li {
     10541    max-height: 300px;
     10542    overflow: auto;
     10543}
     10544
     10545#widgets-chooser li {
    1054210546    padding: 10px 15px 10px 35px;
    1054310547    background: #fff;
    10544     border: 1px solid #ccc;
    10545     border-bottom: none;
     10548    border-bottom: 1px solid #ccc;
    1054610549    margin: 0;
    1054710550    cursor: pointer;
    10548 }
    10549 
    10550 #widgets-chooser ul.widgets-chooser-sidebars li:hover {
     10551    outline: none;
     10552    position: relative;
     10553    transition: background: 0.2s ease-in-out;
     10554}
     10555
     10556#widgets-chooser li:hover,
     10557#widgets-chooser li:focus {
    1055110558    background: rgba(255,255,255,0.7);
    1055210559}
    1055310560
    10554 #widgets-chooser ul.widgets-chooser-sidebars li.widgets-chooser-selected {
    10555     background: #1075a0;
    10556     color: #fff;
    10557     position: relative;
    10558 }
    10559 
    10560 #widgets-chooser ul.widgets-chooser-sidebars li.widgets-chooser-selected:before {
     10561#widgets-chooser li:focus:before {
    1056110562    content: '\f147';
    1056210563    display: block;
    1056310564    -webkit-font-smoothing: antialiased;
    1056410565    font: normal 26px/1 'dashicons';
     10566    color: #999;
    1056510567    position: absolute;
    1056610568    top: 7px;
     
    1056810570}
    1056910571
    10570 #widgets-chooser ul.widgets-chooser-sidebars li:last-child {
    10571     border-bottom: 1px solid #ccc;
     10572#widgets-chooser li.widgets-chooser-selected {
     10573    background: #1075a0;
     10574    color: #fff;
     10575}
     10576
     10577#widgets-chooser li.widgets-chooser-selected:before,
     10578#widgets-chooser li.widgets-chooser-selected:focus:before {
     10579    content: '\f147';
     10580    display: block;
     10581    -webkit-font-smoothing: antialiased;
     10582    font: normal 26px/1 'dashicons';
     10583    color: #fff;
     10584    position: absolute;
     10585    top: 7px;
     10586    left: 5px;
    1057210587}
    1057310588
    1057410589#widgets-chooser .widgets-chooser-actions {
    10575     clear: both;
     10590    padding: 10px 0 12px 0;
    1057610591    text-align: center;
    1057710592}
  • trunk/src/wp-admin/js/widgets.js

    r26140 r26271  
    205205                widget.addClass( 'widget-in-question' );
    206206
    207                 widget.after( chooser );
    208                 chooser.slideDown( 200, function() {
     207                widget.find( '.widget-description' ).after( chooser );
     208                chooser.slideDown( 300, function() {
    209209                    selectSidebar.find('.widgets-chooser-selected').focus();
    210210                });
     211
     212                selectSidebar.find( 'li' ).on( 'focusin.widgets-chooser', function() {
     213                    selectSidebar.find('.widgets-chooser-selected').removeClass( 'widgets-chooser-selected' );
     214                    $(this).addClass( 'widgets-chooser-selected' );
     215                } )
    211216            }
    212217        });
     
    221226            } else if ( $target.hasClass('button-secondary') ) {
    222227                self.closeChooser();
    223             } else if ( $target.is('.widgets-chooser-sidebars li') ) {
    224                 chooser.find('.widgets-chooser-selected').removeClass( 'widgets-chooser-selected' );
    225                 $target.addClass( 'widgets-chooser-selected' );
     228            }
     229        }).on( 'keyup.widgets-chooser', function( event ) {
     230            if ( event.which === $.ui.keyCode.ENTER ) {
     231                if ( $( event.target ).hasClass('button-secondary') ) {
     232                    // Close instead of adding when pressing Enter on the Cancel button
     233                    self.closeChooser();
     234                } else {
     235                    self.addWidget( chooser );
     236                    self.closeChooser();
     237                }
     238            } else if ( event.which === $.ui.keyCode.ESCAPE ) {
     239                self.closeChooser();
    226240            }
    227241        });
     
    338352
    339353    addWidget: function( chooser ) {
    340         var widget = $('#available-widgets').find('.widget-in-question').clone(),
    341             widgetId = widget.attr('id'),
    342             add = widget.find( 'input.add_new' ).val(),
    343             n = widget.find( 'input.multi_number' ).val(),
     354        var widget, widgetId, add, n,
    344355            sidebarId = chooser.find( '.widgets-chooser-selected' ).data('sidebarId'),
    345356            sidebar = $( '#' + sidebarId );
     357
     358        // Move the chooser out of the widget
     359        $('#wpbody-content').append( chooser );
     360
     361        widget = $('#available-widgets').find('.widget-in-question').clone();
     362        widgetId = widget.attr('id');
     363        add = widget.find( 'input.add_new' ).val();
     364        n = widget.find( 'input.multi_number' ).val();
    346365
    347366        if ( 'multi' === add ) {
     
    392411    clearWidgetSelection: function() {
    393412        $( '#widgets-left' ).removeClass( 'chooser' );
    394         $( '#available-widgets' ).find( '.widget-in-question' ).removeClass( 'widget-in-question' );
     413        $( '.widget-in-question' ).removeClass( 'widget-in-question' );
    395414    }
    396415};
  • trunk/src/wp-admin/widgets.php

    r26054 r26271  
    408408
    409409<div id="widgets-chooser">
    410     <h3><?php _e( 'Choose an area to place this widget&hellip;' ); ?></h3>
     410    <h3><?php _e( 'Choose a sidebar:' ); ?></h3>
    411411    <ul class="widgets-chooser-sidebars"></ul>
    412412    <div class="widgets-chooser-actions">
     413        <button class="button-secondary"><?php _e( 'Cancel' ); ?></button>
    413414        <button class="button-primary"><?php _e( 'Add Widget' ); ?></button>
    414         <button class="button-secondary"><?php _e( 'Cancel' ); ?></button>
    415415    </div>
    416416</div>
Note: See TracChangeset for help on using the changeset viewer.