aboutsummaryrefslogtreecommitdiff
path: root/extension/src
diff options
context:
space:
mode:
Diffstat (limited to 'extension/src')
-rw-r--r--extension/src/assets/move.svg1
-rw-r--r--extension/src/components/Body.tsx10
-rw-r--r--extension/src/components/Bookmark.tsx57
-rw-r--r--extension/src/index.css13
4 files changed, 60 insertions, 21 deletions
diff --git a/extension/src/assets/move.svg b/extension/src/assets/move.svg
new file mode 100644
index 0000000..80dd312
--- /dev/null
+++ b/extension/src/assets/move.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M480-80 310-250l57-57 73 73v-206H235l73 72-58 58L80-480l169-169 57 57-72 72h206v-206l-73 73-57-57 170-170 170 170-57 57-73-73v206h205l-73-72 58-58 170 170-170 170-57-57 73-73H520v205l72-73 58 58L480-80Z"/></svg> \ No newline at end of file
diff --git a/extension/src/components/Body.tsx b/extension/src/components/Body.tsx
index 07b0259..70f8fce 100644
--- a/extension/src/components/Body.tsx
+++ b/extension/src/components/Body.tsx
@@ -1,7 +1,7 @@
import React, {useEffect, useState} from "react";
import SettingsEditor from "./SettingsEditor.tsx";
import SettingsIcon from "../assets/settings.svg?react";
-import EditIcon from "../assets/edit.svg?react";
+import EditIcon from "../assets/move.svg?react";
import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
import FolderBody from "./FolderBody.tsx";
import {defaultSettings, ISettings, loadSettings, writeSettings} from "../Settings.ts";
@@ -14,8 +14,8 @@ export const Settings =
]);
export const ActiveDrag =
- React.createContext<[boolean, (arg0: boolean) => void]>([
- false,
+ React.createContext<[BookmarkTreeNode | null, (arg0: BookmarkTreeNode | null) => void]>([
+ null,
() => {}
])
@@ -28,7 +28,7 @@ function Body() {
const [settings, setSettings] = useState<ISettings>(defaultSettings);
const [selectedBookmarkTree, setSelectedBookmarkTree] = useState<BookmarkTreeNode[]>([])
const [fullBookmarkTree, setFullBookmarkTree] = useState<BookmarkTreeNode[] | null>([])
- const [activeDrag, setActiveDrag] = useState(false);
+ const [activeDrag, setActiveDrag] = useState<BookmarkTreeNode | null>(null);
useEffect(() => {
loadSettings().then(r => {
@@ -63,7 +63,7 @@ function Body() {
<div id={"action-area"}>
{settings.editMode && <span>Move mode: Drag bookmarks to change order</span>}
<button onClick={_ => setSettings({...settings, editMode: !settings.editMode})}>
- <EditIcon fill={settings.editMode? "lime" : "currentColor"}/>
+ <EditIcon className={settings.editMode? "enabled" : ""}/>
</button>
<button onClick={_ => setSettingsOpen(!settingsOpen)}>
<SettingsIcon/>
diff --git a/extension/src/components/Bookmark.tsx b/extension/src/components/Bookmark.tsx
index fc73387..5a406eb 100644
--- a/extension/src/components/Bookmark.tsx
+++ b/extension/src/components/Bookmark.tsx
@@ -16,10 +16,12 @@ function Bookmark(props: {data: BookmarkTreeNode}) {
let [iconMode, setIconMode] = React.useState<"large" | "small" | "letter">("letter");
let [settings, setSettings] = React.useContext(Settings);
let [bgColor, setBgColor] = React.useState<[number, number, number] | null>(null)
+ let [bgColorPriority, setBgColorPriority] = React.useState(0);
let [activeDrag, setActiveDrag] = React.useContext(ActiveDrag);
let [dropRight, setDropRight] = React.useState(false);
let [dropLeft, setDropLeft] = React.useState(false);
let [dropCenter, setDropCenter] = React.useState(false);
+ let [thisDragged, setThisDragged] = React.useState(false);
useEffect(() => {
faviconURL(props.data).then(r => {
@@ -30,29 +32,49 @@ function Bookmark(props: {data: BookmarkTreeNode}) {
})
}, []);
+ useEffect(() => {
+ setDropLeft(false);
+ setDropRight(false);
+ setDropCenter(false);
+ }, [activeDrag]);
+
function handleImageLoad(e: SyntheticEvent<HTMLImageElement, Event>) {
if (e.currentTarget.naturalWidth >= 75 || favicon!.startsWith("data:image/svg+xml")) {
setIconMode("large")
- } else if(!bgColor) {
+ } else if(bgColorPriority < 2) {
setBgColor(new ColorThief().getColor(e.currentTarget))
+ setBgColorPriority(2);
}
}
+ function handleDragStart(e: React.DragEvent<HTMLAnchorElement>) {
+ // e.dataTransfer.setData("text/bm-id", props.data.id);
+ // setActiveDrag(true);
+ console.log("data", e.dataTransfer.getData("text/bm-id").toString())
+ }
+
function handleDrag(e: React.DragEvent<HTMLAnchorElement>) {
- e.dataTransfer.dropEffect = "move";
- e.dataTransfer.setData("bm-id", props.data.id);
- setActiveDrag(true);
+ // e.dataTransfer.setData("text/bm-id", props.data.id);
+ setActiveDrag(props.data);
+ setThisDragged(true);
+ // e.dataTransfer.dropEffect = "move";
+ }
+
+ function handleDragEnd() {
+ setActiveDrag(null);
+ setThisDragged(false);
}
return(
<div className={"bookmark"}>
- <a draggable={settings.editMode} href={props.data.url} onDrag={handleDrag} onDragEnd={_ => setActiveDrag(false)}>
+ <a draggable={settings.editMode} href={props.data.url} onDragStart={handleDragStart} onDrag={handleDrag} onDragEnd={handleDragEnd}>
<div className={"icon-box " + (iconMode)} style={bgColor ? {"--icon-bg": `rgba(${bgColor[0]}, ${bgColor[1]}, ${bgColor[2]}, 0.2)`} as React.CSSProperties : undefined}>
{(() => { switch (iconMode) {
case "letter": {
let url = new URL(props.data.url!);
- if (!bgColor) {
+ if (bgColorPriority < 1) {
setBgColor(hashStringToColor(url.hostname));
+ setBgColorPriority(1);
}
return (<span className={"letter"}>{url.hostname.charAt(0)}</span>)
}
@@ -66,7 +88,7 @@ function Bookmark(props: {data: BookmarkTreeNode}) {
</div>
<span>{props.data.title}</span>
</a>
- {activeDrag && (
+ {activeDrag && !thisDragged && (
<div className={"drop-targets"}>
<div
className={"left"}
@@ -81,11 +103,11 @@ function Bookmark(props: {data: BookmarkTreeNode}) {
setDropLeft(false)
}}
onDrop={e => {
- getBrowser().bookmarks.move(e.dataTransfer.getData("bm-id"), {
+ getBrowser().bookmarks.move(activeDrag.id, {
parentId: props.data.parentId,
index: props.data.index
})
- console.log("dropped")
+ location.reload()
}}
style={dropLeft ? undefined : {opacity: 0}}
// hidden={!dropLeft}
@@ -105,12 +127,12 @@ function Bookmark(props: {data: BookmarkTreeNode}) {
setDropRight(false)
}}
onDrop={e => {
- getBrowser().bookmarks.move(e.dataTransfer.getData("bm-id"), {
+ getBrowser().bookmarks.move(activeDrag.id, {
parentId: props.data.parentId,
index: (props.data.index! + 1)
})
+ location.reload()
e.preventDefault()
- console.log("dropped right", e.dataTransfer.getData("bm-id"))
}}
style={dropRight ? undefined : {opacity: 0}}
// hidden={!dropRight}
@@ -134,7 +156,16 @@ function Bookmark(props: {data: BookmarkTreeNode}) {
}}
onDrop={e => {
e.preventDefault();
- console.log("dropped")
+ chrome.bookmarks.create({
+ // type: "folder",
+ parentId: props.data.parentId,
+ index: props.data.index,
+ title: "New Folder"
+ }).then(r => {
+ getBrowser().bookmarks.move(props.data.id, {parentId: r.id});
+ getBrowser().bookmarks.move(activeDrag?.id, {parentId: r.id});
+ location.reload()
+ })
}}
style={dropCenter ? undefined : {opacity: 0}}
// hidden={!dropCenter}
@@ -156,7 +187,7 @@ function Bookmark(props: {data: BookmarkTreeNode}) {
async function faviconURL(data: BookmarkTreeNode) {
let i = (await getBrowser().storage.local.get("icon-cache-"+data.id))["icon-cache-"+data.id];
if (i) return i
- if (i == null) return i;
+ // if (i == null) return i;
const url = new URL('https://www.google.com/s2/favicons');
url.searchParams.set("sz", "256");
diff --git a/extension/src/index.css b/extension/src/index.css
index a14e0d6..f240f82 100644
--- a/extension/src/index.css
+++ b/extension/src/index.css
@@ -120,6 +120,7 @@ body > .folderBody {
.icon-box > img {
width: 100%;
border-radius: 10px;
+ pointer-events: none;
}
.icon-box > svg {
@@ -257,13 +258,19 @@ a {
}
> svg {
- background-color: #000000ba;
- width: 65px;
- height: 65px;
+ background-color: #FFF;
+ width: 50px;
+ height: 50px;
border-radius: 10px;
padding: 10px;
margin-bottom: 14px;
+ fill: black;
}
}
+.enabled {
+ background-color: white;
+ fill: black;
+}
+
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-16 20:36:04 +0000