Use `{time}`
[GitHub/WoltLab/com.woltlab.wcf.conversation.git] / templates / conversationList.tpl
1 {capture assign='pageTitle'}{if $filter}{lang}wcf.conversation.folder.{$filter}{/lang}{else}{$__wcf->getActivePage()->getTitle()}{/if}{if $pageNo > 1} - {lang}wcf.page.pageNo{/lang}{/if}{/capture}
2
3 {capture assign='contentHeader'}
4 <header class="contentHeader">
5 <div class="contentHeaderTitle">
6 <h1 class="contentTitle">{if $filter}{lang}wcf.conversation.folder.{$filter}{/lang}{else}{$__wcf->getActivePage()->getTitle()}{/if}</h1>
7 </div>
8
9 {hascontent}
10 <nav class="contentHeaderNavigation">
11 <ul>
12 {content}
13 {if $__wcf->session->getPermission('user.conversation.canStartConversation')}
14 <li>
15 <a href="{link controller='ConversationAdd'}{/link}" title="{lang}wcf.conversation.add{/lang}" class="button buttonPrimary">
16 {icon name='plus'}
17 <span>{lang}wcf.conversation.button.add{/lang}</span>
18 </a>
19 </li>
20 {/if}
21 {event name='contentHeaderNavigation'}
22 {/content}
23 </ul>
24 </nav>
25 {/hascontent}
26 </header>
27 {/capture}
28
29 {capture assign='headContent'}
30 <link rel="alternate" type="application/rss+xml" title="{lang}wcf.global.button.rss{/lang}" href="{link controller='ConversationFeed'}at={@$__wcf->getUser()->userID}-{@$__wcf->getUser()->accessToken}{/link}">
31 {/capture}
32
33 {capture assign='sidebarRight'}
34 <section class="box">
35 <h2 class="boxTitle">{lang}wcf.conversation.folders{/lang}</h2>
36
37 <div class="boxContent">
38 <nav>
39 <ol class="boxMenu">
40 <li{if $filter == ''} class="active"{/if}>
41 <a class="boxMenuLink" href="{link controller='ConversationList'}{/link}"><span class="boxMenuLinkTitle">{lang}wcf.conversation.conversations{/lang}</span>{if $conversationCount} <span class="badge">{#$conversationCount}</span>{/if}</a>
42 </li>
43 <li{if $filter == 'draft'} class="active"{/if}>
44 <a class="boxMenuLink" href="{link controller='ConversationList'}filter=draft{/link}"><span class="boxMenuLinkTitle">{lang}wcf.conversation.folder.draft{/lang}</span>{if $draftCount} <span class="badge">{#$draftCount}</span>{/if}</a>
45 </li>
46 <li{if $filter == 'outbox'} class="active"{/if}>
47 <a class="boxMenuLink" href="{link controller='ConversationList'}filter=outbox{/link}"><span class="boxMenuLinkTitle">{lang}wcf.conversation.folder.outbox{/lang}</span>{if $outboxCount} <span class="badge">{#$outboxCount}</span>{/if}</a>
48 </li>
49 <li{if $filter == 'hidden'} class="active"{/if}>
50 <a class="boxMenuLink" href="{link controller='ConversationList'}filter=hidden{/link}"><span class="boxMenuLinkTitle">{lang}wcf.conversation.folder.hidden{/lang}</span>{if $hiddenCount} <span class="badge">{#$hiddenCount}</span>{/if}</a>
51 </li>
52 </ol>
53 </nav>
54 </div>
55 </section>
56
57 <section class="box">
58 <h2 class="boxTitle">{lang}wcf.conversation.filter.participants{/lang}</h2>
59
60 <div class="boxContent">
61 <form action="{link controller='ConversationList'}{if $filter}filter={@$filter}&{/if}sortField={$sortField}&sortOrder={$sortOrder}&pageNo={@$pageNo}{/link}" method="post">
62 <dl>
63 <dt></dt>
64 <dd><label><textarea id="participants" name="participants" class="long">{implode from=$participants item=participant glue=','}{$participant}{/implode}</textarea></label></dd>
65 </dl>
66
67 <div class="formSubmit">
68 <input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s">
69 {csrfToken}
70 </div>
71 </form>
72 </div>
73 </section>
74
75 <section class="box jsOnly">
76 <h2 class="boxTitle">{lang}wcf.conversation.label{/lang}</h2>
77
78 <div class="boxContent">
79 <div id="conversationLabelFilter" class="dropdown">
80 <div class="dropdownToggle" data-toggle="conversationLabelFilter">
81 {if $labelID}
82 {foreach from=$labelList item=label}
83 {if $label->labelID == $labelID}
84 <span class="badge label{if $label->cssClassName} {$label->cssClassName}{/if}">{$label->label}</span>
85 {/if}
86 {/foreach}
87 {else}
88 <span class="badge">{lang}wcf.conversation.label.filter{/lang}</span>
89 {/if}
90 </div>
91
92 <div class="dropdownMenu">
93 <ul class="scrollableDropdownMenu">
94 {foreach from=$labelList item=label}
95 <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>
96 {/foreach}
97 </ul>
98 <ul>
99 <li class="dropdownDivider"{if !$labelList|count} style="display: none;"{/if}></li>
100 <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}{/link}"><span class="badge label">{lang}wcf.conversation.label.disableFilter{/lang}</span></a></li>
101 </ul>
102 </div>
103 </div>
104 </div>
105
106 <div class="boxContent">
107 <button type="button" id="manageLabel" class="button">{lang}wcf.conversation.label.management{/lang}</button>
108 </div>
109 </section>
110
111 {event name='beforeQuotaBox'}
112
113 <section class="box conversationQuota">
114 <h2 class="boxTitle">{lang}wcf.conversation.quota{/lang}</h2>
115
116 <div class="boxContent">
117 {assign var='conversationCount' value=$__wcf->getConversationHandler()->getConversationCount()}
118 {assign var='maxConversationCount' value=$__wcf->session->getPermission('user.conversation.maxConversations')}
119 <p class="conversationUsageBar{if $conversationCount/$maxConversationCount >= 1.0} red{elseif $conversationCount/$maxConversationCount > 0.9} yellow{/if}">
120 <span style="width: {if $conversationCount/$maxConversationCount < 1.0}{$conversationCount/$maxConversationCount*100|round:0}{else}100{/if}%">{#$conversationCount/$maxConversationCount*100}%</span>
121 </p>
122 <p><small>{lang}wcf.conversation.quota.description{/lang}</small></p>
123 </div>
124 </section>
125
126 {event name='boxes'}
127 {/capture}
128
129 {capture assign='contentInteractionPagination'}
130 {assign var='participantsParameter' value=''}
131 {if $participants}{capture assign='participantsParameter'}&participants={implode from=$participants item=participant}{$participant|rawurlencode}{/implode}{/capture}{/if}
132 {assign var='labelIDParameter' value=''}
133 {if $labelID}{assign var='labelIDParameter' value="&labelID=$labelID"}{/if}
134 {pages print=true assign=pagesLinks controller='ConversationList' link="filter=$filter$participantsParameter&pageNo=%d&sortField=$sortField&sortOrder=$sortOrder$labelIDParameter"}
135 {/capture}
136
137 {capture assign='contentInteractionButtons'}
138 <button type="button" class="markAllAsReadButton contentInteractionButton button small jsOnly">
139 {icon name='check'}
140 <span>{lang}wcf.global.button.markAllAsRead{/lang}</span>
141 </button>
142 {/capture}
143
144 {capture assign='contentInteractionDropdownItems'}
145 <li><a rel="alternate" href="{link controller='ConversationFeed'}at={@$__wcf->getUser()->userID}-{@$__wcf->getUser()->accessToken}{/link}">{lang}wcf.global.button.rss{/lang}</a></li>
146 {/capture}
147
148 {include file='header'}
149
150 {if !$items}
151 <p class="info" role="status">{lang}wcf.conversation.noConversations{/lang}</p>
152 {else}
153 <div class="section tabularBox messageGroupList conversationList jsClipboardContainer" data-type="com.woltlab.wcf.conversation.conversation">
154 <ol class="tabularList">
155 <li class="tabularListRow tabularListRowHead">
156 <ol class="tabularListColumns">
157 <li class="columnMark jsOnly"><label><input type="checkbox" class="jsClipboardMarkAll"></label></li>
158
159 <li class="columnSort">
160 <ul class="inlineList">
161 <li>
162 <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}">
163 {if $sortOrder === 'ASC'}
164 <span class="jsTooltip" title="{lang}wcf.global.sorting{/lang} ({lang}wcf.global.sortOrder.ascending{/lang})">
165 {icon name='arrow-down-wide-short'}
166 </span>
167 {else}
168 <span class="jsTooltip" title="{lang}wcf.global.sorting{/lang} ({lang}wcf.global.sortOrder.descending{/lang})">
169 {icon name='arrow-down-short-wide'}
170 </span>
171 {/if}
172 </a>
173 </li>
174 <li>
175 <div class="dropdown">
176 <span class="dropdownToggle">{if $sortField == 'subject'}{lang}wcf.global.subject{/lang}{else}{lang}wcf.conversation.{$sortField}{/lang}{/if}</span>
177
178 <ul class="dropdownMenu">
179 {foreach from=$validSortFields item=_sortField}
180 <li{if $_sortField === $sortField} class="active"{/if}><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 $sortField === $_sortField}{if $sortOrder === 'DESC'}ASC{else}DESC{/if}{else}{$sortOrder}{/if}{if $labelID}&labelID={@$labelID}{/if}{/link}">{if $_sortField == 'subject'}{lang}wcf.global.subject{/lang}{else}{lang}wcf.conversation.{$_sortField}{/lang}{/if}</a></li>
181 {/foreach}
182 </ul>
183 </div>
184 </li>
185 </ul>
186 </li>
187 </ol>
188 </li>
189
190 {foreach from=$objects item=conversation}
191 <li class="tabularListRow">
192 <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}">
193 <li class="columnMark jsOnly">
194 <label><input type="checkbox" class="jsClipboardItem" data-object-id="{$conversation->conversationID}"></label>
195 </li>
196 <li class="columnIcon columnAvatar">
197 {if $conversation->getUserProfile()->getAvatar()}
198 <div>
199 <p{if $conversation->isNew()} title="{lang}wcf.conversation.markAsRead.doubleClick{/lang}"{/if}>{@$conversation->getUserProfile()->getAvatar()->getImageTag(48)}</p>
200
201 {if $conversation->ownPosts && $conversation->userID != $__wcf->user->userID}
202 {if $__wcf->getUserProfileHandler()->getAvatar()}
203 <small class="myAvatar jsTooltip" title="{lang}wcf.conversation.ownPosts{/lang}">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(24)}</small>
204 {/if}
205 {/if}
206 </div>
207 {/if}
208 </li>
209 <li class="columnSubject">
210 {hascontent}
211 <ul class="labelList">
212 {content}
213 {foreach from=$conversation->getAssignedLabels() item=label}
214 <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}" class="badge label{if $label->cssClassName} {@$label->cssClassName}{/if}">{$label->label}</a></li>
215 {/foreach}
216 {/content}
217 </ul>
218 {/hascontent}
219
220 <h3>
221 <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>
222 {if $conversation->replies}
223 <span class="badge messageGroupCounterMobile">{@$conversation->replies|shortUnit}</span>
224 {/if}
225 </h3>
226
227 <aside class="statusDisplay" role="presentation">
228 <ul class="statusIcons">
229 {if $conversation->isClosed}
230 <li>
231 <span class="jsIconLock jsTooltip" title="{lang}wcf.global.state.closed{/lang}">
232 {icon name='lock'}
233 </span>
234 </li>
235 {/if}
236 {if $conversation->attachments}
237 <li>
238 <span class="jsIconAttachment jsTooltip" title="{lang}wcf.conversation.attachments{/lang}">
239 {icon name='paperclip'}
240 </span>
241 </li>
242 {/if}
243 </ul>
244 </aside>
245
246 <ul class="inlineList dotSeparated small messageGroupInfo">
247 <li class="messageGroupAuthor">{user object=$conversation->getUserProfile()}</li>
248 <li class="messageGroupTime">{time time=$conversation->time}</li>
249 <li class="messageGroupEditLink jsOnly"><a href="#" class="jsConversationInlineEditor">{lang}wcf.global.button.edit{/lang}</a></li>
250 {event name='messageGroupInfo'}
251 </ul>
252
253 <ul class="messageGroupInfoMobile">
254 <li class="messageGroupAuthorMobile">{$conversation->username}</li>
255 <li class="messageGroupLastPostTimeMobile">{time time=$conversation->lastPostTime}</li>
256 </ul>
257
258 {if $conversation->getParticipantSummary()|count}
259 <small class="conversationParticipantSummary">
260 {assign var='participantSummaryCount' value=$conversation->getParticipantSummary()|count}
261 {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}
262 {if $participantSummaryCount < $conversation->participants}{lang}wcf.conversation.participants.other{/lang}{/if}
263 </small>
264 {/if}
265
266 {event name='conversationData'}
267 </li>
268 <li class="columnStats">
269 <dl class="plain statsDataList">
270 <dt>{lang}wcf.conversation.replies{/lang}</dt>
271 <dd>{@$conversation->replies|shortUnit}</dd>
272 </dl>
273 <dl class="plain statsDataList">
274 <dt>{lang}wcf.conversation.participants{/lang}</dt>
275 <dd>{@$conversation->participants|shortUnit}</dd>
276 </dl>
277
278 <div class="messageGroupListStatsSimple">
279 {if $conversation->replies}
280 <span aria-label="{lang}wcf.conversation.replies{/lang}">
281 {icon name='comment'}
282 </span>
283 {@$conversation->replies|shortUnit}
284 {/if}
285 </div>
286 </li>
287 <li class="columnLastPost">
288 {if $conversation->replies != 0 && $conversation->lastPostTime}
289 <div class="box32">
290 <a href="{link controller='Conversation' object=$conversation}action=lastPost{/link}" class="jsTooltip" title="{lang}wcf.conversation.gotoLastPost{/lang}">{@$conversation->getLastPosterProfile()->getAvatar()->getImageTag(32)}</a>
291
292 <div>
293 <p>
294 {user object=$conversation->getLastPosterProfile()}
295 </p>
296 <small>{time time=$conversation->lastPostTime}</small>
297 </div>
298 </div>
299 {/if}
300 </li>
301
302 {event name='columns'}
303 </ol>
304 </li>
305 {/foreach}
306 </ol>
307 </div>
308 {/if}
309
310 <footer class="contentFooter">
311 {hascontent}
312 <div class="paginationBottom">
313 {content}{@$pagesLinks}{/content}
314 </div>
315 {/hascontent}
316
317 {hascontent}
318 <nav class="contentFooterNavigation">
319 <ul>
320 {content}
321 {if $__wcf->session->getPermission('user.conversation.canStartConversation')}
322 <li>
323 <a href="{link controller='ConversationAdd'}{/link}" title="{lang}wcf.conversation.add{/lang}" class="button buttonPrimary">
324 {icon name='plus'}
325 <span>{lang}wcf.conversation.button.add{/lang}</span>
326 </a>
327 </li>
328 {/if}
329 {event name='contentFooterNavigation'}
330 {/content}
331 </ul>
332 </nav>
333 {/hascontent}
334 </footer>
335
336 <script data-relocate="true" src="{$__wcf->getPath()}js/WCF.Conversation{if !ENABLE_DEBUG_MODE}.min{/if}.js?v={@LAST_UPDATE_TIME}"></script>
337 <script data-relocate="true">
338 require([
339 'WoltLabSuite/Core/Language',
340 'WoltLabSuite/Core/Controller/Popover',
341 'WoltLabSuite/Core/Ui/ItemList/User',
342 'WoltLabSuite/Core/Controller/Clipboard',
343 ], (
344 Language,
345 ControllerPopover,
346 UiItemListUser,
347 ControllerClipboard
348 ) => {
349 Language.addObject({
350 'wcf.conversation.edit.addParticipants': '{jslang}wcf.conversation.edit.addParticipants{/jslang}',
351 'wcf.conversation.edit.assignLabel': '{jslang}wcf.conversation.edit.assignLabel{/jslang}',
352 'wcf.conversation.edit.close': '{jslang}wcf.conversation.edit.close{/jslang}',
353 'wcf.conversation.edit.leave': '{jslang}wcf.conversation.edit.leave{/jslang}',
354 'wcf.conversation.edit.open': '{jslang}wcf.conversation.edit.open{/jslang}',
355 'wcf.conversation.edit.subject': '{jslang}wcf.conversation.edit.subject{/jslang}',
356 'wcf.conversation.label.management': '{jslang}wcf.conversation.label.management{/jslang}',
357 'wcf.conversation.label.management.addLabel.success': '{jslang}wcf.conversation.label.management.addLabel.success{/jslang}',
358 'wcf.conversation.label.management.deleteLabel.confirmMessage': '{jslang}wcf.conversation.label.management.deleteLabel.confirmMessage{/jslang}',
359 'wcf.conversation.label.management.editLabel': '{jslang}wcf.conversation.label.management.editLabel{/jslang}',
360 'wcf.conversation.label.placeholder': '{jslang}wcf.conversation.label.placeholder{/jslang}',
361 'wcf.conversation.leave.title': '{jslang}wcf.conversation.leave.title{/jslang}',
362 'wcf.global.state.closed': '{jslang}wcf.global.state.closed{/jslang}',
363 'wcf.global.subject': '{jslang}wcf.global.subject{/jslang}',
364 'wcf.conversation.label.assignLabels': '{jslang}wcf.conversation.label.assignLabels{/jslang}'
365 });
366
367 ControllerClipboard.setup({
368 pageClassName: 'wcf\\page\\ConversationListPage',
369 hasMarkedItems: {if $hasMarkedItems}true{else}false{/if},
370 });
371
372 var $editorHandler = new WCF.Conversation.EditorHandler();
373 var $inlineEditor = new WCF.Conversation.InlineEditor('.conversation');
374 $inlineEditor.setEditorHandler($editorHandler, 'list');
375
376 new WCF.Conversation.Clipboard($editorHandler);
377 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}');
378
379 // mobile safari hover workaround
380 if ($(window).width() <= 800) {
381 $('.sidebar').addClass('mobileSidebar').hover(function() { });
382 }
383
384 UiItemListUser.init('participants', {
385 excludedSearchValues: ['{$__wcf->user->username|encodeJS}'],
386 maxItems: 20
387 });
388
389 ControllerPopover.init({
390 className: 'conversationLink',
391 dboAction: 'wcf\\data\\conversation\\ConversationAction',
392 identifier: 'com.woltlab.wcf.conversation'
393 });
394 });
395 </script>
396
397 <script data-relocate="true">
398 require(['WoltLabSuite/Core/Conversation/Ui/MarkAsRead'], (MarkAsRead) => {
399 MarkAsRead.setup();
400 });
401 require(['WoltLabSuite/Core/Conversation/Ui/MarkAllAsRead'], (MarkAllAsRead) => {
402 MarkAllAsRead.setup();
403 });
404 </script>
405
406 {include file='footer'}