|
|
|
@ -22,7 +22,6 @@ |
|
|
|
|
<div class="custom-input" role="group"> |
|
|
|
|
<NcEmojiPicker container=".custom-input" @select="setIcon"> |
|
|
|
|
<NcButton type="tertiary" |
|
|
|
|
class="custom-input__emoji-button" |
|
|
|
|
:aria-label="t('user_status', 'Emoji for your status message')"> |
|
|
|
|
<template #icon> |
|
|
|
|
{{ visibleIcon }} |
|
|
|
@ -30,11 +29,11 @@ |
|
|
|
|
</NcButton> |
|
|
|
|
</NcEmojiPicker> |
|
|
|
|
<div class="custom-input__container"> |
|
|
|
|
<NcTextField maxlength="80" |
|
|
|
|
<NcTextField ref="input" |
|
|
|
|
maxlength="80" |
|
|
|
|
:disabled="disabled" |
|
|
|
|
:placeholder="$t('user_status', 'What is your status?')" |
|
|
|
|
:placeholder="t('user_status', 'What is your status?')" |
|
|
|
|
:value="message" |
|
|
|
|
ref="input" |
|
|
|
|
type="text" |
|
|
|
|
:label="t('user_status', 'What is your status?')" |
|
|
|
|
@input="onChange" /> |
|
|
|
@ -45,7 +44,7 @@ |
|
|
|
|
<script> |
|
|
|
|
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' |
|
|
|
|
import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js' |
|
|
|
|
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js' |
|
|
|
|
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js' |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
name: 'CustomMessageInput', |
|
|
|
@ -74,8 +73,7 @@ export default { |
|
|
|
|
|
|
|
|
|
emits: [ |
|
|
|
|
'change', |
|
|
|
|
'submit', |
|
|
|
|
'icon-selected', |
|
|
|
|
'select-icon', |
|
|
|
|
], |
|
|
|
|
|
|
|
|
|
computed: { |
|
|
|
@ -113,28 +111,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> |
|
|
|
|