[wp-trac] [WordPress Trac] #23120: There should be indication that widget settings have been saved

[WordPress Trac]

#23120: There should be indication that widget settings have been saved
----------------------------------------------+----------------------------
 Reporter:  jacopo.vip                        |       Owner:
     Type:  enhancement                       |      Status:  new
 Priority:  normal                            |   Milestone:  Future
Component:  Widgets                           |  Release
 Severity:  normal                            |     Version:  3.5
 Keywords:  ui-focus has-patch needs-testing  |  Resolution:
----------------------------------------------+----------------------------

Comment (by shaunandrews):

 Replying to [comment:30 adamsilverstein]:
 > Replying to [comment:29 melchoyce]:
 > > As an FYI, Shaun Andrews has been playing around with a fun "saved"
 indication for widgets: https://cloudup.com/ckJmakw7HDg
 >
 > Very nice! I like that very much, is there a red X for failures? if we
 can get the patch here I would vote for that implementation over what we
 have here.

 I don't have a red x for failures yet — would love some help adding that.
 Right now its just a simple js timer that adds and removed a class:

 {{{
 // Clicking save will close the widget inside
 $( '#widgets-right .widgets-sortables' ).on( 'click', '.widget-control-
 save', function() {
         var widget = $(this).closest( '.widget' );

         var close_check = setInterval( function() {
                 if ( widget.find( '.spinner' ).is( ':hidden' ) ) {
                         widget.find( '.widget-title' ).click();

                         setTimeout( function() {
                                 widget.addClass( 'saved' );
                                 setTimeout( function() {
                                         widget.removeClass( 'saved' );
                                 }, 3500 );
                         }, 100 );
                         clearInterval(close_check);
                 }
         }, 100 );
 } );
 }}}

 The CSS adds a :before element with the dashicon, which is then
 transitioned in/out based on the classed added by the JS:

 {{{
 .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;
 }
 }}}

 This code comes from the Better Widgets plugin:
 http://wordpress.org/plugins/better-widgets

--
Ticket URL: <https://core.trac.wordpress.org/ticket/23120#comment:32>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform