LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

initial temp fixes on form fields

Browse Source
This commit is contained in:
gingervitis 2021-01-31 10:13:35 -08:00
parent add2f1329b
commit 037e8f25a7
7 changed files with 196 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/pages/_app.tsx
View File

@ -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';

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

@ -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 || {};
@ -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 ? (
<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
View File

@ -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
View File

@ -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 Normal file
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
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
.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;

29
web/utils/input-statuses.tsx
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;
@ -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: <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 = {
},
[STATUS_WARNING]: {
icon: <WarningOutlined style={{ color: '#fc0' }} />,
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,
};