diff options
Diffstat (limited to 'extension/src/components')
| -rw-r--r-- | extension/src/components/Bookmark.tsx | 10 | ||||
| -rw-r--r-- | extension/src/components/FolderButton.tsx | 8 |
2 files changed, 13 insertions, 5 deletions
diff --git a/extension/src/components/Bookmark.tsx b/extension/src/components/Bookmark.tsx index c12da35..d9dd7cb 100644 --- a/extension/src/components/Bookmark.tsx +++ b/extension/src/components/Bookmark.tsx @@ -1,6 +1,6 @@ import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode; import GlobeIcon from "../assets/globe.svg" -import React, {useEffect} from "react"; +import React, {SyntheticEvent, useEffect} from "react"; import {getBrowser} from "../main.tsx"; /** @@ -10,6 +10,7 @@ import {getBrowser} from "../main.tsx"; */ function Bookmark(props: {data: BookmarkTreeNode}) { let [favicon, setFavicon] = React.useState(GlobeIcon); + let [isSmall, setSmall] = React.useState(true); useEffect(() => { // faviconURL(props.data.url).then(o => o && setFavicon(o)) faviconURL(props.data).then(r => { @@ -21,7 +22,12 @@ function Bookmark(props: {data: BookmarkTreeNode}) { return( <a className="bookmark draggable" href={props.data.url}> - <img alt="Bookmark icon" src={favicon}></img> + <div className={"icon-box" + (isSmall ? " small" : "")}> + <img alt="Bookmark icon" + src={favicon} + onLoad={(e) => setSmall(e.currentTarget.naturalWidth < 75 && !favicon.endsWith(".svg") && favicon !== GlobeIcon)} + ></img> + </div> <span>{props.data.title}</span> </a> ); diff --git a/extension/src/components/FolderButton.tsx b/extension/src/components/FolderButton.tsx index 2d7cc9e..42e5d60 100644 --- a/extension/src/components/FolderButton.tsx +++ b/extension/src/components/FolderButton.tsx @@ -15,11 +15,13 @@ function FolderButton(props: {data: BookmarkTreeNode}) { return( <> - <a className={"bookmark draggable"} onClick={() => setFolderOpen(!folderOpen)}> - <img alt="Folder icon" src={folderOpen ? folderIconOpen : folderIcon}/> + <a className="bookmark draggable" onClick={() => setFolderOpen(!folderOpen)}> + <div className="icon-box"> + <img alt="Folder icon" src={folderOpen ? folderIconOpen : folderIcon}/> + </div> <span>{props.data.title}</span> </a> - { folderOpen + {folderOpen && props.data.children && props.data.children.length > 0 && (<FolderBody data={props.data}/>)} |