From 6da352192680efddf5cd5db96511883e0ec60f4b Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Tue, 23 Jun 2020 18:49:08 +0200 Subject: [PATCH] New UI for the notification settings --- .../templates/notificationSettings.tpl | 71 +++--- .../Controller/User/Notification/Settings.js | 212 ++++++++---------- .../install/files/style/ui/notification.scss | 76 +++++++ 3 files changed, 204 insertions(+), 155 deletions(-) create mode 100644 wcfsetup/install/files/style/ui/notification.scss diff --git a/com.woltlab.wcf/templates/notificationSettings.tpl b/com.woltlab.wcf/templates/notificationSettings.tpl index cfb7071b4a..7f9e78f7b0 100644 --- a/com.woltlab.wcf/templates/notificationSettings.tpl +++ b/com.woltlab.wcf/templates/notificationSettings.tpl @@ -15,45 +15,44 @@ {/if}
- {foreach from=$events key='eventCategory' item='eventList'} -
-

{lang}wcf.user.notification.{$eventCategory}{/lang}

- -
+
+ {foreach from=$events key='eventCategory' item='eventList'} +
+
+
{lang}wcf.user.notification.{$eventCategory}{/lang}
+
Aktiv
+
E-Mail
+
{foreach from=$eventList item=event} -
{lang}wcf.user.notification.{$event->objectType}.{$event->eventName}{/lang}
-
-
    -
  1. - eventID][enabled]|empty} checked{/if}> - -
    2. -
  2. - eventID][enabled]|empty} checked{/if}> - -
    3. +
    +
    + +
    +
    + +
    +
    {if $event->supportsEmailNotification()} -
  3. - - eventID][mailNotificationType] !== 'none'} class="active yellow"{/if}> - - {lang}wcf.user.notification.mailNotificationType.{$settings[$event->eventID][mailNotificationType]}{/lang} - - -
    4. + + + {if $settings[$event->eventID][mailNotificationType] === 'none'} + + {else} + + {/if} + + {/if} -
