<span>{lang}wcf.article.button.sort{/lang}</span>
</a>
<ul class="dropdownMenu">
- <li><a href="{link controller='ArticleList'}pageNo={@$pageNo}{if $user}&userID={@$user->userID}{/if}&sortField=title&sortOrder={if $sortField == 'title' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.title{/lang}{if $sortField == 'title'} <span class="icon icon16 fa-caret-{if $sortOrder == 'ASC'}up{else}down{/if}"></span>{/if}</a></li>
- <li><a href="{link controller='ArticleList'}pageNo={@$pageNo}{if $user}&userID={@$user->userID}{/if}&sortField=time&sortOrder={if $sortField == 'time' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.date{/lang}{if $sortField == 'time'} <span class="icon icon16 fa-caret-{if $sortOrder == 'ASC'}up{else}down{/if}"></span>{/if}</a></li>
+ <li>
+ <a href="{link controller='ArticleList'}pageNo={@$pageNo}{if $user}&userID={@$user->userID}{/if}&sortField=title&sortOrder={if $sortField == 'title' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">
+ {lang}wcf.global.title{/lang}
+ {if $sortField == 'title'}
+ {if $sortOrder === 'ASC'}
+ {icon size=16 name='caret-up' solid}
+ {else}
+ {icon size=16 name='caret-down' solid}
+ {/if}
+ {/if}
+ </a>
+ </li>
+ <li>
+ <a href="{link controller='ArticleList'}pageNo={@$pageNo}{if $user}&userID={@$user->userID}{/if}&sortField=time&sortOrder={if $sortField == 'time' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">
+ {lang}wcf.global.date{/lang}
+ {if $sortField == 'time'}
+ {if $sortOrder === 'ASC'}
+ {icon size=16 name='caret-up' solid}
+ {else}
+ {icon size=16 name='caret-down' solid}
+ {/if}
+ {/if}
+ </a>
+ </li>
{event name='sortOptions'}
</ul>
<div class="section sectionContainerList">
<div class="containerListDisplayOptions">
<div class="containerListSortOptions">
- <a rel="nofollow" href="{link controller='MembersList' id=$searchID}pageNo={@$pageNo}&sortField={$sortField}&sortOrder={if $sortOrder == 'ASC'}DESC{else}ASC{/if}{if $letter}&letter={$letter}{/if}{/link}">
- <span class="icon icon16 fa-sort-amount-{$sortOrder|strtolower} jsTooltip" title="{lang}wcf.global.sorting{/lang} ({lang}wcf.global.sortOrder.{if $sortOrder === 'ASC'}ascending{else}descending{/if}{/lang})"></span>
+ <a
+ rel="nofollow"
+ class="jsTooltip"
+ href="{link controller='MembersList' id=$searchID}pageNo={@$pageNo}&sortField={$sortField}&sortOrder={if $sortOrder == 'ASC'}DESC{else}ASC{/if}{if $letter}&letter={$letter}{/if}{/link}"
+ title="{lang}wcf.global.sorting{/lang} ({lang}wcf.global.sortOrder.{if $sortOrder === 'ASC'}ascending{else}descending{/if}{/lang})"
+ >
+ {if $sortOrder === 'ASC'}
+ {icon size=16 name='arrow-down-wide-short'}
+ {else}
+ {icon size=16 name='arrow-down-short-wide'}
+ {/if}
</a>
<span class="dropdown">
<span class="dropdownToggle">{lang}wcf.user.sortField.{$sortField}{/lang}</span>
<li class="columnSort">
<ul class="inlineList">
<li>
- <a href="{link controller='ModerationList'}definitionID={@$definitionID}&assignedUserID={@$assignedUserID}&status={@$status}&pageNo={@$pageNo}&sortField={$sortField}&sortOrder={if $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">
- <span class="icon icon16 fa-sort-amount-{$sortOrder|strtolower} jsTooltip" title="{lang}wcf.search.sortBy{/lang} ({lang}wcf.global.sortOrder.{if $sortOrder === 'ASC'}ascending{else}descending{/if}{/lang})"></span>
+ <a
+ class="jsTooltip"
+ href="{link controller='ModerationList'}definitionID={@$definitionID}&assignedUserID={@$assignedUserID}&status={@$status}&pageNo={@$pageNo}&sortField={$sortField}&sortOrder={if $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}"
+ title="{lang}wcf.search.sortBy{/lang} ({lang}wcf.global.sortOrder.{if $sortOrder === 'ASC'}ascending{else}descending{/if}{/lang})"
+ >
+ {if $sortOrder === 'ASC'}
+ {icon size=16 name='arrow-down-wide-short'}
+ {else}
+ {icon size=16 name='arrow-down-short-wide'}
+ {/if}
</a>
</li>
<li>
{foreach from=$exceptions item='exception' key='exceptionKey'}
<section id="{$exceptionKey}" class="section exceptionContainer{if $exception[collapsed]|isset && $exception[collapsed]} collapsed{/if}">
<h2 class="sectionTitle">
- <span class="collapsibleButton jsTooltip pointer icon icon16 fa-chevron-{if $exception[collapsed]|isset && $exception[collapsed]}right{else}down{/if}" title="{lang}wcf.global.button.collapsible{/lang}"></span>
+ <button class="collapsibleButton jsTooltip" title="{lang}wcf.global.button.collapsible{/lang}">
+ {if $exception[collapsed]|isset && $exception[collapsed]}
+ {icon size=16 name='chevron-right'}
+ {else}
+ {icon size=16 name='chevron-down'}
+ {/if}
+ </button>
{$exception[message]}
</h2>
{if $menuItemNode->canDisable()}
{objectAction action="toggle" isDisabled=$menuItemNode->isDisabled}
{else}
- <span class="icon icon16 fa-{if !$menuItemNode->isDisabled}check-{/if}square-o disabled" title="{lang}wcf.global.button.{if $menuItemNode->isDisabled}enable{else}disable{/if}{/lang}"></span>
+ <span class="disabled" title="{lang}wcf.global.button.{if $menuItemNode->isDisabled}enable{else}disable{/if}{/lang}">
+ {if $menuItemNode->isDisabled}
+ {icon size=16 name='square'}
+ {else}
+ {icon size=16 name='square-check'}
+ {/if}
+ </span>
{/if}
<a href="{link controller='MenuItemEdit' id=$menuItemNode->itemID}{/link}" class="jsTooltip" title="{lang}wcf.global.button.edit{/lang}">{icon size=16 name='pencil'}</a>
{if $menuItemNode->canDelete()}
<tr>
<td class="columnTitle columnPackageName"><span{if $packageValidationArchive->getDepth()} style="padding-left: {@$packageValidationArchive->getDepth() * 14}px"{/if}>{$packageValidationArchive->getArchive()->getLocalizedPackageInfo('packageName')}</span></td>
<td class="columnText columnPackage">{$packageValidationArchive->getArchive()->getPackageInfo('name')}</td>
- <td class="columnIcon columnStatus"><span class="icon icon16 {if $exceptionMessage}fa-times-circle red{else}fa-check-circle green{/if}"></span></td>
+ <td class="columnIcon columnStatus">
+ {if $exceptionMessage}
+ {icon size=16 name='circle-xmark'}
+ {else}
+ {icon size=16 name='circle-check'}
+ {/if}
+ </td>
</tr>
{if $exceptionMessage}
{if $page->canDisable()}
{objectAction action="toggle" isDisabled=$page->isDisabled}
{else}
- <span class="icon icon16 fa-{if !$page->isDisabled}check-{/if}square-o disabled" title="{lang}wcf.global.button.{if !$page->isDisabled}disable{else}enable{/if}{/lang}"></span>
+ <span class="disabled" title="{lang}wcf.global.button.{if !$page->isDisabled}disable{else}enable{/if}{/lang}">
+ {if $page->isDisabled}
+ {icon size=16 name='square'}
+ {else}
+ {icon size=16 name='square-checl'}
+ {/if}
+ </span>
{/if}
<a href="{link controller='PageEdit' id=$page->pageID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip">{icon size=16 name='pencil'}</a>
{if $page->canDelete()}
<span class="sortableNodeHandle">
{icon size=16 name='arrows-up-down-left-right'}
</span>
- <a href="{link controller='SmileyEdit' id=$smiley->smileyID}{/link}"><span title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip icon icon16 fa-pencil"></span></a>
+ <a href="{link controller='SmileyEdit' id=$smiley->smileyID}{/link}" class="jsTooltip" title="{lang}wcf.global.button.edit{/lang}">
+ {icon size=16 name='pencil'}
+ </a>
{objectAction action="delete" objectTitle=$smiley->smileyCode}
{event name='itemButtons'}
<li><a href="{link controller='StyleExport' id=$style->styleID}{/link}" title="{lang}wcf.acp.style.exportStyle{/lang}" class="jsTooltip">{icon size=16 name='download'} <span class="invisible">{lang}wcf.acp.style.exportStyle{/lang}</span></a></li>
{if !$style->isDefault}
- <li><a href="#" title="{lang}wcf.global.button.{if $style->isDisabled}enable{else}disable{/if}{/lang}" class="jsTooltip"><span class="icon icon16 fa-{if !$style->isDisabled}check-{/if}square-o jsObjectAction" data-object-action="toggle"></span> <span class="invisible">{lang}wcf.global.button.{if $style->isDisabled}enable{else}disable{/if}{/lang}</span></a></li>
- <li><a href="#" title="{lang}wcf.acp.style.button.setAsDefault{/lang}" class="jsSetAsDefault jsTooltip">{icon size=16 name='circle-check'} <span class="invisible">{lang}wcf.acp.style.button.setAsDefault{/lang}</span></a></li>
- <li><a href="#" title="{lang}wcf.global.button.delete{/lang}" class="jsDelete jsTooltip" data-confirm-message-html="{lang __encode=true}wcf.acp.style.delete.confirmMessage{/lang}">{icon size=16 name='xmark'} <span class="invisible">{lang}wcf.global.button.delete{/lang}</span></a></li>
+ <li>
+ <button class="jsTooltip jsObjectAction" title="{lang}wcf.global.button.{if $style->isDisabled}enable{else}disable{/if}{/lang}" data-object-action="toggle">
+ {if $style->isDisabled}
+ {icon size=16 name='square'}
+ {else}
+ {icon size=16 name='square-check'}
+ {/if}
+ <span class="invisible">{lang}wcf.global.button.{if $style->isDisabled}enable{else}disable{/if}{/lang}</span>
+ </button>
+ </li>
+ <li>
+ <button class="jsSetAsDefault jsTooltip" title="{lang}wcf.acp.style.button.setAsDefault{/lang}">
+ {icon size=16 name='circle-check'}
+ <span class="invisible">{lang}wcf.acp.style.button.setAsDefault{/lang}</span>
+ </button>
+ </li>
+ <li>
+ <button class="jsDelete jsTooltip" title="{lang}wcf.global.button.delete{/lang}" data-confirm-message-html="{lang __encode=true}wcf.acp.style.delete.confirmMessage{/lang}">
+ {icon size=16 name='xmark'}
+ <span class="invisible">{lang}wcf.global.button.delete{/lang}</span>
+ </button>
+ </li>
{/if}
{event name='itemButtons'}
{event name='userNotice'}
-{capture assign='statusOk'}<span class="icon icon16 fa-check green"></span>{/capture}
-{capture assign='statusSufficient'}<span class="icon icon16 fa-exclamation-triangle orange"></span>{/capture}
-{capture assign='statusInsufficient'}<span class="icon icon16 fa-exclamation-triangle red"></span>{/capture}
+{capture assign='statusOk'}{icon size=16 name='check'}{/capture}
+{capture assign='statusSufficient'}{icon size=16 name='triangle-exclamation'}{/capture}
+{capture assign='statusInsufficient'}{icon size=16 name='triangle-exclamation'}{/capture}
<section class="section">
<h2 class="sectionTitle">{lang}wcf.acp.systemCheck.result{/lang}</h2>
<dl>
<dt>{lang}wcf.acp.user.security.multifactor{/lang}</dt>
<dd>
- <span class="icon icon16 fa-check green"></span> {lang}wcf.acp.user.security.multifactor.active{/lang}
+ {icon size=16 name='check'} {lang}wcf.acp.user.security.multifactor.active{/lang}
<small>{lang}wcf.acp.user.security.multifactor.active.description{/lang}</small>
</dd>
</dl>
{if $action === 'edit' && $ownerGroupID}
<script data-relocate="true">
- (function() {
- var input = elBySel('input[name="groupIDs[]"][value="{@$ownerGroupID}"]');
+ (() => {
+ const input = document.querySelector('input[name="groupIDs[]"][value="{@$ownerGroupID}"]');
if (input) {
- var icon = elCreate('span');
- icon.className = 'icon icon16 fa-shield jsTooltip';
+ const icon = document.createElement("span");
+ icon.innerHTML = '<fa-icon size="16" name="shield"></fa-icon>';
+ icon.classList.add("jsTooltip");
icon.title = '{jslang}wcf.acp.group.type.owner{/jslang}';
- input.parentNode.appendChild(icon);
+ input.parentElement.append(icon);
{if $user->userID == $__wcf->user->userID}
- var shadow = elCreate('input');
+ const shadow = document.createElement("input");
shadow.name = input.name;
- shadow.type = 'hidden';
+ shadow.type = "hidden";
shadow.value = input.value;
- input.parentNode.appendChild(shadow);
+ input.parentElement.append(shadow);
input.disabled = true;
{/if}
}
<td class="columnID columnFailureID">{@$authenticationFailure->failureID}</td>
<td class="columnText columnEnvironment">{lang}wcf.acp.user.authentication.failure.environment.{@$authenticationFailure->environment}{/lang}</td>
<td class="columnTitle columnUsername">
- <span class="icon icon16 fa-{if $authenticationFailure->userID}key{else}user{/if} jsTooltip" title="{lang}wcf.acp.user.authentication.failure.{if $authenticationFailure->userID}password{else}username{/if}{/lang}"></span>
+ <span class="jsTooltip" title="{lang}wcf.acp.user.authentication.failure.{if $authenticationFailure->userID}password{else}username{/if}{/lang}">
+ {if $authenticationFailure->userID}
+ {icon size=16 name='key'}
+ {else}
+ {icon size=16 name='user'}
+ {/if}
+ </span>
{if $authenticationFailure->userID}<a href="{link controller='UserEdit' id=$authenticationFailure->userID}{/link}">{$authenticationFailure->username}</a>{else}{$authenticationFailure->username}{/if}
</td>
<td class="columnDate columnTime">{@$authenticationFailure->time|time}</td>
{$group->getTitle()}
{/if}
{if $group->isOwner()}
- <span class="icon icon16 fa-shield jsTooltip" title="{lang}wcf.acp.group.type.owner{/lang}"></span>
+ <span class="jsTooltip" title="{lang}wcf.acp.group.type.owner{/lang}">
+ {icon size=16 name='shield'}
+ </span>
{/if}
</td>
<td class="columnDigits columnMembers">
{foreach from=$groups item=group}
<dl data-group-id="{@$group->groupID}">
<dt>
- {if VISITOR_USE_TINY_BUILD && $guestGroupID == $group->groupID && $userGroupOption->excludedInTinyBuild}<span class="icon icon16 fa-bolt red jsTooltip" title="{lang}wcf.acp.group.excludedInTinyBuild{/lang}"></span> {/if}
- {if $ownerGroupID == $group->groupID && $userGroupOption->optionName|in_array:$ownerGroupPermissions}<span class="icon icon16 fa-shield jsTooltip" title="{lang}wcf.acp.group.ownerGroupPermission{/lang}"></span> {/if}
+ {if VISITOR_USE_TINY_BUILD && $guestGroupID == $group->groupID && $userGroupOption->excludedInTinyBuild}
+ <span class="jsTooltip" title="{lang}wcf.acp.group.excludedInTinyBuild{/lang}">
+ {icon size=16 name='bolt'}
+ </span>
+ {/if}
+ {if $ownerGroupID == $group->groupID && $userGroupOption->optionName|in_array:$ownerGroupPermissions}
+ <span class="jsTooltip" title="{lang}wcf.acp.group.ownerGroupPermission{/lang}">
+ {icon size=16 name='shield'}
+ </span>
+ {/if}
<label for="userGroupOption{@$group->groupID}">{$group->getTitle()}</label>
</dt>
<dd>
</span>
<span class="userStatusIcons">
- {if $user->banned}<span class="icon icon16 fa-lock jsTooltip jsUserStatusBanned" title="{lang}wcf.user.status.banned{/lang}"></span>{/if}
+ {if $user->banned}
+ <span class="jsTooltip jsUserStatusBanned" title="{lang}wcf.user.status.banned{/lang}">
+ {icon size=16 name='lock'}
+ </span>
+ {/if}
{if $user->activationCode != 0}
- <span class="icon icon16 fa-power-off jsTooltip jsUserStatusIsDisabled" title="{lang}wcf.user.status.isDisabled{/lang}"></span>
+ <span class="jsTooltip jsUserStatusIsDisabled" title="{lang}wcf.user.status.isDisabled{/lang}">
+ {icon size=16 name='power-off'}
+ </span>
{if !$user->getBlacklistMatches()|empty}
- <span class="icon icon16 fa-warning jsTooltip jsUserStatusBlacklistMatches" title="{lang}wcf.user.status.blacklistMatches{/lang}"></span>
+ <span class="jsTooltip jsUserStatusBlacklistMatches" title="{lang}wcf.user.status.blacklistMatches{/lang}">
+ {icon size=16 name='warning'}
+ </span>
{/if}
{/if}
</span>
{icon size=16 name='xmark'}
</span>
{else}
- <a href="{link controller='UserTrophyEdit' id=$userTrophy->userTrophyID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil{if $userTrophy->getTrophy()->awardAutomatically} disabled{/if}"></span></a>
+ <a href="{link controller='UserTrophyEdit' id=$userTrophy->userTrophyID}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip{if $userTrophy->getTrophy()->awardAutomatically} disabled{/if}">
+ {icon size=16 name='pencil'}
+ </a>
{objectAction action="delete" confirmMessage='wcf.acp.trophy.userTrophy.delete.confirmMessage'}
{/if}
</td>
<tbody>
<tr>
<td class="columnIcon">
- <span class="icon icon16 fa-undo disabled"></span>
+ <span class="disabled">
+ {icon size=16 name='arrow-rotate-left'}
+ </span>
<input type="radio" name="oldID" value="current"{if $oldID === 'current'} checked{/if}> <input type="radio" name="newID" value="current"{if $newID === 'current'} checked{/if}>
{event name='rowButtons'}
</td>
{foreach from=$versions item=edit name=edit}
<tr class="jsEditRow">
<td class="columnIcon">
- <span class="icon icon16 fa-undo pointer jsRevertButton jsTooltip" title="{lang}wcf.edit.revert{/lang}" data-object-id="{@$edit->versionID}" data-confirm-message="{lang __encode=true}wcf.edit.revert.sure{/lang}"></span>
+ <button class="jsRevertButton jsTooltip" title="{lang}wcf.edit.revert{/lang}" data-object-id="{@$edit->versionID}" data-confirm-message="{lang __encode=true}wcf.edit.revert.sure{/lang}">
+ {icon size=16 name='arrow-rotate-left'}
+ </button>
<input type="radio" name="oldID" value="{@$edit->versionID}"{if $oldID == $edit->versionID} checked{/if}> <input type="radio" name="newID" value="{@$edit->versionID}"{if $newID == $edit->versionID} checked{/if}>
{event name='rowButtons'}
</td>