changed popup to expanding section

src/components/InputElements.tsx

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

src/css/pages/Admin.css

@@ -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 > * {

src/pages/admin/Flags.tsx

@@ -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 }) => {
+const FlagListElement = ({ flag }: { flag: APIFlag, onClick?: React.ReactEventHandler }) => {
-    return <div className='card flag list-element clickable mt-2 mb-2' onClick={onClick}>
+    // 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}>
+    //     <Popup display={currentFlag !== null}>
-            <Flag flag={currentFlag as APIFlag} />
+    //         <Flag flag={currentFlag as APIFlag} />
-        </Popup>
+    //     </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 }) => {