Adjusted/unified html attributes for avatars
[GitHub/WoltLab/com.woltlab.wcf.conversation.git] / templates / conversation.tpl
index ff0f9bb5d2c8bf8e3eb6304b8ba36b3da2f7923e..2c6956dabec9f0122420e0ad090e54c85880d278 100644 (file)
-{include file='documentHeader'}
+{capture assign='pageTitle'}{$conversation->subject} {if $pageNo > 1} - {lang}wcf.page.pageNo{/lang}{/if}{/capture}
 
-<head>
-       <title>{$conversation->subject} {if $pageNo > 1}- {lang}wcf.page.pageNo{/lang} {/if} - {PAGE_TITLE|language}</title>
-       
-       {include file='headInclude'}
-       {include file='__signatureMaxImageDimensions'}
-       
-       <script data-relocate="true" src="{@$__wcf->getPath()}js/WCF.Conversation{if !ENABLE_DEBUG_MODE}.min{/if}.js?v={@$__wcfVersion}"></script>
-       <script data-relocate="true" src="{@$__wcf->getPath()}js/WCF.Moderation{if !ENABLE_DEBUG_MODE}.min{/if}.js?v={@$__wcfVersion}"></script>
-       <script data-relocate="true">
-               //<![CDATA[
-               $(function() {
-                       WCF.Language.addObject({
-                               'wcf.conversation.edit.addParticipants': '{lang}wcf.conversation.edit.addParticipants{/lang}',
-                               'wcf.conversation.edit.assignLabel': '{lang}wcf.conversation.edit.assignLabel{/lang}',
-                               'wcf.conversation.edit.close': '{lang}wcf.conversation.edit.close{/lang}',
-                               'wcf.conversation.edit.leave': '{lang}wcf.conversation.edit.leave{/lang}',
-                               'wcf.conversation.edit.open': '{lang}wcf.conversation.edit.open{/lang}',
-                               'wcf.conversation.leave.title': '{lang}wcf.conversation.leave.title{/lang}',
-                               'wcf.global.state.closed': '{lang}wcf.global.state.closed{/lang}',
-                               'wcf.message.bbcode.code.copy': '{lang}wcf.message.bbcode.code.copy{/lang}',
-                               'wcf.message.error.editorAlreadyInUse': '{lang}wcf.message.error.editorAlreadyInUse{/lang}',
-                               'wcf.moderation.report.reportContent': '{lang}wcf.moderation.report.reportContent{/lang}',
-                               'wcf.moderation.report.success': '{lang}wcf.moderation.report.success{/lang}',
-                               'wcf.conversation.label.assignLabels': '{lang}wcf.conversation.label.assignLabels{/lang}'
-                       });
-                       
-                       var $availableLabels = [ {implode from=$labelList item=label}{ cssClassName: '{if $label->cssClassName}{@$label->cssClassName}{/if}', labelID: {@$label->labelID}, label: '{$label->label}' }{/implode} ];
-                       var $editorHandler = new WCF.Conversation.EditorHandlerConversation($availableLabels);
-                       var $inlineEditor = new WCF.Conversation.InlineEditor('.conversation');
-                       $inlineEditor.setEditorHandler($editorHandler);
-                       
-                       new WCF.Conversation.Message.InlineEditor({@$conversation->conversationID});
-                       
-                       {assign var=__supportPaste value=true}
-                       {if $conversation->isClosed}{assign var=__supportPaste value=false}{/if}
-                       {include file='__messageQuoteManager' wysiwygSelector='text' supportPaste=$__supportPaste}
-                       new WCF.Conversation.Message.QuoteHandler($quoteManager);
-                       {if !$conversation->isClosed}new WCF.Conversation.QuickReply($quoteManager);{/if}
-                       
-                       new WCF.Moderation.Report.Content('com.woltlab.wcf.conversation.message', '.jsReportConversationMessage');
-                       new WCF.Conversation.RemoveParticipant({@$conversation->conversationID});
-                       new WCF.Message.BBCode.CodeViewer();
-               });
-               //]]>
-       </script>
-</head>
+{assign var='__pageCssClassName' value='mobileShowPaginationTop'}
 
