Editor improvements
[GitHub/WoltLab/com.woltlab.wcf.conversation.git] / templates / conversationAdd.tpl
index f5b64a10290d551d496fd872e2681c420d56096c..66258ab103b7805a2f6dd6cafd6f394551165efd 100644 (file)
@@ -1,93 +1,61 @@
-{include file='documentHeader'}
-
-<head>
-       <title>{lang}wcf.conversation.add{/lang} - {PAGE_TITLE|language}</title>
-       
-       {include file='headInclude'}
-       
-       <script data-relocate="true">
-               //<![CDATA[
-               $(function() {
-                       new WCF.Search.User('#participants', null, false, [ ], true);
-                       new WCF.Search.User('#invisibleParticipants', null, false, [ ], true);
-                       
-                       WCF.Message.Submit.registerButton('text', $('#messageContainer > .formSubmit > input[type=submit]'));
-                       new WCF.Message.FormGuard();
-                       
-                       WCF.System.Dependency.Manager.register('CKEditor', function() { new WCF.Message.UserMention('text'); });
-                       
-                       {include file='__messageQuoteManager' wysiwygSelector='text' supportPaste=true}
-               });
-               //]]>
-       </script>
-</head>
-
-<body id="tpl{$templateName|ucfirst}" data-template="{$templateName}" data-application="{$templateNameApplication}">
 {include file='header'}
 
-<header class="boxHeadline">
-       <h1>{lang}wcf.conversation.add{/lang}</h1>
-</header>
-
-{include file='userNotice'}
-
 {include file='formError'}
 
 <form id="messageContainer" class="jsFormGuard" method="post" action="{link controller='ConversationAdd'}{/link}">
-       <div class="container containerPadding marginTop">
-               <fieldset>
-                       <legend>{lang}wcf.conversation.information{/lang}</legend>
-                       
-                       <dl{if $errorField == 'subject'} class="formError"{/if}>
-                               <dt><label for="subject">{lang}wcf.global.subject{/lang}</label></dt>
-                               <dd>
-                                       <input type="text" id="subject" name="subject" value="{$subject}" required="required" maxlength="255" class="long" />
-                                       {if $errorField == 'subject'}
-                                               <small class="innerError">
-                                                       {if $errorType == 'empty'}
-                                                               {lang}wcf.global.form.error.empty{/lang}
-                                                       {elseif $errorType == 'censoredWordsFound'}
-                                                               {lang}wcf.message.error.censoredWordsFound{/lang}
-                                                       {else}
-                                                               {lang}wcf.conversation.subject.error.{@$errorType}{/lang}
-                                                       {/if}
-                                               </small>
-                                       {/if}
-                               </dd>
-                       </dl>
-                       
-                       {event name='informationFields'}
-               </fieldset>
+       <section class="section">
+               <h2 class="sectionTitle">{lang}wcf.conversation.information{/lang}</h2>
                
