discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Migrate to module.scss

Browse Source
This commit is contained in:
ilya-bkv 2022-12-10 05:19:33 +03:00
parent 314f2972fe
commit f53513f37f
2 changed files with 62 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/Views/Inbox.tsx
View File

@ -10,14 +10,13 @@ import { t } from '../../utils/intl'
import { Modal } from '../Nav/Modal' import { Modal } from '../Nav/Modal'
import { showModal } from '../../stores/ui' import { showModal } from '../../stores/ui'
import CreateModalContent from '../Inbox/CreateModalContent' import CreateModalContent from '../Inbox/CreateModalContent'
import { clsx } from 'clsx'
import '../../styles/Inbox.scss'
import { useInbox } from '../../context/inbox' import { useInbox } from '../../context/inbox'
import DialogHeader from '../Inbox/DialogHeader' import DialogHeader from '../Inbox/DialogHeader'
import { apiClient } from '../../utils/apiClient' import { apiClient } from '../../utils/apiClient'
import MessagesFallback from '../Inbox/MessagesFallback' import MessagesFallback from '../Inbox/MessagesFallback'
import { useRouter } from '../../stores/router' 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 userSearch = (array: Author[], keyword: string) => {
const searchTerm = keyword.toLowerCase() const searchTerm = keyword.toLowerCase()
@ -133,13 +132,13 @@ export const InboxView = () => {
} }
return ( return (
<div class="messages container"> <div class={clsx('container', styles.Inbox)}>
<Modal variant="narrow" name="inviteToChat"> <Modal variant="narrow" name="inviteToChat">
<CreateModalContent users={recipients()} /> <CreateModalContent users={recipients()} />
</Modal> </Modal>
<div class="row"> <div class={clsx('row', styles.row)}>
<div class="chat-list col-md-4"> <div class={clsx(styles.chatList, 'col-md-4')}>
<div class="sidebar-header"> <div class={styles.sidebarHeader}>
<Search placeholder="Поиск" onChange={getQuery} /> <Search placeholder="Поиск" onChange={getQuery} />
<button type="button" onClick={handleOpenInviteModal}> <button type="button" onClick={handleOpenInviteModal}>
<Icon name="plus-button" style={{ width: '40px', height: '40px' }} /> <Icon name="plus-button" style={{ width: '40px', height: '40px' }} />
@ -147,10 +146,10 @@ export const InboxView = () => {
</div> </div>
<Show when={chatsToShow}> <Show when={chatsToShow}>
<div class="chat-list__types"> <div class={styles.chatListTypes}>
<ul> <ul>
<li <li
class={clsx({ ['selected']: !sortByPerToPer() && !sortByGroup() })} class={clsx({ [styles.selected]: !sortByPerToPer() && !sortByGroup() })}
onClick={() => { onClick={() => {
setSortByPerToPer(false) setSortByPerToPer(false)
setSortByGroup(false) setSortByGroup(false)
@ -159,7 +158,7 @@ export const InboxView = () => {
<span>{t('All')}</span> <span>{t('All')}</span>
</li> </li>
<li <li
class={clsx({ ['selected']: sortByPerToPer() })} class={clsx({ [styles.selected]: sortByPerToPer() })}
onClick={() => { onClick={() => {
setSortByPerToPer(true) setSortByPerToPer(true)
setSortByGroup(false) setSortByGroup(false)
@ -168,7 +167,7 @@ export const InboxView = () => {
<span>{t('Personal')}</span> <span>{t('Personal')}</span>
</li> </li>
<li <li
class={clsx({ ['selected']: sortByGroup() })} class={clsx({ [styles.selected]: sortByGroup() })}
onClick={() => { onClick={() => {
setSortByGroup(true) setSortByGroup(true)
setSortByPerToPer(false) setSortByPerToPer(false)
@ -179,8 +178,8 @@ export const InboxView = () => {
</ul> </ul>
</div> </div>
</Show> </Show>
<div class="holder"> <div class={styles.holder}>
<div class="dialogs"> <div class={styles.dialogs}>
<For each={chatsToShow()}> <For each={chatsToShow()}>
{(chat) => ( {(chat) => (
<DialogCard <DialogCard
@ -199,7 +198,7 @@ export const InboxView = () => {
</div> </div>
</div> </div>
<div class="col-md-8 conversation"> <div class={clsx('col-md-8', styles.conversation)}>
<Show <Show
when={currentDialog()} when={currentDialog()}
fallback={ fallback={
@ -211,8 +210,8 @@ export const InboxView = () => {
} }
> >
<DialogHeader ownId={currentUserId()} chat={currentDialog()} /> <DialogHeader ownId={currentUserId()} chat={currentDialog()} />
<div class="conversation__messages"> <div class={styles.conversationMessages}>
<div class="conversation__messages-container" ref={chatWindow}> <div class={styles.messagesContainer} ref={chatWindow}>
<For each={messages()}> <For each={messages()}>
{(message) => ( {(message) => (
<Message <Message
@ -224,36 +223,37 @@ export const InboxView = () => {
)} )}
</For> </For>
{/*<div class="conversation__date">*/} {/*<div class={styles.conversationDate}>*/}
{/* <time>12 сентября</time>*/} {/* <time>12 сентября</time>*/}
{/*</div>*/} {/*</div>*/}
</div> </div>
</div> </div>
<div class="message-form"> <div class={styles.messageForm}>
<Show when={messageToReply()}> <Show when={messageToReply()}>
<div class="reply"> <div class={styles.reply}>
<div class="icon"> <div class={styles.icon}>
<Icon name="chat-reply" class={styles.reply} /> <Icon name="chat-reply" />
</div> </div>
<div class="body"> <div class={styles.body}>
<div class="author"> <div class={styles.author}>
{ {
currentDialog().members.find( currentDialog().members.find(
(member) => member.id === Number(messageToReply().author) (member) => member.id === Number(messageToReply().author)
).name ).name
} }
</div> </div>
<div class="quote">{messageToReply().body}</div> <div class={styles.quote}>{messageToReply().body}</div>
</div> </div>
<div class="cancel icon" onClick={() => setMessageToReply(null)}> <div class={clsx(styles.cancel, styles.icon)} onClick={() => setMessageToReply(null)}>
<Icon name="close-gray" /> <Icon name="close-gray" />
</div> </div>
</div> </div>
</Show> </Show>
<div class="wrapper"> <div class={styles.wrapper}>
<div class="grow-wrap" ref={textareaParent}> <div class={styles.growWrap} ref={textareaParent}>
<textarea <textarea
class={styles.textInput}
value={postMessageText()} value={postMessageText()}
rows={1} rows={1}
onInput={(event) => handleChangeMessage(event)} onInput={(event) => handleChangeMessage(event)}

30
src/styles/Inbox.scss → src/styles/Inbox.module.scss
View File

@ -5,7 +5,7 @@ main {
position: relative; position: relative;
} }
.messages { .Inbox {
top: 74px; top: 74px;
height: calc(100% - 74px); height: calc(100% - 74px);
left: 0; left: 0;
@ -32,7 +32,7 @@ main {
} }
// список диалогов и юзеров // список диалогов и юзеров
.chat-list { .chatList {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 10px; padding: 10px;
@ -40,7 +40,7 @@ main {
$fade-height: 10px; $fade-height: 10px;
.sidebar-header { .sidebarHeader {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
@ -94,7 +94,7 @@ main {
} }
// табы выбора списка // табы выбора списка
.chat-list__types { .chatListTypes {
@include font-size(1.7rem); @include font-size(1.7rem);
margin: 16px 0; margin: 16px 0;
@ -127,13 +127,7 @@ main {
flex-direction: column; flex-direction: column;
} }
.conversation__messages { .messageForm {
flex: 1;
overflow: auto;
position: relative;
}
.message-form {
background: #fff; background: #fff;
padding: 2px 0 12px; padding: 2px 0 12px;
@ -150,7 +144,7 @@ main {
width: 40px; width: 40px;
height: 40px; height: 40px;
.cancel { &.cancel {
cursor: pointer; cursor: pointer;
} }
} }
@ -179,7 +173,7 @@ main {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
.grow-wrap { .growWrap {
display: grid; display: grid;
width: 100%; width: 100%;
@ -191,7 +185,7 @@ main {
transition: height 1.3s ease-in-out; transition: height 1.3s ease-in-out;
} }
& textarea { .textInput {
margin-bottom: 0; margin-bottom: 0;
font-family: inherit; font-family: inherit;
border: none; border: none;
@ -243,7 +237,11 @@ main {
} }
} }
.conversation__messages-container { .conversationMessages {
flex: 1;
overflow: auto;
position: relative;
.messagesContainer {
left: 0; left: 0;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
@ -252,7 +250,6 @@ main {
width: 100%; width: 100%;
scroll-behavior: smooth; scroll-behavior: smooth;
} }
.conversation__date { .conversation__date {
position: relative; position: relative;
text-align: center; text-align: center;
@ -276,3 +273,4 @@ main {
padding: 0 0.5em; padding: 0 0.5em;
} }
} }
}