diff options
author | Marco Ambrosini <marcoambrosini@pm.me> | 2021-05-14 15:55:08 +0300 |
---|---|---|
committer | Marco Ambrosini <marcoambrosini@pm.me> | 2021-06-11 10:24:43 +0300 |
commit | ebff88cd28597b8933eb0e5970a6d4132fa5263e (patch) | |
tree | 5487da85b3c0ab2bd19945e087d3921640d66488 /src/components | |
parent | d8b4920b3ca12323c05a2049e7acbc33facf8176 (diff) |
Cleanup new message form layout and bring the emoji button within the input
Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue | 4 | ||||
-rw-r--r-- | src/components/NewMessageForm/NewMessageForm.vue | 46 |
2 files changed, 40 insertions, 10 deletions
diff --git a/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue index a0d11281d..e72d2febc 100644 --- a/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue +++ b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue @@ -412,10 +412,10 @@ export default { overflow: visible; width: 100%; border:none; - margin: 0 6px !important; + margin: 0 4px !important; word-break: break-word; white-space: pre-wrap; - padding: 8px 16px; + padding: 8px 16px 8px 48px; } // Support for the placeholder text in the div contenteditable diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue index 29d2c493e..3abc8f56d 100644 --- a/src/components/NewMessageForm/NewMessageForm.vue +++ b/src/components/NewMessageForm/NewMessageForm.vue @@ -38,7 +38,8 @@ class="new-message-form" @submit.prevent> <div - v-if="canUploadFiles || canShareFiles"> + v-if="canUploadFiles || canShareFiles" + class="new-message-form__upload-menu"> <Actions ref="uploadMenu" container="#content-vue" @@ -66,14 +67,14 @@ </ActionButton> </Actions> </div> - <div> + <div class="new-message-form__emoji-picker"> <EmojiPicker container="#content-vue" @select="addEmoji"> <button type="button" :disabled="disabled" - class="nc-button nc-button__main" + class="nc-button nc-button__main emoji-picker-button" :aria-label="t('spreed', 'Add emoji')" :aria-haspopup="true"> <EmoticonOutline @@ -106,7 +107,7 @@ :disabled="disabled" type="submit" :aria-label="t('spreed', 'Send message')" - class="nc-button nc-button__main" + class="nc-button nc-button__main new-message-form__send-button" @click.prevent="handleSubmit"> <Send title="" @@ -459,17 +460,46 @@ export default { } .new-message { - max-width: $messages-list-max-width + 145px; - flex: 1 1 100%; + width: 100%; + display: flex; + justify-content: center; &-form { display: flex; - align-items: flex-end; + position:relative; + flex: 0 1 650px; + margin: 0 48px; + &__emoji-picker { + position: absolute; + left: 6px; + bottom: 0; + .emoji-picker-button { + opacity: .7; + &:hover, + &:active, + &:focus { + opacity: 1; + background-color: transparent; + } + } + } + + &__upload-menu { + position: absolute; + left: -44px; + bottom: 0; + } + + &__send-button { + position: absolute; + right: -44px; + bottom: 0; + } + &__input { flex-grow: 1; max-height: $message-form-max-height; overflow-y: auto; overflow-x: hidden; - max-width: 638px; } &__quote { margin: 0 16px 12px 24px; |