Added proper support for font size and color
[GitHub/WoltLab/WCF.git] / com.woltlab.wcf / templates / notificationSettings.tpl
index 98ba80b80abcd19c873a6b095cfa3e51aedab9c3..566d6a8b812c6e86af5a7c573fb963a97dfd349d 100644 (file)
@@ -1,39 +1,12 @@
-{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'}