Changeset 26474

Timestamp:

11/29/2013 05:57:05 PM (13 years ago)

Author:

azaozz

Message:

Widgets: highlight all drop zones (open and closed sidebars) on starting to drag a widget to indicate "droppability", fixes #26168.

Location:

trunk/src/wp-admin

Files:

• css/wp-admin.css (modified) (2 diffs)
• js/widgets.js (modified) (5 diffs)

trunk/src/wp-admin/css/wp-admin.css

@@ -10083 +10083 @@
 .widget.ui-sortable-helper {
         opacity: 0.8;
-        z-index: 2000;
 }
 
@@ -10294 +10293 @@
 
 /* Dragging a widget over a closed sidebar */ 
-#widgets-right .widgets-holder-wrap.closed.widget-hover { 
+#widgets-right .widgets-holder-wrap.widget-hover { 
         border-color: #777;
         box-shadow: 0 1px 2px rgba(0,0,0,0.3);
-        opacity: 0.6;
-} 
+}
 
 /* Accessibility Mode */

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

@@ -118 +118 @@
                         containment: 'document',
                         start: function( event, ui ) {
-                                var $this = $(this),
+                                var height, $this = $(this),
                                         $wrap = $this.parent(),
                                         inside = ui.item.children('.widget-inside');
@@ -127 +127 @@
                                 }
 
-                                if ( $wrap.hasClass('closed') ) {
-                                        // There is a bug in UI Sortable that prevents firing of "over" when dragging a connected Draggable.
-                                        // This won't be needed when the bug is fixed.
-                                        $wrap.addClass('widget-hover');
-                                } else {
+                                if ( ! $wrap.hasClass('closed') ) {
                                         // Lock all open sidebars min-height when starting to drag.
                                         // Prevents jumping when dragging a widget from an open sidebar to a closed sidebar below.
-                                        $wrap.css( 'min-height', $wrap.height() + 'px' );
-                                        $this.css( 'min-height', $this.height() - 2 + 'px' );
+                                        height = ui.item.hasClass('ui-draggable') ? $this.height() : 1 + $this.height();
+                                        $this.css( 'min-height', height + 'px' );
                                 }
                         },
@@ -153 +149 @@
                                 widgetNumber = $widget.find('input.multi_number').val();
 
-                                $widget.attr( 'style', '' );
+                                $widget.attr( 'style', '' ).removeClass('ui-draggable');
                                 the_id = '';
 
@@ -180 +176 @@
 
                                 if ( $sidebar.parent().hasClass('closed') ) {
-                                        $sidebar.parent().removeClass('widget-hover closed jump-open');
+                                        $sidebar.parent().removeClass('closed');
                                         $children = $sidebar.children('.widget');
 
@@ -201 +197 @@
                         },
 
-                        over: function() {
-                                var $wrap = $(this).parent();
-
-                                if ( $wrap.hasClass('closed') ) {
-                                        $wrap.addClass('widget-hover');
-                                }
-                        },
-
-                        out: function() {
-                                $(this).parent().removeClass('widget-hover');
+                        activate: function() {
+                                $(this).parent().addClass( 'widget-hover' );
                         },
 
                         deactivate: function() {
                                 // Remove all min-height added on "start"
-                                $(this).css( 'min-height', '' ).parent().css( 'min-height', '' );
+                                $(this).css( 'min-height', '' ).parent().removeClass( 'widget-hover' );
                         },