From e41b3485ba4b86dbe7abd6ef0bdb847748fefe97 Mon Sep 17 00:00:00 2001
From: Paul Holden <paulh@moodle.com>
Date: Mon, 19 Apr 2021 21:21:04 +0100
Subject: [PATCH] MDL-57831 message: Boostrap controls for notification
 preferences.

Switch from previous custom controls that caused problems with
overflowing labels when using long language strings.
---
 ...references_component_notification.mustache | 24 +++++--------------
 1 file changed, 6 insertions(+), 18 deletions(-)

diff --git a/message/templates/notification_preferences_component_notification.mustache b/message/templates/notification_preferences_component_notification.mustache
index 3318f0865a5..d709c69556b 100644
--- a/message/templates/notification_preferences_component_notification.mustache
+++ b/message/templates/notification_preferences_component_notification.mustache
@@ -71,21 +71,15 @@
                                 {{#loggedin}}
                                     {{< core/hover_tooltip }}
                                         {{$anchor}}
-                                            <label class="preference-state"
+                                            <label class="custom-control custom-switch"
                                                 title="{{displayname}}"
                                                 data-state="{{name}}">
-
                                                 <span class="accesshide">{{displayname}}</span>
                                                 <input type="checkbox"
-                                                    tabindex="-1"
-                                                    class="accesshide"
+                                                    class="custom-control-input"
                                                     {{#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>
+                                                <span class="custom-control-label d-block"></span>
                                             </label>
                                         {{/anchor}}
                                         {{$tooltip}}{{displayname}}{{/tooltip}}
@@ -96,21 +90,15 @@
                                 {{#loggedoff}}
                                     {{< core/hover_tooltip }}
                                         {{$anchor}}
-                                            <label class="preference-state"
+                                            <label class="custom-control custom-switch"
                                                 title="{{displayname}}"
                                                 data-state="{{name}}">
-
                                                 <span class="accesshide">{{displayname}}</span>
                                                 <input type="checkbox"
-                                                    tabindex="-1"
-                                                    class="accesshide"
+                                                    class="custom-control-input"
                                                     {{#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>
+                                                <span class="custom-control-label d-block"></span>
                                             </label>
                                         {{/anchor}}
                                         {{$tooltip}}{{displayname}}{{/tooltip}}
-- 
2.43.0