diff options
| author | Vincent Petry <vincent@nextcloud.com> | 2020-10-09 11:50:54 +0200 |
|---|---|---|
| committer | Vincent Petry <vincent@nextcloud.com> | 2020-10-20 12:19:00 +0200 |
| commit | 08813f541d293f1411685ea30ce1e07f1dede20b (patch) | |
| tree | a3a30c832810c2305e2ea819dd7d01cf33769515 /apps/user_status/src/components/CustomMessageInput.vue | |
| parent | f7e17060226570c875ab039784a55b4178748313 (diff) | |
| download | nextcloud-server-08813f541d293f1411685ea30ce1e07f1dede20b.tar.gz nextcloud-server-08813f541d293f1411685ea30ce1e07f1dede20b.zip | |
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>
Diffstat (limited to 'apps/user_status/src/components/CustomMessageInput.vue')
| -rw-r--r-- | apps/user_status/src/components/CustomMessageInput.vue | 19 |
1 files changed, 18 insertions, 1 deletions
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> |