pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'css-overhaul' into gw/20201226-admin-formfields

pull/1886/head
gingervitis 6 years ago
parent
9812f4c874 037e8f25a7
commit
07f78324fc
9 changed files with 213 additions and 159 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      web/pages/_app.tsx
  2. 32
      web/pages/components/config/edit-tags.tsx
  3. 33
      web/pages/components/config/form-textfield-with-submit.tsx
  4. 55
      web/pages/components/config/form-textfield.tsx
  5. 8
      web/styles/ant-overrides.scss
  6. 85
      web/styles/config-formfields.scss
  7. 108
      web/styles/config.scss
  8. 21
      web/types/config-section.ts
  9. 29
      web/utils/input-statuses.tsx

1
web/pages/_app.tsx
Unescape View File

@ -6,6 +6,7 @@ import '../styles/ant-overrides.scss';
import '../styles/home.scss'; import '../styles/home.scss';
import '../styles/chat.scss'; import '../styles/chat.scss';
import '../styles/config.scss'; import '../styles/config.scss';
import '../styles/config-formfields.scss';
import { AppProps } from 'next/app'; import { AppProps } from 'next/app';
import ServerStatusProvider from '../utils/server-status-context'; import ServerStatusProvider from '../utils/server-status-context';

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

@ -1,6 +1,6 @@
/* eslint-disable react/no-array-index-key */ /* eslint-disable react/no-array-index-key */
import React, { useContext, useState, useEffect } from 'react'; import React, { useContext, useState, useEffect } from 'react';
import { Typography, Tag, Input } from 'antd'; import { Typography, Tag } from 'antd';
import { ServerStatusContext } from '../../../utils/server-status-context'; import { ServerStatusContext } from '../../../utils/server-status-context';
import { FIELD_PROPS_TAGS, RESET_TIMEOUT, postConfigUpdateToAPI } from './constants'; import { FIELD_PROPS_TAGS, RESET_TIMEOUT, postConfigUpdateToAPI } from './constants';
@ -18,10 +18,9 @@ import {
const { Title } = Typography; const { Title } = Typography;
export default function EditInstanceTags() { export default function EditInstanceTags() {
const [newTagInput, setNewTagInput] = useState(''); const [newTagInput, setNewTagInput] = useState<string | number>('');
const [fieldStatus, setFieldStatus] = useState<StatusState>(null); const [fieldStatus, setFieldStatus] = useState<StatusState>(null);
// const [submitStatus, setSubmitStatus] = useState(null);
// const [submitStatusMessage, setSubmitStatusMessage] = useState('');
const serverStatusData = useContext(ServerStatusContext); const serverStatusData = useContext(ServerStatusContext);
const { serverConfig, setFieldInConfigState } = serverStatusData || {}; const { serverConfig, setFieldInConfigState } = serverStatusData || {};
@ -39,8 +38,6 @@ export default function EditInstanceTags() {
}, []); }, []);
const resetStates = () => { const resetStates = () => {
// setSubmitStatus(null);
// setSubmitStatusMessage('');
setFieldStatus(null); setFieldStatus(null);
resetTimer = null; resetTimer = null;
clearTimeout(resetTimer); clearTimeout(resetTimer);
@ -56,17 +53,11 @@ export default function EditInstanceTags() {
onSuccess: () => { onSuccess: () => {
setFieldInConfigState({ fieldName: 'tags', value: postValue, path: configPath }); setFieldInConfigState({ fieldName: 'tags', value: postValue, path: configPath });
setFieldStatus(createInputStatus(STATUS_SUCCESS, 'Tags updated.')); setFieldStatus(createInputStatus(STATUS_SUCCESS, 'Tags updated.'));
// setSubmitStatus('success');
// setSubmitStatusMessage('Tags updated.');
setNewTagInput(''); setNewTagInput('');
resetTimer = setTimeout(resetStates, RESET_TIMEOUT); resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
}, },
onError: (message: string) => { onError: (message: string) => {
setFieldStatus(createInputStatus(STATUS_ERROR, message)); setFieldStatus(createInputStatus(STATUS_ERROR, message));
// setSubmitStatus('error');
// setSubmitStatusMessage(message);
resetTimer = setTimeout(resetStates, RESET_TIMEOUT); resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
}, },
}); });
@ -76,9 +67,6 @@ export default function EditInstanceTags() {
if (!fieldStatus) { if (!fieldStatus) {
setFieldStatus(null); setFieldStatus(null);
} }
// if (submitStatusMessage !== '') {
// setSubmitStatusMessage('');
// }
setNewTagInput(value); setNewTagInput(value);
}; };
@ -88,14 +76,10 @@ export default function EditInstanceTags() {
const newTag = newTagInput.trim(); const newTag = newTagInput.trim();
if (newTag === '') { if (newTag === '') {
setFieldStatus(createInputStatus(STATUS_WARNING, 'Please enter a tag')); setFieldStatus(createInputStatus(STATUS_WARNING, 'Please enter a tag'));
// setSubmitStatusMessage('Please enter a tag');
return; return;
} }
if (tags.some(tag => tag.toLowerCase() === newTag.toLowerCase())) { if (tags.some(tag => tag.toLowerCase() === newTag.toLowerCase())) {
setFieldStatus(createInputStatus(STATUS_WARNING, 'This tag is already used!')); setFieldStatus(createInputStatus(STATUS_WARNING, 'This tag is already used!'));
// setSubmitStatusMessage('This tag is already used!');
return; return;
} }
@ -110,11 +94,6 @@ export default function EditInstanceTags() {
postUpdateToAPI(updatedTags); postUpdateToAPI(updatedTags);
}; };
// const {
// icon: newStatusIcon = null,
// message: newStatusMessage = '',
// } = fieldStatus || {};
return ( return (
<div className="tag-editor-container"> <div className="tag-editor-container">
<Title level={3}>Add Tags</Title> <Title level={3}>Add Tags</Title>
@ -132,9 +111,7 @@ export default function EditInstanceTags() {
); );
})} })}
</div> </div>
{/* <div className={`status-message ${submitStatus || ''}`}>
{newStatusIcon} {newStatusMessage} {submitStatusMessage}
</div> */}
<div className="add-new-tag-section"> <div className="add-new-tag-section">
<TextField <TextField
fieldName="tag-input" fieldName="tag-input"
@ -145,7 +122,6 @@ export default function EditInstanceTags() {
maxLength={maxLength} maxLength={maxLength}
placeholder={placeholder} placeholder={placeholder}
status={fieldStatus} status={fieldStatus}
// message={`${newStatusIcon} ${newStatusMessage} ${submitStatusMessage}`}
/> />
</div> </div>
</div> </div>

33
web/pages/components/config/form-textfield-with-submit.tsx
Unescape View File

@ -30,7 +30,6 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
const [fieldStatus, setFieldStatus] = useState<StatusState>(null); const [fieldStatus, setFieldStatus] = useState<StatusState>(null);
const [hasChanged, setHasChanged] = useState(false); const [hasChanged, setHasChanged] = useState(false);
const [fieldValueForSubmit, setFieldValueForSubmit] = useState<string | number>('');
const serverStatusData = useContext(ServerStatusContext); const serverStatusData = useContext(ServerStatusContext);
const { setFieldInConfigState } = serverStatusData || {}; const { setFieldInConfigState } = serverStatusData || {};
@ -44,16 +43,7 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
...textFieldProps // rest of props ...textFieldProps // rest of props
} = props; } = props;
const { const { fieldName, required, status, value, onChange, onSubmit } = textFieldProps;
fieldName,
required,
status,
// type,
value,
onChange,
// onBlur,
onSubmit,
} = textFieldProps;
// Clear out any validation states and messaging // Clear out any validation states and messaging
const resetStates = () => { const resetStates = () => {
@ -73,7 +63,6 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
// show submit button // show submit button
resetStates(); resetStates();
setHasChanged(true); setHasChanged(true);
setFieldValueForSubmit(value);
} }
}, [value]); }, [value]);
@ -93,24 +82,18 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
// how to get current value of input // how to get current value of input
const handleSubmit = async () => { const handleSubmit = async () => {
if ((required && fieldValueForSubmit !== '') || fieldValueForSubmit !== initialValue) { if ((required && value !== '') || value !== initialValue) {
setFieldStatus(createInputStatus(STATUS_PROCESSING)); setFieldStatus(createInputStatus(STATUS_PROCESSING));
// setSubmitStatus('validating');
await postConfigUpdateToAPI({ await postConfigUpdateToAPI({
apiPath, apiPath,
data: { value: fieldValueForSubmit }, data: { value },
onSuccess: () => { onSuccess: () => {
setFieldInConfigState({ fieldName, value: fieldValueForSubmit, path: configPath }); setFieldInConfigState({ fieldName, value, path: configPath });
setFieldStatus(createInputStatus(STATUS_SUCCESS)); setFieldStatus(createInputStatus(STATUS_SUCCESS));
// setSubmitStatus('success');
}, },
onError: (message: string) => { onError: (message: string) => {
setFieldStatus(createInputStatus(STATUS_ERROR, `There was an error: ${message}`)); setFieldStatus(createInputStatus(STATUS_ERROR, `There was an error: ${message}`));
// setSubmitStatus('error');
// setSubmitStatusMessage(`There was an error: ${message}`);
}, },
}); });
resetTimer = setTimeout(resetStates, RESET_TIMEOUT); resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
@ -133,9 +116,11 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
/> />
{hasChanged ? ( {hasChanged ? (
<Button type="primary" size="small" className="submit-button" onClick={handleSubmit}> <div className="update-button-container">
Update <Button type="primary" size="small" className="submit-button" onClick={handleSubmit}>
</Button> Update
</Button>
</div>
) : null} ) : null}
</div> </div>
); );

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

@ -111,28 +111,41 @@ export default function TextField(props: TextFieldProps) {
return ( return (
<div className={`textfield-container type-${type}`}> <div className={`textfield-container type-${type}`}>
{required ? <span className="required-label">*</span> : null} {label ? (
<label htmlFor={fieldId} className="textfield-label"> <div className="label-side">
{label} <label htmlFor={fieldId} className="textfield-label">
</label> {required ? <span className="required-label">* </span> : null}
<div className="textfield"> {label}:
<Field </label>
id={fieldId} </div>
className={`field ${className} ${fieldId}`} ) : null}
{...fieldProps}
allowClear <div className="input-side">
placeholder={placeholder} <div className="input-group">
maxLength={maxLength} <Field
onChange={handleChange} id={fieldId}
onBlur={handleBlur} className={`field ${className} ${fieldId}`}
onPressEnter={handlePressEnter} {...fieldProps}
disabled={disabled} allowClear
value={value} placeholder={placeholder}
/> maxLength={maxLength}
onChange={handleChange}
onBlur={handleBlur}
onPressEnter={handlePressEnter}
disabled={disabled}
value={value}
/>
</div>
<div className="status-container">
{status ? <span className="status-icon">{statusIcon}</span> : null}
{status ? <span className="status-message">{statusMessage}</span> : null}
</div>
<p className="tip">
<InfoTip tip={tip} />
</p>
</div> </div>
<InfoTip tip={tip} />
{status ? statusMessage : null}
{status ? statusIcon : null}
</div> </div>
); );
} }

8
web/styles/ant-overrides.scss
Unescape View File

@ -28,14 +28,14 @@
// INPUT // INPUT
.ant-input-affix-wrapper { .ant-input-affix-wrapper {
border-radius: 5px; // border-radius: 5px;
background-color: rgba(255,255,255,.1); // background-color: rgba(255,255,255,.1);
textarea { textarea {
border-radius: 5px; // border-radius: 5px;
} }
input { input {
background-color: transparent; // background-color: transparent;
} }
} }

85
web/styles/config-formfields.scss
Unescape View File

@ -0,0 +1,85 @@
.textfield-container {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
.label-side {
padding-right: 1em;
text-align: right;
width: 12rem;
margin: .2em 0;
}
.textfield-label {
font-weight: 400;
font-size: .85rem;
color: var(--owncast-purple);
}
.required-label {
color: var(--ant-error);
}
.input-side {
max-width: 500px;
width: 100%;
}
.input-group,
.status-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.status-container {
margin: 0 .25em;
min-height: 1.5em;
font-size: .75em;
.status-icon {
display: inline-block;
margin-right: .5em;
}
}
.tip {
margin: .5em .5em;
font-size: .75rem;
color: rgba(255,255,255,.75);
}
@media (max-width: 800px) {
// flex-direction: column;
flex-wrap: wrap;
.label-side {
text-align: left;
}
}
}
.status-message {
// margin: 1rem 0;
// min-height: 1.4em;
// font-size: .75rem;
&.success {
color: var(--ant-success);
}
&.error {
color: var(--ant-error);
}
}
.textfield-with-submit-container {
display: flex;
flex-direction: row;
.update-button-container {
display: inline-block;
margin: .25em;
}
}

108
web/styles/config.scss
Unescape View File

@ -27,72 +27,62 @@
} }
.status-message {
margin: 1rem 0;
min-height: 1.4em;
font-size: .75rem;
&.success {
color: var(--ant-success);
}
&.error {
color: var(--ant-error);
}
}
// form-textfield // form-textfield
// form-textfield // form-textfield
.textfield-container { // .textfield-container {
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
align-items: flex-start; // align-items: flex-start;
justify-content: flex-end; // justify-content: flex-end;
position: relative; // position: relative;
width: 314px; // width: 314px;
// &.type-numeric { // // &.type-numeric {
// .ant-form-item-control { // // .ant-form-item-control {
// flex-direction: row; // // flex-direction: row;
// .ant-form-item-control-input { // // .ant-form-item-control-input {
// margin-right: .75rem; // // margin-right: .75rem;
// } // // }
// } // // }
// } // // }
} // }
.textfield { // .textfield {
display: flex; // display: flex;
flex-direction: row; // flex-direction: row;
align-items: flex-start; // align-items: flex-start;
.field { // .field {
width: 18rem; // width: 18rem;
&.ant-input-number { // &.ant-input-number {
width: 8em; // width: 8em;
} // }
} // }
.info-tip { // .info-tip {
margin-right: .75rem; // margin-right: .75rem;
} // }
.ant-form-item { // .ant-form-item {
margin-bottom: 16px; // margin-bottom: 16px;
&.ant-form-item-with-help { // &.ant-form-item-with-help {
margin-bottom: 16px; // margin-bottom: 16px;
} // }
} // }
.ant-form-item-label label { // .ant-form-item-label label {
font-weight: bold; // font-weight: bold;
color: var(--owncast-purple); // color: var(--owncast-purple);
} // }
.ant-form-item-explain { // .ant-form-item-explain {
width: 70%; // width: 70%;
} // }
} // }
.submit-button { // .submit-button {
position: absolute; // position: absolute;
right: 0; // right: 0;
bottom: .5em; // bottom: .5em;
} // }
// .ant-form-horizontal { // .ant-form-horizontal {
// .textfield-container.type-numeric { // .textfield-container.type-numeric {
// width: auto; // width: auto;

