linter & after merge fix
This commit is contained in:
ilya-bkv
parent
87a99d9e8d
commit
84cea7ae4c
|
|
@ -9,12 +9,7 @@ type DialogHeader = {
|
|||
const DialogHeader = (props: DialogHeader) => {
|
||||
return (
|
||||
<header class={styles.DialogHeader}>
|
||||
<DialogCard
|
||||
isChatHeader={true}
|
||||
title={props.chat.title || props.chat.members[0].name}
|
||||
members={props.chat.members}
|
||||
ownId={props.ownId}
|
||||
/>
|
||||
<DialogCard isChatHeader={true} members={props.chat.members} ownId={props.ownId} />
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,98 +0,0 @@
|
|||
.GrowingTextarea {
|
||||
.wrapper {
|
||||
border: 2px solid #e8e8e8;
|
||||
border-radius: 8px;
|
||||
padding: 3rem 1.6rem 1.6rem;
|
||||
position: relative;
|
||||
|
||||
.growArea {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
|
||||
&::after {
|
||||
content: attr(data-replicated-value) ' ';
|
||||
white-space: pre-wrap;
|
||||
visibility: hidden;
|
||||
transition: height 1.3s ease-in-out;
|
||||
}
|
||||
|
||||
textarea {
|
||||
margin-bottom: 0;
|
||||
font-family: inherit;
|
||||
resize: none;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
|
||||
&:focus,
|
||||
&:focus-visible,
|
||||
&:active {
|
||||
border: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&::after,
|
||||
textarea {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
padding: 0;
|
||||
grid-area: 1 / 1 / 2 / 2;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
height: 0;
|
||||
opacity: 1;
|
||||
transition: all 0.3s ease-in-out;
|
||||
&.visible {
|
||||
max-height: 88px;
|
||||
height: auto;
|
||||
}
|
||||
.buttons {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.loginMessage {
|
||||
margin: 16px 0;
|
||||
display: flex;
|
||||
background: #f1f2f3;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
|
||||
.link {
|
||||
color: #2638d9;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
transition: 0.3s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
background: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
import styles from './GrowingTextarea.module.scss'
|
||||
import { showModal } from '../../../stores/ui'
|
||||
import { createEffect, createSignal, Show } from 'solid-js'
|
||||
import { t } from '../../../utils/intl'
|
||||
import Button from '../Button'
|
||||
import { clsx } from 'clsx'
|
||||
import { useSession } from '../../../context/session'
|
||||
|
||||
type Props = {
|
||||
placeholder?: string
|
||||
submit?: (value: string) => void
|
||||
submitButtonText?: string
|
||||
cancelButtonText?: string
|
||||
loading?: boolean
|
||||
errorMessage?: string
|
||||
loginRequired?: boolean
|
||||
}
|
||||
|
||||
let growArea // textarea autoresize ghost element
|
||||
|
||||
const GrowingTextarea = (props: Props) => {
|
||||
const { session } = useSession()
|
||||
const [inputText, setInputText] = createSignal<string | undefined>('')
|
||||
|
||||
const handleChangeMessage = (event) => {
|
||||
setInputText(event.target.value)
|
||||
}
|
||||
createEffect(() => {
|
||||
growArea.dataset.replicatedValue = inputText()
|
||||
})
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault()
|
||||
props.submit(inputText())
|
||||
if (!props.errorMessage) {
|
||||
setInputText('')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={(event) => handleSubmit(event)} class={styles.GrowingTextarea}>
|
||||
<div class={styles.wrapper}>
|
||||
<div class={styles.growArea} ref={growArea}>
|
||||
<textarea
|
||||
value={inputText()}
|
||||
rows={1}
|
||||
onInput={(event) => handleChangeMessage(event)}
|
||||
placeholder={props?.placeholder}
|
||||
/>
|
||||
<label for="">{props?.placeholder}</label>
|
||||
</div>
|
||||
<div class={clsx(styles.actions, { [styles.visible]: inputText().trim().length > 0 })}>
|
||||
<div class={styles.buttons}>
|
||||
<Show when={props.cancelButtonText}>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="M"
|
||||
loading={props.loading}
|
||||
onClick={() => setInputText('')}
|
||||
value={props.cancelButtonText}
|
||||
/>
|
||||
</Show>
|
||||
<Show when={props.submitButtonText}>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="M"
|
||||
type="submit"
|
||||
loading={props.loading}
|
||||
value={props.submitButtonText}
|
||||
/>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Show when={props.errorMessage}>
|
||||
<div class={styles.error}>{props.errorMessage}</div>
|
||||
</Show>
|
||||
<Show when={!session()}>
|
||||
<div class={styles.loginMessage}>
|
||||
<div>
|
||||
{t('To write a comment, you must')}
|
||||
<a
|
||||
class={styles.link}
|
||||
href={''}
|
||||
onClick={(evt) => {
|
||||
evt.preventDefault()
|
||||
showModal('auth')
|
||||
}}
|
||||
>
|
||||
{t('sign up or sign in')}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
export default GrowingTextarea
|
||||
|
|
@ -219,7 +219,7 @@
|
|||
"It does not look like url": "Это не похоже на ссылку",
|
||||
"Something went wrong, please try again": "Что-то пошло не так, попробуйте еще раз",
|
||||
"To write a comment, you must": "Чтобы написать комментарий, необходимо",
|
||||
"Write a comment...": "Написать комментарий..."
|
||||
"Write a comment...": "Написать комментарий...",
|
||||
"Add comment": "Комментировать",
|
||||
"My subscriptions": "Подписки"
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user