Ticket #23120: 23120.12.diff

src/wp-admin/css/colors.css

@@ -964 +964 @@
         box-shadow: 0 1px 1px rgba(0,0,0,0.04);
 }
 
+.widget {
+        position: relative;
+        border-left: 0 solid transparent;
+        transition: border-left 0.2s ease-in-out;
+}
+
+.widget:before {
+        opacity: 0;
+        display: block;
+        content: "\f147";
+        transition: opacity 0.2s ease-in-out;
+        -webkit-font-smoothing: antialiased;
+        font: normal 32px/1 'dashicons';
+        position: absolute;
+                top: 2px;
+                left: -40px;
+        line-height: 43px;
+        color: #fff;
+}
+
+.widget.saved {
+        border-left: 48px solid #84d24c;
+}
+.widget.saved:before {
+        opacity: 1;
+}
+
+.widget.save-failed .spinner {
+        opacity: 1;
+        filter: alpha( opacity=100 );
+        background: url( '' );
+        background-color: #a00;
+        padding: 3px;
+}
+
+.widget.save-failed .spinner:before {
+        font: normal 20px/1 'dashicons';
+        content: '\f335';
+        color: #fff;
+}
+
 #post-status-info {
         border-top: none;
 }

src/wp-admin/js/widgets.js

@@ -332 +332 @@
 
         save : function( widget, del, animate, order ) {
                 var sidebarId = widget.closest('div.widgets-sortables').attr('id'),
-                        data = widget.find('form').serialize(), a;
+                        data = widget.find('form').serialize(), a, spinner;
 
-                widget = $(widget);
-                $('.spinner', widget).show();
+                widget  = $(widget);
+                spinner = $('.spinner', widget);
+                spinner.show();
 
                 a = {
                         action: 'save-widget',
@@ -372 +373 @@
                                         widget.remove();
                                 }
                         } else {
-                                $('.spinner').hide();
+                                spinner.hide();
                                 if ( r && r.length > 2 ) {
                                         $( 'div.widget-content', widget ).html(r);
                                         wpWidgets.appendTitle( widget );
@@ -381 +382 @@
                         if ( order ) {
                                 wpWidgets.saveOrder();
                         }
+                })
+                .done( function() { // The widget save was successful, collapse the widget and alert the user
+                        setTimeout( function() {
+                                widget.find( '.widget-title' ).click();
+                                widget.addClass( 'saved' );
+                                setTimeout( function() {
+                                        widget.removeClass( 'saved' );
+                                }, 2500 );
+                        }, 100 );
+                })
+                .fail( function() { // The widget save failed, alert the user
+                        setTimeout( function() {
+                                widget.addClass( 'save-failed' );
+                                spinner.show();
+                                setTimeout( function() {
+                                        widget.removeClass( 'save-failed' );
+                                        spinner.hide();
+                                }, 2500 );
+                        }, 100 );
                 });
         },