Changeset 32101

Timestamp:

04/09/2015 08:34:10 PM (10 years ago)

Author:

helen

Message:

Media: Bring back spinners, now without bouncing select elements.

props afercia for the initial patch.
see #22839, #30725.

Location:

trunk/src/wp-includes

Files:

• css/media-views.css (modified) (5 diffs)
• js/media/views.js (modified) (4 diffs)
• js/media/views/embed/link.js (modified) (2 diffs)
• js/media/views/spinner.js (modified) (2 diffs)

trunk/src/wp-includes/css/media-views.css

@@ -1510 +1510 @@
     -webkit-background-size: 20px 20px;
     background-size: 20px 20px;
-    display: none;
+    float: right;
+    display: inline-block;
+    visibility: hidden;
     opacity: 0.7;
     filter: alpha(opacity=70);
@@ -1516 +1518 @@
     height: 20px;
     margin: 0;
+    vertical-align: middle;
+}
+
+.media-frame .spinner.is-active {
+    visibility: visible;
 }
 
@@ -1537 +1544 @@
 
 .attachment-details .settings-save-status .spinner {
-    margin: 0 5px 0;
+    margin-left: 5px;
 }
 
@@ -1545 +1552 @@
 }
 
-.attachment-details.save-waiting .settings-save-status .spinner,
+.attachment-details.save-waiting .settings-save-status .spinner {
+    visibility: visible;
+}
+
 .attachment-details.save-complete .settings-save-status .saved {
     display: block;
@@ -1788 +1798 @@
 
 .media-frame .embed-loading .embed-url .spinner {
-    display: block;
+    visibility: visible;
 }
 

trunk/src/wp-includes/js/media/views.js

@@ -4547 +4547 @@
         }
 
-        this.spinner.show();
-
         this.fetch();
     }, 600 ),
@@ -4607 +4605 @@
             this.model.unset( 'width', opts );
         }
-
-        this.spinner.hide();
 
         this.$('.embed-container').show().find('.embed-preview').html( html );
@@ -7464 +7460 @@
         if ( ! this.spinnerTimeout ) {
             this.spinnerTimeout = _.delay(function( $el ) {
-                $el.show();
+                $el.addClass( 'is-active' );
             }, this.delay, this.$el );
         }
@@ -7472 +7468 @@
 
     hide: function() {
-        this.$el.hide();
+        this.$el.removeClass( 'is-active' );
         this.spinnerTimeout = clearTimeout( this.spinnerTimeout );
 

trunk/src/wp-includes/js/media/views/embed/link.js

@@ -34 +34 @@
             return;
         }
-
-        this.spinner.show();
 
         this.fetch();
@@ -96 +94 @@
         }
 
-        this.spinner.hide();
-
         this.$('.embed-container').show().find('.embed-preview').html( html );
     }

trunk/src/wp-includes/js/media/views/spinner.js

@@ -18 +18 @@
         if ( ! this.spinnerTimeout ) {
             this.spinnerTimeout = _.delay(function( $el ) {
-                $el.show();
+                $el.addClass( 'is-active' );
             }, this.delay, this.$el );
         }
@@ -26 +26 @@
 
     hide: function() {
-        this.$el.hide();
+        this.$el.removeClass( 'is-active' );
         this.spinnerTimeout = clearTimeout( this.spinnerTimeout );