Cleanup new message form layout and bring the emoji button within the input

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

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;