From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 23 Jun 2020 18:32:50 +0000 (+0200)
Subject: Visually disable the email settings for suppressed notifications
X-Git-Tag: 5.3.0_Alpha_1~202^2
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=8a723bf2b6bc0ffca3f6e3710891684e090e6efd;p=GitHub%2FWoltLab%2FWCF.git

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 e8903824d0..e9e00713c4 100644
--- 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 2136047031..f97800d102 100644
--- 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 e4060a945c..697774d8fd 100644
--- 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;
+	}
 }