Ticket #23120: 23120.14.diff

wp-admin/css/widgets.css

@@ -37 +37 @@
         user-select: none;
 }
 
+.widget-title h3:before,
+.widget-title h4:before {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        -webkit-transition: all 0.2s ease-in-out;
+        background-color: #84d24c;
+        color: #fff;
+        content: "\f147";
+        display: inline-block;
+        filter: alpha(opacity=0);
+        font: normal 26px/1 dashicons;
+        margin: -23px 15px -23px -15px;
+        opacity: 0;
+        overflow: hidden;
+        padding-bottom: 15px;
+        padding-top: 15px;
+        speak: none;
+        text-align: center;
+        transition: all 0.2s ease-in-out;
+        vertical-align: middle;
+        width: 0;
+}
+
+.widget.success .widget-title h3:before,
+.widget.success .widget-title h4:before {
+        filter: alpha(opacity=100);
+        opacity: 1;
+        width: 48px;
+}
+
+.widget.failure .spinner {
+        background: #a00;
+        filter: alpha(opacity=100);
+        float: left;
+        margin-right: 5px;
+        margin-top: 2px;
+        opacity: 1;
+        padding: 3px 3px 1px;
+        visibility: visible;
+}
+
+.widget.failure .spinner:before {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        color: #fff;
+        content: "\f335";
+        font: normal 20px/1 dashicons;
+        speak: none;
+}
+
+.widget.failure .feedback {
+        float: left;
+        line-height: 28px;
+        margin-right: 10px;
+}
+
 .widgets-holder-wrap .widget-inside {
         border-top: none;
         padding: 1px 15px 15px 15px;

wp-admin/js/widgets.js

@@ -1 @@
-/*global ajaxurl, isRtl */
+/*global ajaxurl, isRtl, _wpWidgetSettings */
 var wpWidgets;
 (function($) {
         var $document = $( document );
@@ -456 +456 @@
                         if ( order ) {
                                 wpWidgets.saveOrder();
                         }
+                })
+                .done( function () {
+                        widget.find( '.widget-title' ).trigger( 'click' );
+                        widget.addClass( 'success' );
+
+                        setTimeout( function() {
+                                widget.removeClass( 'success' );
+                        }, 1000 );
+                })
+                .fail( function() {
+                        var $element = $( '<div class="feedback">' + _wpWidgetSettings.saveFailed + '</div>' );
+
+                        widget.find( '.widget-control-actions .alignright' ).append($element);
+                        widget.addClass( 'failure' );
+
+                        $( '.spinner', widget ).addClass( 'is-active' );
+
+                        setTimeout( function() {
+                                $( '.spinner', widget ).removeClass( 'is-active' );
+                                $element.remove();
+
+                                widget.removeClass( 'failure' );
+                        }, 1000 );
                 });
         },
 

wp-admin/widgets.php

@@ -31 +31 @@
 } else {
         wp_enqueue_script('admin-widgets');
 
-        if ( wp_is_mobile() )
+        wp_localize_script( 'admin-widgets', '_wpWidgetSettings', array(
+                'saveFailed' => __( 'Save failed, try again' )
+        ) );
+
+        if ( wp_is_mobile() ) {
                 wp_enqueue_script( 'jquery-touch-punch' );
+        }
 }
 
 /**