<nav class="contentHeaderNavigation">
<ul>
{content}
- {if $__wcf->session->getPermission('user.conversation.canStartConversation')}<li><a href="{link controller='ConversationAdd'}{/link}" title="{lang}wcf.conversation.add{/lang}" class="button buttonPrimary"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.conversation.button.add{/lang}</span></a></li>{/if}
+ {if $__wcf->session->getPermission('user.conversation.canStartConversation')}
+ <li>
+ <a href="{link controller='ConversationAdd'}{/link}" title="{lang}wcf.conversation.add{/lang}" class="button buttonPrimary">
+ {icon name='plus'}
+ <span>{lang}wcf.conversation.button.add{/lang}</span>
+ </a>
+ </li>
+ {/if}
{event name='contentHeaderNavigation'}
{/content}
</ul>
{if $labelID}
{foreach from=$labelList item=label}
{if $label->labelID == $labelID}
- <span class="badge label{if $label->cssClassName} {@$label->cssClassName}{/if}">{$label->label}</span>
+ <span class="badge label{if $label->cssClassName} {$label->cssClassName}{/if}">{$label->label}</span>
{/if}
{/foreach}
{else}
<div class="dropdownMenu">
<ul class="scrollableDropdownMenu">
{foreach from=$labelList item=label}
- <li><a href="{link controller='ConversationList'}{if $filter}filter={@$filter}&{/if}{if !$participants|empty}participants={implode from=$participants item=participant}{$participant|rawurlencode}{/implode}&{/if}sortField={$sortField}&sortOrder={$sortOrder}&pageNo={@$pageNo}&labelID={@$label->labelID}{/link}"><span class="badge label{if $label->cssClassName} {@$label->cssClassName}{/if}" data-css-class-name="{if $label->cssClassName}{@$label->cssClassName}{/if}" data-label-id="{@$label->labelID}">{$label->label}</span></a></li>
+ <li><a href="{link controller='ConversationList'}{if $filter}filter={@$filter}&{/if}{if !$participants|empty}participants={implode from=$participants item=participant}{$participant|rawurlencode}{/implode}&{/if}sortField={$sortField}&sortOrder={$sortOrder}&pageNo={@$pageNo}&labelID={@$label->labelID}{/link}"><span class="badge label{if $label->cssClassName} {@$label->cssClassName}{/if}" data-css-class-name="{if $label->cssClassName}{@$label->cssClassName}{/if}" data-label-id="{$label->labelID}">{$label->label}</span></a></li>
{/foreach}
</ul>
<ul>
</div>
<div class="boxContent">
- <button id="manageLabel">{lang}wcf.conversation.label.management{/lang}</button>
+ <button type="button" id="manageLabel" class="button">{lang}wcf.conversation.label.management{/lang}</button>
</div>
</section>
<div class="boxContent">
{assign var='conversationCount' value=$__wcf->getConversationHandler()->getConversationCount()}
{assign var='maxConversationCount' value=$__wcf->session->getPermission('user.conversation.maxConversations')}
- <p class="conversationUsageBar{if $conversationCount/$maxConversationCount >= 1.0} red{elseif $conversationCount/$maxConversationCount > 0.9} yellow{/if}">
- <span style="width: {if $conversationCount/$maxConversationCount < 1.0}{@$conversationCount/$maxConversationCount*100|round:0}{else}100{/if}%">{#$conversationCount/$maxConversationCount*100}%</span>
- </p>
+ {assign var='conversationCountValue' value=$conversationCount/$maxConversationCount*100}
+ <meter class="conversationQuotaMeter" min="0" max="100" low="90" high="99" value="{$conversationCountValue|ceil}" aria-label="{lang}wcf.conversation.quota{/lang}">
+ {#$conversationCountValue} %
+ </meter>
<p><small>{lang}wcf.conversation.quota.description{/lang}</small></p>
</div>
</section>
{/capture}
{capture assign='contentInteractionButtons'}
- <a href="#" class="markAllAsReadButton contentInteractionButton button small jsOnly"><span class="icon icon16 fa-check"></span> <span>{lang}wcf.global.button.markAllAsRead{/lang}</span></a>
+ <button type="button" class="markAllAsReadButton contentInteractionButton button small jsOnly">
+ {icon name='check'}
+ <span>{lang}wcf.global.button.markAllAsRead{/lang}</span>
+ </button>
{/capture}
{capture assign='contentInteractionDropdownItems'}
<ul class="inlineList">
<li>
<a rel="nofollow" href="{link controller='ConversationList'}{if $filter}filter={@$filter}&{/if}{if !$participants|empty}participants={implode from=$participants item=participant}{$participant|rawurlencode}{/implode}&{/if}pageNo={@$pageNo}&sortField={$sortField}&sortOrder={if $sortOrder == 'ASC'}DESC{else}ASC{/if}{if $labelID}&labelID={@$labelID}{/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>
+ {if $sortOrder === 'ASC'}
+ <span class="jsTooltip" title="{lang}wcf.global.sorting{/lang} ({lang}wcf.global.sortOrder.ascending{/lang})">
+ {icon name='arrow-down-wide-short'}
+ </span>
+ {else}
+ <span class="jsTooltip" title="{lang}wcf.global.sorting{/lang} ({lang}wcf.global.sortOrder.descending{/lang})">
+ {icon name='arrow-down-short-wide'}
+ </span>
+ {/if}
</a>
</li>
<li>
{foreach from=$objects item=conversation}
<li class="tabularListRow">
- <ol class="tabularListColumns messageGroup conversation jsClipboardObject{if $conversation->isNew()} new{/if}" data-conversation-id="{@$conversation->conversationID}" data-label-ids="[ {implode from=$conversation->getAssignedLabels() item=label}{@$label->labelID}{/implode} ]" data-is-closed="{@$conversation->isClosed}" data-can-close-conversation="{if $conversation->userID == $__wcf->getUser()->userID}1{else}0{/if}" data-can-add-participants="{if $conversation->canAddParticipants()}1{else}0{/if}">
+ <ol class="tabularListColumns messageGroup conversation jsClipboardObject{if $conversation->isNew()} new{/if}" data-conversation-id="{$conversation->conversationID}" data-label-ids="[ {implode from=$conversation->getAssignedLabels() item=label}{$label->labelID}{/implode} ]" data-is-closed="{$conversation->isClosed}" data-can-close-conversation="{if $conversation->userID == $__wcf->getUser()->userID}1{else}0{/if}" data-can-add-participants="{if $conversation->canAddParticipants()}1{else}0{/if}">
<li class="columnMark jsOnly">
- <label><input type="checkbox" class="jsClipboardItem" data-object-id="{@$conversation->conversationID}"></label>
+ <label><input type="checkbox" class="jsClipboardItem" data-object-id="{$conversation->conversationID}"></label>
</li>
<li class="columnIcon columnAvatar">
{if $conversation->getUserProfile()->getAvatar()}
{/hascontent}
<h3>
- <a href="{if $conversation->isNew()}{link controller='Conversation' object=$conversation}action=firstNew{/link}{else}{$conversation->getLink()}{/if}" class="conversationLink messageGroupLink" data-object-id="{@$conversation->conversationID}">{$conversation->subject}</a>
+ <a href="{if $conversation->isNew()}{link controller='Conversation' object=$conversation}action=firstNew{/link}{else}{$conversation->getLink()}{/if}" class="conversationLink messageGroupLink" data-object-id="{$conversation->conversationID}">{$conversation->subject}</a>
{if $conversation->replies}
<span class="badge messageGroupCounterMobile">{@$conversation->replies|shortUnit}</span>
{/if}
<aside class="statusDisplay" role="presentation">
<ul class="statusIcons">
- {if $conversation->isClosed}<li><span class="icon icon16 fa-lock jsIconLock jsTooltip" title="{lang}wcf.global.state.closed{/lang}"></span></li>{/if}
- {if $conversation->attachments}<li><span class="icon icon16 fa-paperclip jsIconAttachment jsTooltip" title="{lang}wcf.conversation.attachments{/lang}"></span></li>{/if}
+ {if $conversation->isClosed}
+ <li>
+ <span class="jsIconLock jsTooltip" title="{lang}wcf.global.state.closed{/lang}">
+ {icon name='lock'}
+ </span>
+ </li>
+ {/if}
+ {if $conversation->attachments}
+ <li>
+ <span class="jsIconAttachment jsTooltip" title="{lang}wcf.conversation.attachments{/lang}">
+ {icon name='paperclip'}
+ </span>
+ </li>
+ {/if}
</ul>
</aside>
<ul class="inlineList dotSeparated small messageGroupInfo">
<li class="messageGroupAuthor">{user object=$conversation->getUserProfile()}</li>
- <li class="messageGroupTime">{@$conversation->time|time}</li>
+ <li class="messageGroupTime">{time time=$conversation->time}</li>
<li class="messageGroupEditLink jsOnly"><a href="#" class="jsConversationInlineEditor">{lang}wcf.global.button.edit{/lang}</a></li>
{event name='messageGroupInfo'}
</ul>
<ul class="messageGroupInfoMobile">
<li class="messageGroupAuthorMobile">{$conversation->username}</li>
- <li class="messageGroupLastPostTimeMobile">{@$conversation->lastPostTime|time}</li>
+ <li class="messageGroupLastPostTimeMobile">{time time=$conversation->lastPostTime}</li>
</ul>
{if $conversation->getParticipantSummary()|count}
<small class="conversationParticipantSummary">
{assign var='participantSummaryCount' value=$conversation->getParticipantSummary()|count}
- {lang}wcf.conversation.participants{/lang}: {implode from=$conversation->getParticipantSummary() item=participant}<a href="{$participant->getLink()}" class="userLink{if $participant->hideConversation == 2} conversationLeft{/if}" data-object-id="{@$participant->userID}">{$participant->username}</a>{/implode}
+ {lang}wcf.conversation.participants{/lang}: {implode from=$conversation->getParticipantSummary() item=participant}<a href="{$participant->getLink()}" class="userLink{if $participant->hideConversation == 2} conversationLeft{/if}" data-object-id="{$participant->userID}">{$participant->username}</a>{/implode}
{if $participantSummaryCount < $conversation->participants}{lang}wcf.conversation.participants.other{/lang}{/if}
</small>
{/if}
<dd>{@$conversation->participants|shortUnit}</dd>
</dl>
- <div class="messageGroupListStatsSimple">{if $conversation->replies}<span class="icon icon16 fa-comment-o" aria-label="{lang}wcf.conversation.replies{/lang}"></span> {@$conversation->replies|shortUnit}{/if}</div>
+ <div class="messageGroupListStatsSimple">
+ {if $conversation->replies}
+ <span aria-label="{lang}wcf.conversation.replies{/lang}">
+ {icon name='comment'}
+ </span>
+ {@$conversation->replies|shortUnit}
+ {/if}
+ </div>
</li>
<li class="columnLastPost">
{if $conversation->replies != 0 && $conversation->lastPostTime}
<p>
{user object=$conversation->getLastPosterProfile()}
</p>
- <small>{@$conversation->lastPostTime|time}</small>
+ <small>{time time=$conversation->lastPostTime}</small>
</div>
</div>
{/if}
<nav class="contentFooterNavigation">
<ul>
{content}
- {if $__wcf->session->getPermission('user.conversation.canStartConversation')}<li><a href="{link controller='ConversationAdd'}{/link}" title="{lang}wcf.conversation.add{/lang}" class="button buttonPrimary"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.conversation.button.add{/lang}</span></a></li>{/if}
+ {if $__wcf->session->getPermission('user.conversation.canStartConversation')}
+ <li>
+ <a href="{link controller='ConversationAdd'}{/link}" title="{lang}wcf.conversation.add{/lang}" class="button buttonPrimary">
+ {icon name='plus'}
+ <span>{lang}wcf.conversation.button.add{/lang}</span>
+ </a>
+ </li>
+ {/if}
{event name='contentFooterNavigation'}
{/content}
</ul>
{/hascontent}
</footer>
-<script data-relocate="true" src="{@$__wcf->getPath()}js/WCF.Conversation{if !ENABLE_DEBUG_MODE}.min{/if}.js?v={@LAST_UPDATE_TIME}"></script>
+<script data-relocate="true" src="{$__wcf->getPath()}js/WCF.Conversation{if !ENABLE_DEBUG_MODE}.min{/if}.js?v={@LAST_UPDATE_TIME}"></script>
<script data-relocate="true">
require([
'WoltLabSuite/Core/Language',
new WCF.Conversation.Clipboard($editorHandler);
new WCF.Conversation.Label.Manager('{link controller='ConversationList' encode=false}{if $filter}filter={@$filter}&{/if}{if !$participants|empty}participants={implode from=$participants item=participant}{$participant|rawurlencode}{/implode}&{/if}sortField={$sortField}&sortOrder={$sortOrder}&pageNo={@$pageNo}{/link}');
- new WCF.Conversation.MarkAsRead();
- new WCF.Conversation.MarkAllAsRead();
// mobile safari hover workaround
if ($(window).width() <= 800) {
});
</script>
+<script data-relocate="true">
+ require(['WoltLabSuite/Core/Conversation/Ui/MarkAsRead'], (MarkAsRead) => {
+ MarkAsRead.setup();
+ });
+ require(['WoltLabSuite/Core/Conversation/Ui/MarkAllAsRead'], (MarkAllAsRead) => {
+ MarkAllAsRead.setup();
+ });
+</script>
+
{include file='footer'}