-{include file='documentHeader'}
+{capture assign='pageTitle'}{lang}wcf.user.menu.settings{/lang}: {lang}wcf.user.notification.notifications{/lang} - {lang}wcf.user.menu.settings{/lang}{/capture}
-<head>
- <title>{lang}wcf.user.menu.settings{/lang}: {lang}wcf.user.notification.notifications{/lang} - {lang}wcf.user.menu.settings{/lang} - {PAGE_TITLE|language}</title>
-
- {include file='headInclude'}
-
- <script data-relocate="true">
- //<![CDATA[
- $(function() {
- $('#notificationSettings > fieldset > dl > dd > label > input').each(function(index, value) {
- var $input = $(value);
- $input.on('click', function(event) {
- var $input = $(event.currentTarget);
- $input.parents('dd').find('.jsMailNotificationType').toggle();
- });
- if (!$input.is(':checked')) {
- $input.parents('dd').find('.jsMailNotificationType').hide();
- }
- });
- });
- //]]>
- </script>
-</head>
+{capture assign='contentTitle'}{lang}wcf.user.menu.settings{/lang}: {lang}wcf.user.notification.notifications{/lang}{/capture}
-<body id="tpl{$templateName|ucfirst}" data-template="{$templateName}" data-application="{$templateNameApplication}">
+{capture assign='contentDescription'}{lang}wcf.user.notification.notifications.description{/lang}{/capture}
{include file='userMenuSidebar'}
-{include file='header' sidebarOrientation='left'}
-
-<header class="boxHeadline">
- <h1>{lang}wcf.user.menu.settings{/lang}: {lang}wcf.user.notification.notifications{/lang}</h1>
-</header>
-
-{include file='userNotice'}
+{include file='header'}
{include file='formError'}
<p class="success">{lang}wcf.global.success.edit{/lang}</p>
{/if}
-<div class="contentNavigation">
- {hascontent}
- <nav>
- <ul>
- {content}
- {event name='contentNavigationButtons'}
- {/content}
- </ul>
- </nav>
- {/hascontent}
-</div>
-
<form method="post" action="{link controller='NotificationSettings'}{/link}">
- <div class="container containerPadding marginTop" id="notificationSettings">
+ <div id="notificationSettings">
{foreach from=$events key='eventCategory' item='eventList'}
- <fieldset>
- <legend>{lang}wcf.user.notification.{$eventCategory}{/lang}</legend>
+ <section class="section">
+ <h2 class="sectionTitle">{lang}wcf.user.notification.{$eventCategory}{/lang}</h2>
<dl>
{foreach from=$eventList item=event}
+ <dt>{lang}wcf.user.notification.{$event->objectType}.{$event->eventName}{/lang}</dt>
<dd>
- <label><input type="checkbox" name="settings[{@$event->eventID}][enabled]" value="1"{if !$settings[$event->eventID][enabled]|empty} checked="checked"{/if} /> {lang}wcf.user.notification.{$event->objectType}.{$event->eventName}{/lang}</label>
- {hascontent}<small>{content}{lang __optional=true}wcf.user.notification.{$event->objectType}.{$event->eventName}.description{/lang}{/content}</small>{/hascontent}
- {if $event->supportsEmailNotification()}
- <small class="jsMailNotificationType">
- <select name="settings[{@$event->eventID}][mailNotificationType]">
- <option value="none">{lang}wcf.user.notification.mailNotificationType.none{/lang}</option>
- <option value="instant"{if $settings[$event->eventID][mailNotificationType] == 'instant'} selected="selected"{/if}>{lang}wcf.user.notification.mailNotificationType.instant{/lang}</option>
- <option value="daily"{if $settings[$event->eventID][mailNotificationType] == 'daily'} selected="selected"{/if}>{lang}wcf.user.notification.mailNotificationType.daily{/lang}</option>
- </select>
- </small>
- {else}
- <small class="jsMailNotificationType">{lang}wcf.user.notification.mailNotificationType.notSupported{/lang}</small>
- {/if}
+ <ol class="flexibleButtonGroup" data-object-id="{@$event->eventID}">
+ <li>
+ <input type="radio" id="settings_{@$event->eventID}_disabled" name="settings[{@$event->eventID}][enabled]" value="0"{if $settings[$event->eventID][enabled]|empty} checked="checked"{/if}>
+ <label for="settings_{@$event->eventID}_disabled" class="red">
+ <span class="icon icon16 fa-times"></span>
+ {lang}wcf.user.notification.notifications.disabled{/lang}
+ </label>
+ </li>
+ <li class="spaceAfter">
+ <input type="radio" id="settings_{@$event->eventID}_enabled" name="settings[{@$event->eventID}][enabled]" value="1"{if !$settings[$event->eventID][enabled]|empty} checked="checked"{/if}>
+ <label for="settings_{@$event->eventID}_enabled" class="green">
+ <span class="icon icon16 fa-bell"></span>
+ {lang}wcf.user.notification.notifications.enabled{/lang}
+ </label>
+ </li>
+ {if $event->supportsEmailNotification()}
+ <li class="notificationSettingsEmail{if !$settings[$event->eventID][enabled]|empty} active{/if}">
+ <input type="hidden" id="settings_{$event->eventID}_mailNotificationType" name="settings[{@$event->eventID}][mailNotificationType]" value="{$settings[$event->eventID][mailNotificationType]}">
+ <a{if $settings[$event->eventID][mailNotificationType] !== 'none'} class="active yellow"{/if}>
+ <span class="icon icon16 fa-envelope-o"></span>
+ <span class="title">{lang}wcf.user.notification.mailNotificationType.{$settings[$event->eventID][mailNotificationType]}{/lang}</span>
+ <span class="icon icon16 fa-caret-down"></span>
+ </a>
+ </li>
+ {/if}
+ </ol>
</dd>
{/foreach}
</dl>
- </fieldset>
+ </section>
{/foreach}
- {event name='fieldsets'}
+ {event name='sections'}
</div>
<div class="formSubmit">
</div>
</form>
-{include file='footer'}
+<script data-relocate="true">
+ require(['Language', 'WoltLab/WCF/Controller/User/Notification/Settings'], function(Language, ControllerUserNotificationSettings) {
+ Language.addObject({
+ 'wcf.user.notification.mailNotificationType.daily': '{lang}wcf.user.notification.mailNotificationType.daily{/lang}',
+ 'wcf.user.notification.mailNotificationType.instant': '{lang}wcf.user.notification.mailNotificationType.instant{/lang}',
+ 'wcf.user.notification.mailNotificationType.none': '{lang}wcf.user.notification.mailNotificationType.none{/lang}'
+ });
+
+ ControllerUserNotificationSettings.setup();
+ });
+</script>
-</body>
-</html>
+{include file='footer'}