Merge pull request #4584 from nextcloud/feature/noid/new-message-form-facelift

New message form facelift

8 files changed, 95 insertions, 37 deletions

diff --git a/src/assets/variables.scss b/src/assets/variables.scss
index cd0a3aa4c..ca33b524b 100644
--- a/src/assets/variables.scss
+++ b/src/assets/variables.scss
@@ -66,7 +66,7 @@ $message-max-width: 680px;
 $message-utils-width: 100px;
 
 //message form max height
-$message-form-max-height: 150px;
+$message-form-max-height: 180px;
 
 $top-bar-height: 60px;
 
diff --git a/src/components/ChatView.vue b/src/components/ChatView.vue
index 299bc7916..9668e6db8 100644
--- a/src/components/ChatView.vue
+++ b/src/components/ChatView.vue
@@ -45,9 +45,12 @@
 		<MessagesList
 			role="region"
 			:aria-label="t('spreed', 'Conversation messages')"
-			:token="token" />
+			:is-chat-scrolled-to-bottom="isChatScrolledToBottom"
+			:token="token"
+			@setChatScrolledToBottom="setScrollStatus" />
 		<NewMessageForm
 			role="region"
+			:is-chat-scrolled-to-bottom="isChatScrolledToBottom"
 			:aria-label="t('spreed', 'Post message')" />
 	</div>
 </template>
@@ -77,6 +80,12 @@ export default {
 	data: function() {
 		return {
 			isDraggingOver: false,
+			/**
+			 * Initialised as true as when we open a new conversation we're scrolling to
+			 * the bottom for now. In the future when we'll open the conversation close
+			 * to the scroll position of the last read message, we will need to change this.
+			 */
+			isChatScrolledToBottom: true,
 		}
 	},
 
@@ -128,6 +137,10 @@ export default {
 			// Uploads and shares the files
 			processFiles(files, this.token, uploadId)
 		},
+
+		setScrollStatus(payload) {
+			this.isChatScrolledToBottom = payload
+		},
 	},
 
 }
@@ -152,7 +165,7 @@ export default {
 	background: var(--color-primary-light);
 	z-index: 11;
 	display: flex;
-	box-shadow: 0px 0px 36px var(--color-box-shadow);
+	box-shadow: 0 0 36px var(--color-box-shadow);
 	border-radius: var(--border-radius);
 	opacity: 90%;
 }
diff --git a/src/components/ConversationSettings/ConversationSettingsDialog.vue b/src/components/ConversationSettings/ConversationSettingsDialog.vue
index 6e55e61af..ab479b671 100644
--- a/src/components/ConversationSettings/ConversationSettingsDialog.vue
+++ b/src/components/ConversationSettings/ConversationSettingsDialog.vue
@@ -136,7 +136,7 @@ export default {
 	margin-top: 25px;
 
 	&:first-child {
-		margin-top: 0px;
+		margin-top: 0;
 	}
 }
 </style>
diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
index 3135f79f1..4b474b8f4 100644
--- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
@@ -381,7 +381,7 @@ it back */
 	display: flex;
 	flex: 0 0 40px;
 	height: 50px;
-	box-shadow: 0px -10px 5px var(--color-main-background);
+	box-shadow: 0 -10px 5px var(--color-main-background);
 	z-index: 1;
 	// Same as above
 	width: $dialog-width - $dialog-margin * 2;
@@ -407,7 +407,7 @@ it back */
 	margin-top: 25px;
 
 	&:first-child {
-		margin-top: 0px;
+		margin-top: 0;
 	}
 }
 
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index fe98af035..6d316f9fb 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -52,7 +52,7 @@ get the messagesList array and loop through the list to generate the messages.
 				:count="15" />
 		</template>
 		<transition name="fade">
-			<button v-show="!isScrolledToBottom"
+			<button v-show="!isChatScrolledToBottom"
 				:aria-label="scrollToBottomAriaLabel"
 				class="scroll-to-bottom"
 				@click="smoothScrollToBottom">
@@ -98,6 +98,11 @@ export default {
 			type: String,
 			required: true,
 		},
