Changeset 41932

Timestamp:

10/18/2017 11:05:02 PM (7 years ago)

Author:

westonruter

Message:

Customize: Draw attention to save button after collapsing the publish settings section when the changeset status or date had been changed.

Props bpayton, westonruter.
See #42114, #39896.
Fixes #42211.

File:

• trunk/src/wp-admin/js/customize-controls.js (modified) (5 diffs)

trunk/src/wp-admin/js/customize-controls.js

@@ -6890 +6890 @@
         // Set up publish settings section and its controls.
         api.section( 'publish_settings', function( section ) {
-            var updateButtonsState, trashControl, updateSectionActive, isSectionActive, statusControl, dateControl, toggleDateControl, publishWhenTime, pollInterval, updateTimeArrivedPoller, timeArrivedPollingInterval = 1000;
+            var updateButtonsState, trashControl, updateSectionActive, isSectionActive, statusControl, dateControl, toggleDateControl, publishWhenTime, pollInterval, updateTimeArrivedPoller, cancelScheduleButtonReminder, timeArrivedPollingInterval = 1000;
 
             trashControl = new api.Control( 'trash_changeset', {
@@ -6952 +6952 @@
             section.active.bind( updateButtonsState );
 
+            function highlightScheduleButton() {
+                if ( ! cancelScheduleButtonReminder ) {
+                    cancelScheduleButtonReminder = api.utils.highlightButton( btnWrapper, {
+                        delay: 1000,
+
+                        // Only abort the reminder when the save button is focused.
+                        // If the user clicks the settings button to toggle the
+                        // settings closed, we'll still remind them.
+                        focusTarget: saveBtn
+                    } );
+                }
+            }
+            function cancelHighlightScheduleButton() {
+                if ( cancelScheduleButtonReminder ) {
+                    cancelScheduleButtonReminder();
+                    cancelScheduleButtonReminder = null;
+                }
+            }
+            api.state( 'selectedChangesetStatus' ).bind( cancelHighlightScheduleButton );
+
             section.contentContainer.find( '.customize-action' ).text( api.l10n.updating );
             section.contentContainer.find( '.customize-section-back' ).removeAttr( 'tabindex' );
@@ -6964 +6984 @@
                 publishSettingsBtn.attr( 'aria-expanded', String( isExpanded ) );
                 publishSettingsBtn.toggleClass( 'active', isExpanded );
+
+                if ( isExpanded ) {
+                    cancelHighlightScheduleButton();
+                } else if ( api.state( 'selectedChangesetStatus' ).get() !== api.state( 'changesetStatus' ).get() ) {
+                    highlightScheduleButton();
+                } else if ( 'future' === api.state( 'selectedChangesetStatus' ).get() && api.state( 'selectedChangesetDate' ).get() !== api.state( 'changesetDate' ).get() ) {
+                    highlightScheduleButton();
+                }
             } );
 
@@ -7621 +7649 @@
                 var canSave;
 
-                btnWrapper.removeClass( 'button-see-me' );
-
                 if ( ! activated() ) {
                     saveBtn.val( api.l10n.activate );
@@ -7646 +7672 @@
                             if ( changesetDate.get() !== selectedChangesetDate.get() ) {
                                 saveBtn.val( api.l10n.schedule );
-                                btnWrapper.addClass( 'button-see-me' );
                             } else {
                                 saveBtn.val( api.l10n.scheduled );
                             }
                         } else {
-                            btnWrapper.addClass( 'button-see-me' );
                             saveBtn.val( api.l10n.schedule );
                         }