diff options
| -rw-r--r-- | extension/src/Body.tsx | 23 | ||||
| -rw-r--r-- | extension/src/SettingsEditor.tsx | 32 | ||||
| -rw-r--r-- | extension/src/assets/close.svg | 1 | ||||
| -rw-r--r-- | extension/src/assets/settings.svg | 1 | ||||
| -rw-r--r-- | extension/src/index.css | 24 | ||||
| -rw-r--r-- | extension/src/main.tsx | 14 |
6 files changed, 69 insertions, 26 deletions
diff --git a/extension/src/Body.tsx b/extension/src/Body.tsx new file mode 100644 index 0000000..7d56265 --- /dev/null +++ b/extension/src/Body.tsx @@ -0,0 +1,23 @@ +import React, {useState} from "react"; +import SettingsEditor from "./SettingsEditor.tsx"; +import Folder from "./Folder.tsx"; +import imageUrl from "./assets/settings.svg" +import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode; + +function Body(props: {tree: BookmarkTreeNode[]}) { + const [settingsOpen, setSettingsOpen] = useState(false); + + return ( + <> + <button id="settings-button" onClick={_ => setSettingsOpen(!settingsOpen)}> + <img alt="open settings" src={imageUrl}/> + </button> + {settingsOpen && (<SettingsEditor closer={setSettingsOpen}/>)} + <Folder data={ + (props.tree && props.tree[0] && props.tree[0].children && props.tree[0].children[0])! + }/> + </> + ) +} + +export default Body
\ No newline at end of file diff --git a/extension/src/SettingsEditor.tsx b/extension/src/SettingsEditor.tsx index 7335a18..3e9fc93 100644 --- a/extension/src/SettingsEditor.tsx +++ b/extension/src/SettingsEditor.tsx @@ -1,19 +1,18 @@ import RadioButtonGroup from "./RadioButtonGroup.tsx"; import React, {useState} from "react"; +import imageUrl from "./assets/close.svg" -function SettingsEditor() { +function SettingsEditor(props: {closer: (arg0: boolean) => void}) { const [backgroundType, setBackgroundType] = useState("fromTheme"); const [sort, setSort] = useState("fromBookmarks"); const [rootFolder, setRootFolder] = useState('0'); return ( - <form> - <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> + <div id="settings-menu"> + <button id="settings-close" onClick={_ => props.closer(false)}> + <img alt="close settings" src={imageUrl}/> + </button> + <h1>Settings</h1> <h3>Sort</h3> <RadioButtonGroup defaultValue={sort} onChange={e => setSort(e)}> @@ -23,6 +22,19 @@ function SettingsEditor() { <option value={"recent"}>Recently used</option> </RadioButtonGroup> + <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>Edit mode</h3> + <label> + <input type={"checkbox"}/> + Enable Edit mode + </label> + <h3>Root folder</h3> <select defaultValue={rootFolder} onChange={e => setRootFolder(e.target.value)}> <option value={'0'}>Bookmarks Toolbar id:0</option> @@ -34,8 +46,8 @@ function SettingsEditor() { <span>value of bg type: {backgroundType}</span> <span>value of sort: {sort}</span> <span>value of root folder: {rootFolder}</span> - <input type="submit"/> - </form> + <button>Save</button> + </div> ) } diff --git a/extension/src/assets/close.svg b/extension/src/assets/close.svg new file mode 100644 index 0000000..8c71124 --- /dev/null +++ b/extension/src/assets/close.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
\ No newline at end of file diff --git a/extension/src/assets/settings.svg b/extension/src/assets/settings.svg new file mode 100644 index 0000000..551161c --- /dev/null +++ b/extension/src/assets/settings.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm112-260q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Z"/></svg>
\ No newline at end of file diff --git a/extension/src/index.css b/extension/src/index.css index 79b8adb..a0d71b1 100644 --- a/extension/src/index.css +++ b/extension/src/index.css @@ -23,9 +23,6 @@ body { padding: 10px; right: 0; animation: slideIn 0.3s ease-in-out; -} - -#settings-menu form { display: flex; flex-direction: column; place-items: flex-start; @@ -49,7 +46,6 @@ body { border-style: solid; border-width: 1px; border-color: #393939; - padding: 2px; margin: 5px; padding: 10px; } @@ -67,6 +63,11 @@ body { user-select: none } +body > .folder { + margin: 0; + border-style: none; +} + /* Bookmark */ .bookmark { display: flex; @@ -97,4 +98,19 @@ a { text-decoration: none; } +#settings-close, #settings-button { + border-style: none; + background: none; + color: white; + padding: 5px; + margin: 5px; + position: absolute; + top: 0; + right: 0; +} + +#settings-close:hover, #settings-button:hover { + background-color: rgba(0, 0, 0, 0.3); +} + diff --git a/extension/src/main.tsx b/extension/src/main.tsx index e545526..0b6d9de 100644 --- a/extension/src/main.tsx +++ b/extension/src/main.tsx @@ -1,7 +1,6 @@ import { createRoot } from 'react-dom/client' import './index.css' -import Folder from "./Folder.tsx"; -import SettingsEditor from "./SettingsEditor.tsx"; +import Body from "./Body.tsx"; // @ts-ignore if (typeof browser === "undefined") { @@ -9,16 +8,7 @@ if (typeof browser === "undefined") { } browser.bookmarks.getTree().then(tree => { - createRoot(document.body).render( - <> - <div id="settings-menu"> - <SettingsEditor/> - </div> - <Folder data={ // @ts-ignore - tree[0].children[0] - }/> - </> - ) + createRoot(document.body).render(<Body tree={tree}/>) }); // chrome.bookmarks.create( |
