diff options
Diffstat (limited to 'apps/user_status/src/components/CustomMessageInput.vue')
| -rw-r--r-- | apps/user_status/src/components/CustomMessageInput.vue | 81 |
1 files changed, 22 insertions, 59 deletions
diff --git a/apps/user_status/src/components/CustomMessageInput.vue b/apps/user_status/src/components/CustomMessageInput.vue index 4fd649dc166..fb129281430 100644 --- a/apps/user_status/src/components/CustomMessageInput.vue +++ b/apps/user_status/src/components/CustomMessageInput.vue @@ -1,56 +1,40 @@ <!-- - - @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> - <div class="custom-input"> + <div class="custom-input" role="group"> <NcEmojiPicker container=".custom-input" @select="setIcon"> - <NcButton class="custom-input__emoji-button" type="tertiary"> - {{ visibleIcon }} + <NcButton type="tertiary" + :aria-label="t('user_status', 'Emoji for your status message')"> + <template #icon> + {{ visibleIcon }} + </template> </NcButton> </NcEmojiPicker> <div class="custom-input__container"> - <label class="hidden-visually" for="user_status_message"> - {{ t('user_status', 'What is your status?') }} - </label> - <input id="user_status_message" - ref="input" + <NcTextField ref="input" maxlength="80" :disabled="disabled" - :placeholder="$t('user_status', 'What is your status?')" - type="text" + :placeholder="t('user_status', 'What is your status?')" :value="message" - @change="onChange" - @keyup="onKeyup" - @paste="onKeyup"> + type="text" + :label="t('user_status', 'What is your status?')" + @input="onChange" /> </div> </div> </template> <script> -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' -import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js' +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, }, @@ -73,8 +57,7 @@ export default { emits: [ 'change', - 'submit', - 'icon-selected', + 'select-icon', ], computed: { @@ -98,12 +81,8 @@ export default { * * @param {Event} event The Change Event */ - onKeyup(event) { - this.$emit('change', event.target.value) - }, - onChange(event) { - this.$emit('submit', event.target.value) + this.$emit('change', event.target.value) }, setIcon(icon) { @@ -116,28 +95,12 @@ export default { <style lang="scss" scoped> .custom-input { display: flex; + align-items: flex-end; + gap: var(--default-grid-baseline); width: 100%; - &__emoji-button { - min-height: 36px; - padding: 0; - border: 2px solid var(--color-border-maxcontrast); - border-right: none; - border-radius: var(--border-radius) 0 0 var(--border-radius); - - &:hover { - border-color: var(--color-primary-element); - } - } - &__container { width: 100%; - - input { - width: 100%; - margin: 0; - border-radius: 0 var(--border-radius) var(--border-radius) 0; - } } } </style> |