Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

misc cleanup

Browse Source
This commit is contained in:
gingervitis 2021-02-14 01:30:42 -08:00
parent 44cef18a00
commit d55e4dfe29
19 changed files with 116 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/components/config/edit-page-content.tsx
View File

@ -104,13 +104,13 @@ export default function EditPageContent() {
markdownClass: 'markdown-editor-pane',
}}
/>
<br />
<div className="page-content-actions">
{hasChanged ? (
{hasChanged && (
<Button type="primary" onClick={handleSave}>
Save
</Button>
) : null}
)}
<FormStatusIndicator status={submitStatus} />
</div>
</div>

2
web/pages/_app.tsx
View File

@ -17,7 +17,7 @@ import '../styles/config-public-details.scss';
import '../styles/home.scss';
import '../styles/chat.scss';
import '../styles/config.scss';
import '../styles/pages.scss';
import { AppProps } from 'next/app';
import ServerStatusProvider from '../utils/server-status-context';

18
web/pages/access-tokens.tsx
View File

@ -1,12 +1,13 @@
import React, { useState, useEffect } from 'react';
import { Table, Tag, Space, Button, Modal, Checkbox, Input, Typography, Tooltip } from 'antd';
import { DeleteOutlined, EyeTwoTone, EyeInvisibleOutlined } from '@ant-design/icons';
const { Title, Paragraph, Text } = Typography;
import { DeleteOutlined } from '@ant-design/icons';
import format from 'date-fns/format';
import { fetchData, ACCESS_TOKENS, DELETE_ACCESS_TOKEN, CREATE_ACCESS_TOKEN } from '../utils/apis';
const { Title, Paragraph } = Typography;
const availableScopes = {
CAN_SEND_SYSTEM_MESSAGES: {
name: 'System messages',
@ -87,9 +88,12 @@ function NewTokenModal(props) {
Select the permissions this access token will have. It cannot be edited after it's created.
</p>
<Checkbox.Group options={scopes} value={selectedScopes} onChange={onChange} />
<Button type="text" size="small" onClick={selectAll}>
Select all
</Button>
<p>
<Button type="primary" onClick={selectAll}>
Select all
</Button>
</p>
</Modal>
);
}
@ -162,7 +166,7 @@ export default function AccessTokens() {
try {
const result = await fetchData(DELETE_ACCESS_TOKEN, {
method: 'POST',
data: { token: token },
data: { token },
});
getAccessTokens();
} catch (error) {
@ -174,7 +178,7 @@ export default function AccessTokens() {
try {
const newToken = await fetchData(CREATE_ACCESS_TOKEN, {
method: 'POST',
data: { name: name, scopes: scopes },
data: { name, scopes },
});
setTokens(tokens.concat(newToken));
} catch (error) {

4
web/pages/config-public-details.tsx
View File

@ -11,9 +11,7 @@ const { Title } = Typography;
export default function PublicFacingDetails() {
return (
<div className="config-public-details-page">
<Title level={2} className="page-title">
General Settings
</Title>
<Title>General Settings</Title>
<p className="description">
The following are displayed on your site to describe your stream and its content.{' '}
<a href="https://owncast.online/docs/website/">Learn more.</a>

2
web/pages/config-server-details.tsx
View File

@ -7,7 +7,7 @@ const { Title } = Typography;
export default function ConfigServerDetails() {
return (
<div className="config-server-details-form">
<Title level={2} className="page-title">
<Title>
Server Settings
</Title>
<p className="description">

2
web/pages/config-social-items.tsx
View File

@ -7,7 +7,7 @@ const { Title } = Typography;
export default function ConfigSocialThings() {
return (
<div className="config-social-items">
<Title level={2}>Social Items</Title>
<Title>Social Items</Title>
<EditSocialLinks />
</div>

2
web/pages/config-storage.tsx
View File

@ -7,7 +7,7 @@ const { Title } = Typography;
export default function ConfigStorageInfo() {
return (
<>
<Title level={2} className="page-title">
<Title>
Storage
</Title>
<p className="description">

4
web/pages/config-video.tsx
View File

@ -9,9 +9,7 @@ const { Title } = Typography;
export default function ConfigVideoSettings() {
return (
<div className="config-video-variants">
<Title level={2} className="page-title">
Video configuration
</Title>
<Title>Video configuration</Title>
<p className="description">
Before changing your video configuration{' '}
<a href="https://owncast.online/docs/encoding">visit the video documentation</a> to learn

9
web/pages/help.tsx
View File

@ -2,9 +2,7 @@ import { Button, Card, Col, Divider, Result, Row } from 'antd';
import Meta from 'antd/lib/card/Meta';
import Title from 'antd/lib/typography/Title';
import {
AlertOutlined,
ApiTwoTone,
BookOutlined,
BugTwoTone,
CameraTwoTone,
DatabaseTwoTone,
@ -17,9 +15,10 @@ import {
} from '@ant-design/icons';
import React from 'react';
interface Props {}
export default function Help(props: Props) {
export default function Help() {
const questions = [
{
icon: <SettingTwoTone style={{ fontSize: '24px' }} />,
@ -144,7 +143,7 @@ export default function Help(props: Props) {
];
return (
<div>
<div className="help-page">
<Title style={{ textAlign: 'center' }}>How can we help you?</Title>
<Row gutter={[16, 16]} justify="space-around" align="middle">
<Col xs={24} lg={12} style={{ textAlign: 'center' }}>

41
web/pages/upgrade.tsx
View File

@ -1,7 +1,7 @@
import React, { useState, useEffect } from "react";
import ReactMarkdown from "react-markdown";
import { Table, Typography } from "antd";
import { getGithubRelease } from "../utils/apis";
import React, { useState, useEffect } from 'react';
import ReactMarkdown from 'react-markdown';
import { Table, Typography } from 'antd';
import { getGithubRelease } from '../utils/apis';
const { Title } = Typography;
@ -10,32 +10,29 @@ function AssetTable(assets) {
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name",
render: (text, entry) =>
<a href={entry.browser_download_url}>{text}</a>,
title: 'Name',
dataIndex: 'name',
key: 'name',
render: (text, entry) => <a href={entry.browser_download_url}>{text}</a>,
},
{
title: "Size",
dataIndex: "size",
key: "size",
render: (text) => (`${(text/1024/1024).toFixed(2)} MB`),
title: 'Size',
dataIndex: 'size',
key: 'size',
render: text => `${(text / 1024 / 1024).toFixed(2)} MB`,
},
];
return <Table dataSource={data} columns={columns} rowKey="id" size="large" pagination={false} />
return <Table dataSource={data} columns={columns} rowKey="id" size="large" pagination={false} />;
}
export default function Logs() {
const [release, setRelease] = useState({
html_url: "",
name: "",
html_url: '',
name: '',
created_at: null,
body: "",
body: '',
assets: [],
});
const getRelease = async () => {
@ -43,7 +40,7 @@ export default function Logs() {
const result = await getGithubRelease();
setRelease(result);
} catch (error) {
console.log("==== error", error);
console.log('==== error', error);
}
};
@ -61,9 +58,9 @@ export default function Logs() {
<a href={release.html_url}>{release.name}</a>
</Title>
<Title level={5}>{new Date(release.created_at).toDateString()}</Title>
<ReactMarkdown>{release.body}</ReactMarkdown><h3>Downloads</h3>
<ReactMarkdown>{release.body}</ReactMarkdown>
<h3>Downloads</h3>
<AssetTable {...release.assets} />
</div>
);
}

1
web/pages/viewer-info.tsx
View File

@ -114,6 +114,7 @@ export default function ViewersOverTime() {
prefix={<UserOutlined />}
/>
</Row>
<Chart title="Viewers" data={viewerInfo} color="#2087E2" unit="" />
{online && <Table dataSource={clients} columns={columns} rowKey={row => row.clientID} />}
</div>

29
web/pages/webhooks.tsx
View File

@ -1,24 +1,12 @@
import React, { useState, useEffect } from 'react';
import {
Table,
Tag,
Space,
Button,
Modal,
Checkbox,
Input,
Typography,
Tooltip,
Select,
} from 'antd';
import { DeleteOutlined, EyeTwoTone, EyeInvisibleOutlined } from '@ant-design/icons';
import { Table, Tag, Space, Button, Modal, Checkbox, Input, Typography, Tooltip } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import { isValidUrl } from '../utils/urls';
const { Title, Paragraph, Text } = Typography;
const { Option } = Select;
import { fetchData, DELETE_WEBHOOK, CREATE_WEBHOOK, WEBHOOKS } from '../utils/apis';
const { Title, Paragraph } = Typography;
const availableEvents = {
CHAT: { name: 'Chat messages', description: 'When a user sends a chat message', color: 'purple' },
USER_JOINED: { name: 'User joined', description: 'When a user joins the chat', color: 'green' },
@ -96,9 +84,12 @@ function NewWebhookModal(props) {
<p>Select the events that will be sent to this webhook.</p>
<Checkbox.Group options={events} value={selectedEvents} onChange={onChange} />
<Button type="text" size="small" onClick={selectAll}>
Select all
</Button>
<p>
<Button type="primary" onClick={selectAll}>
Select all
</Button>
</p>
</Modal>
);
}

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

@ -36,25 +36,36 @@ h5.ant-typography,
.ant-typography h4,
.ant-typography h5 {
color: var(--white);
font-weight: 500;
font-weight: 400;
margin: .5em 0;
}
.ant-typography.ant-typography-secondary {
color: var(--white);
font-weight: 400;
}
.ant-typography {
font-weight: 300;
color: var(--white-75);
a {
color: var(--owncast-purple);
}
}
.ant-typography h1,
h1.ant-typography {
color: var(--white);
}
.ant-typography h2,
h2.ant-typography{
font-size: 1.75em;
color: var(--pink);
}
.ant-typography h2,
h2.ant-typography {
font-size: 1.5em;
}
.ant-typography h3,
h3.ant-typography {
font-size: 1.25em;
}
.ant-progress-text,
@ -184,6 +195,15 @@ h2.ant-typography{
// ANT INPUT
input.ant-input,
textarea.ant-input {
background-color: var(--textfield-bg);
color: var(--white-88);
border-color: var(--black);
&::placeholder {
color: var(--owncast-purple-50);
}
}
.ant-input-affix-wrapper,
.ant-input-number {
background-color: var(--textfield-bg);
@ -201,6 +221,7 @@ h2.ant-typography{
}
}
}
.ant-input:hover,
.ant-input-number:hover,
.ant-input-affix-wrapper:hover {
border-color: var(--owncast-purple);
@ -209,6 +230,7 @@ h2.ant-typography{
border-color: var(--owncast-purple);
}
}
.ant-input,
.ant-input-number:focus,
.ant-input-affix-wrapper:focus,
.ant-input-affix-wrapper-focused {
@ -421,4 +443,16 @@ textarea.ant-input {
opacity: .75;
}
}
}
}
// ANT CHECKBOX
.ant-checkbox-wrapper {
color: var(--white-75);
margin: .5em 0;
}
.ant-checkbox-group {
.ant-checkbox-group-item {
display: block;
}
}

29
web/styles/config.scss
View File

@ -1,29 +0,0 @@
// todo: put these somewhere else
.edit-page-content {
.page-content-actions {
margin-top: 1em;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
.status-message {
margin-left: 1em;
}
}
}
.segment-tip {
width: 10em;
text-align: center;
margin: auto;
display: inline-block;
}

5
web/styles/form-misc-elements.scss
View File

@ -39,9 +39,6 @@ Ideal for wrapping each Textfield on a page with many text fields in a row. This
*/
.field-container {
padding: .85em 0 .5em;
// &:nth-child(even) {
// background-color: rgba(0,0,0,.25);
// }
}
@ -50,7 +47,7 @@ Ideal for wrapping each Textfield on a page with many text fields in a row. This
width: 90%;
margin: auto;
padding: 1em 2em .75em;
background-color: var(--black-35);
background-color: var(--owncast-purple-25);
border-radius: 1em;
.ant-slider-rail {
background-color: var(--black);

24
web/styles/globals.scss
View File

@ -25,8 +25,12 @@ a {
* {
box-sizing: border-box;
}
p {
p,
p.description,
.ant-typography {
font-weight: 300;
margin: 1em 0;
color: var(--white-75);
}
pre {
@ -52,10 +56,7 @@ code {
width: 2rem;
}
p.description {
margin: 1em 0;
color: var(--white-75);
}
.line-chart-container {
@ -64,18 +65,7 @@ p.description {
border: 1px solid var(--gray-dark);
}
h2.ant-typography.page-title,
h3.ant-typography.page-title
{
font-weight: 400;
font-size: 1.5em;
color: var(--nav-selected-text);
}
h2.section-title,
h3.section-title {
font-weight: 400;
font-size: 1.25em;
}
.form-module {
margin: 1em 0;

2
web/styles/main-layout.scss
View File

@ -50,7 +50,7 @@
.main-content-container {
padding: 3em;
padding: 2em 3em 3em;
}
.footer-container {

13
web/styles/pages.scss Normal file
View File

@ -0,0 +1,13 @@
// misc styling for various /pages
.help-page {
.ant-result-image {
height: 100px;
svg {
height: 100%;
width: 100%;
}
}
}

2
web/styles/variables.scss
View File

@ -1,5 +1,3 @@
// rename to variables.scss
:root {
// colors
--white: rgba(255,255,255,1);