Use actual icons instead of pseudo elements

diff --git a/com.woltlab.wcf/templates/__menu.tpl b/com.woltlab.wcf/templates/__menu.tpl
index 5bdd92d00db4a1fdf96d092d29bff0fd408d455a..0a7af0f291d82826e70a5b325e2cbca1be03e64c 100644 (file)
--- a/com.woltlab.wcf/templates/__menu.tpl
+++ b/com.woltlab.wcf/templates/__menu.tpl
@@ -9,6 +9,9 @@
                                        {if $menuItemNode->getOutstandingItems() > 0}
                                                <span class="boxMenuLinkOutstandingItems badge badgeUpdate" aria-label="{lang}wcf.page.menu.outstandingItems{/lang}">{#$menuItemNode->getOutstandingItems()}</span>
                                        {/if}
+                                       {if $menuItemNode->hasChildren()}
+                                               {icon size=16 name='caret-down' type='solid'}
+                                       {/if}
                                </a>
                                
                                {if $menuItemNode->hasChildren()}<ol class="boxMenuDepth{@$menuItemNode->getDepth()}">{else}</li>{/if}

diff --git a/com.woltlab.wcf/templates/pageHeaderSearch.tpl b/com.woltlab.wcf/templates/pageHeaderSearch.tpl
index 232db6834ef293b01925ac7a355cc0d90d3964b2..872c572850395e7a34e2311ace6d3fc4bb6da4bb 100644 (file)
--- a/com.woltlab.wcf/templates/pageHeaderSearch.tpl
+++ b/com.woltlab.wcf/templates/pageHeaderSearch.tpl
@@ -19,15 +19,18 @@
 
 {event name='settings'}
 
-<a href="#" id="pageHeaderSearchMobile" class="pageHeaderSearchMobile" role="button" tabindex="0" aria-expanded="false" aria-label="{lang}wcf.global.search{/lang}">
+<button id="pageHeaderSearchMobile" class="pageHeaderSearchMobile" aria-expanded="false" aria-label="{lang}wcf.global.search{/lang}">
        {icon size=32 name='magnifying-glass'}
-</a>
+</button>
 
 <div id="pageHeaderSearch" class="pageHeaderSearch">
        <form method="post" action="{link controller='Search'}{/link}">
                <div id="pageHeaderSearchInputContainer" class="pageHeaderSearchInputContainer">
                        <div class="pageHeaderSearchType dropdown">
-                               <a href="#" class="button dropdownToggle" id="pageHeaderSearchTypeSelect"><span class="pageHeaderSearchTypeLabel">{@$__searchTypeLabel}</span></a>
+                               <a href="#" class="button dropdownToggle" id="pageHeaderSearchTypeSelect">
+                                       <span class="pageHeaderSearchTypeLabel">{@$__searchTypeLabel}</span>
+                                       {icon size=16 name='caret-down' type='solid'}
+                               </a>
                                <ul class="dropdownMenu">
                                        <li><a href="#" data-extended-link="{link controller='Search'}extended=1{/link}" data-object-type="everywhere">{lang}wcf.search.type.everywhere{/lang}</a></li>
                                        <li class="dropdownDivider"></li>

diff --git a/ts/WoltLabSuite/Core/Ui/Search.ts b/ts/WoltLabSuite/Core/Ui/Search.ts
index 0c705bca0d8b16d6cd2119f537730c1e79bebfd9..8552eb5954250b10dd407ed84e86ccc1536da70f 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Search.ts
+++ b/ts/WoltLabSuite/Core/Ui/Search.ts
@@ -89,6 +89,7 @@ function initMobileSearch(): void {
       closeSearch();
 
       searchButton.setAttribute("aria-expanded", "false");
+      searchButton.querySelector("fa-icon")!.setIcon("magnifying-glass");
     } else {
       // iOS Safari behaves unpredictable when the keyboard focus
       // is moved into a HTML element that is inside a parent with
@@ -109,6 +110,7 @@ function initMobileSearch(): void {
       }
 
       searchButton.setAttribute("aria-expanded", "true");
+      searchButton.querySelector("fa-icon")!.setIcon("xmark");
     }
   });
 
@@ -121,6 +123,7 @@ function initMobileSearch(): void {
       closeSearch();
 
       searchButton.setAttribute("aria-expanded", "false");
+      searchButton.querySelector("fa-icon")!.setIcon("magnifying-glass");
     }
   });
 }

