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, };