21
web/types/config-section.ts
Unescape View File

@ -1,6 +1,5 @@
// TS types for elements on the Config pages // TS types for elements on the Config pages
// for dropdown // for dropdown
export interface SocialHandleDropdownItem { export interface SocialHandleDropdownItem {
icon: string; icon: string;
@ -17,15 +16,15 @@ export interface UpdateArgs {
} }
export interface ApiPostArgs { export interface ApiPostArgs {
apiPath: string, apiPath: string;
data: object, data: object;
onSuccess?: (arg: any) => void, onSuccess?: (arg: any) => void;
onError?: (arg: any) => void, onError?: (arg: any) => void;
} }
export interface ConfigDirectoryFields { export interface ConfigDirectoryFields {
enabled: boolean; enabled: boolean;
instanceUrl: string, instanceUrl: string;
} }
export interface ConfigInstanceDetailsFields { export interface ConfigInstanceDetailsFields {
@ -33,14 +32,13 @@ export interface ConfigInstanceDetailsFields {
logo: string; logo: string;
name: string; name: string;
nsfw: boolean; nsfw: boolean;
socialHandles: SocialHandle[], socialHandles: SocialHandle[];
streamTitle: string; streamTitle: string;
summary: string; summary: string;
tags: string[]; tags: string[];
title: string; title: string;
} }
export type CpuUsageLevel = 1 | 2 | 3 | 4 | 5; export type CpuUsageLevel = 1 | 2 | 3 | 4 | 5;
// from data // from data
@ -51,7 +49,7 @@ export interface SocialHandle {
export interface VideoVariant { export interface VideoVariant {
key?: number; // unique identifier generated on client side just for ant table rendering key?: number; // unique identifier generated on client side just for ant table rendering
cpuUsageLevel: CpuUsageLevel, cpuUsageLevel: CpuUsageLevel;
framerate: number; framerate: number;
audioPassthrough: boolean; audioPassthrough: boolean;
@ -61,11 +59,10 @@ export interface VideoVariant {
} }
export interface VideoSettingsFields { export interface VideoSettingsFields {
latencyLevel: number; latencyLevel: number;
videoQualityVariants: VideoVariant[], videoQualityVariants: VideoVariant[];
cpuUsageLevel: CpuUsageLevel, cpuUsageLevel: CpuUsageLevel;
} }
export interface ConfigDetails { export interface ConfigDetails {
ffmpegPath: string; ffmpegPath: string;
instanceDetails: ConfigInstanceDetailsFields; instanceDetails: ConfigInstanceDetailsFields;

29
web/utils/input-statuses.tsx
Unescape View File

@ -1,4 +1,9 @@
import { CheckCircleFilled, ExclamationCircleFilled, LoadingOutlined, WarningOutlined } from '@ant-design/icons'; import {
CheckCircleFilled,
ExclamationCircleFilled,
LoadingOutlined,
WarningOutlined,
} from '@ant-design/icons';
export const STATUS_RESET_TIMEOUT = 3000; export const STATUS_RESET_TIMEOUT = 3000;
@ -8,14 +13,15 @@ export const STATUS_PROCESSING = 'proessing';
export const STATUS_SUCCESS = 'success'; export const STATUS_SUCCESS = 'success';
export const STATUS_WARNING = 'warning'; export const STATUS_WARNING = 'warning';
export type InputStatusTypes = export type InputStatusTypes =
typeof STATUS_ERROR | | typeof STATUS_ERROR
typeof STATUS_INVALID | | typeof STATUS_INVALID
typeof STATUS_PROCESSING | | typeof STATUS_PROCESSING
typeof STATUS_SUCCESS | | typeof STATUS_SUCCESS
typeof STATUS_WARNING; | typeof STATUS_WARNING;
export type StatusState = { export type StatusState = {
type: InputStatusTypes;
icon: any; // Element type of sorts? icon: any; // Element type of sorts?
message: string; message: string;
}; };
@ -27,11 +33,11 @@ export const INPUT_STATES = {
}, },
[STATUS_ERROR]: { [STATUS_ERROR]: {
icon: <ExclamationCircleFilled style={{ color: 'red' }} />, icon: <ExclamationCircleFilled style={{ color: 'red' }} />,
message: 'An error occurred.', message: 'An error occurred.',
}, },
[STATUS_INVALID]: { [STATUS_INVALID]: {
icon: <ExclamationCircleFilled style={{ color: 'red' }} />, icon: <ExclamationCircleFilled style={{ color: 'red' }} />,
message: 'An error occurred.', message: 'An error occurred.',
}, },
[STATUS_PROCESSING]: { [STATUS_PROCESSING]: {
icon: <LoadingOutlined />, icon: <LoadingOutlined />,
@ -39,7 +45,7 @@ export const INPUT_STATES = {
}, },
[STATUS_WARNING]: { [STATUS_WARNING]: {
icon: <WarningOutlined style={{ color: '#fc0' }} />, icon: <WarningOutlined style={{ color: '#fc0' }} />,
message: '', message: '',
}, },
}; };
@ -48,10 +54,11 @@ export function createInputStatus(type: InputStatusTypes, message?: string): Sta
if (!type || !INPUT_STATES[type]) { if (!type || !INPUT_STATES[type]) {
return null; return null;
} }
if (message === null) { if (!message) {
return INPUT_STATES[type]; return INPUT_STATES[type];
} }
return { return {
type,
icon: INPUT_STATES[type].icon, icon: INPUT_STATES[type].icon,
message, message,
}; };

Write Preview
Loading…
Cancel
Save