diff options
Diffstat (limited to 'extension/src')
| -rw-r--r-- | extension/src/RadioButtonGroup.tsx | 52 | ||||
| -rw-r--r-- | extension/src/SettingsEditor.tsx | 81 | ||||
| -rw-r--r-- | extension/src/index.css | 8 |
3 files changed, 53 insertions, 88 deletions
diff --git a/extension/src/RadioButtonGroup.tsx b/extension/src/RadioButtonGroup.tsx index 14f348d..1e86e7e 100644 --- a/extension/src/RadioButtonGroup.tsx +++ b/extension/src/RadioButtonGroup.tsx @@ -1,38 +1,30 @@ -import React, {useId, useState} from "react"; +import React, {ReactElement, ReactNode, useId, useState} from "react"; -interface radioEntry { - label: string, - data: any, +interface RadioProps { + children: ReactElement<HTMLOptionElement>[], + defaultValue: any, + onChange?: (arg0: any) => void } -interface IProps { - groupLabel: string, - items: radioEntry[], - defaultData: any -} - -function RadioButtonGroup(props: IProps) { - const [selected, setSelected] = useState(props.defaultData); +function RadioButtonGroup(props: RadioProps) { + const [selected, setSelected] = useState(props.defaultValue); + props.onChange && props.onChange(selected); return ( - <> - <h3>{props.groupLabel}</h3> - <div className="radio-group"> - { props.items.map((item) => ( - <label> - <input - type="radio" - name={useId()} - value={item.data} - checked={item.data === selected} - onChange={e => setSelected(e.target.value)} - /> - {item.label} - </label> - )) } - </div> - <span>currently selected: {selected}</span> - </> + <div className="radio-group"> + { props.children.map((item) => ( + <label> + <input + type="radio" + name={useId()} + value={item.props.value} + checked={item.props.value === selected} + onChange={e => setSelected(e.target.value)} + /> + {item.props.children.toString()} + </label> + )) } + </div> ) } diff --git a/extension/src/SettingsEditor.tsx b/extension/src/SettingsEditor.tsx index b10a705..7335a18 100644 --- a/extension/src/SettingsEditor.tsx +++ b/extension/src/SettingsEditor.tsx @@ -2,72 +2,41 @@ import RadioButtonGroup from "./RadioButtonGroup.tsx"; import React, {useState} from "react"; function SettingsEditor() { - const [selected, setSelected] = useState('0'); + const [backgroundType, setBackgroundType] = useState("fromTheme"); + const [sort, setSort] = useState("fromBookmarks"); + const [rootFolder, setRootFolder] = useState('0'); return ( <form> - <RadioButtonGroup groupLabel="Background Type" defaultData={"fromTheme"} items={[ - {label: "From Theme", data: "fromTheme"}, - {label: "Solid Color", data: "solidColor"}, - {label: "Image", data: "image"}, - ]}/> - <RadioButtonGroup groupLabel="Sort" defaultData={"fromBookmarks"} items={[ - {label: "From Bookmarks", data: "fromBookmarks"}, - {label: "Alphabetical", data: "alphabetical"}, - {label: "Frequency", data: "frequency"}, - {label: "Recently used", data: "recent"}, - ]}/> + <h3>Background Type</h3> + <RadioButtonGroup defaultValue={backgroundType} onChange={e => setBackgroundType(e)}> + <option value={"fromTheme"}>From Theme</option> + <option value={"solidColor"}>Solid Color</option> + <option value={"image"}>Image</option> + </RadioButtonGroup> + + <h3>Sort</h3> + <RadioButtonGroup defaultValue={sort} onChange={e => setSort(e)}> + <option value={"fromBookmarks"}>From Bookmarks</option> + <option value={"alphabetical"}>Alphabetical</option> + <option value={"frequency"}>Frequency</option> + <option value={"recent"}>Recently used</option> + </RadioButtonGroup> <h3>Root folder</h3> - <select onChange={e => setSelected(e.target.value)}> + <select defaultValue={rootFolder} onChange={e => setRootFolder(e.target.value)}> <option value={'0'}>Bookmarks Toolbar id:0</option> <option value={'1'}>Mobile Bookmarks id:1</option> <option value={'2'}>Other Bookmarks id:2</option> </select> - <span>currently selected: {selected}</span> + + <br/> + <span>value of bg type: {backgroundType}</span> + <span>value of sort: {sort}</span> + <span>value of root folder: {rootFolder}</span> + <input type="submit"/> </form> ) } -export default SettingsEditor; - -// <div id="settings-menu"> -// <h2>Settings</h2> -// -// <h3>Sort</h3> -// <label> -// <input type="radio" name="sort"/> -// From bookmarks -// </label> -// <label> -// <input type="radio" name="sort"/> -// Alphabetical -// </label> -// <label> -// <input type="radio" name="sort"/> -// Frequency -// </label> -// -// <h3>Background</h3> -// <label> -// <input type="radio" name="bg"/> -// From Theme -// </label> -// <label> -// <input type="radio" name="bg"/> -// Solid color -// </label> -// <label> -// <input type="radio" name="bg"/> -// Image -// </label> -// -// <h3>Root folder</h3> -// <label> -// <select> -// <option>Bookmarks Toolbar id:0</option> -// <option>Mobile Bookmarks id:1</option> -// <option>Other Bookmarks id:2</option> -// </select> -// </label> -// </div>
\ No newline at end of file +export default SettingsEditor;
\ No newline at end of file diff --git a/extension/src/index.css b/extension/src/index.css index 82a8182..79b8adb 100644 --- a/extension/src/index.css +++ b/extension/src/index.css @@ -21,12 +21,16 @@ body { width: 300px; background-color: black; padding: 10px; - display: flex; - flex-direction: column; right: 0; animation: slideIn 0.3s ease-in-out; } +#settings-menu form { + display: flex; + flex-direction: column; + place-items: flex-start; +} + .radio-group { display: flex; flex-direction: column; |