diff --git a/apps/user_status/js/user-status-menu.js b/apps/user_status/js/user-status-menu.js index 01098bfdfc4b6692fc63403b335a5f1c5e716dcb..bd9211e63b5a4c3e9a24d61fec6c4e6ac744edd0 100644 Binary files a/apps/user_status/js/user-status-menu.js and b/apps/user_status/js/user-status-menu.js differ diff --git a/apps/user_status/js/user-status-menu.js.map b/apps/user_status/js/user-status-menu.js.map index 04c901225ba0cf75a5b1bbd56b6834b3f8c0b7a3..9209374d916a956e79546ea4dbb2a89fff27708a 100644 Binary files a/apps/user_status/js/user-status-menu.js.map and b/apps/user_status/js/user-status-menu.js.map differ diff --git a/apps/user_status/js/user-status-modal.js b/apps/user_status/js/user-status-modal.js index 09f1acc03094b830a8af0da96de04883da247b22..e08db72a7419c4488b1dc325aaa22a1b4b75aa39 100644 Binary files a/apps/user_status/js/user-status-modal.js and b/apps/user_status/js/user-status-modal.js differ diff --git a/apps/user_status/js/user-status-modal.js.map b/apps/user_status/js/user-status-modal.js.map index 7e2045b3305f75e91a32271e2298311e3ef96a1d..83e87f35e228f21c1c67b47161cf8b6da8a38e5a 100644 Binary files a/apps/user_status/js/user-status-modal.js.map and b/apps/user_status/js/user-status-modal.js.map differ diff --git a/apps/user_status/src/components/CustomMessageInput.vue b/apps/user_status/src/components/CustomMessageInput.vue index 2fc637d974dccbcde77bd22927c7dd4c8d7d5338..f84714adddc0b02b3a0dd86587927299d2e19d34 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 3ba15ec129d155187d16730a211a8bdcfcf33c4d..0613a2be38c96c9cf885eb923b8655d5254ad1eb 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