Replace legacy icons

diff --git a/com.woltlab.wcf/templates/notificationSettings.tpl b/com.woltlab.wcf/templates/notificationSettings.tpl
index 433e344f009da6079343e574468d6a591ff8b0af..30357d5aeffadd0e6d4c8dcf10f668112418f454 100644 (file)
--- a/com.woltlab.wcf/templates/notificationSettings.tpl
+++ b/com.woltlab.wcf/templates/notificationSettings.tpl
@@ -29,19 +29,23 @@
                                                <div class="notificationSettingsState">
                                                        <label>
                                                                <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>
+                                                               {icon size=24 name='bell'}
+                                                               {icon size=24 name='bell-slash'}
                                                        </label>
                                                </div>
                                                <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{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}
-                                                                               <span class="icon icon24 {if $settings[$event->eventID][mailNotificationType] === 'instant'}fa-flash{else}fa-clock-o{/if} green jsIconNotificationSettingsEmailType"></span>
-                                                                       {/if}
+                                                                       <span class="jsIconNotificationSettingsEmailType">
+                                                                               {if $settings[$event->eventID][mailNotificationType] === 'none'}
+                                                                                       {icon size=24 name='xmark' type='solid'}
+                                                                               {else if $settings[$event->eventID][mailNotificationType] === 'instant'}
+                                                                                       {icon size=24 name='bolt' type='solid'}
+                                                                               {else}
+                                                                                       {icon size=24 name='clock'}
+                                                                               {/if}
+                                                                       </span>
                                                                        {icon size=16 name='caret-down' type='solid'}
                                                                </a>
                                                        {/if}

diff --git a/ts/WoltLabSuite/Core/Controller/User/Notification/Settings.ts b/ts/WoltLabSuite/Core/Controller/User/Notification/Settings.ts
index 0867f886439980c511fe2c57719a5b2b3915dcd0..cf3c4f08ef541b90ab42e240e0e79235177d8705 100644 (file)
--- a/ts/WoltLabSuite/Core/Controller/User/Notification/Settings.ts
+++ b/ts/WoltLabSuite/Core/Controller/User/Notification/Settings.ts
@@ -97,20 +97,18 @@ function setEmailType(event: Event): void {
   ) as HTMLLIElement;
   button.title = Language.get(`wcf.user.notification.mailNotificationType.${value}`);
 
-  const icon = button.querySelector(".jsIconNotificationSettingsEmailType") as HTMLSpanElement;
-  icon.classList.remove("fa-clock-o", "fa-flash", "fa-times", "green", "red");
-
+  const icon = button.querySelector(".jsIconNotificationSettingsEmailType fa-icon") as FaIcon;
   switch (value) {
     case "daily":
-      icon.classList.add("fa-clock-o", "green");
+      icon.setIcon("clock", false);
       break;
 
     case "instant":
-      icon.classList.add("fa-flash", "green");
+      icon.setIcon("bolt", true);
       break;
 
     case "none":
-      icon.classList.add("fa-times", "red");
+      icon.setIcon("xmark", true);
       break;
   }
 

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 3f349bbd3dd1fb68506784336b30ffe2f5d81700..0696d6c609d3827124081dfb99012eb6e4046149 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/User/Notification/Settings.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/User/Notification/Settings.js
@@ -81,17 +81,16 @@ define(["require", "exports", "tslib", "../../../Language", "../../../Ui/Dropdow
         getCurrentEmailTypeInputElement().value = value;
         const button = document.querySelector(`.notificationSettingsEmailType[data-object-id="${_objectId}"]`);
         button.title = Language.get(`wcf.user.notification.mailNotificationType.${value}`);
-        const icon = button.querySelector(".jsIconNotificationSettingsEmailType");
-        icon.classList.remove("fa-clock-o", "fa-flash", "fa-times", "green", "red");
+        const icon = button.querySelector(".jsIconNotificationSettingsEmailType fa-icon");
         switch (value) {
             case "daily":
-                icon.classList.add("fa-clock-o", "green");
+                icon.setIcon("clock", false);
                 break;
             case "instant":
-                icon.classList.add("fa-flash", "green");
+                icon.setIcon("bolt", true);
                 break;
             case "none":
-                icon.classList.add("fa-times", "red");
+                icon.setIcon("xmark", true);
                 break;
         }
         _objectId = 0;

diff --git a/wcfsetup/install/files/style/font-awesome/000-woltlab.scss b/wcfsetup/install/files/style/font-awesome/000-woltlab.scss
index 901ca243de96042341c595c36435676a6807944f..6b2ed6b0444caf7d2ac8907bb85c97f4d42c0a49 100644 (file)
--- a/wcfsetup/install/files/style/font-awesome/000-woltlab.scss
+++ b/wcfsetup/install/files/style/font-awesome/000-woltlab.scss
@@ -37,6 +37,7 @@ fa-icon {
   display: inline-flex;
   height: var(--icon-size);
   justify-content: center;
+  pointer-events: none;
   width: calc(var(--icon-size) * 1.25);
 
   &:not(:upgraded) {

diff --git a/wcfsetup/install/files/style/ui/notification.scss b/wcfsetup/install/files/style/ui/notification.scss
index 0a74af96775848f30b7d505a118539df772d7d95..a5c5a665b38e4e4b16b21aa953f24fe6723af49f 100644 (file)
--- a/wcfsetup/install/files/style/ui/notification.scss
+++ b/wcfsetup/install/files/style/ui/notification.scss
@@ -34,8 +34,7 @@
 
 .notificationSettingsEvent:hover + .notificationSettingsState,
 .notificationSettingsState > label:hover {
-       .fa-bell,
-       .fa-bell-slash {
+       fa-icon {
                transform: scale(1.2);
        }
 }
@@ -54,6 +53,10 @@
                margin: 0 10px;
        }
 
+       label {
+               cursor: pointer;
+       }
+
        input[type="checkbox"] {
                opacity: 0;
                position: absolute;
@@ -63,14 +66,22 @@
                        transform: scale(1.2);
                }
 
-               &:not(:checked) + .fa-bell {
+               &:not(:checked) + fa-icon[name="bell"] {
                        display: none;
                }
 
-               &:checked ~ .fa-bell-slash {
+               &:checked ~ fa-icon[name="bell-slash"] {
                        display: none;
                }
        }
+
+       fa-icon[name="bell"] {
+               color: rgba(0, 153, 0, 1);
+       }
+
+       fa-icon[name="bell-slash"] {
+               color: rgba(204, 0, 0, 1);
+       }
 }
 
 .notificationSettingsEmail {
@@ -87,4 +98,13 @@
                filter: grayscale(1);
                opacity: 0.75;
        }
+
+       fa-icon[name="xmark"] {
+               color: rgba(204, 0, 0, 1);
+       }
+
+       fa-icon[name="bolt"],
+       fa-icon[name="clock"] {
+               color: rgba(0, 153, 0, 1);
+       }
 }