-               <fieldset>
-                       <legend>{lang}wcf.conversation.participants{/lang}</legend>
-                       
-                       <dl{if $errorField == 'participants'} class="formError"{/if}>
-                               <dt><label for="participants">{lang}wcf.conversation.participants{/lang}</label></dt>
-                               <dd>
-                                       <textarea id="participants" name="participants" class="long" cols="40" rows="2">{$participants}</textarea>
-                                       {if $errorField == 'participants'}
-                                               <small class="innerError">
-                                                       {if $errorType == 'empty'}
-                                                               {lang}wcf.global.form.error.empty{/lang}
-                                                       {elseif $errorType|is_array}
-                                                               {foreach from=$errorType item='errorData'}
-                                                                       {lang}wcf.conversation.participants.error.{@$errorData.type}{/lang}
-                                                               {/foreach}
-                                                       {else}
-                                                               {lang}wcf.conversation.participants.error.{@$errorType}{/lang}
-                                                       {/if}
-                                               </small>
-                                       {/if}
-                                       <small>{lang}wcf.conversation.participants.description{/lang}</small>
-                               </dd>
-                       </dl>
-                       
-                       {if $__wcf->session->getPermission('user.conversation.canAddInvisibleParticipants')}
+               <dl{if $errorField == 'subject'} class="formError"{/if}>
+                       <dt><label for="subject">{lang}wcf.global.subject{/lang}</label></dt>
+                       <dd>
+                               <input type="text" id="subject" name="subject" value="{$subject}" required maxlength="255" class="long">
+                               {if $errorField == 'subject'}
+                                       <small class="innerError">
+                                               {if $errorType == 'empty'}
+                                                       {lang}wcf.global.form.error.empty{/lang}
+                                               {elseif $errorType == 'censoredWordsFound'}
+                                                       {lang}wcf.message.error.censoredWordsFound{/lang}
+                                               {else}
+                                                       {lang}wcf.conversation.subject.error.{@$errorType}{/lang}
+                                               {/if}
+                                       </small>
+                               {/if}
+                       </dd>
+               </dl>
+               
+               {event name='informationFields'}
+       </section>
+       
+       <section class="section">
+               <h2 class="sectionTitle">{lang}wcf.conversation.participants{/lang}</h2>
+               
+               <dl{if $errorField == 'participants'} class="formError"{/if}>
+                       <dt><label for="participants">{lang}wcf.conversation.participants{/lang}</label></dt>
+                       <dd>
+                               <input type="text" id="participants" name="participants" class="long" value="{$participants}">
+                               {if $errorField == 'participants'}
+                                       <small class="innerError">
+                                               {if $errorType == 'empty'}
+                                                       {lang}wcf.global.form.error.empty{/lang}
+                                               {elseif $errorType|is_array}
+                                                       {foreach from=$errorType item='errorData'}
+                                                               {lang}wcf.conversation.participants.error.{@$errorData.type}{/lang}
+                                                       {/foreach}
+                                               {else}
+                                                       {lang}wcf.conversation.participants.error.{@$errorType}{/lang}
+                                               {/if}
+                                       </small>
+                               {/if}
+                               <small>{lang}wcf.conversation.participants.description{/lang}</small>
+                       </dd>
+               </dl>
+               
+               {if $__wcf->session->getPermission('user.conversation.canAddInvisibleParticipants')}
                        <dl{if $errorField == 'invisibleParticipants'} class="formError"{/if}>
                                <dt><label for="invisibleParticipants">{lang}wcf.conversation.invisibleParticipants{/lang}</label></dt>
                                <dd>
-                                       <textarea id="invisibleParticipants" name="invisibleParticipants" class="long" cols="40" rows="2">{$invisibleParticipants}</textarea>
+                                       <input type="text" id="invisibleParticipants" name="invisibleParticipants" class="long" value="{$invisibleParticipants}">
                                        {if $errorField == 'invisibleParticipants'}
                                                <small class="innerError">
                                                        {if $errorType == 'empty'}
                                        <small>{lang}wcf.conversation.invisibleParticipants.description{/lang}</small>
                                </dd>
                        </dl>
-                       {/if}
-                       
-                       {if $__wcf->session->getPermission('user.conversation.canSetCanInvite')}
+               {/if}
+               
+               {if $__wcf->session->getPermission('user.conversation.canSetCanInvite')}
                        <dl>
                                <dt></dt>
                                <dd>
-                                       <label><input type="checkbox" name="participantCanInvite" id="participantCanInvite" value="1"{if $participantCanInvite} checked="checked"{/if} /> {lang}wcf.conversation.participantCanInvite{/lang}</label>
-                               </dd>
-                       </dl>
-                       {/if}
-                       
-                       {event name='participantFields'}
-               </fieldset>
-                       
-               <fieldset>
-                       <legend>{lang}wcf.conversation.message{/lang}</legend>
-                       
-                       <dl class="wide{if $errorField == 'text'} formError{/if}">
-                               <dt><label for="text">{lang}wcf.conversation.message{/lang}</label></dt>
-                               <dd>
-                                       <textarea id="text" name="text" rows="20" cols="40" data-autosave="com.woltlab.wcf.conversation.conversationAdd">{$text}</textarea>
-                                       {if $errorField == 'text'}
-                                               <small class="innerError">
-                                                       {if $errorType == 'empty'}
-                                                               {lang}wcf.global.form.error.empty{/lang}
-                                                       {elseif $errorType == 'tooLong'}
-                                                               {lang}wcf.message.error.tooLong{/lang}
-                                                       {elseif $errorType == 'censoredWordsFound'}
-                                                               {lang}wcf.message.error.censoredWordsFound{/lang}
-                                                       {elseif $errorType == 'disallowedBBCodes'}
-                                                               {lang}wcf.message.error.disallowedBBCodes{/lang}
-                                                       {else}
-                                                               {lang}wcf.conversation.message.error.{@$errorType}{/lang}
-                                                       {/if}
-                                               </small>
-                                       {/if}
+                                       <label><input type="checkbox" name="participantCanInvite" id="participantCanInvite" value="1"{if $participantCanInvite} checked{/if}> {lang}wcf.conversation.participantCanInvite{/lang}</label>
                                </dd>
                        </dl>
