WordPress.org
Get WordPress

Make WordPress Core

Ticket #25952: 25952.7.patch

File 25952.7.patch, 17.3 KB (added by shaunandrews, 11 years ago)

Updating styles for sidebar description and widget-hover class.

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

     
    1003910039        margin-top: 0;
    1004010040}
    1004110041
     10042/* Override UI Sortable and Draggable inline style */
     10043#widgets-right .closed .widget-placeholder {
     10044        height: 0;
     10045        border: 0;
     10046        margin-top: -10px;
     10047}
     10048
    1004210049/* Widget Sidebars */
    1004310050.sidebar-name {
    1004410051        border: none;
    … …  
    1006710074}
    1006810075
    1006910076.widgets-holder-wrap .description {
    10070         padding: 0;
     10077        padding: 0 0 15px 0;
    1007110078        margin: 0;
    1007210079        font-style: normal;
    1007310080        color: #777;
    1007410081}
    1007510082
    10076 #available-widgets.widgets-holder-wrap .description {
    10077         padding-bottom: 10px;
     10083#widgets-right .widgets-holder-wrap .description {
     10084        padding-left: 15px;
     10085        margin-top: -5px;
    1007810086}
    1007910087
    1008010088/* Widgets 2-col Layout */
    … …  
    1019410202}
    1019510203
    1019610204div#widgets-right .sidebar-description {
    10197         border-top: 1px solid #eeeeee;
    10198         padding: 10px 15px;
     10205        min-height: 20px;
    1019910206}
    1020010207
    10201 div#widgets-right .closed .sidebar-description {
    10202         display: none;
    10203 }
    10204 
    1020510208div#widgets-right .sidebar-name h3 {
    10206         padding: 15px 15px;
     10209        padding: 15px;
    1020710210}
    1020810211
    1020910212div#widgets-right .sidebar-name .sidebar-name-arrow:before {
    … …  
    1021910222        padding: 0 8px;
    1022010223        margin-bottom: 9px;
    1022110224        position: relative;
    10222         min-height: 50px;
     10225        min-height: 140px;
    1022310226}
    1022410227
     10228div#widgets-right .closed .widgets-sortables {
     10229        min-height: 0;
     10230        margin-bottom: 0;
     10231}
     10232
    1022510233.sidebar-name .spinner {
    1022610234        margin: -5px 5px;
    1022710235        float: none;
    1022810236}
    1022910237
     10238/* Dragging a widget over a closed sidebar */
     10239#widgets-right .widgets-holder-wrap.closed.widget-hover {
     10240        border-color: #777;
     10241        box-shadow: 0 1px 2px rgba(0,0,0,0.3);
     10242        opacity: 0.6;
     10243}
     10244
    1023010245/* Accessibility Mode */
    1023110246#available-widgets .widget-control-edit .edit {
    1023210247        display :none;
    1023310248}
     10249
    1023410250#available-widgets .widget-control-edit .add {
    1023510251        display: block;
    1023610252        position: absolute;
    … …  
    1024910265        padding: 16px 15px;
    1025010266        border-left: 1px solid #DDD;
    1025110267}
     10268
    1025210269#widgets-right .widget-control-edit .add {
    1025310270        display: none;
    1025410271}
     10272
    1025510273#widgets-right .widget-control-edit:hover {
    1025610274        background: #444;
    1025710275}
     10276
    1025810277#widgets-right .widget-control-edit:before {
    1025910278        content: '\f111';
    1026010279        display: inline-block;
    … …  
    1026710286        padding-right: 4px;
    1026810287}
    1026910288
     10289.widgets-holder-wrap .sidebar-name,
     10290.widgets-holder-wrap .sidebar-description {
     10291        -webkit-user-select: none;
     10292        -moz-user-select: none;
     10293        user-select: none;
     10294}
     10295
    1027010296.editwidget {
    1027110297        margin: 0 auto;
    1027210298}
    … …  
    1027410300        margin-top: 20px;
    1027510301}
    1027610302
    10277 .js .closed .widgets-sortables,
    10278 .js .closed .widget-holder,
     10303.js .widgets-holder-wrap.closed .widget,
     10304.js .widgets-holder-wrap.closed .sidebar-description,
    1027910305.js .closed br.clear {
    1028010306        display: none;
    1028110307}
     10308
    1028210309.nav-menus-php .item-edit:before,
    1028310310.widget-top a.widget-action:after,
    1028410311.control-section .accordion-section-title:after,

  • src/wp-admin/includes/widgets.php

     
    6363 * @since 2.5.0
    6464 *
    6565 * @param string $sidebar id slug of the sidebar
     66 * @param string optional $sidebar_name Include the HTML for the sidebar name
    6667 */
    67 function wp_list_widget_controls( $sidebar ) {
     68function wp_list_widget_controls( $sidebar, $sidebar_name = '' ) {
    6869        add_filter( 'dynamic_sidebar_params', 'wp_list_widget_controls_dynamic_sidebar' );
    6970
    7071        $description = wp_sidebar_description( $sidebar );
    7172
    72         if ( !empty( $description ) ) {
    73                 echo "<div class='sidebar-description'>\n";
    74                 echo "\t<p class='description'>$description</p>";
    75                 echo "</div>\n";
     73        echo '<div id="' . esc_attr( $sidebar ) . '" class="widgets-sortables">';
     74
     75        if ( $sidebar_name ) {
     76                ?>
     77                <div class="sidebar-name">
     78                        <div class="sidebar-name-arrow"><br /></div>
     79                        <h3><?php echo esc_html( $sidebar_name ); ?> <span class="spinner"></span></h3>
     80                </div>
     81                <?php
    7682        }
    7783
    78         echo "<div id='$sidebar' class='widgets-sortables'>\n";
     84        echo '<div class="sidebar-description">';
     85
     86        if ( ! empty( $description ) ) {
     87                echo '<p class="description">' . $description . '</p>';
     88        }
     89
     90        echo '</div>';
     91
    7992        dynamic_sidebar( $sidebar );
    80         echo "</div>\n";
     93
     94        echo '</div>';
    8195}
    8296
    8397/**

  • src/wp-admin/js/widgets.js

     
    1313                        isRTL = !! ( 'undefined' !== typeof isRtl && isRtl );
    1414
    1515                $('#widgets-right .sidebar-name').click( function() {
    16                         var $this = $(this), wrap = $this.closest('.widgets-holder-wrap');
     16                        var $this = $(this),
     17                                $wrap = $this.closest('.widgets-holder-wrap');
    1718
    18                         if ( wrap.hasClass('closed') ) {
    19                                 wrap.removeClass('closed');
    20                                 $this.siblings('.widgets-sortables').sortable('refresh');
     19                        if ( $wrap.hasClass('closed') ) {
     20                                $wrap.removeClass('closed');
     21                                $this.parent().sortable('refresh');
    2122                        } else {
    22                                 wrap.addClass('closed');
     23                                $wrap.addClass('closed');
    2324                        }
    2425                });
    2526
    26                 $('#widgets-left').children('.widgets-holder-wrap').children('.sidebar-name').click(function() {
    27                         $(this).parent().toggleClass('closed');
     27                $('#widgets-left .sidebar-name').click( function() {
     28                        $(this).closest('.widgets-holder-wrap').toggleClass('closed');
    2829                });
    2930
    30                 $(document.body).bind('click.widgets-toggle', function(e){
     31                $(document.body).bind('click.widgets-toggle', function(e) {
    3132                        var target = $(e.target),
    3233                                css = { 'z-index': 100 },
    3334                                widget, inside, targetWidth, widgetWidth, margin;
    … …  
    3637                                widget = target.closest('div.widget');
    3738                                inside = widget.children('.widget-inside');
    3839                                targetWidth = parseInt( widget.find('input.widget-width').val(), 10 ),
    39                                 widgetWidth = widget.width();
     40                                widgetWidth = widget.parent().width();
    4041
    4142                                if ( inside.is(':hidden') ) {
    4243                                        if ( targetWidth > 250 && ( targetWidth + 30 > widgetWidth ) && widget.closest('div.widgets-sortables').length ) {
    … …  
    6869                        }
    6970                });
    7071
    71                 sidebars.children('.widget').each(function() {
    72                         wpWidgets.appendTitle(this);
    73                         if ( $('p.widget-error', this).length ) {
    74                                 $('a.widget-action', this).click();
     72                sidebars.children('.widget').each( function() {
     73                        var $this = $(this);
     74
     75                        wpWidgets.appendTitle( this );
     76
     77                        if ( $this.find( 'p.widget-error' ).length ) {
     78                                $this.find( 'a.widget-action' ).trigger('click');
    7579                        }
    7680                });
    7781
    … …  
    8084                        handle: '> .widget-top > .widget-title',
    8185                        distance: 2,
    8286                        helper: 'clone',
     87                        cursor: 'move',
    8388                        zIndex: 100,
    8489                        containment: 'document',
    85                         start: function(e,ui) {
     90                        start: function( event, ui ) {
    8691                                ui.helper.find('div.widget-description').hide();
    8792                                the_id = this.id;
    8893                        },
    … …  
    102107                        cursor: 'move',
    103108                        distance: 2,
    104109                        containment: 'document',
    105                         start: function(e,ui) {
    106                                 ui.item.children('.widget-inside').hide();
     110                        start: function( event, ui ) {
     111                                var $wrap = $(this).parent();
     112
     113                                ui.item.find('.widget-inside').hide();
     114
     115                                // There is a bug in UI Sortable that prevents firing of "over" when dragging a connected Draggable.
     116                                // This won't be needed when the bug is fixed.
     117                                if ( $wrap.hasClass('closed') ) {
     118                                        $wrap.addClass('widget-hover');
     119                                }
    107120                        },
    108                         stop: function(e,ui) {
    109                                 if ( ui.item.hasClass('ui-draggable') && ui.item.data('draggable') ) {
    110                                         ui.item.draggable('destroy');
    111                                 }
    112121
    113                                 if ( ui.item.hasClass('deleting') ) {
    114                                         wpWidgets.save( ui.item, 1, 0, 1 ); // delete widget
    115                                         ui.item.remove();
     122                        stop: function( event, ui ) {
     123                                var addNew, widgetNumber, $sidebar, $children, child, item,
     124                                        $widget = ui.item,
     125                                        id = the_id;
     126
     127                                if ( $widget.hasClass('deleting') ) {
     128                                        wpWidgets.save( $widget, 1, 0, 1 ); // delete widget
     129                                        $widget.remove();
    116130                                        return;
    117131                                }
    118132
    119                                 var add = ui.item.find('input.add_new').val(),
    120                                         n = ui.item.find('input.multi_number').val(),
    121                                         id = the_id,
    122                                         sb = $(this).attr('id');
     133                                addNew = $widget.find('input.add_new').val();
     134                                widgetNumber = $widget.find('input.multi_number').val();
    123135
    124                                 ui.item.attr( 'style', '' );
     136                                $widget.attr( 'style', '' );
    125137                                the_id = '';
    126138
    127                                 if ( add ) {
    128                                         if ( 'multi' === add ) {
    129                                                 ui.item.html( ui.item.html().replace(/<[^<>]+>/g, function(m){ return m.replace(/__i__|%i%/g, n); }) );
    130                                                 ui.item.attr( 'id', id.replace('__i__', n) );
    131                                                 n++;
    132                                                 $('div#' + id).find('input.multi_number').val(n);
    133                                         } else if ( 'single' === add ) {
    134                                                 ui.item.attr( 'id', 'new-' + id );
     139                                if ( addNew ) {
     140                                        if ( 'multi' === addNew ) {
     141                                                $widget.html(
     142                                                        $widget.html().replace( /<[^<>]+>/g, function( tag ) {
     143                                                                return tag.replace( /__i__|%i%/g, widgetNumber );
     144                                                        })
     145                                                );
     146
     147                                                $widget.attr( 'id', id.replace( '__i__', widgetNumber ) );
     148                                                widgetNumber++;
     149
     150                                                $( 'div#' + id ).find( 'input.multi_number' ).val( widgetNumber );
     151                                        } else if ( 'single' === addNew ) {
     152                                                $widget.attr( 'id', 'new-' + id );
    135153                                                rem = 'div#' + id;
    136154                                        }
    137                                         wpWidgets.save( ui.item, 0, 0, 1 );
    138                                         ui.item.find('input.add_new').val('');
    139                                         ui.item.find('a.widget-action').click();
    140                                         return;
     155
     156                                        wpWidgets.save( $widget, 0, 0, 1 );
     157                                        $widget.find('input.add_new').val('');
    141158                                }
    142                                 wpWidgets.saveOrder(sb);
     159
     160                                $sidebar = $widget.parent();
     161
     162                                if ( $sidebar.parent().hasClass('closed') ) {
     163                                        $sidebar.parent().removeClass('widget-hover closed jump-open');
     164                                        $children = $sidebar.children('.widget');
     165
     166                                        // Make sure the dropped widget is at the top
     167                                        if ( $children.length > 1 ) {
     168                                                child = $children.get(0);
     169                                                item = $widget.get(0);
     170
     171                                                if ( child.id && item.id && child.id !== item.id ) {
     172                                                        $( child ).before( $widget );
     173                                                }
     174                                        }
     175                                }
     176
     177                                if ( addNew ) {
     178                                        $widget.find( 'a.widget-action' ).trigger('click');
     179                                } else {
     180                                        wpWidgets.saveOrder( $sidebar.attr('id') );
     181                                }
    143182                        },
    144                         receive: function(e, ui) {
    145                                 var sender = $(ui.sender);
    146183
    147                                 if ( ! $(this).is(':visible') || this.id.indexOf('orphaned_widgets') > -1 ) {
    148                                         sender.sortable('cancel');
     184                        over: function( event, ui ) {
     185                                var $wrap = $(this).parent();
     186
     187                                if ( $wrap.hasClass('closed') ) {
     188                                        $wrap.addClass('widget-hover');
    149189                                }
     190                        },
    150191
    151                                 if ( sender.attr('id').indexOf('orphaned_widgets') > -1 && !sender.children('.widget').length ) {
    152                                         sender.parents('.orphan-sidebar').slideUp(400, function(){ $(this).remove(); });
     192                        out: function( event, ui ) {
     193                                $(this).parent().removeClass('widget-hover');
     194                        },
     195
     196                        activate: function( event, ui ) {
     197                                // Lock all sidebars min-height when starting to drag.
     198                                // Prevents jumping when dragging a widget from an open sidebar to a closed sidebar below.
     199                                $(this).css( 'min-height', $(this).height() + 'px' );
     200                        },
     201
     202                        deactivate: function( event, ui ) {
     203                                $(this).css( 'min-height', '' );
     204                        },
     205
     206                        receive: function( event, ui ) {
     207                                var $sender = $( ui.sender );
     208
     209                                // Don't add more widgets to orphaned sidebars
     210                                if ( this.id.indexOf('orphaned_widgets') > -1 ) {
     211                                        $sender.sortable('cancel');
     212                                        return;
    153213                                }
     214
     215                                // If the last widget was moved out of an orphaned sidebar, close and remove it.
     216                                if ( $sender.attr('id').indexOf('orphaned_widgets') > -1 && ! $sender.children('.widget').length ) {
     217                                        $sender.parents('.orphan-sidebar').slideUp( 400, function(){ $(this).remove(); } );
     218                                }
    154219                        }
    155                 }).sortable('option', 'connectWith', 'div.widgets-sortables');
     220                }).sortable( 'option', 'connectWith', 'div.widgets-sortables' );
    156221
    157222                $('#available-widgets').droppable({
    158223                        tolerance: 'pointer',
    … …  
    195260                });
    196261
    197262                $( '#available-widgets .widget .widget-title' ).on( 'click.widgets-chooser', function() {
    198                         var widget = $(this).closest( '.widget' );
     263                        var $widget = $(this).closest( '.widget' );
    199264
    200                         if ( widget.hasClass( 'widget-in-question' ) || ( $( '#widgets-left' ).hasClass( 'chooser' ) ) ) {
     265                        if ( $widget.hasClass( 'widget-in-question' ) || $( '#widgets-left' ).hasClass( 'chooser' ) ) {
    201266                                self.closeChooser();
    202267                        } else {
    203268                                // Open the chooser
    204269                                self.clearWidgetSelection();
    205270                                $( '#widgets-left' ).addClass( 'chooser' );
    206                                 widget.addClass( 'widget-in-question' ).draggable('disable');
     271                                $widget.addClass( 'widget-in-question' ).draggable('disable');
     272                                $widget.find( '.widget-description' ).after( chooser );
    207273
    208                                 widget.find( '.widget-description' ).after( chooser );
    209274                                chooser.slideDown( 300, function() {
    210275                                        selectSidebar.find('.widgets-chooser-selected').focus();
    211276                                });
    … …  
    242307                });
    243308        },
    244309
    245         saveOrder : function(sb) {
    246                 if ( sb ) {
    247                         $('#' + sb).closest('div.widgets-holder-wrap').find('.spinner:first').css('display', 'inline-block');
    248                 }
    249 
    250                 var a = {
     310        saveOrder : function( sidebarId ) {
     311                var data = {
    251312                        action: 'widgets-order',
    252313                        savewidgets: $('#_wpnonce_widgets').val(),
    253314                        sidebars: []
    254315                };
    255316
     317                if ( sidebarId ) {
     318                        $( '#' + sidebarId ).find('.spinner:first').css('display', 'inline-block');
     319                }
     320
    256321                $('div.widgets-sortables').each( function() {
    257322                        if ( $(this).sortable ) {
    258                                 a['sidebars[' + $(this).attr('id') + ']'] = $(this).sortable('toArray').join(',');
     323                                data['sidebars[' + $(this).attr('id') + ']'] = $(this).sortable('toArray').join(',');
    259324                        }
    260325                });
    261326
    262                 $.post( ajaxurl, a, function() {
     327                $.post( ajaxurl, data, function() {
    263328                        $('.spinner').hide();
    264329                });
    265330        },
    266331
    267         save : function(widget, del, animate, order) {
    268                 var sb = widget.closest('div.widgets-sortables').attr('id'), data = widget.find('form').serialize(), a;
     332        save : function( widget, del, animate, order ) {
     333                var sidebarId = widget.closest('div.widgets-sortables').attr('id'),
     334                        data = widget.find('form').serialize(), a;
     335               
    269336                widget = $(widget);
    270337                $('.spinner', widget).show();
    271338
    272339                a = {
    273340                        action: 'save-widget',
    274341                        savewidgets: $('#_wpnonce_widgets').val(),
    275                         sidebar: sb
     342                        sidebar: sidebarId
    276343                };
    277344
    278345                if ( del ) {
    … …  
    281348
    282349                data += '&' + $.param(a);
    283350
    284                 $.post( ajaxurl, data, function(r){
     351                $.post( ajaxurl, data, function(r) {
    285352                        var id;
    286353
    287354                        if ( del ) {
    … …  
    306373                        } else {
    307374                                $('.spinner').hide();
    308375                                if ( r && r.length > 2 ) {
    309                                         $('div.widget-content', widget).html(r);
    310                                         wpWidgets.appendTitle(widget);
     376                                        $( 'div.widget-content', widget ).html(r);
     377                                        wpWidgets.appendTitle( widget );
    311378                                }
    312379                        }
    313380                        if ( order ) {
    … …  
    364431
    365432                // Open the widgets container
    366433                sidebar.closest( '.widgets-holder-wrap' ).removeClass('closed');
     434
     435                sidebar.find('.sidebar-description').after( widget );
    367436                sidebar.sortable('refresh');
    368437
    369                 widget.prependTo( sidebar );
    370 
    371438                wpWidgets.save( widget, 0, 0, 1 );
    372439                // No longer "new" widget
    373440                widget.find( 'input.add_new' ).val('');
    … …  
    389456                $( '#widgets-chooser' ).slideUp( 200, function() {
    390457                        $( '#wpbody-content' ).append( this );
    391458                        $( '#widgets-left .widget-in-question' ).draggable('enable');
     459                        $( '#widgets-left .widget-in-question' ).draggable('enable');
    392460                        self.clearWidgetSelection();
    393461                });
    394462        },

  • src/wp-admin/widgets.php

     
    332332<div id="widgets-left">
    333333        <div id="available-widgets" class="widgets-holder-wrap">
    334334                <div class="sidebar-name">
    335                 <div class="sidebar-name-arrow"><br /></div>
    336                 <h3><?php _e('Available Widgets'); ?> <span id="removing-widget"><?php _ex('Deactivate', 'removing-widget'); ?> <span></span></span></h3></div>
     335                        <div class="sidebar-name-arrow"><br /></div>
     336                        <h3><?php _e('Available Widgets'); ?> <span id="removing-widget"><?php _ex('Deactivate', 'removing-widget'); ?> <span></span></span></h3>
     337                </div>
    337338                <div class="widget-holder">
    338                 <p class="description"><?php _e('Drag widgets from here to a sidebar on the right to activate them. Drag widgets back here to deactivate them and delete their settings.'); ?></p>
    339                 <div id="widget-list">
    340                 <?php wp_list_widgets(); ?>
     339                        <div class="sidebar-description">
     340                                <p class="description"><?php _e('Drag widgets from here to a sidebar on the right to activate them. Drag widgets back here to deactivate them and delete their settings.'); ?></p>
     341                        </div>
     342                        <div id="widget-list">
     343                                <?php wp_list_widgets(); ?>
     344                        </div>
     345                        <br class='clear' />
    341346                </div>
    342                 <br class='clear' />
    343                 </div>
    344347                <br class="clear" />
    345348        </div>
    346349
    … …  
    355358
    356359                ?>
    357360                <div class="<?php echo esc_attr( $wrap_class ); ?>">
    358                         <div class="sidebar-name">
    359                                 <div class="sidebar-name-arrow"><br /></div>
    360                                 <h3><?php echo esc_html( $registered_sidebar['name'] ); ?> <span class="spinner"></span></h3>
    361                         </div>
    362361                        <div class="widget-holder inactive">
    363                                 <?php wp_list_widget_controls( $registered_sidebar['id'] ); ?>
     362                                <?php wp_list_widget_controls( $registered_sidebar['id'], $registered_sidebar['name'] ); ?>
    364363                                <div class="clear"></div>
    365364                        </div>
    366365                </div>
    367366                <?php
     367
    368368        } else {
    369369                $theme_sidebars[$sidebar] = $registered_sidebar;
    370370        }
    … …  
    407407
    408408        ?>
    409409        <div class="<?php echo esc_attr( $wrap_class ); ?>">
    410                 <div class="sidebar-name">
    411                         <div class="sidebar-name-arrow"><br /></div>
    412                         <h3><?php echo esc_html( $registered_sidebar['name'] ); ?>      <span class="spinner"></span></h3>
    413                 </div>
    414                 <?php wp_list_widget_controls( $sidebar ); // Show the control forms for each of the widgets in this sidebar ?>
     410                <?php wp_list_widget_controls( $sidebar, $registered_sidebar['name'] ); // Show the control forms for each of the widgets in this sidebar ?>
    415411        </div>
    416412        <?php
    417413