Changeset 24576

Timestamp:

07/05/2013 11:17:25 PM (11 years ago)

Author:

markjaquith

Message:

Gracefully slide down the "{Name} is editing" notice portion of the post row, so everything isn't shifting down in an instant and throwing off people's clicks.

fixes #24553. props kadamwhite, johnbillion.

Location:

trunk/wp-admin

Files:

• css/wp-admin.css (modified) (2 diffs)
• includes/class-wp-posts-list-table.php (modified) (1 diff)
• js/inline-edit-post.js (modified) (2 diffs)

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

@@ -2535 +2535 @@
     background: url('../images/lock.png') no-repeat;
     margin: -2px 0 0 6px;
-    height: 16px;
+    height: 20px;
     width: 16px;
 }
@@ -2544 +2544 @@
 tr.wp-locked .row-actions .trash {
     display: none;
+}
+
+tr .locked-info {
+    height: 0;
+    opacity: 0;
+    -webkit-transition: height 1s, opacity 500ms;
+    transition:         height 1s, opacity 500ms;
+}
+
+tr.wp-locked .locked-info {
+    height: 22px;
+    opacity: 1;
+    -webkit-transition: height 1s, opacity 500ms 500ms;
+    transition:         height 1s, opacity 500ms 500ms;
 }
 

trunk/wp-admin/includes/class-wp-posts-list-table.php

@@ -575 +575 @@
                     }
 
-                    echo '<span class="locked-avatar">' . $locked_avatar . '</span> <span class="locked-text">' . $locked_text . "</span>\n";
+                    echo '<div class="locked-info"><span class="locked-avatar">' . $locked_avatar . '</span> <span class="locked-text">' . $locked_text . "</span></div>\n";
                 }
 

trunk/wp-admin/js/inline-edit-post.js

@@ -303 +303 @@
             if ( ! row.hasClass('wp-locked') ) {
                 lock_data = locked[key];
-                row.addClass('wp-locked').find('.column-title .locked-text').text( lock_data.text );
+                row.find('.column-title .locked-text').text( lock_data.text );
                 row.find('.check-column checkbox').prop('checked', false);
 
@@ -310 +310 @@
                     row.find('.column-title .locked-avatar').empty().append( avatar );
                 }
+                row.addClass('wp-locked');
             }
         } else if ( row.hasClass('wp-locked') ) {
-            row.removeClass('wp-locked').find('.column-title .locked-text').empty();
-            row.find('.column-title .locked-avatar').empty();
+            // Make room for the CSS animation
+            row.removeClass('wp-locked').delay(1000).find('.locked-info span').empty();
         }
     });