+
+		isChatScrolledToBottom: {
+			type: Boolean,
+			required: true,
+		},
 	},
 
 	data: function() {
@@ -115,12 +120,6 @@ export default {
 			 */
 			cancelFetchMessages: () => {},
 			/**
-			 * Initialised as true as when we open a new conversation we're scrolling to
-			 * the bottom for now. In the future when we'll open the conversation close
-			 * to the scroll position of the last red message, we wil need to change this.
-			 */
-			isScrolledToBottom: true,
-			/**
 			 * When scrolling to the top of the div .scroller we start loading previous
 			 * messages. This boolean allows us to show/hide the loader.
 			 */
@@ -187,7 +186,7 @@ export default {
 		 * @returns {boolean}
 		 */
 		isSticky() {
-			return this.isScrolledToBottom
+			return this.isChatScrolledToBottom
 		},
 
 		/**
@@ -544,7 +543,7 @@ export default {
 
 		debounceHandleScroll: debounce(function() {
 			this.handleScroll()
-		}, 200),
+		}, 50),
 		/**
 		 * When the div is scrolled, this method checks if it's been scrolled to the top
 		 * or to the bottom of the list bottom.
@@ -556,7 +555,7 @@ export default {
 			const elementHeight = this.scroller.clientHeight
 			const tolerance = 10
 			if (scrollOffset < elementHeight + tolerance && scrollOffset > elementHeight - tolerance) {
-				this.isScrolledToBottom = true
+				this.setChatScrolledToBottom(true)
 				this.displayMessagesLoader = false
 				this.previousScrollTopValue = scrollTop
 			} else if (scrollHeight > elementHeight && scrollTop < 800 && scrollTop <= this.previousScrollTopValue) {
@@ -567,7 +566,7 @@ export default {
 				this.displayMessagesLoader = false
 				this.previousScrollTopValue = scrollTop
 			} else {
-				this.isScrolledToBottom = false
+				this.setChatScrolledToBottom(false)
 				this.displayMessagesLoader = false
 				this.previousScrollTopValue = scrollTop
 			}
@@ -578,9 +577,9 @@ export default {
 		 * @param {boolean} options.force Set to true, if the chat should be scrolled to the bottom even when it was not before
 		 */
 		handleScrollChatToBottomEvent(options) {
-			if ((options && options.force) || this.isScrolledToBottom) {
+			if ((options && options.force) || this.isChatScrolledToBottom) {
 				this.scrollToBottom()
-				this.isScrolledToBottom = true
+				this.setChatScrolledToBottom(true)
 			}
 		},
 
@@ -593,7 +592,7 @@ export default {
 					top: this.scroller.scrollHeight,
 					behavior: 'smooth',
 					 })
-				this.isScrolledToBottom = true
+				this.setChatScrolledToBottom(true)
 			})
 		},
 		/**
@@ -602,7 +601,7 @@ export default {
 		scrollToBottom() {
 			this.$nextTick(function() {
 				this.scroller.scrollTop = this.scroller.scrollHeight
-				this.isScrolledToBottom = true
+				this.setChatScrolledToBottom(true)
 			})
 
 		},
@@ -688,6 +687,10 @@ export default {
 				}
 			}
 		},
+
+		setChatScrolledToBottom(boolean) {
+			this.$emit('setChatScrolledToBottom', boolean)
+		},
 	},
 }
 </script>
diff --git a/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
index a03d3dbe0..8a9b9aac5 100644
--- a/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
+++ b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
@@ -22,6 +22,7 @@
 <template>
 	<At ref="at"
 		v-model="text"
+		class="atwho-wrapper"
 		name-key="label"
 		:members="autoCompleteMentionCandidates"
 		:filter-match="atFilter"
@@ -389,6 +390,10 @@ export default {
 <style lang="scss" scoped>
 @import '../../../assets/variables';
 
+.atwho-wrapper {
+	display: flex;
+}
+
 .new-message-form__advancedinput {
 	overflow: visible;
 	width: 100%;
@@ -397,12 +402,21 @@ export default {
 	margin-left: 6px !important;
 	word-break: break-word;
 	white-space: pre-wrap;
+	padding: 8px 16px;
 }
 
 // Support for the placeholder text in the div contenteditable
 div[contenteditable] {
 	font-size: $chat-font-size;
 	line-height: $chat-line-height;
+	min-height: $clickable-area;
+	border-radius: $clickable-area / 2;
+	border: 1px solid var(--color-border-dark);
+	&:hover,
+	&:focus,
+	&:active {
+		border: 1px solid var(--color-primary-element) !important;
+	}
 }
 
 // Support for the placeholder text in the div contenteditable
diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index d7ee2cc21..d61141bd3 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -21,7 +21,8 @@
 
 <template>
 	<div
-		class="wrapper">
+		class="wrapper"
+		:class="{'wrapper--chatScrolledToBottom': isChatScrolledToBottom}">
 		<!--native file picker, hidden -->
 		<input id="file-upload"
 			ref="fileUploadInput"
@@ -76,11 +77,12 @@
 					</EmojiPicker>
 				</div>
 				<div class="new-message-form__input">
-					<Quote
-						v-if="messageToBeReplied"
-						:is-new-message-form-quote="true"
-						:parent-id="messageToBeReplied.id"
-						v-bind="messageToBeReplied" />
+					<div v-if="messageToBeReplied" class="new-message-form__quote">
+						<Quote
+							:is-new-message-form-quote="true"
+							v-bind="messageToBeReplied" />
+					</div>
+
 					<AdvancedInput
 						ref="advancedInput"
 						v-model="text"
@@ -96,8 +98,12 @@
 					:disabled="isReadOnly"
 					type="submit"
 					:aria-label="t('spreed', 'Send message')"
-					class="new-message-form__button submit icon-confirm-fade"
-					@click.prevent="handleSubmit" />
+					class="new-message-form__button submit"
+					@click.prevent="handleSubmit">
+					<Send
+						:size="20"
+						decorative />
+				</button>
 			</form>
 		</div>
 	</div>
@@ -117,6 +123,7 @@ import { processFiles } from '../../utils/fileUpload'
 import { CONVERSATION } from '../../constants'
 import createTemporaryMessage from '../../utils/temporaryMessage'
 import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline'
+import Send from 'vue-material-design-icons/Send'
 
 const picker = getFilePickerBuilder(t('spreed', 'File to share'))
 	.setMultiSelect(false)
@@ -134,6 +141,14 @@ export default {
 		ActionButton,
 		EmojiPicker,
 		EmoticonOutline,
+		Send,
+	},
+
+	props: {
+		isChatScrolledToBottom: {
+			type: Boolean,
+			required: true,
+		},
 	},
 	data: function() {
 		return {
@@ -397,32 +412,45 @@ export default {
 .wrapper {
 	position: sticky;
 	bottom: 0;
-	background-color: var(--color-main-background);
 	display: flex;
 	justify-content: center;
-	border-top: 1px solid var(--color-border-dark);
-	padding: 4px 0;
+	padding: 12px 0;
+	border-top: 1px solid var(--color-border);
+	&--chatScrolledToBottom {
+		border-top: none;
+	}
 }
 
 .new-message {
-	max-width: $messages-list-max-width;
+	max-width: $messages-list-max-width + 145px;
 	flex: 1 1 100%;
 	&-form {
 		display: flex;
-		align-items: center;
+		align-items: flex-end;
 		&__input {
 			flex-grow: 1;
 			max-height: $message-form-max-height;
 			overflow-y: auto;
 			overflow-x: hidden;
-			max-width: $message-max-width;
+			max-width: 638px;
 		}
 		&__button {
 			width: 44px;
 			height: 44px;
-			margin-top: auto;
 			background-color: transparent;
 			border: none;
+			margin: 0 4px;
+			color: var(--color-main-text);
+			opacity: .9;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+		&__quote {
+			margin: 0 16px 12px 24px;
+			background-color: var(--color-background-hover);
+			padding: 8px;
+			border-radius: var(--border-radius-large);
 		}
 
 		// put a grey round background when popover is opened
diff --git a/src/components/RightSidebar/Description/Description.vue b/src/components/RightSidebar/Description/Description.vue
index 82e6b471c..400add171 100644
--- a/src/components/RightSidebar/Description/Description.vue
+++ b/src/components/RightSidebar/Description/Description.vue
@@ -379,7 +379,7 @@ export default {
 	border-radius: var(--border-radius-pill);
 	position: absolute;
 	top: 0;
-	right: 0px;
+	right: 0;
 	display: flex;
 	align-items: center;
 	justify-content: center;