-                       
-                       {event name='messageFields'}
-               </fieldset>
+               {/if}
                
-               {include file='messageFormTabs' wysiwygContainerID='text'}
+               {event name='participantFields'}
+       </section>
                
-               {event name='fieldsets'}
-       </div>
+       <section class="section">
+               <h2 class="sectionTitle">{lang}wcf.conversation.message{/lang}</h2>
+               
+               <dl class="wide{if $errorField == 'text'} formError{/if}">
+                       <dt><label for="text">{lang}wcf.conversation.message{/lang}</label></dt>
+                       <dd>
+                               <textarea id="text" name="text" class="wysiwygTextarea"
+                                         data-autosave="com.woltlab.wcf.conversation.conversationAdd"
+                                         data-autosave-prompt="true"
+                                         data-support-mention="true"
+                               >{$text}</textarea>
+                               {if $errorField == 'text'}
+                                       <small class="innerError">
+                                               {if $errorType == 'empty'}
+                                                       {lang}wcf.global.form.error.empty{/lang}
+                                               {elseif $errorType == 'tooLong'}
+                                                       {lang}wcf.message.error.tooLong{/lang}
+                                               {elseif $errorType == 'censoredWordsFound'}
+                                                       {lang}wcf.message.error.censoredWordsFound{/lang}
+                                               {elseif $errorType == 'disallowedBBCodes'}
+                                                       {lang}wcf.message.error.disallowedBBCodes{/lang}
+                                               {else}
+                                                       {lang}wcf.conversation.message.error.{@$errorType}{/lang}
+                                               {/if}
+                                       </small>
+                               {/if}
+                       </dd>
+               </dl>
+               
+               {event name='messageFields'}
+       </section>
+       
+       {include file='messageFormTabs' wysiwygContainerID='text'}
+       
+       {event name='sections'}
        
        <div class="formSubmit">
-               <input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
+               <input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s">
                <button name="draft" accesskey="d" value="1">{lang}wcf.conversation.button.saveAsDraft{/lang}</button>
-               {include file='messageFormPreviewButton'}
+               {include file='messageFormPreviewButton' previewMessageObjectType='com.woltlab.wcf.conversation.message' previewMessageObjectID=0}
                {@SECURITY_TOKEN_INPUT_TAG}
        </div>
 </form>
 
-{include file='footer'}
-{include file='wysiwyg'}
+<script data-relocate="true">
+       require(['WoltLabSuite/Core/Ui/ItemList/User'], function(UiItemListUser) {
+               UiItemListUser.init('participants', {
+                       maxItems: {@$__wcf->getSession()->getPermission('user.conversation.maxParticipants')}
+               });
+               
+               UiItemListUser.init('invisibleParticipants', {
+                       maxItems: {@$__wcf->getSession()->getPermission('user.conversation.maxParticipants')}
+               });
+       });
+       
+       $(function() {
+               WCF.Message.Submit.registerButton('text', $('#messageContainer > .formSubmit > input[type=submit]'));
+               new WCF.Message.FormGuard();
+               
+               {include file='__messageQuoteManager' wysiwygSelector='text' supportPaste=true}
+       });
+</script>
 
-</body>
-</html>
\ No newline at end of file
+{include file='wysiwyg'}
+{include file='footer'}