From ad7092d281909461a26eeaf05cefe604afabc9a8 Mon Sep 17 00:00:00 2001
From: Paul Holden <paulh@moodle.com>
Date: Fri, 23 Apr 2021 21:43:11 +0100
Subject: [PATCH] MDL-71403 message: Bootstrap controls for message
 preferences.

Replicates changes made to notification preferences in e41b3485.
The templates for each are similar enough than one can be used
from the other. Remove redundant styles for previous controls.
---
 .../templates/message_preferences.mustache    |  2 +-
 ...references_notification_processor.mustache | 85 ++-----------------
 ...references_component_notification.mustache | 11 ++-
 theme/boost/scss/moodle/message.scss          | 55 ------------
 theme/boost/style/moodle.css                  | 34 --------
 theme/classic/style/moodle.css                | 34 --------
 6 files changed, 14 insertions(+), 207 deletions(-)

diff --git a/message/templates/message_preferences.mustache b/message/templates/message_preferences.mustache
index ebe1c40840c..c630a82cdd9 100644
--- a/message/templates/message_preferences.mustache
+++ b/message/templates/message_preferences.mustache
@@ -101,7 +101,7 @@
     <div class="preferences-container {{#disableall}}disabled{{/disableall}}"
         data-user-id="{{userid}}"
         data-region="preferences-container">
-        <table class="table table-hover preference-table" data-region="preference-table">
+        <table class="table preference-table" data-region="preference-table">
             <tbody>
                 {{#components}}
                     {{> message/message_preferences_component }}
diff --git a/message/templates/message_preferences_notification_processor.mustache b/message/templates/message_preferences_notification_processor.mustache
index 927e5e287aa..dec06ee4cd0 100644
--- a/message/templates/message_preferences_notification_processor.mustache
+++ b/message/templates/message_preferences_notification_processor.mustache
@@ -20,17 +20,15 @@
     The message preferences page
 
     Classes required for JS:
-    * None
+    * disabled
 
-    Data attibutes required for JS:
+    Data attributes required for JS:
     * All data attributes are required
 
     Context variables required for this template:
-    * displayname   The display name of the processor
-    * name          The name of the processor
-    * locked        Whether the processor is locked
-    * loggedin      The logged in settings
-    * loggedoff     The logged off settings
+    * displayname   The notification display name
+    * preferencekey The unique key to identify this preference
+    * processors    The list of processors for this notification
 
     Example context (json):
     {
@@ -45,83 +43,16 @@
                 "loggedin": {
                     "name": "loggedin",
                     "displayname": "When I'm logged in",
-                    "checked": 0,
-                    "disableall": 0
+                    "checked": 0
                 },
                 "loggedoff": {
                     "name": "loggedoff",
                     "displayname": "When I'm offline",
-                    "checked": 0,
-                    "disableall": 0
+                    "checked": 0
                 }
             }
         ]
     }
 }}
