fix(user_status): remove border from emoji picker

- clean styles
- lint component

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
pull/41641/head
Maksim Sukharev 2 years ago
parent f74084cd3d
commit 17592f7eb7
No known key found for this signature in database
GPG Key ID: 6349D071889BD1D5
  1. 32
      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>

Loading…
Cancel
Save