diff --git a/apps/user_status/js/user-status-menu.js b/apps/user_status/js/user-status-menu.js index 210d73663c9ce7ab86a55f6ab831c26795d8fb1a..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 29bf0ed88d2ed9f86c359ac00ff69afd2825bbd1..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 eccfa67008ec5e9270239b2d70b2d558b1311b69..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 f0475b9f3f43b5c1c0ec6f2333f0dd0c0c8284fd..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 f651bc6289135be9fd97ae9fa0ef2bd85385b768..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> @@ -98,7 +100,8 @@ export default { return { clearAt: null, icon: null, - message: null, + message: '', + isSavingStatus: false, statuses: getAllStatusOptions(), } }, @@ -119,7 +122,7 @@ export default { mounted() { this.messageId = this.$store.state.userStatus.messageId this.icon = this.$store.state.userStatus.icon - this.message = this.$store.state.userStatus.message + this.message = this.$store.state.userStatus.message || '' if (this.$store.state.userStatus.clearAt !== null) { this.clearAt = { @@ -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