-<tr class="preference-row" data-region="preference-row" data-preference-key="{{preferencekey}}">
-    <td class="preference-name">{{displayname}}</td>
-    <td {{^userconfigured}}class="disabled"{{/userconfigured}} data-processor-name="{{name}}">
-        {{#locked}}
-            <div class="dimmed_text">{{lockedmessage}}</div>
-        {{/locked}}
-        {{^locked}}
-            <div class="disabled-message">{{#str}} disabled, question {{/str}}</div>
-            <form>
-                <div class="container-fluid">
-                    <div class="row">
-                        <div class="span6 col-6">
-                            {{#loggedin}}
-                                {{< core/hover_tooltip }}
-                                    {{$anchor}}
-                                        <label class="preference-state"
-                                            title="{{displayname}}"
-                                            data-state="{{name}}">
 
-                                            <span class="accesshide">{{displayname}}</span>
-                                            <input type="checkbox"
-                                                tabindex="-1"
-                                                class="accesshide"
-                                                {{#checked}}checked{{/checked}}
-                                                {{#disableall}}disabled{{/disableall}} />
-                                            <div class="preference-state-status-container" tabindex="0">
-                                                <span class="on-text">{{#str}} on, message {{/str}}</span>
-                                                <span class="off-text">{{#str}} off, message {{/str}}</span>
-                                                {{> core/loading }}
-                                            </div>
-                                        </label>
-                                    {{/anchor}}
-                                    {{$tooltip}}{{displayname}}{{/tooltip}}
-                                {{/ core/hover_tooltip }}
-                            {{/loggedin}}
-                        </div>
-                        <div class="span6 col-6">
-                            {{#loggedoff}}
-                                {{< core/hover_tooltip }}
-                                    {{$anchor}}
-                                        <label class="preference-state"
-                                            title="{{displayname}}"
-                                            data-state="{{name}}">
-
-                                            <span class="accesshide">{{displayname}}</span>
-                                            <input type="checkbox"
-                                                tabindex="-1"
-                                                class="accesshide"
-                                                {{#checked}}checked{{/checked}}
-                                                {{#disableall}}disabled{{/disableall}} />
-                                            <div class="preference-state-status-container" tabindex="0">
-                                                <span class="on-text">{{#str}} on, message {{/str}}</span>
-                                                <span class="off-text">{{#str}} off, message {{/str}}</span>
-                                                {{> core/loading }}
-                                            </div>
-                                        </label>
-                                    {{/anchor}}
-                                    {{$tooltip}}{{displayname}}{{/tooltip}}
-                                {{/ core/hover_tooltip }}
-                            {{/loggedoff}}
-                        </div>
-                    </div>
-                </div>
-            </form>
-        {{/locked}}
-    </td>
-</tr>
+{{> core_message/notification_preferences_component_notification }}
diff --git a/message/templates/notification_preferences_component_notification.mustache b/message/templates/notification_preferences_component_notification.mustache
index d709c69556b..c120b68b76e 100644
--- a/message/templates/notification_preferences_component_notification.mustache
+++ b/message/templates/notification_preferences_component_notification.mustache
@@ -22,7 +22,7 @@
     Classes required for JS:
     * disabled
 
-    Data attibutes required for JS:
+    Data attributes required for JS:
     * All data attributes are required
 
     Context variables required for this template:
@@ -39,17 +39,16 @@
                 "displayname": "Popup notification",
                 "name": "popup",
                 "locked": 0,
+                "userconfigured": 1,
                 "loggedin": {
                     "name": "loggedin",
                     "displayname": "When I'm logged in",
-                    "checked": 0,
-                    "iconurl": "some url"
+                    "checked": 0
                 },
                 "loggedoff": {
                     "name": "loggedoff",
                     "displayname": "When I'm offline",
-                    "checked": 0,
-                    "iconurl": "some url"
+                    "checked": 0
                 }
             }
         ]
@@ -63,7 +62,7 @@
                 <div class="dimmed_text">{{lockedmessage}}</div>
             {{/locked}}
             {{^locked}}
-                <div class="disabled-message">{{#str}} disabled, question {{/str}}</div>
+                <div class="disabled-message">{{#str}} disabled, admin {{/str}}</div>
                 <form>
                     <div class="container-fluid">
                         <div class="row">
diff --git a/theme/boost/scss/moodle/message.scss b/theme/boost/scss/moodle/message.scss
index 6c95150857a..1b89e6ed71f 100644
--- a/theme/boost/scss/moodle/message.scss
+++ b/theme/boost/scss/moodle/message.scss
@@ -74,61 +74,6 @@
                 height: 30px;
                 line-height: 30px;
             }
-            .preference-state {
-                margin: 0;
-                padding: 0;
-                display: inline-block;
-                vertical-align: middle;
-
-                input[type="checkbox"]:checked + .preference-state-status-container {
-                    background-color: #5cb85c;
-
-                    .on-text {
-                        display: inline-block;
-                    }
-                    .off-text {
-                        display: none;
-                    }
-                }
-                .preference-state-status-container {
-                    width: 30px;
-                    height: 30px;
-                    line-height: 30px;
-                    text-align: center;
-                    border-radius: 4px;
-                    background-color: #d9534f;
-                    color: #fff;
-                    cursor: pointer;
-
-                    .loading-icon {
-                        display: none;
-                    }
-                    .on-text {
-                        display: none;
-                    }
-                    .off-text {
-                        display: inline-block;
-                    }
-                }
-                &.loading {
-                    input[type="checkbox"]:checked + .preference-state-status-container {
-                        .on-text,
-                        .off-text {
-                            display: none;
-                        }
-                    }
-
-                    .preference-state-status-container {
-                        .on-text,
-                        .off-text {
-                            display: none;
-                        }
-                        .loading-icon {
-                            display: block;
-                        }
-                    }
-                }
-            }
             &.loading {
                 .preference-name {
                     .loading-icon {
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index cd012d4002b..f2ef81fa593 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -15110,40 +15110,6 @@ a.ygtvspacer:hover {
     text-align: center;
     height: 30px;
     line-height: 30px; }
-  .preferences-container .preference-table .preference-row .preference-state {
-    margin: 0;
-    padding: 0;
-    display: inline-block;
-    vertical-align: middle; }
-    .preferences-container .preference-table .preference-row .preference-state input[type="checkbox"]:checked + .preference-state-status-container {
-      background-color: #5cb85c; }
-      .preferences-container .preference-table .preference-row .preference-state input[type="checkbox"]:checked + .preference-state-status-container .on-text {
-        display: inline-block; }
-      .preferences-container .preference-table .preference-row .preference-state input[type="checkbox"]:checked + .preference-state-status-container .off-text {
-        display: none; }
-    .preferences-container .preference-table .preference-row .preference-state .preference-state-status-container {
-      width: 30px;
-      height: 30px;
-      line-height: 30px;
-      text-align: center;
-      border-radius: 4px;
-      background-color: #d9534f;
-      color: #fff;
-      cursor: pointer; }
-      .preferences-container .preference-table .preference-row .preference-state .preference-state-status-container .loading-icon {
-        display: none; }
-      .preferences-container .preference-table .preference-row .preference-state .preference-state-status-container .on-text {
-        display: none; }
-      .preferences-container .preference-table .preference-row .preference-state .preference-state-status-container .off-text {
-        display: inline-block; }
-    .preferences-container .preference-table .preference-row .preference-state.loading input[type="checkbox"]:checked + .preference-state-status-container .on-text,
-    .preferences-container .preference-table .preference-row .preference-state.loading input[type="checkbox"]:checked + .preference-state-status-container .off-text {
-      display: none; }
-    .preferences-container .preference-table .preference-row .preference-state.loading .preference-state-status-container .on-text,
-    .preferences-container .preference-table .preference-row .preference-state.loading .preference-state-status-container .off-text {
-      display: none; }
-    .preferences-container .preference-table .preference-row .preference-state.loading .preference-state-status-container .loading-icon {
-      display: block; }
   .preferences-container .preference-table .preference-row.loading .preference-name .loading-icon {
     display: block; }
 
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index ebf37d3ef78..081a28f1d63 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -15334,40 +15334,6 @@ a.ygtvspacer:hover {
     text-align: center;
     height: 30px;
     line-height: 30px; }
-  .preferences-container .preference-table .preference-row .preference-state {
-    margin: 0;
-    padding: 0;
-    display: inline-block;
-    vertical-align: middle; }
-    .preferences-container .preference-table .preference-row .preference-state input[type="checkbox"]:checked + .preference-state-status-container {
-      background-color: #5cb85c; }
-      .preferences-container .preference-table .preference-row .preference-state input[type="checkbox"]:checked + .preference-state-status-container .on-text {
-        display: inline-block; }
-      .preferences-container .preference-table .preference-row .preference-state input[type="checkbox"]:checked + .preference-state-status-container .off-text {
-        display: none; }
-    .preferences-container .preference-table .preference-row .preference-state .preference-state-status-container {
-      width: 30px;
-      height: 30px;
-      line-height: 30px;
-      text-align: center;
-      border-radius: 4px;
-      background-color: #d9534f;
-      color: #fff;
-      cursor: pointer; }
-      .preferences-container .preference-table .preference-row .preference-state .preference-state-status-container .loading-icon {
-        display: none; }
-      .preferences-container .preference-table .preference-row .preference-state .preference-state-status-container .on-text {
-        display: none; }
-      .preferences-container .preference-table .preference-row .preference-state .preference-state-status-container .off-text {
-        display: inline-block; }
-    .preferences-container .preference-table .preference-row .preference-state.loading input[type="checkbox"]:checked + .preference-state-status-container .on-text,
-    .preferences-container .preference-table .preference-row .preference-state.loading input[type="checkbox"]:checked + .preference-state-status-container .off-text {
-      display: none; }
-    .preferences-container .preference-table .preference-row .preference-state.loading .preference-state-status-container .on-text,
-    .preferences-container .preference-table .preference-row .preference-state.loading .preference-state-status-container .off-text {
-      display: none; }
-    .preferences-container .preference-table .preference-row .preference-state.loading .preference-state-status-container .loading-icon {
-      display: block; }
   .preferences-container .preference-table .preference-row.loading .preference-name .loading-icon {
     display: block; }