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 5 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
Split 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'; @@ -6,6 +6,7 @@ import '../styles/ant-overrides.scss';
import '../styles/home.scss';
import '../styles/chat.scss';
import '../styles/config.scss';
import '../styles/config-formfields.scss';
import { AppProps } from 'next/app';
import ServerStatusProvider from '../utils/server-status-context';

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

@ -1,6 +1,6 @@ @@ -1,6 +1,6 @@
/* eslint-disable react/no-array-index-key */
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 { FIELD_PROPS_TAGS, RESET_TIMEOUT, postConfigUpdateToAPI } from './constants';
@ -18,10 +18,9 @@ import { @@ -18,10 +18,9 @@ import {
const { Title } = Typography;
export default function EditInstanceTags() {
const [newTagInput, setNewTagInput] = useState('');
const [newTagInput, setNewTagInput] = useState<string | number>('');
const [fieldStatus, setFieldStatus] = useState<StatusState>(null);
// const [submitStatus, setSubmitStatus] = useState(null);
// const [submitStatusMessage, setSubmitStatusMessage] = useState('');
const serverStatusData = useContext(ServerStatusContext);
const { serverConfig, setFieldInConfigState } = serverStatusData || {};
@ -39,8 +38,6 @@ export default function EditInstanceTags() { @@ -39,8 +38,6 @@ export default function EditInstanceTags() {
}, []);
const resetStates = () => {
// setSubmitStatus(null);
// setSubmitStatusMessage('');
setFieldStatus(null);
resetTimer = null;
clearTimeout(resetTimer);
@ -56,17 +53,11 @@ export default function EditInstanceTags() { @@ -56,17 +53,11 @@ export default function EditInstanceTags() {
onSuccess: () => {
setFieldInConfigState({ fieldName: 'tags', value: postValue, path: configPath });
setFieldStatus(createInputStatus(STATUS_SUCCESS, 'Tags updated.'));
// setSubmitStatus('success');
// setSubmitStatusMessage('Tags updated.');
setNewTagInput('');
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
},
onError: (message: string) => {
setFieldStatus(createInputStatus(STATUS_ERROR, message));
// setSubmitStatus('error');
// setSubmitStatusMessage(message);
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
},
});
@ -76,9 +67,6 @@ export default function EditInstanceTags() { @@ -76,9 +67,6 @@ export default function EditInstanceTags() {
if (!fieldStatus) {
setFieldStatus(null);
}
// if (submitStatusMessage !== '') {
// setSubmitStatusMessage('');
// }
setNewTagInput(value);
};
@ -88,14 +76,10 @@ export default function EditInstanceTags() { @@ -88,14 +76,10 @@ export default function EditInstanceTags() {
const newTag = newTagInput.trim();
if (newTag === '') {
setFieldStatus(createInputStatus(STATUS_WARNING, 'Please enter a tag'));
// setSubmitStatusMessage('Please enter a tag');
return;
}
if (tags.some(tag => tag.toLowerCase() === newTag.toLowerCase())) {
setFieldStatus(createInputStatus(STATUS_WARNING, 'This tag is already used!'));
// setSubmitStatusMessage('This tag is already used!');
return;
}
@ -110,11 +94,6 @@ export default function EditInstanceTags() { @@ -110,11 +94,6 @@ export default function EditInstanceTags() {
postUpdateToAPI(updatedTags);
};
// const {
// icon: newStatusIcon = null,
// message: newStatusMessage = '',
// } = fieldStatus || {};
return (
<div className="tag-editor-container">
<Title level={3}>Add Tags</Title>
@ -132,9 +111,7 @@ export default function EditInstanceTags() { @@ -132,9 +111,7 @@ export default function EditInstanceTags() {
);
})}
</div>
{/* <div className={`status-message ${submitStatus || ''}`}>
{newStatusIcon} {newStatusMessage} {submitStatusMessage}
</div> */}
<div className="add-new-tag-section">
<TextField
fieldName="tag-input"
@ -145,7 +122,6 @@ export default function EditInstanceTags() { @@ -145,7 +122,6 @@ export default function EditInstanceTags() {
maxLength={maxLength}
placeholder={placeholder}
status={fieldStatus}
// message={`${newStatusIcon} ${newStatusMessage} ${submitStatusMessage}`}
/>
</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) { @@ -30,7 +30,6 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
const [fieldStatus, setFieldStatus] = useState<StatusState>(null);
const [hasChanged, setHasChanged] = useState(false);
const [fieldValueForSubmit, setFieldValueForSubmit] = useState<string | number>('');
const serverStatusData = useContext(ServerStatusContext);
const { setFieldInConfigState } = serverStatusData || {};
@ -44,16 +43,7 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) { @@ -44,16 +43,7 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
...textFieldProps // rest of props
} = props;
const {
fieldName,
required,
status,
// type,
value,
onChange,
// onBlur,
onSubmit,
} = textFieldProps;
const { fieldName, required, status, value, onChange, onSubmit } = textFieldProps;
// Clear out any validation states and messaging
const resetStates = () => {
@ -73,7 +63,6 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) { @@ -73,7 +63,6 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
// show submit button
resetStates();
setHasChanged(true);
setFieldValueForSubmit(value);
}
}, [value]);
@ -93,24 +82,18 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) { @@ -93,24 +82,18 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
// how to get current value of input
const handleSubmit = async () => {
if ((required && fieldValueForSubmit !== '') || fieldValueForSubmit !== initialValue) {
if ((required && value !== '') || value !== initialValue) {
setFieldStatus(createInputStatus(STATUS_PROCESSING));
// setSubmitStatus('validating');
await postConfigUpdateToAPI({
apiPath,
data: { value: fieldValueForSubmit },
data: { value },
onSuccess: () => {
setFieldInConfigState({ fieldName, value: fieldValueForSubmit, path: configPath });
setFieldInConfigState({ fieldName, value, path: configPath });
setFieldStatus(createInputStatus(STATUS_SUCCESS));
// setSubmitStatus('success');
},
onError: (message: string) => {
setFieldStatus(createInputStatus(STATUS_ERROR, `There was an error: ${message}`));
// setSubmitStatus('error');
// setSubmitStatusMessage(`There was an error: ${message}`);
},
});
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
@ -133,9 +116,11 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) { @@ -133,9 +116,11 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
/>
{hasChanged ? (
<Button type="primary" size="small" className="submit-button" onClick={handleSubmit}>
Update
</Button>
<div className="update-button-container">
<Button type="primary" size="small" className="submit-button" onClick={handleSubmit}>
Update
</Button>
</div>
) : null}
</div>
);

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

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

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

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

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

@ -0,0 +1,85 @@ @@ -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 @@ @@ -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
.textfield-container {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
position: relative;
width: 314px;
// .textfield-container {
// display: flex;
// flex-direction: column;
// align-items: flex-start;
// justify-content: flex-end;
// position: relative;
// width: 314px;
// &.type-numeric {
// .ant-form-item-control {
// flex-direction: row;
// .ant-form-item-control-input {
// margin-right: .75rem;
// }
// }
// }
}
.textfield {
display: flex;
flex-direction: row;
align-items: flex-start;
// // &.type-numeric {
// // .ant-form-item-control {
// // flex-direction: row;
// // .ant-form-item-control-input {
// // margin-right: .75rem;
// // }
// // }
// // }
// }
// .textfield {
// display: flex;
// flex-direction: row;
// align-items: flex-start;
.field {
width: 18rem;
// .field {
// width: 18rem;
&.ant-input-number {
width: 8em;
}
// &.ant-input-number {
// width: 8em;
// }
}
.info-tip {
margin-right: .75rem;
}
.ant-form-item {
margin-bottom: 16px;
&.ant-form-item-with-help {
margin-bottom: 16px;
}
}
.ant-form-item-label label {
font-weight: bold;
color: var(--owncast-purple);
}
.ant-form-item-explain {
width: 70%;
}
}
.submit-button {
position: absolute;
right: 0;
bottom: .5em;
}
// }
// .info-tip {
// margin-right: .75rem;
// }
// .ant-form-item {
// margin-bottom: 16px;
// &.ant-form-item-with-help {
// margin-bottom: 16px;
// }
// }
// .ant-form-item-label label {
// font-weight: bold;
// color: var(--owncast-purple);
// }
// .ant-form-item-explain {
// width: 70%;
// }
// }
// .submit-button {
// position: absolute;
// right: 0;
// bottom: .5em;
// }
// .ant-form-horizontal {
// .textfield-container.type-numeric {
// width: auto;

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

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

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

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

Write Preview
Loading…
Cancel
Save