Navy.gif/webserver-framework-frontend
Template
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

changed popup to expanding section

Browse Source
This commit is contained in:
Erik 2023-05-15 16:34:17 +03:00
parent c36d84b756
commit 43a6a9f88c
Signed by: Navy.gif
GPG Key ID: 2532FBBB61C65A68
3 changed files with 53 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/InputElements.tsx
View File

@ -47,25 +47,21 @@ export type InputElementProperties<T> = {
}
export const ToggleSwitch = ({ value, onChange, inputRef, children }: InputElementProperties<boolean>) => {
return <p>
<label>
return <label>
<span className="check-box check-box-row">
{children && <b>{children}</b>}
<input ref={inputRef} defaultChecked={value} onChange={onChange} type='checkbox' />
</span>
</label>
</p>;
</label>;
};
export const VerticalToggleSwitch = ({ value, onChange, inputRef, children }: InputElementProperties<boolean>) => {
return <p>
<label>
return <label>
{children && <b>{children}</b>}
<span className="check-box">
<input ref={inputRef} defaultChecked={value} onChange={onChange} type='checkbox' />
</span>
</label>
</p>;
</label>;
};
type ManualInputProperties<T> = {

12
src/css/pages/Admin.css
View File

@ -14,11 +14,16 @@
}
.flag {
background-color: var(--bg-color);
/* background-color: var(--bg-color); */
}
details .flag {
margin-left: 1.7rem;
}
.tile {
width: calc(25% - 8px);
background-color: var(--bg-color);
}
.flag.list-element {
@ -29,6 +34,11 @@
.list.category {
user-select: none;
background-color: var(--color-darkGrey);
padding: 1rem;
margin: 0.5rem;
border-radius: 1rem;
border: 2px solid var(--bg-color);
}
.list.category > * {

45
src/pages/admin/Flags.tsx
View File

@ -3,8 +3,6 @@ import { Flag as APIFlag } from "../../@types/ApiStructures";
import { OrganisedFlags, capitalise, get, organiseFlags } from "../../util/Util";
import { ClickToEdit, Dropdown, InputElementType, NumberInput, StringInput, ToggleSwitch } from "../../components/InputElements";
import { PageButtons } from "../../components/PageControls";
import { Popup } from "../../components/PageElements";
import ClickDetector from "../../util/ClickDetector";
const Flag = ({ flag: incoming }: { flag: APIFlag }) => {
@ -28,9 +26,11 @@ const Flag = ({ flag: incoming }: { flag: APIFlag }) => {
else if (flag.type === 'number') Input = <NumberInput onChange={() => setUnsaved(true)} inputRef={valueRef} value={flag.value as number} type='float' />;
else if (flag.type === 'boolean') Input = <ToggleSwitch onChange={() => setUnsaved(true)} inputRef={valueRef} value={flag.value as boolean} />;
return <div className='flag card mt-0 mb-0'>
return <div className='flag mt-0 mb-0'>
{unsaved && <i><small>Unsaved changes</small></i>}
<h3 className="mt-0 mb-1"><ClickToEdit onUpdate={val => updateFlag({...flag, name: val})} value={flag.name} /></h3>
<h3 className="mt-0 mb-1">
<ClickToEdit onUpdate={val => updateFlag({ ...flag, name: val })} value={flag.name} />
</h3>
<button className="button danger">Delete</button>
{unsaved && <button onClick={save} className="button primary">Save</button>}
<p className="mt-0 mb-1"><b>ID:</b> {flag.id}</p>
@ -55,26 +55,34 @@ const Flag = ({ flag: incoming }: { flag: APIFlag }) => {
};
const FlagTile = ({ flag }: { flag: APIFlag }) => {
return <div className="tile">
return <div className="card tile">
<Flag flag={flag} />
</div>;
};
const FlagListElement = ({ flag, onClick }: { flag: APIFlag, onClick?: React.ReactEventHandler }) => {
return <div className='card flag list-element clickable mt-2 mb-2' onClick={onClick}>
const FlagListElement = ({ flag }: { flag: APIFlag, onClick?: React.ReactEventHandler }) => {
// return <div className='card flag list-element clickable mt-2 mb-2' onClick={onClick}>
// <b>{flag.name}</b> [{flag.type}] ({flag.id})
// </div>;
return <details className='card list-element mt-2 mb-2'>
<summary className="clickable">
<b>{flag.name}</b> [{flag.type}] ({flag.id})
</div>;
</summary>
<Flag flag={flag} />
</details>;
};
const ListCategory = ({ flags, name, setFlag }: { flags: OrganisedFlags, name: string, setFlag: (flag: APIFlag) => void }) => {
const ListCategory = ({ flags, name, setFlag }: { flags: OrganisedFlags, name: string, setFlag?: (flag: APIFlag) => void }) => {
const categories = Object.keys(flags);
const elements: JSX.Element[] = [];
for (const category of categories) {
const element = flags[category];
if (element.id)
elements.push(<FlagListElement onClick={() => setFlag(element as APIFlag)} key={element.id as string} flag={element as APIFlag} />);
elements.push(<FlagListElement onClick={() => setFlag && setFlag(element as APIFlag)} key={element.id as string} flag={element as APIFlag} />);
else
elements.push(<ListCategory setFlag={setFlag} key={category} name={category} flags={element as OrganisedFlags} />);
}
@ -97,16 +105,21 @@ const ListView = ({ flags }: { flags: APIFlag[] }) => {
const organised = organiseFlags(flags);
const [currentFlag, setCurrentFlag] = useState<APIFlag | null>(null);
const selectFlag = (flag: APIFlag) => {
console.log(flag);
setCurrentFlag(flag);
};
return <ClickDetector callback={() => setCurrentFlag(null)}>
// return <ClickDetector callback={() => setCurrentFlag(null)}>
<Popup display={currentFlag !== null}>
<Flag flag={currentFlag as APIFlag} />
</Popup>
// <Popup display={currentFlag !== null}>
// <Flag flag={currentFlag as APIFlag} />
// </Popup>
<ListCategory setFlag={(flag: APIFlag) => setCurrentFlag(flag)} name={'root'} flags={organised} />
// <ListCategory setFlag={(flag: APIFlag) => selectFlag(flag)} name={'root'} flags={organised} />
</ClickDetector>;
// </ClickDetector>;
return <ListCategory setFlag={(flag: APIFlag) => selectFlag(flag)} name={'root'} flags={organised} />;
};
const TileView = ({ flags, children }: { flags: APIFlag[], children: React.ReactNode }) => {