diff options
Diffstat (limited to 'extension')
| -rw-r--r-- | extension/src/Folder.tsx | 8 | ||||
| -rw-r--r-- | extension/src/index.css | 9 | ||||
| -rw-r--r-- | extension/src/main.tsx | 3 |
3 files changed, 13 insertions, 7 deletions
diff --git a/extension/src/Folder.tsx b/extension/src/Folder.tsx index 93cc286..b7da330 100644 --- a/extension/src/Folder.tsx +++ b/extension/src/Folder.tsx @@ -3,10 +3,10 @@ import Bookmark from "./Bookmark.tsx"; function Folder (props: {data: BookmarkTreeNode}) { return ( - <div className="folder"> - <span>{props.data.title}</span> + <details open className="folder"> + <summary>{props.data.title}</summary> <div> - { + { props.data.children && props.data.children.map(child => child.children @@ -15,7 +15,7 @@ function Folder (props: {data: BookmarkTreeNode}) { ) } </div> - </div> + </details> ) } diff --git a/extension/src/index.css b/extension/src/index.css index 301b98f..9b18c8a 100644 --- a/extension/src/index.css +++ b/extension/src/index.css @@ -1,3 +1,7 @@ +* { + box-sizing: border-box; +} + body { background-color: #242424; color: white; @@ -23,17 +27,18 @@ body { flex-wrap: wrap; } -.folder > span { +.folder > summary { font-weight: bold; font-size: 20px; margin: 5px; + user-select: none } /* Bookmark */ .bookmark { display: flex; flex-direction: column; - width: 100px; + width: 125px; padding: 10px; margin: 5px; } diff --git a/extension/src/main.tsx b/extension/src/main.tsx index 0aaf551..45019a5 100644 --- a/extension/src/main.tsx +++ b/extension/src/main.tsx @@ -4,7 +4,8 @@ import Folder from "./Folder.tsx"; chrome.bookmarks.getTree(tree => { createRoot(document.getElementById('root')!).render( - <Folder data={tree[0]} /> + // @ts-ignore + <Folder data={tree[0].children[0]} /> ) }); |