MDL-54698 core_message: moved 'disable/enable' notifications setting

lang/en/message.php

@@ -56,7 +56,6 @@ $string['discussion'] = 'Discussion';
 $string['emailmessages'] = 'Email messages when I am offline';
 $string['emailtagline'] = 'This is a copy of a message sent to you at "{$a->sitename}". Go to {$a->url} to reply.';
 $string['emptysearchstring'] = 'You must search for something';
-$string['enableall'] = 'Enable notifications';
 $string['enabled'] = 'Enabled';
 $string['errorcallingprocessor'] = 'Error calling defined output';
 $string['errorwhilesendingmessage'] = 'An error occurred while sending the message; please try again later.';

lib/outputrenderers.php

@@ -3205,7 +3205,6 @@ EOD;
         if (isloggedin() && $processor->enabled) {
             $context = [
                 'userid' => $USER->id,
-                'allnotificationsdisabled' => !empty($USER->emailstop),
                 'urls' => [
                     'preferences' => (new moodle_url('/message/notificationpreferences.php', ['id' => $USER->id]))->out(),
                 ],

message/amd/src/notification_popover_controller.js

@@ -45,7 +45,6 @@ define(['jquery', 'theme_bootstrapbase/bootstrap', 'core/ajax', 'core/templates'
         CONTENT_BODY_SHORT: '.content-body-short',
         CONTENT_BODY_FULL: '.content-body-full',
         LINK_URL: '[data-link-url]',
-        DISABLE_ALL_BUTTON: '[data-disable-all]',
     };
 
     var PROCESSOR_NAME = 'popup';
@@ -62,7 +61,6 @@ define(['jquery', 'theme_bootstrapbase/bootstrap', 'core/ajax', 'core/templates'
         PopoverController.call(this, element);
 
         this.markAllReadButton = this.root.find(SELECTORS.MARK_ALL_READ_BUTTON);
-        this.disableAllButton = this.root.find(SELECTORS.DISABLE_ALL_BUTTON);
         this.unreadCount = 0;
         this.userId = this.root.attr(SELECTORS.USER_ID);
         this.modeToggle = this.root.find(SELECTORS.MODE_TOGGLE);
@@ -389,63 +387,6 @@ define(['jquery', 'theme_bootstrapbase/bootstrap', 'core/ajax', 'core/templates'
             .always(function() { this.markAllReadButton.removeClass('loading'); }.bind(this));
     };
 
-    /**
-     * Update the disable all notifications user property in the DOM and
-     * send a request to update on the server.
-     *
-     * @method toggleDisableAllStatus
-     */
-    NotificationPopoverController.prototype.toggleDisableAllStatus = function() {
-        var button = this.disableAllButton;
-        var ischecked = (button.attr('aria-checked') === 'true');
-        var disablestring = '';
-        var enablestring = '';
-
-        button.addClass('loading');
-
-        return Str.get_strings([
-                {
-                    key: 'disableall',
-                    component: 'message',
-                },
-                {
-                    key: 'enableall',
-                    component: 'message',
-                }
-            ]).then(function(strings) {
-                // If we could load the strings then update the user preferences.
-                disablestring = strings[0];
-                enablestring = strings[1];
-
-                var request = {
-                    methodname: 'core_user_update_user',
-                    args: {
-                        user: {
-                            emailstop: ischecked ? 0 : 1,
-                        }
-                    }
-                };
-
-                return Ajax.call([request])[0];
-            })
-            .done(function() {
-                // If everything executed correctly then update the DOM.
-                if (ischecked) {
-                    button.attr('aria-checked', false);
-                    button.attr('data-original-title', disablestring);
-                    $(document).trigger('messageprefs:enableall');
-                } else {
-                    button.attr('aria-checked', true);
-                    button.attr('data-original-title', enablestring);
-                    $(document).trigger('messageprefs:disableall');
-                }
-            })
-            .fail(DebugNotification.exception)
-            .always(function() {
-                button.removeClass('loading');
-            });
-    };
-
     /**
      * Shift focus to the next content item in the list if the content item
      * list current contains focus, otherwise the first item in the list is
@@ -772,14 +713,6 @@ define(['jquery', 'theme_bootstrapbase/bootstrap', 'core/ajax', 'core/templates'
             e.stopPropagation();
         }.bind(this));
 
-        // Update the state of preferences when disable all notifications button is activated.
-        this.root.on(CustomEvents.events.activate, SELECTORS.DISABLE_ALL_BUTTON, function(e, data) {
-            this.toggleDisableAllStatus();
-
-            e.stopPropagation();
-            data.originalEvent.preventDefault();
-        }.bind(this));
-
         // Expand all the currently visible content items if the user hits the
         // asterix key.
         this.root.on(CustomEvents.events.asterix, function() {

message/amd/src/preferences_notifications_list_controller.js

@@ -24,11 +24,13 @@
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  * @since      3.2
  */
-define(['jquery', 'core/custom_interaction_events', 'core_message/notification_preference',
+define(['jquery', 'core/ajax', 'core/notification', 'core/custom_interaction_events', 'core_message/notification_preference',
         'core_message/notification_processor_settings'],
-        function($, CustomEvents, NotificationPreference, NotificationProcessorSettings) {
+        function($, Ajax, Notification, CustomEvents, NotificationPreference, NotificationProcessorSettings) {
 
     var SELECTORS = {
+        DISABLE_NOTIFICATIONS: '.disable-notification-container [data-disable-notifications]',
+        DISABLE_NOTIFICATIONS_CONTAINER: '.disable-notification-container',
         PREFERENCE: '[data-state]',
         PREFERENCE_ROW: '.preference-row',
         PREFERENCE_INPUT: '[data-state] input',
@@ -78,7 +80,49 @@ define(['jquery', 'core/custom_interaction_events', 'core_message/notification_p
         this.root.find(SELECTORS.PREFERENCE_INPUT).prop('disabled', false);
     };
 
+    /**
+      * Update the disable all notifications user property in the DOM and
+      * send a request to update on the server.
+      *
+      * @method toggleDisableAllStatus
+      */
+    PreferencesController.prototype.toggleDisableAllStatus = function() {
+        var checkbox = $(SELECTORS.DISABLE_NOTIFICATIONS);
+        var container = $(SELECTORS.DISABLE_NOTIFICATIONS_CONTAINER);
+        var ischecked = checkbox.prop('checked');
+
+        if (container.hasClass('loading')) {
+            return $.Deferred().resolve();
+        }
+
+        container.addClass('loading');
+
+        var request = {
+            methodname: 'core_user_update_user',
+            args: {
+                user: {
+                    emailstop: ischecked ? 1 : 0,
+                }
+            }
+        };
+
+        return Ajax.call([request])[0]
+            .done(function() {
+                if (ischecked) {
+                    this.setDisabled();
+                } else {
+                    this.setEnabled();
+                }
+            }.bind(this))
+            .always(function() {
+                container.removeClass('loading');
+            })
+            .fail(Notification.exception);
+    };
+
     PreferencesController.prototype.registerEventListeners = function() {
+        var disabledNotificationsElement = $(SELECTORS.DISABLE_NOTIFICATIONS);
+
         CustomEvents.define(this.root, [
             CustomEvents.events.activate,
         ]);
@@ -102,12 +146,12 @@ define(['jquery', 'core/custom_interaction_events', 'core_message/notification_p
             processorSettings.show();
         });
 
-        $(document).on('messageprefs:disableall', function() {
-            this.setDisabled();
-        }.bind(this));
+        CustomEvents.define(disabledNotificationsElement, [
+            CustomEvents.events.activate
+        ]);
 
-        $(document).on('messageprefs:enableall', function() {
-            this.setEnabled();
+        disabledNotificationsElement.on(CustomEvents.events.activate, function(e) {
+            this.toggleDisableAllStatus();
         }.bind(this));
     };
 

message/templates/message_preferences.mustache

@@ -75,7 +75,7 @@
         ]
     }
 }}
-<div class="message-preferences-container">
+<div class="preferences-container">
     <h2>{{#str}} messagepreferences, message {{/str}}</h2>
     <div class="block-non-contacts-container">
         <input id="block-non-contacts"

message/templates/notification_popover.mustache

@@ -52,27 +52,6 @@
             <div class="off-text">{{#str}} all {{/str}}</div>
             <div class="on-text">{{#str}} new {{/str}}</div>
         </div>
-        <label>
-            <span class="accesshide">{{#str}} disableall, message {{/str}}</span>
-            <div role="checkbox"
-                tabindex="0"
-                {{#allnotificationsdisabled}}
-                    aria-checked="true"
-                    data-original-title="{{#str}} enableall, message {{/str}}"
-                {{/allnotificationsdisabled}}
-                {{^allnotificationsdisabled}}
-                    aria-checked="false"
-                    data-original-title="{{#str}} disableall, message {{/str}}"
-                {{/allnotificationsdisabled}}
-                data-disable-all
-                data-toggle="tooltip"
-                data-placement="top">
-
-                <div class="checked">{{#pix}} t/hide, core {{/pix}}</div>
-                <div class="unchecked">{{#pix}} t/show, core {{/pix}}</div>
-                {{> core/loading }}
-            </div>
-        </label>
         <a class="mark-all-read-button"
             href="#"
             data-toggle="tooltip"

message/templates/preferences_notifications_list.mustache

@@ -77,6 +77,14 @@
 }}
 <h2>{{#str}} notificationpreferences, message {{/str}}</h2>
 <div class="preferences-container {{#disableall}}disabled{{/disableall}}" data-user-id="{{userid}}">
+    <div class="disable-notification-container">
+        <input id="disable-notifications"
+           type="checkbox"
+           data-disable-notifications
+           {{#disableall}}checked{{/disableall}} />
+        <label for="disable-notifications">{{#str}} disableall, message {{/str}}</label>
+        {{> core/loading }}
+    </div>
     <table class="table table-hover preference-table">
         <thead>
             <tr>

theme/bootstrapbase/less/moodle/message.less

@@ -774,8 +774,9 @@
     }
 }
 
-.message-preferences-container {
-    .block-non-contacts-container {
+.preferences-container {
+
+    .container() {
         margin: 30px 5px;
         line-height: 20px;
 
@@ -794,4 +795,12 @@
             }
         }
     }
+
+    .block-non-contacts-container {
+        .container();
+    }
+
+    .disable-notification-container {
+        .container();
+    }
 }

theme/bootstrapbase/style/moodle.css

@@ -6392,18 +6392,32 @@ a.ygtvspacer:hover {
 .processor-container.loading .loading-container {
   display: block;
 }
-.message-preferences-container .block-non-contacts-container {
+.preferences-container .block-non-contacts-container {
   margin: 30px 5px;
   line-height: 20px;
 }
-.message-preferences-container .block-non-contacts-container input {
+.preferences-container .block-non-contacts-container input {
   line-height: 20px;
   margin: 0;
 }
-.message-preferences-container .block-non-contacts-container .loading-icon {
+.preferences-container .block-non-contacts-container .loading-icon {
   display: none;
 }
-.message-preferences-container .block-non-contacts-container.loading .loading-icon {
+.preferences-container .block-non-contacts-container.loading .loading-icon {
+  display: inline-block;
+}
+.preferences-container .disable-notification-container {
+  margin: 30px 5px;
+  line-height: 20px;
+}
+.preferences-container .disable-notification-container input {
+  line-height: 20px;
+  margin: 0;
+}
+.preferences-container .disable-notification-container .loading-icon {
+  display: none;
+}
+.preferences-container .disable-notification-container.loading .loading-icon {
   display: inline-block;
 }
 /* Question */