diff options
Diffstat (limited to 'extension/src/SettingsEditor.tsx')
| -rw-r--r-- | extension/src/SettingsEditor.tsx | 94 |
1 files changed, 0 insertions, 94 deletions
diff --git a/extension/src/SettingsEditor.tsx b/extension/src/SettingsEditor.tsx deleted file mode 100644 index ca0feeb..0000000 --- a/extension/src/SettingsEditor.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import RadioButtonGroup from "./RadioButtonGroup.tsx"; -import React, {useContext} from "react"; -import imageUrl from "./assets/close.svg" -import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode; -import {Settings} from "./Body.tsx"; - -function SettingsEditor(props: {tree: BookmarkTreeNode[], isOpen: [boolean, React.Dispatch<React.SetStateAction<boolean>>]}) { - const [settings, setSettings] = useContext(Settings) - const [open, setOpen] = props.isOpen; - - return ( - <div id="settings-menu" className={open ? "open" : "closed"}> - <button id="settings-close" onClick={_ => setOpen(false)}> - <img alt="close settings" src={imageUrl}/> - </button> - <h1>Settings</h1> - - <h3>Sort</h3> - <RadioButtonGroup value={settings.sort} - onChange={e => { - setSettings({...settings, sort: e}) - }}> - <option value={"from-bookmarks"}>From Bookmarks</option> - <option value={"alphabetical"}>Alphabetical</option> - <option value={"frequency"}>Frequency</option> - <option value={"recent"}>Recently used</option> - </RadioButtonGroup> - <br/> - <label> - <input type={"checkbox"} - checked={settings.foldersFirst} - onChange={e => setSettings({...settings, foldersFirst: e.target.checked})}/> - Sort Folders First - </label> - - <h3>Background Type</h3> - <RadioButtonGroup value={settings.backgroundMode} - onChange={e => setSettings({...settings, backgroundMode: e})}> - <option value={"theme"}>Default</option> - <option value={"color"}>Solid Color</option> - <option value={"image"}>Image</option> - </RadioButtonGroup> - - {(() => { - switch (settings.backgroundMode) { - case "image": - return (<> - <h3>Background Image URL</h3> - <input type={"url"} - value={settings.backgroundImage} - onChange={e => setSettings({...settings, backgroundImage: e.target.value})}/> - </>) - case "color": - return (<> - <h3>Background Color</h3> - <input type={"color"} - value={settings.backgroundColor} - onChange={e => setSettings({...settings, backgroundColor: e.target.value})}/> - </>) - } - })()} - - <h3>Root folder</h3> - <select value={settings.rootFolder!} - onChange={e => setSettings({...settings, rootFolder: e.target.value})}> - {getFoldersFromTree(props.tree).map(i => - <option value={i.id}>{i.title ? i.title : "Untitled (id:" + i.id + ")"}</option> - )} - </select> - - {/*<br/>*/} - {/*<span>sort: {settings.sort}</span>*/} - {/*<span>rootFolder: {settings.rootFolder}</span>*/} - {/*<span>bgmode: {settings.backgroundMode}</span>*/} - </div> -) -} - -function getFoldersFromTree(tree: BookmarkTreeNode[]) { - let folderList: BookmarkTreeNode[] = []; - rec(tree); - - function rec(tree: BookmarkTreeNode[]) { - tree.forEach(item => { - if (item.children) { - folderList.push(item); - rec(item.children); - } - }) - } - return folderList; -} - -export default SettingsEditor;
\ No newline at end of file |