Changeset 32101

Timestamp:

04/09/2015 08:34:10 PM (11 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 );