-
+
+
{/foreach} -
-
- {/foreach} + + {/foreach} + {event name='sections'} @@ -72,7 +71,7 @@ 'wcf.user.notification.mailNotificationType.none': '{lang}wcf.user.notification.mailNotificationType.none{/lang}' }); - ControllerUserNotificationSettings.setup(); + ControllerUserNotificationSettings.init(); }); 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 0afac53be5..7861c4fdd0 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 @@ -1,165 +1,139 @@ /** * Handles email notification type for user notification settings. - * - * @author Alexander Ebert - * @copyright 2001-2019 WoltLab GmbH - * @license GNU Lesser General Public License - * @module WoltLabSuite/Core/Controller/User/Notification/Settings + * + * @author Alexander Ebert + * @copyright 2001-2020 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Controller/User/Notification/Settings */ -define(['Dictionary', 'Language', 'Dom/Traverse', 'Ui/SimpleDropdown'], function(Dictionary, Language, DomTraverse, UiSimpleDropdown) { - "use strict"; +define(['Language', 'Ui/ReusableDropdown'], function (Language, UiReusableDropdown) { + 'use strict'; if (!COMPILER_TARGET_DEFAULT) { - var Fake = function() {}; - Fake.prototype = { - setup: function() {}, - _initGroup: function() {}, - _click: function() {}, - _createDropdown: function() {}, - _selectType: function() {} - }; - return Fake; + return function () {}; } - var _data = new Dictionary(); - - var _callbackClick = null; - var _callbackSelectType = null; + var _dropDownMenu = null; + var _objectId = null; /** * @exports WoltLabSuite/Core/Controller/User/Notification/Settings */ - var ControllerUserNotificationSettings = { + return { /** * Binds event listeners for all notifications supporting emails. */ - setup: function() { - _callbackClick = this._click.bind(this); - _callbackSelectType = this._selectType.bind(this); - - var group, mailSetting, groups = elBySelAll('#notificationSettings .flexibleButtonGroup'); - for (var i = 0, length = groups.length; i < length; i++) { - group = groups[i]; - - mailSetting = elBySel('.notificationSettingsEmail', group); - if (mailSetting === null) { - continue; - } - - this._initGroup(group, mailSetting); - } + init: function () { + elBySelAll('.notificationSettingsEmailType', undefined, (function (button) { + button.addEventListener('click', this._click.bind(this)); + }).bind(this)); }, /** - * Initializes a setting. - * - * @param {Element} group button group element - * @param {Element} mailSetting mail settings element + * @param {Event} event event object */ - _initGroup: function(group, mailSetting) { - var groupId = ~~elData(group, 'object-id'); + _click: function (event) { + event.preventDefault(); + event.stopPropagation(); - var disabledNotification = elById('settings_' + groupId + '_disabled'); - disabledNotification.addEventListener(WCF_CLICK_EVENT, function() { mailSetting.classList.remove('active'); }); - var enabledNotification = elById('settings_' + groupId + '_enabled'); - enabledNotification.addEventListener(WCF_CLICK_EVENT, function() { mailSetting.classList.add('active'); }); + var button = event.currentTarget; + _objectId = ~~elData(button, 'object-id'); - var mailValue = DomTraverse.childByTag(mailSetting, 'INPUT'); + this._createDropDown(); - var button = DomTraverse.childByTag(mailSetting, 'A'); - elData(button, 'object-id', groupId); - button.addEventListener(WCF_CLICK_EVENT, _callbackClick); + this._setCurrentEmailType(this._getEmailTypeInputElement().value); - _data.set(groupId, { - button: button, - dropdownMenu: null, - mailSetting: mailSetting, - mailValue: mailValue - }); + this._showDropDown(button); }, - /** - * Creates and displays the email type dropdown. - * - * @param {Object} event event object - */ - _click: function(event) { - event.preventDefault(); - - var button = event.currentTarget; - var objectId = ~~elData(button, 'object-id'); - var data = _data.get(objectId); - if (data.dropdownMenu === null) { - data.dropdownMenu = this._createDropdown(objectId, data.mailValue.value); - - button.parentNode.classList.add('dropdown'); - button.parentNode.appendChild(data.dropdownMenu); - - UiSimpleDropdown.init(button, event); + _createDropDown: function () { + if (_dropDownMenu !== null) { + return; } - else { - var items = DomTraverse.childrenByTag(data.dropdownMenu, 'LI'), value = data.mailValue.value; - for (var i = 0; i < 4; i++) { - items[i].classList[(elData(items[i], 'value') === value) ? 'add' : 'remove']('active'); - } - } - }, - - /** - * Creates the email type dropdown. - * - * @param {int} objectId notification event id - * @param {string} initialValue initial email type - * @returns {Element} dropdown menu object - */ - _createDropdown: function(objectId, initialValue) { - var dropdownMenu = elCreate('ul'); - dropdownMenu.className = 'dropdownMenu'; - elData(dropdownMenu, 'object-id', objectId); - var link, listItem, value, items = ['instant', 'daily', 'divider', 'none']; - for (var i = 0; i < 4; i++) { - value = items[i]; - - listItem = elCreate('li'); + _dropDownMenu = elCreate('ul'); + _dropDownMenu.className = 'dropdownMenu'; + + ['instant', 'daily', 'divider', 'none'].forEach((function (value) { + var listItem = elCreate('li'); if (value === 'divider') { listItem.className = 'dropdownDivider'; } else { - link = elCreate('a'); + var link = elCreate('a'); + link.href = '#'; link.textContent = Language.get('wcf.user.notification.mailNotificationType.' + value); listItem.appendChild(link); elData(listItem, 'value', value); - listItem.addEventListener(WCF_CLICK_EVENT, _callbackSelectType); - - if (initialValue === value) { - listItem.className = 'active'; - } + listItem.addEventListener(WCF_CLICK_EVENT, this._setEmailType.bind(this)); } - dropdownMenu.appendChild(listItem); - } + _dropDownMenu.appendChild(listItem); + }).bind(this)); - return dropdownMenu; + UiReusableDropdown.init('UiNotificationSettingsEmailType', _dropDownMenu); + }, + + _setCurrentEmailType: function (currentValue) { + elBySelAll('li', _dropDownMenu, function (button) { + var value = elData(button, 'value'); + button.classList[(value === currentValue) ? 'add' : 'remove']('active'); + }); + }, + + _showDropDown: function (referenceElement) { + UiReusableDropdown.toggleDropdown('UiNotificationSettingsEmailType', referenceElement); }, /** - * Sets the selected email notification type. - * - * @param {Object} event event object + * @param {Event} event event object */ - _selectType: function(event) { + _setEmailType: function (event) { + event.preventDefault(); + var value = elData(event.currentTarget, 'value'); - var groupId = ~~elData(event.currentTarget.parentNode, 'object-id'); - var data = _data.get(groupId); - data.mailValue.value = value; - elBySel('span.title', data.mailSetting).textContent = Language.get('wcf.user.notification.mailNotificationType.' + value); + this._getEmailTypeInputElement().value = value; + + var button = elBySel('.notificationSettingsEmailType[data-object-id="' + _objectId + '"]'); + elAttr( + button, + 'aria-label', + Language.get('wcf.user.notification.mailNotificationType.' + value) + ); - data.button.classList[(value === 'none') ? 'remove' : 'add']('yellow'); - data.button.classList[(value === 'none') ? 'remove' : 'add']('active'); + var icon = elBySel('.jsIconNotificationSettingsEmailType', button); + icon.classList.remove('fa-clock-o'); + icon.classList.remove('fa-flash'); + icon.classList.remove('fa-times'); + icon.classList.remove('green'); + icon.classList.remove('red'); + + switch (value) { + case 'daily': + icon.classList.add('fa-clock-o'); + icon.classList.add('green'); + break; + + case 'instant': + icon.classList.add('fa-flash'); + icon.classList.add('green'); + break; + + case 'none': + icon.classList.add('fa-times'); + icon.classList.add('red'); + break; + } + + _objectId = null; + }, + + /** + * @return {HTMLInputElement} + */ + _getEmailTypeInputElement: function () { + return elById('settings_' + _objectId + '_mailNotificationType'); } }; - - return ControllerUserNotificationSettings; }); diff --git a/wcfsetup/install/files/style/ui/notification.scss b/wcfsetup/install/files/style/ui/notification.scss new file mode 100644 index 0000000000..e4060a945c --- /dev/null +++ b/wcfsetup/install/files/style/ui/notification.scss @@ -0,0 +1,76 @@ +.notificationSettings { + margin-top: 30px; +} + +.notificationSettingsCategory, +.notificationSettingsItem { + display: flex; +} + +.notificationSettingsCategory { + border-bottom: 2px solid currentColor; + color: $wcfTabularBoxHeadline; + font-weight: 600; + padding: 5px 0; +} + +.notificationSettingsItem { + align-items: center; + padding: 5px 0; +} + +.notificationSettingsItem:not(:last-child) { + border-bottom: 1px solid $wcfContentBorderInner; +} + +.notificationSettingsEvent { + flex: 1 auto; + + > label { + cursor: pointer; + } +} + +.notificationSettingsState { + align-items: center; + display: flex; + flex: 0 0 34px; + justify-content: center; + + @include screen-sm-up { + margin: 0 20px; + } + + @include screen-xs { + margin: 0 10px; + } + + input[type="checkbox"] { + opacity: 0; + position: absolute; + z-index: -1; + + &.focus-visible:focus ~ .icon { + transform: scale(1.2); + } + + &:not(:checked) + .fa-bell { + display: none; + } + + &:checked ~ .fa-bell-slash { + display: none; + } + } +} + +.notificationSettingsEmail { + align-items: center; + display: flex; + flex: 0 0 45px; + justify-content: flex-end; +} +.notificationSettingsEmailType { + align-items: center; + display: flex; +} -- 2.20.1