WordPress.org

Make WordPress Core

Ticket #25821: 25821.5.patch

File 25821.5.patch, 5.2 KB (added by shaunandrews, 7 years ago)

This patch moves the widget-chooser inside the selected .widget, which helps with context and prevents the weird-ness when widgets wrap below. This also adds the ability to hit the enter key to add a widget to the selected widget area, and use the tab key to choose an area from the list.

  • src/wp-admin/css/wp-admin.css

     
    1021810218
    1021910219#available-widgets .widget .widget-description {
    1022010220        display: block;
    10221 padding: 10px 16px;
    10222 font-size: 12px;
     10221        padding: 10px 16px;
     10222        font-size: 12px;
    1022310223}
    1022410224
    1022510225/* Inactive Sidebars */
     
    1052410524}
    1052510525
    1052610526
    10527 /* Widgets Area Chooser merge */
     10527/* Widgets Area Chooser */
    1052810528.widget-liquid-left #widgets-left.chooser #available-widgets .widget,
    1052910529.widget-liquid-left #widgets-left.chooser .inactive-sidebar {
    10530         transition: opacity 0.2s ease-in-out;
     10530        transition: opacity 0.1s linear;
    1053110531}
    1053210532
    1053310533.widget-liquid-left #widgets-left.chooser #available-widgets .widget,
     
    1055210552#widgets-chooser {
    1055310553        clear: both;
    1055410554        display: none;
    10555         margin: auto;
    10556         padding-bottom: 10px;
    1055710555        max-width: 400px;
    1055810556}
    1055910557
    1056010558#widgets-chooser h3 {
    10561         font-size: 14px;
    10562         margin: 15px 0;
     10559        font-size: 12px;
     10560        padding: 15px 0 12px 35px;
     10561        margin: 0;
     10562        border-top: 1px solid #ccc;
     10563        background: rgba(0,0,0,0.6);
     10564        color: #fff;
    1056310565}
    1056410566
    1056510567#widgets-chooser ul.widgets-chooser-sidebars {
    10566         margin: 0 0 20px 0;
     10568        margin: 0;
    1056710569        list-style-type: none;
     10570        max-height: 300px;
     10571        overflow: auto;
    1056810572}
    1056910573
    10570 #widgets-chooser ul.widgets-chooser-sidebars li {
     10574#widgets-chooser li {
    1057110575        padding: 10px 15px 10px 35px;
    1057210576        background: #fff;
    10573         border: 1px solid #ccc;
    10574         border-bottom: none;
     10577        border-bottom: 1px solid #ccc;
    1057510578        margin: 0;
    1057610579        cursor: pointer;
     10580        outline: none;
     10581        position: relative;
     10582        transition: background: 0.2s ease-in-out;
    1057710583}
    1057810584
    10579 #widgets-chooser ul.widgets-chooser-sidebars li:hover {
     10585#widgets-chooser li:hover {
    1058010586        background: rgba(255,255,255,0.7);
    1058110587}
    1058210588
    10583 #widgets-chooser ul.widgets-chooser-sidebars li.widgets-chooser-selected {
    10584         background: #1075a0;
    10585         color: #fff;
    10586         position: relative;
     10589#widgets-chooser li:focus {
     10590        background: rgba(255,255,255,0.7);
    1058710591}
    1058810592
    10589 #widgets-chooser ul.widgets-chooser-sidebars li.widgets-chooser-selected:before {
     10593#widgets-chooser li:focus:before {
    1059010594        content: '\f147';
    1059110595        display: block;
    1059210596        -webkit-font-smoothing: antialiased;
    1059310597        font: normal 26px/1 'dashicons';
     10598        color: #999;
    1059410599        position: absolute;
    1059510600        top: 7px;
    1059610601        left: 5px;
    1059710602}
    1059810603
    10599 #widgets-chooser ul.widgets-chooser-sidebars li:last-child {
    10600         border-bottom: 1px solid #ccc;
     10604#widgets-chooser li.widgets-chooser-selected {
     10605        background: #1075a0;
     10606        color: #fff;
    1060110607}
    1060210608
    10603 #widgets-chooser select {
    10604         width: 100%;
    10605         margin-bottom: 20px;
    10606         -webkit-box-sizing: border-box;
    10607         -moz-box-sizing: border-box;
    10608         box-sizing: border-box;
     10609#widgets-chooser li.widgets-chooser-selected:before,
     10610#widgets-chooser li.widgets-chooser-selected:focus:before {
     10611        content: '\f147';
     10612        display: block;
     10613        -webkit-font-smoothing: antialiased;
     10614        font: normal 26px/1 'dashicons';
     10615        color: #fff;
     10616        position: absolute;
     10617        top: 7px;
     10618        left: 5px;
    1060910619}
    1061010620
    10611 #widgets-chooser .sidebar-radios {
    10612         text-align: left;
    10613         margin: 0 20px 20px 20px;
    10614 }
    10615 
    10616 #widgets-chooser .sidebar-radios li {
    10617         margin-top: 15px;
    10618 }
    10619 
    10620 #widgets-chooser .sidebar-radios label {
    10621         font-size: 15px;
    10622 }
    10623 
    10624 #widgets-chooser .sidebar-radios input {
    10625         margin-right: 10px;
    10626 }
    10627 
    1062810621#widgets-chooser .widgets-chooser-actions {
    1062910622        clear: both;
     10623        padding: 10px 0 12px 0;
    1063010624        text-align: center;
    1063110625}
    1063210626
  • src/wp-admin/js/widgets.js

     
    204204                                $( '#widgets-left' ).addClass( 'chooser' );
    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', function() {
     213                                        selectSidebar.find('.widgets-chooser-selected').removeClass( 'widgets-chooser-selected' );
     214                                        $(this).addClass( 'widgets-chooser-selected' );
     215                                } )
    211216                        }
    212217                });
    213218
     
    225230                                $target.addClass( 'widgets-chooser-selected' );
    226231                        }
    227232                });
     233
     234                $(document).keypress(function(e) {
     235                        if ( chooser.is( ':visible' ) ) {
     236                                if(e.which == 13) {
     237                                        $( '.widgets-chooser-actions .button-primary' ).click();
     238                                }
     239                        }
     240                });
    228241        },
    229242
    230243        saveOrder : function(sb) {
     
    344357                        sidebarId = chooser.find( '.widgets-chooser-selected' ).data('sidebarId'),
    345358                        sidebar = $( '#' + sidebarId );
    346359
     360                widget.find( '#widgets-chooser' ).remove();
     361
    347362                if ( 'multi' === add ) {
    348363                        widget.html(
    349364                                widget.html().replace( /<[^<>]+>/g, function(m) {
  • src/wp-admin/widgets.php

     
    407407</div>
    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>
    417417