fix(user_status): remove border from emoji picker

- clean styles
- lint component

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

diff --git a/apps/user_status/src/components/CustomMessageInput.vue b/apps/user_status/src/components/CustomMessageInput.vue
index 4689e5a8b800deb93c3f7aebf12ebb2d2ad676a5..6214a13ac917fe389f66d81f83fa77ad4c87e0d0 100644 (file)
--- a/apps/user_status/src/components/CustomMessageInput.vue
+++ b/apps/user_status/src/components/CustomMessageInput.vue
@@ -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>