diff options
Diffstat (limited to 'apps/user_status/src')
| -rw-r--r-- | apps/user_status/src/components/CustomMessageInput.vue | 19 | ||||
| -rw-r--r-- | apps/user_status/src/components/SetStatusModal.vue | 16 |
2 files changed, 31 insertions, 4 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> diff --git a/apps/user_status/src/components/SetStatusModal.vue b/apps/user_status/src/components/SetStatusModal.vue index 3ba15ec129d..0613a2be38c 100644 --- a/apps/user_status/src/components/SetStatusModal.vue +++ b/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 |