add logo preview
This commit is contained in:
gingervitis
parent
667d006ab0
commit
c5d4851296
@ -41,87 +41,4 @@ There are also a variety of other local states to manage the display of error/su
|
||||
- NOTE: you don't have to use these components. Some form groups may require a customized UX flow where you're better off using the Ant components straight up.
|
||||
|
||||
|
||||
## Using Ant's `<Form>` with `form-textfield`.
|
||||
UPDATE: No more `<Form>` use!
|
||||
|
||||
~~You may see that a couple of pages (currently **Public Details** and **Server Details** page), is mainly a grouping of similar Text fields.~~
|
||||
|
||||
~~These are utilizing the `<Form>` component, and these calls:~~
|
||||
~~- `const [form] = Form.useForm();`~~
|
||||
~~- `form.setFieldsValue(initialValues);`~~
|
||||
|
||||
~~It seems that a `<Form>` requires its child inputs to be in a `<Form.Item>`, to help manage overall validation on the form before submission.~~
|
||||
|
||||
~~The `form-textfield` component was created to be used with this Form. It wraps with a `<Form.Item>`, which I believe handles the local state change updates of the value.~~
|
||||
|
||||
## Current Refactoring:
|
||||
~~While `Form` + `Form.Item` provides many useful UI features that I'd like to utilize, it's turning out to be too restricting for our uses cases.~~
|
||||
|
||||
~~I am refactoring `form-textfield` so that it does not rely on `<Form.Item>`. But it will require some extra handling and styling of things like error states and success messaging.~~
|
||||
|
||||
### UI things
|
||||
I'm in the middle of refactoring somes tyles and layout, and regorganizing some CSS. See TODO list below.
|
||||
|
||||
|
||||
---
|
||||
## Potential Optimizations
|
||||
|
||||
- There might be some patterns that could be overly engineered!
|
||||
|
||||
- There are also a few patterns across all the form groups that repeat quite a bit. Perhaps these patterns could be consolidated into a custom hook that could handle all the steps.
|
||||
|
||||
|
||||
|
||||
## Current `serverConfig` data structure (with default values)
|
||||
Each of these fields has its own end point for updating.
|
||||
```
|
||||
{
|
||||
streamKey: '',
|
||||
instanceDetails: {
|
||||
extraPageContent: '',
|
||||
logo: '',
|
||||
name: '',
|
||||
nsfw: false,
|
||||
socialHandles: [],
|
||||
streamTitle: '',
|
||||
summary: '',
|
||||
tags: [],
|
||||
title: '',
|
||||
},
|
||||
ffmpegPath: '',
|
||||
rtmpServerPort: '',
|
||||
webServerPort: '',
|
||||
s3: {},
|
||||
yp: {
|
||||
enabled: false,
|
||||
instanceUrl: '',
|
||||
},
|
||||
videoSettings: {
|
||||
latencyLevel: 4,
|
||||
videoQualityVariants: [],
|
||||
}
|
||||
};
|
||||
|
||||
// `yp.instanceUrl` needs to be filled out before `yp.enabled` can be turned on.
|
||||
```
|
||||
|
||||
|
||||
## Ginger's TODO list:
|
||||
|
||||
- cleanup
|
||||
- more consitent constants
|
||||
- cleanup types
|
||||
- cleanup style sheets..? make style module for each config page? (but what about ant deisgn overrides?)
|
||||
- redesign
|
||||
- label+form layout - put them into a table, table of rows?, includes responsive to stacked layout
|
||||
- change Encoder preset into slider
|
||||
- page headers - diff color?
|
||||
- fix social handles icon in table
|
||||
- things could use smaller font?
|
||||
- Design, color ideas
|
||||
|
||||
https://uxcandy.co/demo/label_pro/preview/demo_2/pages/forms/form-elements.html
|
||||
|
||||
https://www.bootstrapdash.com/demo/corona/jquery/template/modern-vertical/pages/forms/basic_elements.html
|
||||
- maybe convert common form pattern to custom hook?
|
||||
|
||||
|
||||
@ -17,6 +17,7 @@ import {
|
||||
FIELD_PROPS_YP,
|
||||
FIELD_PROPS_NSFW,
|
||||
} from '../../utils/config-constants';
|
||||
import { NEXT_PUBLIC_API_HOST } from '../../utils/apis';
|
||||
|
||||
import { UpdateArgs } from '../../types/config-section';
|
||||
import ToggleSwitch from './form-toggleswitch';
|
||||
@ -102,7 +103,13 @@ export default function EditInstanceDetails() {
|
||||
initialValue={instanceDetails.logo}
|
||||
onChange={handleFieldChange}
|
||||
/>
|
||||
|
||||
{instanceDetails.logo && (
|
||||
<img
|
||||
src={`${NEXT_PUBLIC_API_HOST}${instanceDetails.logo}`}
|
||||
alt="uploaded logo"
|
||||
className="logo-preview"
|
||||
/>
|
||||
)}
|
||||
<br />
|
||||
|
||||
<Title level={3} className="section-title">
|
||||
|
||||
@ -53,7 +53,7 @@ export default function Logs() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="upgrade-page">
|
||||
<Title level={2}>
|
||||
<a href={release.html_url}>{release.name}</a>
|
||||
</Title>
|
||||
|
||||
@ -23,7 +23,6 @@ td.ant-table-column-sort,
|
||||
color: var(--default-text-color)
|
||||
}
|
||||
|
||||
|
||||
h1.ant-typography,
|
||||
h2.ant-typography,
|
||||
h3.ant-typography,
|
||||
|
||||
@ -38,6 +38,13 @@
|
||||
}
|
||||
.instance-details-container {
|
||||
width: 100%;
|
||||
|
||||
.logo-preview {
|
||||
display: inline-block;
|
||||
margin: -1em 0 1em 11em;
|
||||
height: 120px;
|
||||
border: 1px solid var(--white-25);
|
||||
}
|
||||
}
|
||||
.social-items-container {
|
||||
background-color: var(--container-bg-color-alt);
|
||||
|
||||
@ -10,3 +10,11 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.upgrade-page {
|
||||
h2,h3 {
|
||||
color: var(--pink);
|
||||
font-size: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user