Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

finalize layout of textfields; add field status component

Browse Source
This commit is contained in:
gingervitis 2021-01-31 21:36:14 -08:00
parent 037e8f25a7
commit b26b8abb9b
10 changed files with 203 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/pages/components/config/edit-instance-details.tsx
View File

@ -16,7 +16,6 @@ import {
API_YP_SWITCH,
} from './constants';
import configStyles from '../../../styles/config-pages.module.scss';
import { UpdateArgs } from '../../../types/config-section';
export default function EditInstanceDetails() {
@ -57,8 +56,8 @@ export default function EditInstanceDetails() {
};
return (
<div className={configStyles.publicDetailsContainer}>
<div className={configStyles.textFieldsSection}>
<div className={`publicDetailsContainer`}>
<div className={`textFieldsSection`}>
<TextFieldWithSubmit
fieldName="instanceUrl"
{...TEXTFIELD_PROPS_INSTANCE_URL}

5
web/pages/components/config/edit-server-details.tsx
View File

@ -13,7 +13,6 @@ import {
TEXTFIELD_PROPS_WEB_PORT,
} from './constants';
import configStyles from '../../../styles/config-pages.module.scss';
import { UpdateArgs } from '../../../types/config-section';
export default function EditInstanceDetails() {
@ -64,8 +63,8 @@ export default function EditInstanceDetails() {
}
return (
<div className={configStyles.publicDetailsContainer}>
<div className={configStyles.textFieldsSection}>
<div className={`publicDetailsContainer`}>
<div className={`textFieldsSection`}>
<TextFieldWithSubmit
fieldName="streamKey"
{...TEXTFIELD_PROPS_STREAM_KEY}

4
web/pages/components/config/edit-social-links.tsx
View File

@ -16,8 +16,6 @@ import {
import { SocialHandle } from '../../../types/config-section';
import { isValidUrl } from '../../../utils/urls';
import configStyles from '../../../styles/config-pages.module.scss';
const { Title } = Typography;
export default function EditSocialLinks() {
@ -236,7 +234,7 @@ export default function EditSocialLinks() {
};
return (
<div className={configStyles.socialLinksEditor}>
<div className={`socialLinksEditor`}>
<Title level={2}>Social Links</Title>
<p>Add all your social media handles and links to your other profiles here.</p>

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

@ -1,6 +1,6 @@
import React, { useEffect, useState, useContext } from 'react';
import { Button } from 'antd';
import classNames from 'classnames';
import { RESET_TIMEOUT, postConfigUpdateToAPI } from './constants';
import { ServerStatusContext } from '../../../utils/server-status-context';
@ -13,6 +13,7 @@ import {
STATUS_SUCCESS,
} from '../../../utils/input-statuses';
import { UpdateArgs } from '../../../types/config-section';
import InputStatusInfo from './input-status-info';
export const TEXTFIELD_TYPE_TEXT = 'default';
export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password
@ -43,7 +44,7 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
...textFieldProps // rest of props
} = props;
const { fieldName, required, status, value, onChange, onSubmit } = textFieldProps;
const { fieldName, required, tip, status, value, onChange, onSubmit } = textFieldProps;
// Clear out any validation states and messaging
const resetStates = () => {
@ -105,23 +106,39 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
}
};
const textfieldContainerClass = classNames({
'textfield-with-submit-container': true,
submittable: hasChanged,
});
return (
<div className="textfield-with-submit-container">
<TextField
{...textFieldProps}
status={status || fieldStatus}
onSubmit={null}
onBlur={handleBlur}
onChange={handleChange}
/>
{hasChanged ? (
<div className="update-button-container">
<Button type="primary" size="small" className="submit-button" onClick={handleSubmit}>
Update
</Button>
<div className={textfieldContainerClass}>
<div className="textfield-component">
<TextField
{...textFieldProps}
status={status || fieldStatus}
onSubmit={null}
onBlur={handleBlur}
onChange={handleChange}
/>
</div>
<div className="textfield-container lower-container">
<p className="label-spacer" />
<div className="lower-content">
<div className="field-tip">{tip}</div>
<InputStatusInfo status={status || fieldStatus} />
<div className="update-button-container">
<Button
type="primary"
size="small"
className="submit-button"
onClick={handleSubmit}
disabled={!hasChanged}
>
Update
</Button>
</div>
</div>
) : null}
</div>
</div>
);
}

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

@ -1,8 +1,10 @@
import React from 'react';
import classNames from 'classnames';
import { Input, InputNumber } from 'antd';
import { FieldUpdaterFunc } from '../../../types/config-section';
import InfoTip from '../info-tip';
// import InfoTip from '../info-tip';
import { StatusState } from '../../../utils/input-statuses';
import InputStatusInfo from './input-status-info';
export const TEXTFIELD_TYPE_TEXT = 'default';
export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password
@ -107,15 +109,20 @@ export default function TextField(props: TextFieldProps) {
const fieldId = `field-${fieldName}`;
const { icon: statusIcon, message: statusMessage } = status || {};
const { type: statusType } = status || {};
const containerClass = classNames({
'textfield-container': true,
[`type-${type}`]: true,
required,
[`status-${statusType}`]: status,
});
return (
<div className={`textfield-container type-${type}`}>
<div className={containerClass}>
{label ? (
<div className="label-side">
<label htmlFor={fieldId} className="textfield-label">
{required ? <span className="required-label">* </span> : null}
{label}:
{label}
</label>
</div>
) : null}
@ -135,17 +142,13 @@ export default function TextField(props: TextFieldProps) {
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} />
<InputStatusInfo status={status} />
<p className="field-tip">
{tip}
{/* <InfoTip tip={tip} /> */}
</p>
</div>
</div>
);
}

22
web/pages/components/config/input-status-info.tsx Normal file
View File

@ -0,0 +1,22 @@
import React from 'react';
import classNames from 'classnames';
import { StatusState } from '../../../utils/input-statuses';
interface InputStatusInfoProps {
status: StatusState;
}
export default function InputStatusInfo({ status }: InputStatusInfoProps) {
const { type, icon, message } = status || {};
const classes = classNames({
'status-container': true,
[`status-${type}`]: type,
empty: !message,
});
return (
<div className={classes}>
{icon ? <span className="status-icon">{icon}</span> : null}
{message ? <span className="status-message">{message}</span> : null}
</div>
);
}

5
web/pages/config-public-details.tsx
View File

@ -2,7 +2,6 @@ import React from 'react';
import { Typography } from 'antd';
import Link from 'next/link';
import configStyles from '../styles/config-pages.module.scss';
import EditInstanceDetails from './components/config/edit-instance-details';
const { Title } = Typography;
@ -12,8 +11,8 @@ export default function PublicFacingDetails() {
<>
<Title level={2}>Edit your public facing instance details</Title>
<div className={configStyles.publicDetailsContainer}>
<div className={configStyles.textFieldsSection}>
<div className={`publicDetailsContainer`}>
<div className={`textFieldsSection`}>
<EditInstanceDetails />
<Link href="/admin/config-page-content">

155
web/styles/config-formfields.scss
View File

@ -1,35 +1,75 @@
// Base styles for form-textfield, form-textfield-with-submit, and helper components.
.status-container {
&.status-success {
color: var(--ant-success);
}
&.status-error {
color: var(--ant-error);
}
&.status-warning {
color: var(--ant-warning);
}
&.empty {
display: none;
}
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
font-size: .75rem;
.status-icon {
display: inline-block;
margin-right: .5em;
}
}
.field-tip {
font-size: .7em;
color: rgba(255,255,255,.7)
}
.textfield-container {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
max-width: 600px;
.label-side {
padding-right: 1em;
padding-right: .75em;
text-align: right;
width: 12rem;
width: 12em;
margin: .2em 0;
}
.textfield-label {
font-weight: 400;
font-size: .85rem;
font-size: .85em;
color: var(--owncast-purple);
}
.required-label {
color: var(--ant-error);
}
&::after {
content: ':';
}
}
&.required {
.textfield-label {
&::before {
content: '*';
display: inline-block;
margin-right: .25em;
color: var(--ant-error);
}
}
}
.input-side {
max-width: 500px;
width: 100%;
}
.input-group,
.status-container {
.input-group {
display: flex;
flex-direction: row;
justify-content: flex-start;
@ -37,49 +77,88 @@
}
.status-container {
margin: 0 .25em;
min-height: 1.5em;
font-size: .75em;
.status-icon {
margin: .25em;
width: 100%;
display: block;
&.empty {
display: inline-block;
margin-right: .5em;
visibility: visible;
}
}
.tip {
.field-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 {
width: 100%;
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;
flex-direction: column;
align-items: flex-start;
margin-bottom: 1em;
.textfield-component {
width: 100%;
.textfield-container {
.field-tip,
.status-container {
display: none;
}
}
}
// for lack of a better name
.lower-container {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
.label-spacer {
width: 12em;
}
.lower-content {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-end;
width: 100%;
.field-tip {
margin-right: 1em;
width: 100%;
}
.status-container {
margin: .5em;
}
}
.update-button-container {
visibility: hidden;
margin: .25em 0;
}
}
&.submittable {
.lower-container {
.update-button-container {
visibility: visible;
}
}
}
@media (max-width: 800px) {
.label-spacer {
display: none;
}
}
}

33
web/styles/config-pages.module.scss
View File

@ -1,33 +0,0 @@
.publicDetailsContainer {
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: wrap;
.textFieldsSection {
margin-right: 2rem;
}
}
.socialLinksEditor {
width: 20rem;
margin: 2em 0;
}
.tag-editor-container,
.config-directory-details-form {
border-radius: 1em;
background-color: rgba(128,99,255,.1);
padding: 1.5em;
margin-bottom: 1em;
}
//////////////////////////////
// common?
.dataTable {
}

12
web/utils/input-statuses.tsx
View File

@ -13,12 +13,7 @@ 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 = 'error' | 'invalid' | 'proessing' | 'success' | 'warning';
export type StatusState = {
type: InputStatusTypes;
@ -28,22 +23,27 @@ export type StatusState = {
export const INPUT_STATES = {
[STATUS_SUCCESS]: {
type: STATUS_SUCCESS,
icon: <CheckCircleFilled style={{ color: 'green' }} />,
message: 'Success!',
},
[STATUS_ERROR]: {
type: STATUS_ERROR,
icon: <ExclamationCircleFilled style={{ color: 'red' }} />,
message: 'An error occurred.',
},
[STATUS_INVALID]: {
type: STATUS_INVALID,
icon: <ExclamationCircleFilled style={{ color: 'red' }} />,
message: 'An error occurred.',
},
[STATUS_PROCESSING]: {
type: STATUS_PROCESSING,
icon: <LoadingOutlined />,
message: '',
},
[STATUS_WARNING]: {
type: STATUS_WARNING,
icon: <WarningOutlined style={{ color: '#fc0' }} />,
message: '',
},