aboutsummaryrefslogtreecommitdiff
path: root/extension/src
diff options
context:
space:
mode:
Diffstat (limited to 'extension/src')
-rw-r--r--extension/src/Body.tsx6
-rw-r--r--extension/src/Bookmark.tsx2
-rw-r--r--extension/src/Folder.tsx34
-rw-r--r--extension/src/FolderBody.tsx20
-rw-r--r--extension/src/FolderButton.tsx25
-rw-r--r--extension/src/assets/folder.svg1
-rw-r--r--extension/src/assets/folder_open.svg1
-rw-r--r--extension/src/index.css30
8 files changed, 66 insertions, 53 deletions
diff --git a/extension/src/Body.tsx b/extension/src/Body.tsx
index 0ac2e4c..786ee27 100644
--- a/extension/src/Body.tsx
+++ b/extension/src/Body.tsx
@@ -1,8 +1,8 @@
import React, {useEffect, useState} from "react";
import SettingsEditor from "./SettingsEditor.tsx";
-import Folder from "./Folder.tsx";
import imageUrl from "./assets/settings.svg"
import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
+import FolderBody from "./FolderBody.tsx";
// @ts-ignore
if (typeof browser === "undefined") {
@@ -21,7 +21,7 @@ export const BookmarkTree = React.createContext({
function Body() {
const [settingsOpen, setSettingsOpen] = useState(false);
- const [rootFolder, setRootFolder] = useState('1');
+ const [rootFolder, setRootFolder] = useState("root________");
const [bookmarkTree, setBookmarkTree] = useState<BookmarkTreeNode[]>([])
const [ogBookmarkTree, setOgBookmarkTree] = useState<BookmarkTreeNode[] | null>([])
const [backgroundURL, setBackgroundURL] = useState("")
@@ -44,7 +44,7 @@ function Body() {
<img alt="open settings" src={imageUrl}/>
</button>
{settingsOpen && (<SettingsEditor tree={ogBookmarkTree!} closer={setSettingsOpen} setBackgroundURL={setBackgroundURL}/>)}
- {bookmarkTree[0] && (<Folder data={bookmarkTree[0]}/>)}
+ {bookmarkTree[0] && (<FolderBody data={bookmarkTree[0]}/>)}
</RootFolder.Provider>
</BookmarkTree.Provider>
)
diff --git a/extension/src/Bookmark.tsx b/extension/src/Bookmark.tsx
index 8078b3a..0d675af 100644
--- a/extension/src/Bookmark.tsx
+++ b/extension/src/Bookmark.tsx
@@ -21,6 +21,4 @@ function faviconURL(u: string | undefined) {
}
-
-
export default Bookmark; \ No newline at end of file
diff --git a/extension/src/Folder.tsx b/extension/src/Folder.tsx
deleted file mode 100644
index 06e8b30..0000000
--- a/extension/src/Folder.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
-import Bookmark from "./Bookmark.tsx";
-
-function Folder (props: {data: BookmarkTreeNode}) {
- return (
- <details open className="folder">
- <summary>{props.data.title}</summary>
- <div>
- {
- props.data.children &&
- props.data.children.map(child =>
- child.children
- ? <Folder data={child} />
- : <Bookmark data={child} />
- )
- }
- </div>
- </details>
- )
-}
-
-// if (props.data.children) {
-// let l = [];
-// for (let child of props.data.children) {
-// if (child.children) {
-// l.push(<Folder data={child} />)
-// } else {
-// l.push(<Bookmark data={child} />)
-// }
-// }
-// return l
-// }
-
-export default Folder; \ No newline at end of file
diff --git a/extension/src/FolderBody.tsx b/extension/src/FolderBody.tsx
new file mode 100644
index 0000000..b013d97
--- /dev/null
+++ b/extension/src/FolderBody.tsx
@@ -0,0 +1,20 @@
+import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
+import Bookmark from "./Bookmark.tsx";
+import FolderButton from "./FolderButton.tsx";
+
+function FolderBody (props: {data: BookmarkTreeNode}) {
+ return (
+ <div className={"folderBody"}>
+ {
+ props.data.children &&
+ props.data.children.map(child =>
+ child.children
+ ? <FolderButton data={child} />
+ : <Bookmark data={child} />
+ )
+ }
+ </div>
+ )
+}
+
+export default FolderBody; \ No newline at end of file
diff --git a/extension/src/FolderButton.tsx b/extension/src/FolderButton.tsx
new file mode 100644
index 0000000..b0115de
--- /dev/null
+++ b/extension/src/FolderButton.tsx
@@ -0,0 +1,25 @@
+import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
+import FolderBody from "./FolderBody.tsx";
+import folderIcon from "./assets/folder.svg"
+import folderIconOpen from "./assets/folder_open.svg"
+import {useState} from "react";
+
+function FolderButton(props: {data: BookmarkTreeNode}) {
+
+ const [folderOpen, setFolderOpen] = useState(false);
+
+ return(
+ <>
+ <a className={"bookmark draggable"} onClick={() => setFolderOpen(!folderOpen)}>
+ <img alt="Folder icon" src={folderOpen ? folderIconOpen : folderIcon}/>
+ <span>{props.data.title}</span>
+ </a>
+ { folderOpen
+ && props.data.children
+ && props.data.children.length > 1
+ && (<FolderBody data={props.data}/>)}
+ </>
+);
+}
+
+export default FolderButton \ No newline at end of file
diff --git a/extension/src/assets/folder.svg b/extension/src/assets/folder.svg
new file mode 100644
index 0000000..45d526a
--- /dev/null
+++ b/extension/src/assets/folder.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="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Z"/></svg> \ No newline at end of file
diff --git a/extension/src/assets/folder_open.svg b/extension/src/assets/folder_open.svg
new file mode 100644
index 0000000..75ecf42
--- /dev/null
+++ b/extension/src/assets/folder_open.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="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640H160v400l96-320h684L837-217q-8 26-29.5 41.5T760-160H160Z"/></svg> \ No newline at end of file
diff --git a/extension/src/index.css b/extension/src/index.css
index ebaa37b..54e8ea1 100644
--- a/extension/src/index.css
+++ b/extension/src/index.css
@@ -31,6 +31,7 @@ body {
display: flex;
flex-direction: column;
place-items: flex-start;
+ z-index: 4;
}
.radio-group {
@@ -44,33 +45,32 @@ body {
}
/* Folder */
-.folder {
+.folderBody {
width: 100%;
display: flex;
- flex-direction: column;
+ flex-direction: row;
border-style: solid;
- border-width: 1px;
+ border-width: 2px;
+ border-radius: 5px;
border-color: #393939;
margin: 5px;
padding: 10px;
-}
-
-.folder > div {
- display: flex;
- flex-direction: row;
flex-wrap: wrap;
+ /*position: fixed;*/
+ /*bottom: 0;*/
+ animation: slideDown 0.2s ease;
+ overflow: hidden;
+ white-space: nowrap;
}
-.folder > summary {
- font-weight: bold;
- font-size: 20px;
- margin: 5px;
- user-select: none
+@keyframes slideDown {
+ from { transform: translateY(-50%); opacity: 0 }
}
-body > .folder {
+body > .folderBody {
margin: 0;
border-style: none;
+ position: relative;
}
/* Bookmark */
@@ -80,6 +80,7 @@ body > .folder {
width: 125px;
padding: 10px;
margin: 5px;
+ user-select: none;
}
.bookmark > img {
@@ -112,6 +113,7 @@ a {
position: absolute;
top: 0;
right: 0;
+ z-index: 2;
}
#settings-close:hover, #settings-button:hover {
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-16 21:59:50 +0000