LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

Moved chat header into ChatContainer and created component folder

Browse Source
This commit is contained in:
t1enne 2022-05-22 14:55:52 +02:00
parent b53c1cc32e
commit 018ee135b2
6 changed files with 19 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/components/chat/ChatContainer/ChatContainer.module.scss Normal file
View File

@ -0,0 +1,8 @@
.chatHeader {
text-align: center;
padding: 5px 0;
color: var(--text-color-secondary);
border-bottom: 1px solid var(--color-owncast-gray-700);
font-variant: small-caps;
}

12
web/components/chat/ChatContainer.tsx → web/components/chat/ChatContainer/ChatContainer.tsx
View File

@ -2,10 +2,11 @@ import { Spin } from 'antd';
import { Virtuoso } from 'react-virtuoso';
import { useRef } from 'react';
import { LoadingOutlined } from '@ant-design/icons';
import { ChatMessage } from '../../interfaces/chat-message.model';
import { ChatState } from '../../interfaces/application-state';
import ChatUserMessage from './ChatUserMessage';
import { MessageType } from '../../interfaces/socket-events';
import { ChatMessage } from '/interfaces/chat-message.model';
import { ChatState } from '/interfaces/application-state';
import ChatUserMessage from '../ChatUserMessage';
import { MessageType } from '/interfaces/socket-events';
import s from './ChatContainer.module.scss';
interface Props {
messages: ChatMessage[];
@ -30,6 +31,9 @@ export default function ChatContainer(props: Props) {
return (
<div>
<div className={s.chatHeader}>
<span>stream chat</span>
</div>
<Spin spinning={loading} indicator={spinIcon} />
<Virtuoso
style={{ height: '80vh' }}

1
web/components/chat/ChatContainer/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './ChatContainer';

1
web/components/ui/Content/Content.module.scss
View File

@ -4,6 +4,7 @@
}
.mobileChat {
position: relative;
display: block;
top: 0px;
width: 100%;

6
web/components/ui/Sidebar/Sidebar.module.scss
View File

@ -24,9 +24,3 @@ Only way to target it apparently
height: 100% !important;
}
.chatHeader {
text-align: center;
color: var(--text-color-secondary);
border-bottom: 1px solid var(--color-owncast-gray-700);
font-variant: small-caps;
}

5
web/components/ui/Sidebar/Sidebar.tsx
View File

@ -1,7 +1,7 @@
import Sider from 'antd/lib/layout/Sider';
import { useRecoilValue } from 'recoil';
import { ChatMessage } from '../../../interfaces/chat-message.model';
import ChatContainer from '../../chat/ChatContainer';
import ChatContainer from '/components/chat/ChatContainer';
import s from './Sidebar.module.scss';
import {
chatMessagesAtom,
@ -23,9 +23,6 @@ export default function Sidebar() {
collapsedWidth={0}
width={320}
>
<div className={s.chatHeader}>
<span>stream chat</span>
</div>
<ChatContainer messages={messages} state={chatState} />
<ChatTextField />
</Sider>