Visually disable the email settings for suppressed notifications

diff --git a/com.woltlab.wcf/templates/notificationSettings.tpl b/com.woltlab.wcf/templates/notificationSettings.tpl
index e8903824d0ebebf0a60e5edcb6add9d7682cb17d..e9e00713c424a58a9f900cfbcde8e450ee021686 100644 (file)
--- a/com.woltlab.wcf/templates/notificationSettings.tpl
+++ b/com.woltlab.wcf/templates/notificationSettings.tpl
@@ -30,7 +30,7 @@
                                                </div>
                                                <div class="notificationSettingsState">
                                                        <label>
-                                                               <input type="checkbox" id="settings_{@$event->eventID}" name="settings[{@$event->eventID}][enabled]" value="1"{if !$settings[$event->eventID][enabled]|empty} checked{/if}>
+                                                               <input type="checkbox" id="settings_{@$event->eventID}" name="settings[{@$event->eventID}][enabled]" class="jsCheckboxNotificationSettingsState" value="1" data-object-id="{@$event->eventID}"{if !$settings[$event->eventID][enabled]|empty} checked{/if}>
                                                                <span class="icon icon24 fa-bell green pointer"></span>
                                                                <span class="icon icon24 fa-bell-slash red pointer"></span>
                                                        </label>
@@ -38,7 +38,7 @@
                                                <div class="notificationSettingsEmail">
                                                        {if $event->supportsEmailNotification()}
                                                                <input type="hidden" id="settings_{$event->eventID}_mailNotificationType" name="settings[{@$event->eventID}][mailNotificationType]" value="{$settings[$event->eventID][mailNotificationType]}">
-                                                               <a href="#" class="notificationSettingsEmailType jsTooltip" role="button" title="{lang}wcf.user.notification.mailNotificationType.{@$settings[$event->eventID][mailNotificationType]}{/lang}" data-object-id="{@$event->eventID}">
+                                                               <a href="#" class="notificationSettingsEmailType jsTooltip{if $settings[$event->eventID][enabled]|empty} disabled{/if}" role="button" title="{lang}wcf.user.notification.mailNotificationType.{@$settings[$event->eventID][mailNotificationType]}{/lang}" data-object-id="{@$event->eventID}">
                                                                        {if $settings[$event->eventID][mailNotificationType] === 'none'}
                                                                                <span class="icon icon24 fa-times red jsIconNotificationSettingsEmailType"></span>
                                                                        {else}

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/User/Notification/Settings.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/User/Notification/Settings.js
index 21360470316c29cb22be29aee228ff226f033125..f97800d10259a527c887622ad15c1633fddc8400 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/User/Notification/Settings.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/User/Notification/Settings.js
@@ -24,11 +24,26 @@ define(['Language', 'Ui/ReusableDropdown'], function (Language, UiReusableDropdo
                 * Binds event listeners for all notifications supporting emails.
                 */
                init: function () {
+                       elBySelAll('.jsCheckboxNotificationSettingsState', undefined, (function (checkbox) {
+                               checkbox.addEventListener('change', this._stateChange.bind(this));
+                       }).bind(this));
+                       
                        elBySelAll('.notificationSettingsEmailType', undefined, (function (button) {
                                button.addEventListener('click', this._click.bind(this));
                        }).bind(this));
                },
                
+               /**
+                * @param {Event} event
+                */
+               _stateChange: function (event) {
+                       var objectId = elData(event.currentTarget, 'object-id');
+                       var emailSettingsType = elBySel('.notificationSettingsEmailType[data-object-id="' + objectId + '"]');
+                       if (emailSettingsType !== null) {
+                               emailSettingsType.classList[event.currentTarget.checked ? 'remove' : 'add']('disabled');
+                       }
+               },
+               
                /**
                 * @param       {Event} event           event object
                 */

diff --git a/wcfsetup/install/files/style/ui/notification.scss b/wcfsetup/install/files/style/ui/notification.scss
index e4060a945c6196e5a54dbcb06802fc69b5960dbe..697774d8fda1e150b9bbbaa42d79ddaeea89570f 100644 (file)
--- a/wcfsetup/install/files/style/ui/notification.scss
+++ b/wcfsetup/install/files/style/ui/notification.scss
@@ -73,4 +73,9 @@
 .notificationSettingsEmailType {
        align-items: center;
        display: flex;
+       
+       &.disabled {
+               filter: grayscale(1);
+               opacity: .75;
+       }
 }