New message form facelift

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
nextcloud · Nov 12, 2020 · 9f867a0 · 9f867a0
1 parent 7508a88
commit 9f867a0
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 12 deletions.
diff --git 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: 50px;
 

diff --git 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"
@@ -383,6 +384,10 @@ export default {
 <style lang="scss" scoped>
 @import '../../../assets/variables';
 
+.atwho-wrapper {
+	display: flex;
+}
+
 .new-message-form__advancedinput {
 	overflow: visible;
 	width: 100%;
@@ -391,12 +396,16 @@ 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;
+	border-radius: 20px;
+	min-height: $clickable-area;
+	border-radius: $clickable-area / 2;
 }
 
 // Support for the placeholder text in the div contenteditable

diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
@@ -73,10 +73,12 @@
 					</EmojiPicker>
 				</div>
 				<div class="new-message-form__input">
-					<Quote
-						v-if="messageToBeReplied"
-						:is-new-message-form-quote="true"
-						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"
@@ -91,8 +93,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>
@@ -112,6 +118,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)
@@ -129,6 +136,7 @@ export default {
 		ActionButton,
 		EmojiPicker,
 		EmoticonOutline,
+		Send,
 	},
 	data: function() {
 		return {
@@ -394,19 +402,18 @@ 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;
+	background-color: var(--color-background-hover);
 }
 
 .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;
@@ -420,6 +427,15 @@ export default {
 			margin-top: auto;
 			background-color: transparent;
 			border: none;
+			margin: 0 4px;
+			color: var(--color-main-text);
+			opacity: .9;
+		}
+		&__quote {
+			margin: 0px 16px 12px 24px;
+			background-color: var(--color-background-dark);
+			padding: 8px;
+			border-radius: var(--border-radius-large);
 		}
 
 		// put a grey round background when popover is opened