diff options
Diffstat (limited to 'apps/user_status/src/components/CustomMessageInput.vue')
| -rw-r--r-- | apps/user_status/src/components/CustomMessageInput.vue | 103 |
1 files changed, 64 insertions, 39 deletions
diff --git a/apps/user_status/src/components/CustomMessageInput.vue b/apps/user_status/src/components/CustomMessageInput.vue index 88956e6871b..fb129281430 100644 --- a/apps/user_status/src/components/CustomMessageInput.vue +++ b/apps/user_status/src/components/CustomMessageInput.vue @@ -1,43 +1,49 @@ <!-- - - @copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com> - - @author Georg Ehrke <oc.list@georgehrke.com> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - - --> + - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> - <form class="custom-input__form" - @submit.prevent> - <input ref="input" - maxlength="80" - :disabled="disabled" - :placeholder="$t('user_status', 'What is your status?')" - type="text" - :value="message" - @change="change" - @keyup="change" - @paste="change" - @keyup.enter="submit"> - </form> + <div class="custom-input" role="group"> + <NcEmojiPicker container=".custom-input" @select="setIcon"> + <NcButton type="tertiary" + :aria-label="t('user_status', 'Emoji for your status message')"> + <template #icon> + {{ visibleIcon }} + </template> + </NcButton> + </NcEmojiPicker> + <div class="custom-input__container"> + <NcTextField ref="input" + maxlength="80" + :disabled="disabled" + :placeholder="t('user_status', 'What is your status?')" + :value="message" + type="text" + :label="t('user_status', 'What is your status?')" + @input="onChange" /> + </div> + </div> </template> <script> +import NcButton from '@nextcloud/vue/components/NcButton' +import NcEmojiPicker from '@nextcloud/vue/components/NcEmojiPicker' +import NcTextField from '@nextcloud/vue/components/NcTextField' + export default { name: 'CustomMessageInput', + + components: { + NcTextField, + NcButton, + NcEmojiPicker, + }, + props: { + icon: { + type: String, + default: '😀', + }, message: { type: String, required: true, @@ -48,6 +54,23 @@ export default { default: false, }, }, + + emits: [ + 'change', + 'select-icon', + ], + + computed: { + /** + * Returns the user-set icon or a smiley in case no icon is set + * + * @return {string} + */ + visibleIcon() { + return this.icon || '😀' + }, + }, + methods: { focus() { this.$refs.input.focus() @@ -58,24 +81,26 @@ export default { * * @param {Event} event The Change Event */ - change(event) { + onChange(event) { this.$emit('change', event.target.value) }, - submit(event) { - this.$emit('submit', event.target.value) + setIcon(icon) { + this.$emit('select-icon', icon) }, }, } </script> <style lang="scss" scoped> -.custom-input__form { - flex-grow: 1; +.custom-input { + display: flex; + align-items: flex-end; + gap: var(--default-grid-baseline); + width: 100%; - input { + &__container { width: 100%; - border-radius: 0 var(--border-radius) var(--border-radius) 0; } } </style> |