-<body id="tpl{$templateName|ucfirst}">
+{capture assign='contentHeader'}
+       <header class="contentHeader">
+               <div class="contentHeaderIcon">
+                       {@$conversation->getUserProfile()->getAvatar()->getImageTag(64)}
+               </div>
+               
+               <div class="contentHeaderTitle">
+                       <h1 class="contentTitle jsConversationSubject" data-conversation-id="{@$conversation->conversationID}">{$conversation->subject}</h1>
+                       
+                       <ul class="inlineList contentHeaderMetaData">
+                               {hascontent}
+                                       <li>
+                                               <span class="icon icon16 fa-tags"></span>
+                                               <ul class="labelList">
+                                                       {content}
+                                                               {foreach from=$conversation->getAssignedLabels() item=label}
+                                                                       <li><span class="label badge{if $label->cssClassName} {$label->cssClassName}{/if}">{$label->label}</span></li>
+                                                               {/foreach}
+                                                       {/content}
+                                               </ul>
+                                       </li>
+                               {/hascontent}
+                               
+                               <li>
+                                       <span class="icon icon16 fa-user"></span>
+                                       {user object=$conversation->getUserProfile()}
+                               </li>
+                               
+                               <li>
+                                       <span class="icon icon16 fa-clock-o"></span>
+                                       {@$conversation->time|time}
+                               </li>
+                               
+                               {if $conversation->isClosed}
+                                       <li>
+                                               <span class="icon icon16 fa-lock jsIconLock"></span>
+                                               {lang}wcf.global.state.closed{/lang}
+                                       </li>
+                               {/if}
+                       </ul>
+               </div>
+               
+               <nav class="contentHeaderNavigation">
+                       <ul class="conversation jsConversationInlineEditorContainer" 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}" data-is-draft="{if $conversation->isDraft}1{else}0{/if}">
+                               <li class="jsOnly"><a href="{if $conversation->isDraft}{link controller='ConversationDraftEdit' id=$conversation->conversationID}{/link}{else}#{/if}" class="button jsConversationInlineEditor"><span class="icon icon16 fa-pencil"></span> <span>{lang}wcf.global.button.edit{/lang}</span></a></li>
+                               {if $conversation->canReply()}<li class="jsOnly"><a href="#" class="button buttonPrimary jsQuickReply"><span class="icon icon16 fa-reply"></span> <span>{lang}wcf.conversation.message.button.add{/lang}</span></a></li>{/if}
+                               {event name='contentHeaderNavigation'}
+                       </ul>
+               </nav>
+       </header>
+{/capture}
 
 {include file='header'}
 
-<header class="boxHeadline marginTop conversationHeadline">
-       <h1><a href="{link controller='Conversation' object=$conversation}{/link}">{$conversation->subject}</a>{if $conversation->isClosed} <span class="icon icon16 icon-lock jsTooltip jsIconLock" title="{lang}wcf.global.state.closed{/lang}"></span>{/if}</h1>
-       
-       {hascontent}
-               <ul class="labelList">
-                       {content}
-                               {foreach from=$conversation->getAssignedLabels() item=label}
-                                       <li><span class="label badge{if $label->cssClassName} {$label->cssClassName}{/if}">{lang}{$label->label}{/lang}</span></li>
-                               {/foreach}
-                       {/content}
-               </ul>
-       {/hascontent}
-       
-       {event name='headlineData'}
-</header>
-
-{include file='userNotice'}
-
 {if !$conversation->isDraft}
