From 6636410e52732be5e493693749da4bf030970206 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Sat, 20 Jun 2015 11:38:56 +0200 Subject: [PATCH] Overhauled user notification settings, unified CSS --- .../templates/notificationSettings.tpl | 60 ++++--- .../files/acp/templates/booleanOptionType.tpl | 6 +- .../templates/userGroupBooleanOptionType.tpl | 8 +- .../Controller/User/Notification/Settings.js | 153 ++++++++++++++++++ .../js/WoltLab/WCF/UI/Dropdown/Simple.js | 2 +- wcfsetup/install/files/style/form.less | 104 +++++++----- wcfsetup/install/files/style/user.less | 11 ++ wcfsetup/install/lang/de.xml | 3 + wcfsetup/install/lang/en.xml | 3 + 9 files changed, 273 insertions(+), 77 deletions(-) create mode 100644 wcfsetup/install/files/js/WoltLab/WCF/Controller/User/Notification/Settings.js diff --git a/com.woltlab.wcf/templates/notificationSettings.tpl b/com.woltlab.wcf/templates/notificationSettings.tpl index 98ba80b80a..1da6aeca63 100644 --- a/com.woltlab.wcf/templates/notificationSettings.tpl +++ b/com.woltlab.wcf/templates/notificationSettings.tpl @@ -6,20 +6,15 @@ {include file='headInclude'} @@ -31,6 +26,7 @@

{lang}wcf.user.menu.settings{/lang}: {lang}wcf.user.notification.notifications{/lang}

+

{lang}wcf.user.notification.notifications.description{/lang}

