Move attachment upload button next to the input

This commit is contained in:
Maximilian Mader 2020-11-01 15:50:41 +01:00 committed by Tim Düsterhus
parent db515f1f1b
commit 65fdea953e
Signed by: TimWolla
GPG Key ID: 8FF75566094168AF
3 changed files with 30 additions and 13 deletions

View File

@ -378,15 +378,26 @@ $chatEmbedMaxWidth: 400px;
> div {
display: flex;
align-items: center;
> .flexibleTextarea {
flex: 1 0 auto;
max-width: 100%;
> div.chatAttachButton {
flex-grow: 0;
flex-shrink: 0;
margin-right: 5px;
}
> #chatQuickSettings {
flex: 0 0 auto;
> div.chatInputWrapper {
flex-grow: 1;
display: flex;
align-items: center;
> .flexibleTextarea {
flex: 1 0 auto;
max-width: 100%;
}
> #chatQuickSettings {
flex: 0 0 auto;
}
}
}

View File

@ -4,9 +4,6 @@
<li><a class="button" href="#" data-module="Bastelstu.be/Chat/Ui/Settings/FullscreenButton"><span class="icon icon16 fa-arrows-alt"></span> <span>{lang}chat.room.button.fullscreen{/lang}</span></a></li>
<li><a class="button" href="#" data-module="Bastelstu.be/Chat/Ui/Settings/NotificationsButton"><span class="icon icon16 fa-bell-o"></span> <span>{lang}chat.room.button.notifications{/lang}</span></a></li>
<li><a class="button" href="#" data-module="Bastelstu.be/Chat/Ui/Settings/AutoscrollButton"><span class="icon icon16 fa-arrow-down"></span> <span>{lang}chat.room.button.autoscroll{/lang}</span></a></li>
{if $__wcf->getSession()->getPermission('user.chat.canAttach')}
<li><a id="chatAttachmentUploadButton" class="button" href="#"><span class="icon icon16 fa-paperclip"></span> <span>{lang}wcf.attachment.attachments{/lang}</span></a>
{/if}
{event name='buttons'}
</ul>
</nav>

View File

@ -54,10 +54,19 @@
<div id="chatInputContainer">
<div>
<textarea maxlength="{CHAT_MAX_LENGTH}" class="long"></textarea>
<span id="chatQuickSettings">
<span class="icon icon24 fa-ellipsis-v"></span>
</span>
{if $__wcf->getSession()->getPermission('user.chat.canAttach')}
<div class="chatAttachButton">
<span id="chatAttachmentUploadButton" class="button small" title="{lang}wcf.attachment.attachments{/lang}">
<span class="icon icon16 fa-paperclip"></span>
</span>
</div>
{/if}
<div class="chatInputWrapper">
<textarea maxlength="{CHAT_MAX_LENGTH}" class="long"></textarea>
<span id="chatQuickSettings">
<span class="icon icon24 fa-ellipsis-v"></span>
</span>
</div>
</div>
<small class="innerError" style="display: none"></small>
<span class="charCounter dimmed"></span>