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>

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>

apps/user_status/src/components/SetStatusModal.vue

@@ -49,8 +49,10 @@
 					</button>
 				</EmojiPicker>
 				<CustomMessageInput
+					ref="customMessageInput"
 					:message="message"
-					@change="setMessage" />
+					@change="setMessage"
+					@submit="saveStatus" />
 			</div>
 			<PredefinedStatusesList
 				@selectStatus="selectPredefinedMessage" />
@@ -58,10 +60,10 @@
 				:clear-at="clearAt"
 				@selectClearAt="setClearAt" />
 			<div class="status-buttons">
-				<button class="status-buttons__select" @click="clearStatus">
+				<button class="status-buttons__select" :disabled="isSavingStatus" @click="clearStatus">
 					{{ $t('user_status', 'Clear status message') }}
 				</button>
-				<button class="status-buttons__primary primary" @click="saveStatus">
+				<button class="status-buttons__primary primary" :disabled="isSavingStatus" @click="saveStatus">
 					{{ $t('user_status', 'Set status message') }}
 				</button>
 			</div>
@@ -99,6 +101,7 @@ export default {
 			clearAt: null,
 			icon: null,
 			message: '',
+			isSavingStatus: false,
 			statuses: getAllStatusOptions(),
 		}
 	},
@@ -143,6 +146,9 @@ export default {
 		setIcon(icon) {
 			this.messageId = null
 			this.icon = icon
+			this.$nextTick(() => {
+				this.$refs.customMessageInput.focus()
+			})
 		},
 		/**
 		 * Sets a new message
@@ -178,6 +184,10 @@ export default {
 		 * @returns {Promise<void>}
 		 */
 		async saveStatus() {
+			if (this.isSavingStatus) {
+				return
+			}
+
 			try {
 				this.isSavingStatus = true