diff --git a/wcfsetup/install/files/acp/templates/pageHeaderSearch.tpl b/wcfsetup/install/files/acp/templates/pageHeaderSearch.tpl
index e132e52e736b82091b80d924277d22b6da44efe7..8126246e696e141fbe2a7ec2f8d65d18b5b5331a 100644 (file)
--- a/wcfsetup/install/files/acp/templates/pageHeaderSearch.tpl
+++ b/wcfsetup/install/files/acp/templates/pageHeaderSearch.tpl
@@ -1,6 +1,6 @@
-<a href="#" id="pageHeaderSearchMobile" class="pageHeaderSearchMobile" role="button" tabindex="0" aria-expanded="false" aria-label="{lang}wcf.global.search{/lang}">
+<button id="pageHeaderSearchMobile" class="pageHeaderSearchMobile" aria-expanded="false" aria-label="{lang}wcf.global.search{/lang}">
        {icon size=32 name='magnifying-glass'}
-</a>
+</button>
 
 <div id="pageHeaderSearch" class="pageHeaderSearch" data-disable-auto-focus="true">
        <div class="pageHeaderSearchInputContainer">

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js
index bd561ab55afc42e53be82c8cb5c4c9b05402b884..56b03ee12ce347d9a7253a0b32ef60a04b20c994 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search.js
@@ -78,6 +78,7 @@ define(["require", "exports", "tslib", "../Event/Handler", "./Alignment", "./Clo
             if (searchButton.getAttribute("aria-expanded") === "true") {
                 closeSearch();
                 searchButton.setAttribute("aria-expanded", "false");
+                searchButton.querySelector("fa-icon").setIcon("magnifying-glass");
             }
             else {
                 // iOS Safari behaves unpredictable when the keyboard focus
@@ -95,6 +96,7 @@ define(["require", "exports", "tslib", "../Event/Handler", "./Alignment", "./Clo
                     document.body.scrollTop = 0;
                 }
                 searchButton.setAttribute("aria-expanded", "true");
+                searchButton.querySelector("fa-icon").setIcon("xmark");
             }
         });
         _pageHeaderSearch.addEventListener("click", (event) => {
@@ -103,6 +105,7 @@ define(["require", "exports", "tslib", "../Event/Handler", "./Alignment", "./Clo
                 event.preventDefault();
                 closeSearch();
                 searchButton.setAttribute("aria-expanded", "false");
+                searchButton.querySelector("fa-icon").setIcon("magnifying-glass");
             }
         });
     }

diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index a946cbd84c9dd079709a177de2eb2cd335067ac9..e92b5db1e7afde50fd8c30bbee79d2b304319f96 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -101,19 +101,6 @@
                        > a[aria-expanded="true"] ~ .boxMenuDepth1 {
                                visibility: visible;
                        }
-
-                       > a {
-                               &::after {
-                                       content: $fa-var-angle-down;
-                                       display: block;
-                                       font-family: "FontAwesome";
-                                       font-size: 14px;
-                                       height: 24px;
-                                       line-height: 24px;
-                                       margin-left: 5px;
-                                       width: 10px;
-                               }
-                       }
                }
 
                .boxMenuDepth1 {
@@ -351,20 +338,11 @@
                        color: $wcfHeaderMenuLink;
                        display: flex;
                        max-width: 200px;
-                       min-width: 140px;
+                       min-width: 130px;
                        padding: 4px 8px;
                        position: relative;
                        text-align: left;
 
-                       &::after {
-                               color: inherit;
-                               content: $fa-var-caret-down;
-                               flex: 1;
-                               font-family: FontAwesome;
-                               margin-left: 10px;
-                               text-align: right;
-                       }
-
                        > .pageHeaderSearchTypeLabel {
                                flex: 0 auto;
                                overflow: hidden;
@@ -493,15 +471,6 @@
 
        .pageHeaderSearchMobile {
                grid-area: search;
-
-               .icon::before {
-                       color: $wcfHeaderLink;
-               }
-
-               &[aria-expanded="true"] .icon::before {
-                       color: $wcfHeaderLinkActive;
-                       content: $fa-var-times;
-               }
        }
 
        .userPanel {