-       <div class="container containerPadding marginTop">
-               <fieldset>
-                       <legend>{lang}wcf.conversation.participants{/lang}</legend>
-                       
-                       <ul class="containerBoxList tripleColumned conversationParticipantList">
-                               {foreach from=$participants item=participant}
-                                       <li class="jsParticipant{if !$participant->userID || $participant->hideConversation == 2} conversationLeft{/if}">
-                                               <div class="box24">
-                                                       {if $participant->userID}<a href="{link controller='User' object=$participant}{/link}" class="framed">{@$participant->getAvatar()->getImageTag(24)}</a>{else}<span class="framed">{@$participant->getAvatar()->getImageTag(24)}</span>{/if}
-                                                       <div>
-                                                               <p>
-                                                                       {if $participant->userID}<a href="{link controller='User' object=$participant}{/link}" class="userLink" data-user-id="{@$participant->userID}">{$participant->username}</a>{else}<span>{$participant->username}</span>{/if}
-                                                                       {if $participant->isInvisible}<small>({lang}wcf.conversation.invisible{/lang})</small>{/if}
-                                                                       {if $participant->userID && ($conversation->userID == $__wcf->getUser()->userID) && ($participant->userID != $__wcf->getUser()->userID) && $participant->hideConversation != 2}
-                                                                               <a class="jsDeleteButton jsTooltip jsOnly" title="{lang}wcf.conversation.participants.removeParticipant{/lang}" data-confirm-message="{lang}wcf.conversation.participants.removeParticipant.confirmMessage{/lang}" data-object-id="{@$participant->userID}"><span class="icon icon16 icon-remove"></span></a>
-                                                                       {/if}
-                                                               </p>
-                                                               <dl class="plain inlineDataList">
-                                                                       <dt>{lang}wcf.conversation.lastVisitTime{/lang}</dt>
-                                                                       <dd>{if $participant->lastVisitTime}{@$participant->lastVisitTime|time}{else}-{/if}</dd>
-                                                               </dl>
-                                                       </div>
+       <section class="section">
+               <h2 class="sectionTitle">{lang}wcf.conversation.participants{/lang}</h2>
+               
+               <ul class="containerBoxList tripleColumned conversationParticipantList">
+                       {foreach from=$participants item=participant}
+                               <li class="jsParticipant{if !$participant->userID || $participant->hideConversation == 2 || $participant->leftAt > 0} conversationLeft{/if}">
+                                       <div class="box24">
+                                               {user object=$participant type='avatar24' ariaHidden='true' tabindex='-1'}
+                                               <div>
+                                                       <p>
+                                                               {user object=$participant}
+                                                               {if $participant->isInvisible}<small>({lang}wcf.conversation.invisible{/lang})</small>{/if}
+                                                               {if $participant->userID && ($conversation->userID == $__wcf->getUser()->userID) && ($participant->userID != $__wcf->getUser()->userID) && $participant->hideConversation != 2 && $participant->leftAt == 0}
+                                                                       <a href="#" class="jsDeleteButton jsTooltip jsOnly" title="{lang}wcf.conversation.participants.removeParticipant{/lang}" data-confirm-message-html="{lang __encode=true}wcf.conversation.participants.removeParticipant.confirmMessage{/lang}" data-object-id="{@$participant->userID}"><span class="icon icon16 fa-times"></span></a>
+                                                               {/if}
+                                                       </p>
+                                                       <dl class="plain inlineDataList small">
+                                                               <dt>{lang}wcf.conversation.lastVisitTime{/lang}</dt>
+                                                               <dd>{if $participant->lastVisitTime}{@$participant->lastVisitTime|time}{else}-{/if}</dd>
+                                                       </dl>
                                                </div>
-                                       </li>
-                               {/foreach}
-                       </ul>
-               </fieldset>
-       </div>
+                                       </div>
+                               </li>
+                       {/foreach}
+               </ul>
+       </section>
 {/if}
 
-<div class="contentNavigation">
-       {pages print=true assign=pagesLinks controller='Conversation' object=$conversation link="pageNo=%d"}
-       
-       <nav>
-               <ul class="conversation jsConversationInlineEditorContainer" 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="jsOnly"><a class="button jsConversationInlineEditor"><span class="icon icon16 icon-pencil"></span> <span>{lang}wcf.global.button.edit{/lang}</span></a></li>
-                       {if !$conversation->isClosed}<li><a href="{link controller='ConversationMessageAdd' id=$conversationID}{/link}" title="{lang}wcf.conversation.message.add{/lang}" class="button buttonPrimary jsQuickReply"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.conversation.message.button.add{/lang}</span></a></li>{/if}
-                       {event name='contentNavigationButtonsTop'}
-               </ul>
-       </nav>
-</div>
+{hascontent}
+       <div class="paginationTop">
+               {content}{pages print=true assign=pagesLinks controller='Conversation' object=$conversation link="pageNo=%d"}{/content}
+       </div>
+{/hascontent}
 
-<div class="marginTop">
+<div class="section">
        <ul class="messageList">
+               {if $pageNo == 1 && !$conversation->joinedAt|empty}<li><p class="info" role="status">{lang}wcf.conversation.visibility.previousMessages{/lang}</p></li>{/if}
                {include file='conversationMessageList'}
-               {if !$conversation->isClosed}{include file='conversationQuickReply'}{/if}
+               {hascontent}
+                       <li class="messageListPagination">
+                               {content}{@$pagesLinks}{/content}
+                       </li>
+               {/hascontent}
+               {if $conversation->canReply()}{include file='conversationQuickReply'}{/if}
+               {if $pageNo == $pages && !$conversation->leftAt|empty}<li><p class="info" role="status">{lang}wcf.conversation.visibility.nextMessages{/lang}</p></li>{/if}
        </ul>
 </div>
 
