LogalDeveloper/owncast
0
Fork 0
Code Activity

clean up and style tweaks

Browse Source
This commit is contained in:
gingervitis
2021-01-03 01:54:04 -08:00
committed by Gabe Kangas
parent 19ae6205c5
commit 5f0d7480bb
11 changed files with 81 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/pages/_app.tsx
View File

@@ -2,7 +2,6 @@ import 'antd/dist/antd.css';
import '../styles/colors.scss';
import '../styles/globals.scss';
// GW: I can't override ant design styles through components using NextJS's built-in CSS modules. So I'll just import styles here for now and figure out enabling SASS modules later.
import '../styles/home.scss';
import '../styles/chat.scss';
import '../styles/config.scss';

9
web/pages/components/config/constants.tsx
View File

@@ -24,7 +24,6 @@ export const SUCCESS_STATES = {
};
export async function postConfigUpdateToAPI(args: ApiPostArgs) {
const {
apiPath,
@@ -38,9 +37,9 @@ export async function postConfigUpdateToAPI(args: ApiPostArgs) {
auth: true,
});
if (result.success && onSuccess) {
onSuccess();
onSuccess(result.message);
} else if (onError) {
onError();
onError(result.message);
}
}
@@ -96,7 +95,7 @@ export const TEXTFIELD_DEFAULTS = {
maxLength: 255,
placeholder: '/img/mylogo.png',
label: 'Logo',
tip: 'Path to your logo from website root',
tip: 'Path to your logo from website root. We recommend that you use a square image that is at least 256x256. (upload functionality coming soon)',
},
extraPageContent: {
@@ -113,8 +112,6 @@ export const TEXTFIELD_DEFAULTS = {
tip: "Turn this ON if you plan to steam explicit or adult content. You may want to respectfully set this flag so that unexpecting eyes won't accidentally see it from the Directory.",
},
//
tags: {
apiPath: '/tags',
defaultValue: '',

2
web/pages/components/config/edit-directory.tsx
View File

@@ -42,7 +42,7 @@ export default function EditYPDetails() {
<p>Would you like to appear in the <a href="https://directory.owncast.online" target="_blank" rel="noreferrer"><strong>Owncast Directory</strong></a>?</p>
<p><em>NOTE: You will need to have a URL specified in the <code>Instance URL</code> field to be able to use this.</em></p>
<p style={{ backgroundColor: 'black', fontSize: '.75rem', padding: '5px' }}><em>NOTE: You will need to have a URL specified in the <code>Instance URL</code> field to be able to use this.</em></p>
<div className="config-yp-container">
<Form

4
web/pages/components/config/edit-tags.tsx
View File

@@ -12,7 +12,7 @@ export default function EditInstanceTags() {
const [submitStatus, setSubmitStatus] = useState(null);
const [submitStatusMessage, setSubmitStatusMessage] = useState('');
const serverStatusData = useContext(ServerStatusContext);
const { serverConfig, setConfigField } = serverStatusData || {};
const { serverConfig, setFieldInConfigState } = serverStatusData || {};
const { instanceDetails } = serverConfig;
const { tags = [] } = instanceDetails;
@@ -47,7 +47,7 @@ export default function EditInstanceTags() {
apiPath,
data: { value: postValue },
onSuccess: () => {
setConfigField({ fieldName: 'tags', value: postValue, path: configPath });
setFieldInConfigState({ fieldName: 'tags', value: postValue, path: configPath });
setSubmitStatus('success');
setSubmitStatusMessage('Tags updated.');
setNewTagInput('');

15
web/pages/components/config/form-textfield.tsx
View File

@@ -17,15 +17,14 @@ update vals to state, andthru api.
*/
import React, { useState, useContext } from 'react';
import { Button, Form, Input, InputNumber, Tooltip } from 'antd';
import { Button, Form, Input, InputNumber } from 'antd';
import { FormItemProps } from 'antd/es/form';
import { InfoCircleOutlined } from '@ant-design/icons';
import { TEXTFIELD_DEFAULTS, TEXT_MAXLENGTH, RESET_TIMEOUT, postConfigUpdateToAPI } from './constants';
import { TextFieldProps } from '../../../types/config-section';
import { ServerStatusContext } from '../../../utils/server-status-context';
import InfoTip from '../info-tip';
export const TEXTFIELD_TYPE_TEXT = 'default';
export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password
@@ -42,7 +41,7 @@ export default function TextField(props: TextFieldProps) {
let resetTimer = null;
const serverStatusData = useContext(ServerStatusContext);
const { setConfigField } = serverStatusData || {};
const { setFieldInConfigState } = serverStatusData || {};
const {
configPath = '',
@@ -107,7 +106,7 @@ export default function TextField(props: TextFieldProps) {
apiPath,
data: { value: fieldValueForSubmit },
onSuccess: () => {
setConfigField({ fieldName, value: fieldValueForSubmit, path: configPath });
setFieldInConfigState({ fieldName, value: fieldValueForSubmit, path: configPath });
setSubmitStatus('success');
},
onError: (message: string) => {
@@ -144,11 +143,7 @@ export default function TextField(props: TextFieldProps) {
return (
<div className="textfield-container">
<div className="textfield">
<span className="info">
<Tooltip title={tip}>
<InfoCircleOutlined />
</Tooltip>
</span>
<InfoTip tip={tip} />
<Form.Item
label={label}
name={fieldName}

21
web/pages/components/config/form-toggleswitch.tsx
View File

@@ -1,13 +1,12 @@
import React, { useState, useContext } from 'react';
import { Form, Switch, Tooltip } from 'antd';
import { Form, Switch } from 'antd';
import { FormItemProps } from 'antd/es/form';
import { InfoCircleOutlined } from '@ant-design/icons';
import { TEXTFIELD_DEFAULTS, RESET_TIMEOUT, SUCCESS_STATES, postConfigUpdateToAPI } from './constants';
import { ToggleSwitchProps } from '../../../types/config-section';
import { ServerStatusContext } from '../../../utils/server-status-context';
import InfoTip from '../info-tip';
export const TEXTFIELD_TYPE_TEXT = 'default';
export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password
@@ -22,7 +21,7 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
let resetTimer = null;
const serverStatusData = useContext(ServerStatusContext);
const { setConfigField } = serverStatusData || {};
const { setFieldInConfigState } = serverStatusData || {};
const {
fieldName,
@@ -53,7 +52,7 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
apiPath,
data: { value: checked },
onSuccess: () => {
setConfigField({ fieldName, value: checked, path: configPath });
setFieldInConfigState({ fieldName, value: checked, path: configPath });
setSubmitStatus('success');
},
onError: (message: string) => {
@@ -69,14 +68,6 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
message: newStatusMessage = '',
} = SUCCESS_STATES[submitStatus] || {};
const tipComponent = tip ? (
<span className="info">
<Tooltip title={tip}>
<InfoCircleOutlined />
</Tooltip>
</span>
) : null;
return (
<div className="toggleswitch-container">
<div className="toggleswitch">
@@ -95,8 +86,8 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
/>
</Form.Item>
<span className="label">{label}</span>
{tipComponent}
<span className="label">{label} <InfoTip tip={tip} /></span>
</div>
<div className={`status-message ${submitStatus || ''}`}>
{newStatusIcon} {newStatusMessage} {submitStatusMessage}

20
web/pages/components/info-tip.tsx Normal file
View File

@@ -0,0 +1,20 @@
import { InfoCircleOutlined } from "@ant-design/icons";
import { Tooltip } from "antd";
interface InfoTipProps {
tip: string | null;
}
export default function InfoTip({ tip }: InfoTipProps) {
if (tip === '' || tip === null) {
return null;
}
return (
<span className="info-tip">
<Tooltip title={tip}>
<InfoCircleOutlined />
</Tooltip>
</span>
);
}

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

@@ -88,7 +88,7 @@ export default function PublicFacingDetails() {
<br/>
add tags comp */}
<EditInstanceTags />
<br/><br/>
<EditDirectoryDetails />
</div>
</div>

22
web/styles/config.scss
View File

@@ -7,17 +7,22 @@
.text-fields {
margin-right: 2rem;
}
.misc-fields {
// border: 1px solid var(--owncast-purple);
padding: 2em;
width: 25em;
}
.tag-editor-container,
.config-directory-details-form {
border-radius: 1em;
background-color: rgba(128,0,255,.15);
padding: 1.5em;
margin-bottom: 1em;
}
}
.status-message {
margin: 1rem 0;
min-height: 1.25em;
min-height: 1.4em;
font-size: .75rem;
&.success {
color: var(--ant-success);
@@ -46,7 +51,7 @@
width: 18rem;
}
.info {
.info-tip {
margin-right: .75rem;
}
.ant-form-item {
@@ -86,7 +91,12 @@
font-weight: bold;
color: var(--owncast-purple);
}
.info { margin-left: .5rem }
.info-tip {
margin-left: .5rem;
svg {
fill: white;
}
}
.ant-form-item {
margin: 0 .75rem 0 0;
}

33
web/styles/globals.scss
View File

@@ -25,17 +25,41 @@ pre {
margin: .5rem 0;
background-color: #eee;
}
code {
color: var(--owncast-purple);
}
.owncast-layout .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected {
background-color: $owncast-purple;
}
@media (prefers-color-scheme: dark) {
@import "~antd/dist/antd.dark";
pre {
background-color: rgb(44, 44, 44);
color:lightgrey;
}
}
// GENERAL ANT FORM OVERRIDES
// GENERAL ANT FORM OVERRIDES
.ant-card {
border-radius: .5em;
}
.ant-input-affix-wrapper {
border-radius: 5px;
background-color: rgba(0,0,0,.1);
@media (prefers-color-scheme: dark) {
border-radius: 5px;
background-color: rgba(255,255,255,.1);
}
textarea {
border-radius: 5px;
}
}
.ant-btn-primary:hover, .ant-btn-primary:focus {
background-color: white;
color: #40a9ff;
@@ -51,12 +75,3 @@ pre {
transition-delay: 0s;
transition-duration: 0.15s;
}
@media (prefers-color-scheme: dark) {
@import "~antd/dist/antd.dark";
pre {
background-color: rgb(44, 44, 44);
color:lightgrey;
}
}

6
web/utils/server-status-context.tsx
View File

@@ -53,7 +53,7 @@ export const ServerStatusContext = React.createContext({
...initialServerStatusState,
serverConfig: initialServerConfigState,
setConfigField: any,
setFieldInConfigState: any,
});
const ServerStatusProvider = ({ children }) => {
@@ -78,7 +78,7 @@ const ServerStatusProvider = ({ children }) => {
}
};
const setConfigField = ({ fieldName, value, path }: UpdateArgs) => {
const setFieldInConfigState = ({ fieldName, value, path }: UpdateArgs) => {
const updatedConfig = path ?
{
...config,
@@ -114,7 +114,7 @@ const ServerStatusProvider = ({ children }) => {
...status,
serverConfig: config,
setConfigField,
setFieldInConfigState,
};
return (
<ServerStatusContext.Provider value={providerValue}>