From add2f1329b28480f6bdfedfe12fe139f325cf1ee Mon Sep 17 00:00:00 2001 From: gingervitis Date: Sun, 31 Jan 2021 01:55:19 -0800 Subject: [PATCH 1/2] cleanup --- web/pages/components/config/edit-tags.tsx | 32 +++---------------- .../config/form-textfield-with-submit.tsx | 27 ++++------------ web/types/config-section.ts | 21 ++++++------ 3 files changed, 19 insertions(+), 61 deletions(-) diff --git a/web/pages/components/config/edit-tags.tsx b/web/pages/components/config/edit-tags.tsx index cc978ef17..9be437ab6 100644 --- a/web/pages/components/config/edit-tags.tsx +++ b/web/pages/components/config/edit-tags.tsx @@ -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 { const { Title } = Typography; export default function EditInstanceTags() { - const [newTagInput, setNewTagInput] = useState(''); + const [newTagInput, setNewTagInput] = useState(''); const [fieldStatus, setFieldStatus] = useState(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() { }, []); const resetStates = () => { - // setSubmitStatus(null); - // setSubmitStatusMessage(''); setFieldStatus(null); resetTimer = null; clearTimeout(resetTimer); @@ -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() { if (!fieldStatus) { setFieldStatus(null); } - // if (submitStatusMessage !== '') { - // setSubmitStatusMessage(''); - // } setNewTagInput(value); }; @@ -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() { postUpdateToAPI(updatedTags); }; - // const { - // icon: newStatusIcon = null, - // message: newStatusMessage = '', - // } = fieldStatus || {}; - return (
Add Tags @@ -132,9 +111,7 @@ export default function EditInstanceTags() { ); })}
- {/*
- {newStatusIcon} {newStatusMessage} {submitStatusMessage} -
*/} +
diff --git a/web/pages/components/config/form-textfield-with-submit.tsx b/web/pages/components/config/form-textfield-with-submit.tsx index 050381bc4..e8c8db2af 100644 --- a/web/pages/components/config/form-textfield-with-submit.tsx +++ b/web/pages/components/config/form-textfield-with-submit.tsx @@ -30,7 +30,7 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) { const [fieldStatus, setFieldStatus] = useState(null); const [hasChanged, setHasChanged] = useState(false); - const [fieldValueForSubmit, setFieldValueForSubmit] = useState(''); + // const [fieldValueForSubmit, setFieldValueForSubmit] = useState(''); const serverStatusData = useContext(ServerStatusContext); const { setFieldInConfigState } = serverStatusData || {}; @@ -44,16 +44,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 +64,7 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) { // show submit button resetStates(); setHasChanged(true); - setFieldValueForSubmit(value); + // setFieldValueForSubmit(value); } }, [value]); @@ -93,24 +84,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); diff --git a/web/types/config-section.ts b/web/types/config-section.ts index d7c2cd9d4..25854a0a1 100644 --- a/web/types/config-section.ts +++ b/web/types/config-section.ts @@ -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 { } 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 { 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 { 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 { } export interface VideoSettingsFields { latencyLevel: number; - videoQualityVariants: VideoVariant[], - cpuUsageLevel: CpuUsageLevel, + videoQualityVariants: VideoVariant[]; + cpuUsageLevel: CpuUsageLevel; } - export interface ConfigDetails { ffmpegPath: string; instanceDetails: ConfigInstanceDetailsFields; From 037e8f25a7377dc4a2081cfe649f78d80e4458bf Mon Sep 17 00:00:00 2001 From: gingervitis Date: Sun, 31 Jan 2021 10:13:35 -0800 Subject: [PATCH 2/2] initial temp fixes on form fields --- web/pages/_app.tsx | 1 + .../config/form-textfield-with-submit.tsx | 10 +- .../components/config/form-textfield.tsx | 55 +++++---- web/styles/ant-overrides.scss | 8 +- web/styles/config-formfields.scss | 85 ++++++++++++++ web/styles/config.scss | 108 ++++++++---------- web/utils/input-statuses.tsx | 29 +++-- 7 files changed, 196 insertions(+), 100 deletions(-) create mode 100644 web/styles/config-formfields.scss diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx index f9e46c81c..448ebecdd 100644 --- a/web/pages/_app.tsx +++ b/web/pages/_app.tsx @@ -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'; diff --git a/web/pages/components/config/form-textfield-with-submit.tsx b/web/pages/components/config/form-textfield-with-submit.tsx index e8c8db2af..f0cfa1890 100644 --- a/web/pages/components/config/form-textfield-with-submit.tsx +++ b/web/pages/components/config/form-textfield-with-submit.tsx @@ -30,7 +30,6 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) { const [fieldStatus, setFieldStatus] = useState(null); const [hasChanged, setHasChanged] = useState(false); - // const [fieldValueForSubmit, setFieldValueForSubmit] = useState(''); const serverStatusData = useContext(ServerStatusContext); const { setFieldInConfigState } = serverStatusData || {}; @@ -64,7 +63,6 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) { // show submit button resetStates(); setHasChanged(true); - // setFieldValueForSubmit(value); } }, [value]); @@ -118,9 +116,11 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) { /> {hasChanged ? ( - +
+ +
) : null} ); diff --git a/web/pages/components/config/form-textfield.tsx b/web/pages/components/config/form-textfield.tsx index dd78123bd..b2faeb632 100644 --- a/web/pages/components/config/form-textfield.tsx +++ b/web/pages/components/config/form-textfield.tsx @@ -111,28 +111,41 @@ export default function TextField(props: TextFieldProps) { return (
- {required ? * : null} - -
- + {label ? ( +
+ +
+ ) : null} + +
+
+ + +
+
+ {status ? {statusIcon} : null} + {status ? {statusMessage} : null} +
+

+ +

- - {status ? statusMessage : null} - {status ? statusIcon : null} +
); } diff --git a/web/styles/ant-overrides.scss b/web/styles/ant-overrides.scss index 0b41e7def..41fa14810 100644 --- a/web/styles/ant-overrides.scss +++ b/web/styles/ant-overrides.scss @@ -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; } } diff --git a/web/styles/config-formfields.scss b/web/styles/config-formfields.scss new file mode 100644 index 000000000..327bfa407 --- /dev/null +++ b/web/styles/config-formfields.scss @@ -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; + } +} \ No newline at end of file diff --git a/web/styles/config.scss b/web/styles/config.scss index 3abafdcca..9af5cf087 100644 --- a/web/styles/config.scss +++ b/web/styles/config.scss @@ -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; diff --git a/web/utils/input-statuses.tsx b/web/utils/input-statuses.tsx index 4a9519059..6bba60fdd 100644 --- a/web/utils/input-statuses.tsx +++ b/web/utils/input-statuses.tsx @@ -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'; 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 = { }, [STATUS_ERROR]: { icon: , - message: 'An error occurred.', + message: 'An error occurred.', }, [STATUS_INVALID]: { icon: , - message: 'An error occurred.', + message: 'An error occurred.', }, [STATUS_PROCESSING]: { icon: , @@ -39,7 +45,7 @@ export const INPUT_STATES = { }, [STATUS_WARNING]: { icon: , - message: '', + message: '', }, }; @@ -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, };