{include file='userNotice'} @@ -61,20 +57,34 @@
{foreach from=$eventList item=event} +
{lang}wcf.user.notification.{$event->objectType}.{$event->eventName}{/lang}
- - {hascontent}{content}{lang __optional=true}wcf.user.notification.{$event->objectType}.{$event->eventName}.description{/lang}{/content}{/hascontent} - {if $event->supportsEmailNotification()} - - - - {else} - {lang}wcf.user.notification.mailNotificationType.notSupported{/lang} - {/if} +
    +
  1. + eventID][enabled]|empty} checked="checked"{/if}> + +
    2. +
  2. + eventID][enabled]|empty} checked="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} +
{/foreach}
diff --git a/wcfsetup/install/files/acp/templates/booleanOptionType.tpl b/wcfsetup/install/files/acp/templates/booleanOptionType.tpl index 22338b3f9a..f6c30b9cf7 100644 --- a/wcfsetup/install/files/acp/templates/booleanOptionType.tpl +++ b/wcfsetup/install/files/acp/templates/booleanOptionType.tpl @@ -1,10 +1,10 @@ -
    +
    1. - +
    2. - +
    diff --git a/wcfsetup/install/files/acp/templates/userGroupBooleanOptionType.tpl b/wcfsetup/install/files/acp/templates/userGroupBooleanOptionType.tpl index 91583a7f46..787f75e899 100644 --- a/wcfsetup/install/files/acp/templates/userGroupBooleanOptionType.tpl +++ b/wcfsetup/install/files/acp/templates/userGroupBooleanOptionType.tpl @@ -1,16 +1,16 @@ -
      +
      1. - +
      2. - +
        3. {if $group === null || !$group->isEveryone()}
      3. - +
        4. {/if}
      diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Controller/User/Notification/Settings.js b/wcfsetup/install/files/js/WoltLab/WCF/Controller/User/Notification/Settings.js new file mode 100644 index 0000000000..cdc6fbc050 --- /dev/null +++ b/wcfsetup/install/files/js/WoltLab/WCF/Controller/User/Notification/Settings.js @@ -0,0 +1,153 @@ +/** + * Handles email notification type for user notification settings. + * + * @author Alexander Ebert + * @copyright 2001-2015 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLab/WCF/Controller/User/Notification/Settings + */ +define(['Dictionary', 'Language', 'DOM/Traverse', 'UI/SimpleDropdown'], function(Dictionary, Language, DOMTraverse, UISimpleDropdown) { + "use strict"; + + var _data = new Dictionary(); + + var _callbackClick = null; + var _callbackSelectType = null; + + /** + * @exports WoltLab/WCF/Controller/User/Notification/Settings + */ + var ControllerUserNotificationSettings = { + /** + * Binds event listeners for all notifications supporting emails. + */ + setup: function() { + _callbackClick = this._click.bind(this); + _callbackSelectType = this._selectType.bind(this); + + var group, mailSetting, groups = document.querySelectorAll('#notificationSettings .flexibleButtonGroup'); + for (var i = 0, length = groups.length; i < length; i++) { + group = groups[i]; + + mailSetting = group.querySelector('.notificationSettingsEmail'); + if (mailSetting === null) { + continue; + } + + this._initGroup(group, mailSetting); + } + }, + + /** + * Initializes a setting. + * + * @param {Element} group button group element + * @param {Element} mailSetting mail settings element + */ + _initGroup: function(group, mailSetting) { + var groupId = ~~group.getAttribute('data-object-id'); + + var disabledNotification = document.getElementById('settings_' + groupId + '_disabled'); + disabledNotification.addEventListener('click', function() { mailSetting.classList.remove('active'); }); + var enabledNotification = document.getElementById('settings_' + groupId + '_enabled'); + enabledNotification.addEventListener('click', function() { mailSetting.classList.add('active'); }); + + var mailValue = DOMTraverse.childByTag(mailSetting, 'INPUT'); + + var button = DOMTraverse.childByTag(mailSetting, 'A'); + button.setAttribute('data-object-id', groupId); + button.addEventListener('click', _callbackClick); + + _data.set(groupId, { + button: button, + dropdownMenu: null, + mailSetting: mailSetting, + mailValue: mailValue + }); + }, + + /** + * Creates and displays the email type dropdown. + * + * @param {Object} event event object + */ + _click: function(event) { + event.preventDefault(); + + var button = event.currentTarget; + var objectId = ~~button.getAttribute('data-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, true); + } + else { + var items = DOMTraverse.childrenByTag(data.dropdownMenu, 'LI'), value = data.mailValue.value; + for (var i = 0; i < 4; i++) { + items[i].classList[(items[i].getAttribute('data-value') === value) ? 'add' : 'remove']('active'); + } + } + }, + + /** + * Creates the email type dropdown. + * + * @param {integer} objectId notification event id + * @param {string} initialValue initial email type + * @returns {Element} dropdown menu object + */ + _createDropdown: function(objectId, initialValue) { + var dropdownMenu = document.createElement('ul'); + dropdownMenu.className = 'dropdownMenu'; + dropdownMenu.setAttribute('data-object-id', objectId); + + var link, listItem, value, items = ['instant', 'daily', 'divider', 'none']; + for (var i = 0; i < 4; i++) { + value = items[i]; + + listItem = document.createElement('li'); + if (value === 'divider') { + listItem.className = 'dropdownDivider'; + } + else { + link = document.createElement('a'); + link.textContent = Language.get('wcf.user.notification.mailNotificationType.' + value); + listItem.appendChild(link); + listItem.setAttribute('data-value', value); + listItem.addEventListener('click', _callbackSelectType); + + if (initialValue === value) { + listItem.className = 'active'; + } + } + + dropdownMenu.appendChild(listItem); + } + + return dropdownMenu; + }, + + /** + * Sets the selected email notification type. + * + * @param {Object} event event object + */ + _selectType: function(event) { + var value = event.currentTarget.getAttribute('data-value'); + var groupId = ~~event.currentTarget.parentNode.getAttribute('data-object-id'); + + var data = _data.get(groupId); + data.mailValue.value = value; + data.mailSetting.querySelector('span.title').textContent = Language.get('wcf.user.notification.mailNotificationType.' + value); + + data.button.classList[(value === 'none') ? 'remove' : 'add']('yellow'); + data.button.classList[(value === 'none') ? 'remove' : 'add']('active'); + } + }; + + return ControllerUserNotificationSettings; +}); diff --git a/wcfsetup/install/files/js/WoltLab/WCF/UI/Dropdown/Simple.js b/wcfsetup/install/files/js/WoltLab/WCF/UI/Dropdown/Simple.js index 1e8c4726af..ca345a62c5 100644 --- a/wcfsetup/install/files/js/WoltLab/WCF/UI/Dropdown/Simple.js +++ b/wcfsetup/install/files/js/WoltLab/WCF/UI/Dropdown/Simple.js @@ -98,7 +98,7 @@ define( button.setAttribute('data-target', containerId); if (isLazyInitialization) { - Core.triggerEvent(button, 'click'); + setTimeout(function() { Core.triggerEvent(button, 'click'); }, 10); } }, diff --git a/wcfsetup/install/files/style/form.less b/wcfsetup/install/files/style/form.less index cace6b93a0..1f653fe4c2 100644 --- a/wcfsetup/install/files/style/form.less +++ b/wcfsetup/install/files/style/form.less @@ -619,29 +619,34 @@ select > option { } } -/* BooleanUserGroupOptionType */ -.optionTypeBoolean { - display: flex; +.flexibleButtonGroup { + display: inline-flex; > li { border: 1px solid @wcfContainerBorderColor; display: flex; - flex: 0 1 100px; + flex: 1 auto; + overflow: hidden; &:not(:last-child) { border-right-width: 0; } + &.spaceAfter + li, &:first-child { - border-radius: 3px 0 0 3px; + border-bottom-left-radius: 3px; + border-top-left-radius: 3px; } + &.spaceAfter, &:last-child { - border-radius: 0 3px 3px 0; + border-bottom-right-radius: 3px; + border-top-right-radius: 3px; } - &:hover > label { - opacity: 1 !important; + &.spaceAfter { + border-right-width: 1px; + margin-right: @wcfGapMedium; } > input { @@ -653,54 +658,65 @@ select > option { &:checked + label { opacity: 1; - - &.yes { - background-color: rgb(223, 240, 216); - color: rgb(60, 118, 61); - - > .icon { - color: rgb(60, 118, 61); - } - } - - &.no { - background-color: rgb(242, 222, 222); - color: rgb(169, 68, 66); - - > .icon { - color: rgb(169, 68, 66); - } - } - - &.never { - background-color: rgb(252, 248, 227); - color: rgb(138, 109, 59); - - > .icon { - color: rgb(138, 109, 59); - } - } } } - > label { + > a, + > label{ + color: @wcfColor; cursor: pointer; - flex: 1 auto; font-size: .85rem; - padding: @wcfGapTiny; + opacity: .6; + padding: @wcfGapTiny @wcfGapSmall; text-align: center; transition: all .3s linear; + &:hover { + opacity: 1 !important; + } + > .icon { cursor: pointer !important; } } + + > a { + &.active, + &:hover { + opacity: 1; + text-decoration: none; + } + } + + > input:checked + label.green, + > a.active.green { + background-color: rgb(223, 240, 216); + color: rgb(60, 118, 61); + + > .icon { + color: rgb(60, 118, 61); + } + } + + > input:checked + label.red, + > a.active.red { + background-color: rgb(242, 222, 222); + color: rgb(169, 68, 66); + + > .icon { + color: rgb(169, 68, 66); + } + } + + > input:checked + label.yellow, + > a.active.yellow { + background-color: rgb(252, 248, 227); + color: rgb(138, 109, 59); + + > .icon { + color: rgb(138, 109, 59); + } + } } } - -@media only screen and (max-width: 800px) { - .optionTypeBoolean > li { - flex: 1; - } -} \ No newline at end of file diff --git a/wcfsetup/install/files/style/user.less b/wcfsetup/install/files/style/user.less index 200358c3fd..8f20b11d3b 100644 --- a/wcfsetup/install/files/style/user.less +++ b/wcfsetup/install/files/style/user.less @@ -355,6 +355,17 @@ } } +/* user notification settings */ +#notificationSettings .notificationSettingsEmail { + &:not(.active) { + display: none; + } + + &.dropdownOpen > a { + opacity: 1; + } +} + .dashboardBoxRecentActivityHeadline { overflow: visible; position: relative; diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml index 246ec3c739..efe52883ef 100644 --- a/wcfsetup/install/lang/de.xml +++ b/wcfsetup/install/lang/de.xml @@ -3185,6 +3185,9 @@ Möchten Sie diese E-Mail-Benachrichtigung in Zukunft nicht mehr erhalten, könn + + + diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml index e4c900f41f..5044b0bd43 100644 --- a/wcfsetup/install/lang/en.xml +++ b/wcfsetup/install/lang/en.xml @@ -3176,6 +3176,9 @@ If you do not want to receive further email notifications for this event, you ca + + + -- 2.20.1