From 08813f541d293f1411685ea30ce1e07f1dede20b Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Fri, 9 Oct 2020 11:50:54 +0200
Subject: UX improvements change status dialog

Focus on the custom message field after picking an emoji.
Hitting the enter key while in the custom message field now triggers
saving.
Disable save buttons while saving is in progress.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 .../user_status/src/components/CustomMessageInput.vue | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

(limited to 'apps/user_status/src/components/CustomMessageInput.vue')

diff --git a/apps/user_status/src/components/CustomMessageInput.vue b/apps/user_status/src/components/CustomMessageInput.vue
index 2fc637d974d..f84714adddc 100644
--- a/apps/user_status/src/components/CustomMessageInput.vue
+++ b/apps/user_status/src/components/CustomMessageInput.vue
@@ -23,11 +23,16 @@
 		class="custom-input__form"
 		@submit.prevent>
 		<input
+			ref="input"
 			maxlength="80"
+			:disabled="disabled"
 			:placeholder="$t('user_status', 'What\'s your status?')"
 			type="text"
 			:value="message"
-			@change="change">
+			@change="change"
+			@keyup="change"
+			@paste="change"
+			@keyup.enter="submit">
 	</form>
 </template>
 
@@ -40,8 +45,16 @@ export default {
 			required: true,
 			default: () => '',
 		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	methods: {
+		focus() {
+			this.$refs.input.focus()
+		},
+
 		/**
 		 * Notifies the parent component about a changed input
 		 *
@@ -50,6 +63,10 @@ export default {
 		change(event) {
 			this.$emit('change', event.target.value)
 		},
+
+		submit(event) {
+			this.$emit('submit', event.target.value)
+		},
 	},
 }
 </script>
-- 
cgit v1.2.3