-<div class="contentNavigation">
-       {@$pagesLinks}
-       
-       {hascontent}
-               <nav>
-                       <ul>
-                               {content}
-                                       {if !$conversation->isClosed}<li><a href="{link controller='ConversationMessageAdd' id=$conversationID}{/link}" title="{lang}wcf.conversation.message.add{/lang}" class="button buttonPrimary jsQuickReply"><span class="icon icon16 icon-plus"></span> <span>{lang}wcf.conversation.message.button.add{/lang}</span></a></li>{/if}
-                                       {event name='contentNavigationButtonsBottom'}
-                               {/content}
-                       </ul>
-               </nav>
-       {/hascontent}
-</div>
+{if !ENABLE_DEBUG_MODE}<script src="{@$__wcf->getPath()}js/WoltLabSuite.Core.Conversation.min.js?v={@LAST_UPDATE_TIME}"></script>{/if}
+<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">
+       $(function() {
+               WCF.Language.addObject({
+                       'wcf.conversation.edit.addParticipants': '{jslang}wcf.conversation.edit.addParticipants{/jslang}',
+                       'wcf.conversation.edit.assignLabel': '{jslang}wcf.conversation.edit.assignLabel{/jslang}',
+                       'wcf.conversation.edit.close': '{jslang}wcf.conversation.edit.close{/jslang}',
+                       'wcf.conversation.edit.leave': '{jslang}wcf.conversation.edit.leave{/jslang}',
+                       'wcf.conversation.edit.open': '{jslang}wcf.conversation.edit.open{/jslang}',
+                       'wcf.conversation.edit.subject': '{jslang}wcf.conversation.edit.subject{/jslang}',
+                       'wcf.conversation.leave.title': '{jslang}wcf.conversation.leave.title{/jslang}',
+                       'wcf.global.state.closed': '{jslang}wcf.global.state.closed{/jslang}',
+                       'wcf.global.subject': '{jslang}wcf.global.subject{/jslang}',
+                       'wcf.message.bbcode.code.copy': '{jslang}wcf.message.bbcode.code.copy{/jslang}',
+                       'wcf.message.error.editorAlreadyInUse': '{jslang}wcf.message.error.editorAlreadyInUse{/jslang}',
+                       'wcf.moderation.report.reportContent': '{jslang}wcf.moderation.report.reportContent{/jslang}',
+                       'wcf.moderation.report.success': '{jslang}wcf.moderation.report.success{/jslang}',
+                       'wcf.conversation.label.assignLabels': '{jslang}wcf.conversation.label.assignLabels{/jslang}'
+               });
+               
+               var $availableLabels = [ {implode from=$labelList item=label}{ cssClassName: '{if $label->cssClassName}{@$label->cssClassName}{/if}', labelID: {@$label->labelID}, label: '{$label->label|encodeJS}' }{/implode} ];
+               var $editorHandler = new WCF.Conversation.EditorHandlerConversation($availableLabels);
+               var $inlineEditor = new WCF.Conversation.InlineEditor('.conversation');
+               $inlineEditor.setEditorHandler($editorHandler);
+               
+               {assign var=__supportPaste value=true}
+               {if !$conversation->canReply()}{assign var=__supportPaste value=false}{/if}
+               {include file='__messageQuoteManager' wysiwygSelector='text' supportPaste=$__supportPaste}
+               
+               new WCF.Conversation.Message.InlineEditor({@$conversation->conversationID}, $quoteManager);
+               new WCF.Conversation.Message.QuoteHandler($quoteManager);
+               
+               {if $conversation->canReply()}
+                       require(['WoltLabSuite/Core/Ui/Message/Reply'], function(UiMessageReply) {
+                               new UiMessageReply({
+                                       ajax: {
+                                               className: 'wcf\\data\\conversation\\message\\ConversationMessageAction'
+                                       },
+                                       quoteManager: $quoteManager
+                               });
+                       });
+               {/if}
+               
+               {if $__wcf->session->getPermission('user.profile.canReportContent')}
+                       new WCF.Moderation.Report.Content('com.woltlab.wcf.conversation.message', '.jsReportConversationMessage');
+               {/if}
+               new WCF.Conversation.RemoveParticipant({@$conversation->conversationID});
+       });
+</script>
 
 {include file='footer'}
-
-</body>
-</html>