diff options
Diffstat (limited to 'extension/src')
| -rw-r--r-- | extension/src/Folder.tsx | 2 | ||||
| -rw-r--r-- | extension/src/RadioButtonGroup.tsx | 53 | ||||
| -rw-r--r-- | extension/src/Settings.tsx | 17 | ||||
| -rw-r--r-- | extension/src/SettingsEditor.tsx | 73 | ||||
| -rw-r--r-- | extension/src/index.css | 4 | ||||
| -rw-r--r-- | extension/src/main.tsx | 13 |
6 files changed, 158 insertions, 4 deletions
diff --git a/extension/src/Folder.tsx b/extension/src/Folder.tsx index 37f5cf6..06e8b30 100644 --- a/extension/src/Folder.tsx +++ b/extension/src/Folder.tsx @@ -6,7 +6,7 @@ function Folder (props: {data: BookmarkTreeNode}) { <details open className="folder"> <summary>{props.data.title}</summary> <div> - { + { props.data.children && props.data.children.map(child => child.children diff --git a/extension/src/RadioButtonGroup.tsx b/extension/src/RadioButtonGroup.tsx new file mode 100644 index 0000000..14f348d --- /dev/null +++ b/extension/src/RadioButtonGroup.tsx @@ -0,0 +1,53 @@ +import React, {useId, useState} from "react"; + +interface radioEntry { + label: string, + data: any, +} + +interface IProps { + groupLabel: string, + items: radioEntry[], + defaultData: any +} + +function RadioButtonGroup(props: IProps) { + const [selected, setSelected] = useState(props.defaultData); + + 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> + </> + ) +} + +export default RadioButtonGroup + +// <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>
\ No newline at end of file diff --git a/extension/src/Settings.tsx b/extension/src/Settings.tsx new file mode 100644 index 0000000..7e44c34 --- /dev/null +++ b/extension/src/Settings.tsx @@ -0,0 +1,17 @@ +let settings: { [p: string]: any } = { + sort: "from-bookmarks", + backgroundMode: "from-theme", + backgroundColor: "#000000", + rootFolderID: 0, +} + +function loadSettings() { + browser.storage.local.set(settings); +} + +function writeSettings() { + browser.storage.local.get(settings).then(r => { + settings = r; + }) +} + diff --git a/extension/src/SettingsEditor.tsx b/extension/src/SettingsEditor.tsx new file mode 100644 index 0000000..b10a705 --- /dev/null +++ b/extension/src/SettingsEditor.tsx @@ -0,0 +1,73 @@ +import RadioButtonGroup from "./RadioButtonGroup.tsx"; +import React, {useState} from "react"; + +function SettingsEditor() { + const [selected, setSelected] = 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>Root folder</h3> + <select onChange={e => setSelected(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> + </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 diff --git a/extension/src/index.css b/extension/src/index.css index 20d7bf2..82a8182 100644 --- a/extension/src/index.css +++ b/extension/src/index.css @@ -25,7 +25,11 @@ body { flex-direction: column; right: 0; animation: slideIn 0.3s ease-in-out; +} +.radio-group { + display: flex; + flex-direction: column; } @keyframes slideIn { diff --git a/extension/src/main.tsx b/extension/src/main.tsx index d988d72..e545526 100644 --- a/extension/src/main.tsx +++ b/extension/src/main.tsx @@ -1,6 +1,7 @@ import { createRoot } from 'react-dom/client' import './index.css' import Folder from "./Folder.tsx"; +import SettingsEditor from "./SettingsEditor.tsx"; // @ts-ignore if (typeof browser === "undefined") { @@ -8,9 +9,15 @@ if (typeof browser === "undefined") { } browser.bookmarks.getTree().then(tree => { - createRoot(document.getElementById('root')!).render( - // @ts-ignore - <Folder data={tree[0].children[0]} /> + createRoot(document.body).render( + <> + <div id="settings-menu"> + <SettingsEditor/> + </div> + <Folder data={ // @ts-ignore + tree[0].children[0] + }/> + </> ) }); |