changed popup to expanding section
This commit is contained in:
parent
c36d84b756
commit
43a6a9f88c
@ -47,25 +47,21 @@ export type InputElementProperties<T> = {
|
||||
}
|
||||
|
||||
export const ToggleSwitch = ({ value, onChange, inputRef, children }: InputElementProperties<boolean>) => {
|
||||
return <p>
|
||||
<label>
|
||||
<span className="check-box check-box-row">
|
||||
{children && <b>{children}</b>}
|
||||
<input ref={inputRef} defaultChecked={value} onChange={onChange} type='checkbox' />
|
||||
</span>
|
||||
</label>
|
||||
</p>;
|
||||
return <label>
|
||||
<span className="check-box check-box-row">
|
||||
{children && <b>{children}</b>}
|
||||
<input ref={inputRef} defaultChecked={value} onChange={onChange} type='checkbox' />
|
||||
</span>
|
||||
</label>;
|
||||
};
|
||||
|
||||
export const VerticalToggleSwitch = ({ value, onChange, inputRef, children }: InputElementProperties<boolean>) => {
|
||||
return <p>
|
||||
<label>
|
||||
{children && <b>{children}</b>}
|
||||
<span className="check-box">
|
||||
<input ref={inputRef} defaultChecked={value} onChange={onChange} type='checkbox' />
|
||||
</span>
|
||||
</label>
|
||||
</p>;
|
||||
return <label>
|
||||
{children && <b>{children}</b>}
|
||||
<span className="check-box">
|
||||
<input ref={inputRef} defaultChecked={value} onChange={onChange} type='checkbox' />
|
||||
</span>
|
||||
</label>;
|
||||
};
|
||||
|
||||
type ManualInputProperties<T> = {
|
||||
|
@ -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 > * {
|
||||
|
@ -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}>
|
||||
<b>{flag.name}</b> [{flag.type}] ({flag.id})
|
||||
</div>;
|
||||
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})
|
||||
</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 }) => {
|
||||
|
Loading…
Reference in New Issue
Block a user