Migrate to module.scss
This commit is contained in:
ilya-bkv
parent
314f2972fe
commit
f53513f37f
|
|
@ -10,14 +10,13 @@ import { t } from '../../utils/intl'
|
|||
import { Modal } from '../Nav/Modal'
|
||||
import { showModal } from '../../stores/ui'
|
||||
import CreateModalContent from '../Inbox/CreateModalContent'
|
||||
import { clsx } from 'clsx'
|
||||
import '../../styles/Inbox.scss'
|
||||
import { useInbox } from '../../context/inbox'
|
||||
import DialogHeader from '../Inbox/DialogHeader'
|
||||
import { apiClient } from '../../utils/apiClient'
|
||||
import MessagesFallback from '../Inbox/MessagesFallback'
|
||||
import { useRouter } from '../../stores/router'
|
||||
import styles from '../Inbox/Message.module.scss'
|
||||
import { clsx } from 'clsx'
|
||||
import styles from '../../styles/Inbox.module.scss'
|
||||
|
||||
const userSearch = (array: Author[], keyword: string) => {
|
||||
const searchTerm = keyword.toLowerCase()
|
||||
|
|
@ -133,13 +132,13 @@ export const InboxView = () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div class="messages container">
|
||||
<div class={clsx('container', styles.Inbox)}>
|
||||
<Modal variant="narrow" name="inviteToChat">
|
||||
<CreateModalContent users={recipients()} />
|
||||
</Modal>
|
||||
<div class="row">
|
||||
<div class="chat-list col-md-4">
|
||||
<div class="sidebar-header">
|
||||
<div class={clsx('row', styles.row)}>
|
||||
<div class={clsx(styles.chatList, 'col-md-4')}>
|
||||
<div class={styles.sidebarHeader}>
|
||||
<Search placeholder="Поиск" onChange={getQuery} />
|
||||
<button type="button" onClick={handleOpenInviteModal}>
|
||||
<Icon name="plus-button" style={{ width: '40px', height: '40px' }} />
|
||||
|
|
@ -147,10 +146,10 @@ export const InboxView = () => {
|
|||
</div>
|
||||
|
||||
<Show when={chatsToShow}>
|
||||
<div class="chat-list__types">
|
||||
<div class={styles.chatListTypes}>
|
||||
<ul>
|
||||
<li
|
||||
class={clsx({ ['selected']: !sortByPerToPer() && !sortByGroup() })}
|
||||
class={clsx({ [styles.selected]: !sortByPerToPer() && !sortByGroup() })}
|
||||
onClick={() => {
|
||||
setSortByPerToPer(false)
|
||||
setSortByGroup(false)
|
||||
|
|
@ -159,7 +158,7 @@ export const InboxView = () => {
|
|||
<span>{t('All')}</span>
|
||||
</li>
|
||||
<li
|
||||
class={clsx({ ['selected']: sortByPerToPer() })}
|
||||
class={clsx({ [styles.selected]: sortByPerToPer() })}
|
||||
onClick={() => {
|
||||
setSortByPerToPer(true)
|
||||
setSortByGroup(false)
|
||||
|
|
@ -168,7 +167,7 @@ export const InboxView = () => {
|
|||
<span>{t('Personal')}</span>
|
||||
</li>
|
||||
<li
|
||||
class={clsx({ ['selected']: sortByGroup() })}
|
||||
class={clsx({ [styles.selected]: sortByGroup() })}
|
||||
onClick={() => {
|
||||
setSortByGroup(true)
|
||||
setSortByPerToPer(false)
|
||||
|
|
@ -179,8 +178,8 @@ export const InboxView = () => {
|
|||
</ul>
|
||||
</div>
|
||||
</Show>
|
||||
<div class="holder">
|
||||
<div class="dialogs">
|
||||
<div class={styles.holder}>
|
||||
<div class={styles.dialogs}>
|
||||
<For each={chatsToShow()}>
|
||||
{(chat) => (
|
||||
<DialogCard
|
||||
|
|
@ -199,7 +198,7 @@ export const InboxView = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-8 conversation">
|
||||
<div class={clsx('col-md-8', styles.conversation)}>
|
||||
<Show
|
||||
when={currentDialog()}
|
||||
fallback={
|
||||
|
|
@ -211,8 +210,8 @@ export const InboxView = () => {
|
|||
}
|
||||
>
|
||||
<DialogHeader ownId={currentUserId()} chat={currentDialog()} />
|
||||
<div class="conversation__messages">
|
||||
<div class="conversation__messages-container" ref={chatWindow}>
|
||||
<div class={styles.conversationMessages}>
|
||||
<div class={styles.messagesContainer} ref={chatWindow}>
|
||||
<For each={messages()}>
|
||||
{(message) => (
|
||||
<Message
|
||||
|
|
@ -224,36 +223,37 @@ export const InboxView = () => {
|
|||
)}
|
||||
</For>
|
||||
|
||||
{/*<div class="conversation__date">*/}
|
||||
{/*<div class={styles.conversationDate}>*/}
|
||||
{/* <time>12 сентября</time>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message-form">
|
||||
<div class={styles.messageForm}>
|
||||
<Show when={messageToReply()}>
|
||||
<div class="reply">
|
||||
<div class="icon">
|
||||
<Icon name="chat-reply" class={styles.reply} />
|
||||
<div class={styles.reply}>
|
||||
<div class={styles.icon}>
|
||||
<Icon name="chat-reply" />
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="author">
|
||||
<div class={styles.body}>
|
||||
<div class={styles.author}>
|
||||
{
|
||||
currentDialog().members.find(
|
||||
(member) => member.id === Number(messageToReply().author)
|
||||
).name
|
||||
}
|
||||
</div>
|
||||
<div class="quote">{messageToReply().body}</div>
|
||||
<div class={styles.quote}>{messageToReply().body}</div>
|
||||
</div>
|
||||
<div class="cancel icon" onClick={() => setMessageToReply(null)}>
|
||||
<div class={clsx(styles.cancel, styles.icon)} onClick={() => setMessageToReply(null)}>
|
||||
<Icon name="close-gray" />
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
<div class="wrapper">
|
||||
<div class="grow-wrap" ref={textareaParent}>
|
||||
<div class={styles.wrapper}>
|
||||
<div class={styles.growWrap} ref={textareaParent}>
|
||||
<textarea
|
||||
class={styles.textInput}
|
||||
value={postMessageText()}
|
||||
rows={1}
|
||||
onInput={(event) => handleChangeMessage(event)}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ main {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.messages {
|
||||
.Inbox {
|
||||
top: 74px;
|
||||
height: calc(100% - 74px);
|
||||
left: 0;
|
||||
|
|
@ -32,7 +32,7 @@ main {
|
|||
}
|
||||
|
||||
// список диалогов и юзеров
|
||||
.chat-list {
|
||||
.chatList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
|
|
@ -40,7 +40,7 @@ main {
|
|||
|
||||
$fade-height: 10px;
|
||||
|
||||
.sidebar-header {
|
||||
.sidebarHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
|
@ -94,7 +94,7 @@ main {
|
|||
}
|
||||
|
||||
// табы выбора списка
|
||||
.chat-list__types {
|
||||
.chatListTypes {
|
||||
@include font-size(1.7rem);
|
||||
|
||||
margin: 16px 0;
|
||||
|
|
@ -127,13 +127,7 @@ main {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.conversation__messages {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.message-form {
|
||||
.messageForm {
|
||||
background: #fff;
|
||||
padding: 2px 0 12px;
|
||||
|
||||
|
|
@ -150,7 +144,7 @@ main {
|
|||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
.cancel {
|
||||
&.cancel {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
@ -179,7 +173,7 @@ main {
|
|||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.grow-wrap {
|
||||
.growWrap {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
|
||||
|
|
@ -191,7 +185,7 @@ main {
|
|||
transition: height 1.3s ease-in-out;
|
||||
}
|
||||
|
||||
& textarea {
|
||||
.textInput {
|
||||
margin-bottom: 0;
|
||||
font-family: inherit;
|
||||
border: none;
|
||||
|
|
@ -243,36 +237,40 @@ main {
|
|||
}
|
||||
}
|
||||
|
||||
.conversation__messages-container {
|
||||
left: 0;
|
||||
height: 100%;
|
||||
.conversationMessages {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.conversation__date {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
&::before {
|
||||
background: #141414;
|
||||
content: '';
|
||||
height: 1px;
|
||||
.messagesContainer {
|
||||
left: 0;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
top: 0.8em;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
.conversation__date {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
time {
|
||||
@include font-size(1.5rem);
|
||||
&::before {
|
||||
background: #141414;
|
||||
content: '';
|
||||
height: 1px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0.8em;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
background: #fff;
|
||||
color: #9fa1a7;
|
||||
padding: 0 0.5em;
|
||||
time {
|
||||
@include font-size(1.5rem);
|
||||
|
||||
background: #fff;
|
||||
color: #9fa1a7;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user