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