LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

Minor styling changes

Browse Source
This commit is contained in:
t1enne 2022-07-10 08:56:31 +02:00
parent efbe6907ac
commit f130abb8f9
9 changed files with 61 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/components/action-buttons/NotifyButton.tsx
View File

@ -1,5 +1,5 @@
import { Button } from 'antd';
import { NotificationFilled } from '@ant-design/icons';
import { BellFilled } from '@ant-design/icons';
import s from './ActionButton.module.scss';
interface Props {
@ -8,12 +8,7 @@ interface Props {
export default function NotifyButton({ onClick }: Props) {
return (
<Button
type="primary"
className={`${s.button}`}
icon={<NotificationFilled />}
onClick={onClick}
>
<Button type="primary" className={`${s.button}`} icon={<BellFilled />} onClick={onClick}>
Notify
</Button>
);

26
web/components/chat/ChatContainer/ChatContainer.tsx
View File

@ -1,15 +1,15 @@
import { Button, Spin } from 'antd';
import { Button } from 'antd';
import { Virtuoso } from 'react-virtuoso';
import { useState, useMemo, useRef } from 'react';
import { EditFilled, LoadingOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';
import { EditFilled, VerticalAlignBottomOutlined } from '@ant-design/icons';
import { MessageType, NameChangeEvent } from '../../../interfaces/socket-events';
import s from './ChatContainer.module.scss';
import { ChatMessage } from '../../../interfaces/chat-message.model';
import { ChatUserMessage } from '..';
import { ChatTextField, ChatUserMessage } from '..';
interface Props {
messages: ChatMessage[];
loading: boolean;
// loading: boolean;
usernameToHighlight: string;
chatUserId: string;
isModerator: boolean;
@ -17,12 +17,12 @@ interface Props {
}
export default function ChatContainer(props: Props) {
const { messages, loading, usernameToHighlight, chatUserId, isModerator, isMobile } = props;
const { messages, usernameToHighlight, chatUserId, isModerator, isMobile } = props;
const [atBottom, setAtBottom] = useState(false);
// const [showButton, setShowButton] = useState(false);
const chatContainerRef = useRef(null);
const spinIcon = <LoadingOutlined style={{ fontSize: '32px' }} spin />;
// const spinIcon = <LoadingOutlined style={{ fontSize: '32px' }} spin />;
const getNameChangeViewForMessage = (message: NameChangeEvent) => {
const { oldName, user } = message;
@ -65,9 +65,9 @@ export default function ChatContainer(props: Props) {
const MessagesTable = useMemo(
() => (
<div style={{ height: '100%' }}>
<>
<Virtuoso
style={{ height: '100%', width: 'auto' }}
style={{ height: 'calc(100% - 110px)', width: 'auto' }}
ref={chatContainerRef}
initialTopMostItemIndex={messages.length - 1} // Force alignment to bottom
data={messages}
@ -92,21 +92,21 @@ export default function ChatContainer(props: Props) {
</Button>
</div>
)}
</div>
</>
),
[messages, usernameToHighlight, chatUserId, isModerator, atBottom, isMobile],
);
return (
<div>
<div style={{ height: '100%' }}>
{
// <div className={s.chatHeader}>
// <span>stream chat</span>
// </div>
//
}
<Spin spinning={loading} indicator={spinIcon}>
{MessagesTable}
</Spin>
{MessagesTable}
<ChatTextField />
</div>
);
}

2
web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
View File

@ -1,4 +1,6 @@
.root {
* {
z-index: 100; }
position: relative;
font-size: 0.9rem;
padding: 5px 15px 5px 5px;

7
web/components/ui/Content/Content.tsx
View File

@ -24,7 +24,7 @@ import Sidebar from '../Sidebar';
import Footer from '../Footer';
import ChatContainer from '../../chat/ChatContainer';
import { ChatMessage } from '../../../interfaces/chat-message.model';
import ChatTextField from '../../chat/ChatTextField/ChatTextField';
// import ChatTextField from '../../chat/ChatTextField/ChatTextField';
import ActionButtonRow from '../../action-buttons/ActionButtonRow';
import ActionButton from '../../action-buttons/ActionButton';
import { Follower } from '../../../interfaces/follower';
@ -150,7 +150,7 @@ export default function ContentComponent() {
<StreamInfo isMobile={isMobile} />
</div>
<div className={s.lowerHalf}>
<Tabs defaultActiveKey="0">
<Tabs defaultActiveKey="0" style={{ height: '100%' }}>
{isChatVisible && isMobile && (
<TabPane
tab="Chat"
@ -162,13 +162,12 @@ export default function ContentComponent() {
<div className={s.mobileChat}>
<ChatContainer
messages={messages}
loading={appState.chatLoading}
// loading={appState.chatLoading}
usernameToHighlight={chatDisplayName}
chatUserId={chatUserId}
isModerator={false}
isMobile={isMobile}
/>
<ChatTextField />
</div>
</div>
</TabPane>

3
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, ChatTextField } from '../../chat';
import { ChatContainer } from '../../chat';
import s from './Sidebar.module.scss';
import {
@ -28,7 +28,6 @@ export default function Sidebar() {
isModerator={false}
isMobile={false}
/>
<ChatTextField />
</Sider>
);
}

2
web/style-definitions/tokens/color/default-theme.yaml
View File

@ -25,7 +25,7 @@ theme:
value: '{color.owncast.background-secondary.value}'
comment: 'A secondary background color used in sections and controls.'
rounded-corners:
value: '.5rem'
value: '.4rem'
comment: 'The radius of rounded corners used in places.'
success-color:

41
web/styles/ant-overrides.scss
View File

@ -5,20 +5,17 @@
.ant-btn {
height: 2rem;
padding: .3rem 1rem;
background-color: var(--owncast-purple-25);
font-size: .85rem;
font-weight: bold;
border-radius: var(--theme-rounded-corners);
border-color: transparent;
color: var(--white-75);
background-color: var(--color-owncast-gray-500);
color: var(--color-owncast-gray-100);
&:hover,
&:focus {
background-color: var(--color-owncast-purple-700);
background-color: var(--color-owncast-gray-700);
border-color: transparent;
color: var(--white);
}
&:focus {
border-color: var(--owncast-purple-25);
color: inherit;
}
&[ant-click-animating-without-extra-node]:after {
animation: 0s !important;
@ -26,20 +23,25 @@
}
.ant-btn-primary {
background-color: var(--owncast-purple-50);
background-color: var(--color-owncast-purple-700);
&:hover,
&:focus {
background-color: var(--color-owncast-purple-500);
border-color: transparent;
}
}
.ant-btn-primary[disabled] {
background-color: var(--white-25);
color: var(--white-50);
&:hover {
background-color: var(--white-35);
}
}
.ant-btn-background-ghost {
.ant-btn-ghost {
border: 0px;
box-shadow: none !important;
background-color: transparent !important;
&:hover,
&:focus {
background-color: var(--theme-info-color);
@ -54,3 +56,22 @@
border-radius: var(--theme-rounded-corners);
background-color: var(--color-owncast-background-secondary);
}
/* ------------------------- //
TABS
// ------------------------- */
@media (max-width: 768px) {
.ant-tabs-content {
height: 100%;
}
}
/* ------------------------- //
TOOLTIP
// ------------------------- */
.ant-tooltip {
// border-radius: var(--theme-rounded-corners);
// overflow: hidden;
}

7
web/styles/theme.less
View File

@ -1,9 +1,9 @@
// Do not edit directly
// Generated on Wed, 29 Jun 2022 00:29:51 GMT
// Generated on Sun, 10 Jul 2022 05:37:28 GMT
//
// How to edit these values:
// Edit the corresponding tokens file under the style-definitions directory
// Edit the corresponding token file under the style-definitions directory
// in the Owncast web project.
@text-color: var(--theme-text-color);
@ -29,7 +29,7 @@
@theme-header-font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
@theme-background: #202232; // The main background color of the page.
@theme-background-secondary: #282a30; // A secondary background color used in sections and controls.
@theme-rounded-corners: 5px; // The radius of rounded corners used in places.
@theme-rounded-corners: .5rem; // The radius of rounded corners used in places.
@theme-success-color: #12b76a;
@theme-info-color: #d6bbfb;
@theme-warning-color: #f79009;
@ -65,6 +65,7 @@
@color-owncast-gray-100: #f2f4f7;
@color-owncast-gray-300: #d0d5dd;
@color-owncast-gray-500: #667085;
@color-owncast-gray-600: #4b4c4d;
@color-owncast-gray-700: #344054;
@color-owncast-gray-900: #101828;
@color-owncast-logo-purple: #7871ff;

7
web/styles/variables.css
View File

@ -1,9 +1,9 @@
/**
* Do not edit directly
* Generated on Wed, 29 Jun 2022 00:29:51 GMT
* Generated on Sun, 10 Jul 2022 05:37:28 GMT
*
* How to edit these values:
* Edit the corresponding tokens file under the style-definitions directory
* Edit the corresponding token file under the style-definitions directory
* in the Owncast web project.
*/
@ -31,7 +31,7 @@
--theme-header-font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--theme-background: #202232; /* The main background color of the page. */
--theme-background-secondary: #282a30; /* A secondary background color used in sections and controls. */
--theme-rounded-corners: 5px; /* The radius of rounded corners used in places. */
--theme-rounded-corners: .5rem; /* The radius of rounded corners used in places. */
--theme-success-color: #12b76a;
--theme-info-color: #d6bbfb;
--theme-warning-color: #f79009;
@ -67,6 +67,7 @@
--color-owncast-gray-100: #f2f4f7;
--color-owncast-gray-300: #d0d5dd;
--color-owncast-gray-500: #667085;
--color-owncast-gray-600: #4b4c4d;
--color-owncast-gray-700: #344054;
--color-owncast-gray-900: #101828;
--color-owncast-logo-purple: #7871ff;