Skip to content

Commit ed1b0ac

Browse files
EINDEXEINDEX
committed
feat: support editer task marker
style: upgrade to new styles system refact: add service layer and split tools
1 parent 478e831 commit ed1b0ac

File tree

14 files changed

+500
-353
lines changed

14 files changed

+500
-353
lines changed

‎src/components/LogseqBlock.tsx‎

Lines changed: 101 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,116 @@
11
import { LogseqBlockType } from '@/types/logseqBlock';
22
import LogseqPageLink from './LogseqPage';
3-
3+
import Browser from 'webextension-polyfill';
44
import styles from './logseq.module.scss';
5+
import React, { useEffect } from 'react';
56

67
type LogseqBlockProps = {
78
graph: string;
89
block: LogseqBlockType;
910
isPopUp?: boolean;
1011
};
1112

12-
export const LogseqBlock = ({
13-
graph,
14-
block,
15-
}: LogseqBlockProps) => {
13+
export const LogseqBlock = ({ graph, block }: LogseqBlockProps) => {
14+
const [checked, setChecked] = React.useState(false);
15+
const [status, setStatus] = React.useState('');
16+
17+
const statusUpdate = (marker: string) => {
18+
switch (marker) {
19+
case 'TODO':
20+
case 'LATER':
21+
case 'DOING':
22+
case 'NOW':
23+
setChecked(false);
24+
setStatus(marker);
25+
break;
26+
case 'DONE':
27+
setChecked(true);
28+
setStatus(marker);
29+
break;
30+
case 'CANCELED':
31+
setChecked(true);
32+
setStatus(marker);
33+
}
34+
}
35+
36+
const processEvent = (message: { type: string, uuid: string, status: string, marker: string, msg?: string }) => {
37+
if (message.type === 'change-block-marker-result' && message.uuid === block.uuid && message.status === "success") {
38+
statusUpdate(message.marker);
39+
}
40+
41+
}
42+
43+
useEffect(() => {
44+
Browser.runtime.onMessage.addListener(processEvent)
45+
statusUpdate(block.marker)
46+
}, []);
47+
48+
const updateBlock = (marker: string) => {
49+
Browser.runtime.sendMessage({ type: 'change-block-marker', marker: marker, uuid: block.uuid })
50+
};
51+
52+
const markerStatusChange = (
53+
e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
54+
) => {
55+
let marker = '';
56+
if (status === 'TODO') {
57+
marker = 'DOING'
58+
} else if (status === 'DOING') {
59+
marker = 'TODO'
60+
} else if (status === 'NOW') {
61+
marker = 'LATER'
62+
} else if (status === 'LATER') {
63+
marker = 'NOW'
64+
}
65+
updateBlock(marker)
66+
};
67+
68+
const markerCheck = (e: React.ChangeEvent<HTMLInputElement>) => {
69+
let marker = 'TODO';
70+
if (checked) {
71+
marker = 'TODO'
72+
} else {
73+
marker = 'DONE';
74+
}
75+
updateBlock(marker)
76+
};
77+
78+
const markerRender = (marker: string) => {
79+
if (!marker) {
80+
return <></>;
81+
}
82+
return (
83+
<div className={styles.blockMarker}>
84+
<input className={styles.blockMarkerCheckbox} type="checkbox" checked={checked} onChange={markerCheck} />
85+
<button className={styles.blockMarkerStatus} onClick={markerStatusChange}>{status}</button>
86+
</div>
87+
);
88+
};
89+
90+
const toBlock = () => {
91+
if (!block.uuid) {
92+
return <></>
93+
}
94+
return <a
95+
className={styles.toBlock}
96+
href={`logseq://graph/${graph}?block-id=${block.uuid}`}
97+
>
98+
<span className={'tie tie-block'}></span>
99+
To Block
100+
</a>
101+
}
102+
16103
if (block.html) {
17104
return (
18-
<div className={`${styles.block}`}>
19-
<div
20-
className={styles.blockContent}
21-
dangerouslySetInnerHTML={{ __html: block.html }}
22-
></div>
23-
<span className={styles.blockFooter}>
24-
{block.uuid && <a
25-
className={styles.toBlock}
26-
href={`logseq://graph/${graph}?block-id=${block.uuid}`}
27-
>
28-
<span className={'tie tie-block'}></span>
29-
To block
30-
</a>}
31-
<LogseqPageLink
32-
graph={graph}
33-
page={block.page}
34-
></LogseqPageLink>
35-
</span>
105+
<div className={styles.block}>
106+
<div className={styles.blockHeader}>
107+
<LogseqPageLink graph={graph} page={block.page}></LogseqPageLink>
108+
{toBlock()}
109+
</div>
110+
<div className={styles.blockBody}>
111+
{markerRender(block.marker)}{' '}
112+
<div className={styles.blockContent} dangerouslySetInnerHTML={{ __html: block.html }} />
113+
</div>
36114
</div>
37115
);
38116
}

‎src/components/LogseqCopilot.tsx‎

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -14,39 +14,37 @@ const LogseqCopilot = ({ graph, pages, blocks }) => {
1414
};
1515

1616
const blocksRender = () => {
17+
if (blocks.length === 0) {
18+
return <></>;
19+
}
1720
return (
18-
<>
21+
<div className={styles.blocks}>
1922
{blocks.map((block) => {
2023
return <LogseqBlock key={block.uuid} block={block} graph={graph} />;
2124
})}
22-
</>
25+
</div>
2326
);
2427
};
2528

2629
const pagesRender = () => {
27-
return (
28-
<>
29-
{pages.length > 0 ? (
30-
<div className="pages">
31-
<ul>
32-
{pages.map((page) => {
33-
if (!page) return <></>;
34-
return (
35-
<p key={page.name}>
36-
<LogseqPageLink
37-
graph={graph}
38-
page={page}
39-
></LogseqPageLink>
40-
</p>
41-
);
42-
})}
43-
</ul>
30+
if (pages.length === 0) {
31+
return <></>;
32+
}
33+
return <div className={styles.pages}>
34+
{pages.slice(0, 9).map((page) => {
35+
if (!page) return <></>;
36+
return (
37+
<div className={styles.page}>
38+
<LogseqPageLink
39+
key={page.name}
40+
graph={graph}
41+
page={page}
42+
></LogseqPageLink>
4443
</div>
45-
) : (
46-
<></>
47-
)}
48-
</>
49-
);
44+
);
45+
})}
46+
</div>
47+
5048
};
5149

5250
if (count() === 0) {

‎src/components/LogseqPage.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,15 @@ const LogseqPageLink = ({
1616
if (page === undefined || page?.name === undefined) {
1717
return <></>;
1818
}
19+
1920
return (
2021
<>
2122
<a
2223
className={styles.logseqPageLink}
2324
href={`logseq://graph/${graph}?page=${page?.name}`}
2425
>
2526
<span className="tie tie-page"></span>
26-
{page?.name}
27+
{page?.originalName?.replaceAll("/", "/ ")}
2728
</a>
2829
</>
2930
);

‎src/components/logseq.module.scss‎

Lines changed: 87 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,80 @@
1-
.blockFooter {
2-
@apply w-full justify-between flex flex-row;
1+
.pageContent {
2+
@apply flex flex-col gap-2 prose-sm dark:prose-invert whitespace-pre-wrap text-sm;
3+
}
4+
5+
.pageContentFooter {
6+
@apply flex flex-row justify-end;
7+
}
8+
9+
.copilotCardHeader {
10+
@apply flex flex-row justify-between items-center text-sm pb-2;
11+
12+
a {
13+
@apply text-sm text-center object-center;
14+
}
15+
}
16+
17+
.divide {
18+
@apply divide-y divide-x-0 divide-dashed;
19+
}
20+
21+
.toBlock {
22+
@apply no-underline hover:underline min-w-max;
23+
}
24+
25+
.logseqPageLink {
26+
@apply no-underline hover:underline;
27+
}
28+
29+
.pages {
30+
@apply grid grid-cols-3 gap-3;
31+
}
32+
33+
:root {
34+
--cardShadow: color-mix(in srgb, black 30%, transparent) 0 1px 2px 0,
35+
color-mix(in srgb, black 15%, transparent) 0 1px 3px 1px;
36+
37+
--cardBG: rgba(210, 210, 210, 0.2);
38+
--markerStatusHoverColor: black;
39+
--markerCheckerBGColor: rgba(175, 175, 175, 0.799);
40+
41+
// @media (prefers-color-scheme: dark) {
42+
// --cardBG: #292a2d;
43+
// --markerStatusHoverColor: white;
44+
// }
45+
}
46+
47+
.page {
48+
@apply rounded-lg p-2 whitespace-break-spaces overflow-hidden text-ellipsis break-normal;
49+
background-color: var(--cardBG);
50+
box-shadow: var(--cardShadow);
51+
}
52+
53+
.blocks {
54+
@apply flex flex-col gap-2;
55+
}
56+
57+
.block {
58+
@apply p-2 rounded-lg;
59+
background-color: var(--cardBG);
60+
box-shadow: var(--cardShadow);
61+
}
62+
63+
.blockBody {
64+
@apply flex flex-row flex-wrap gap-2 items-start hover:no-underline;
65+
}
66+
67+
.blockHeader {
68+
@apply w-full justify-between flex flex-row gap-2;
369
}
470

571
.blockContent {
6-
@apply flex flex-col prose-sm dark:prose-invert whitespace-pre-wrap text-sm prose-img:w-full prose-p:my-0 prose-img:my-1;
72+
@apply flex flex-col items-start whitespace-pre-wrap text-sm prose-img:w-full prose-p:my-0 prose-img:my-1;
773
* {
8-
@apply break-all text-sm;
74+
@apply m-0 break-all text-sm;
75+
}
76+
p {
77+
@apply m-0;
978
}
1079

1180
a {
@@ -21,34 +90,25 @@
2190
}
2291
}
2392

24-
.pageContent {
25-
@apply flex flex-col gap-2 prose-sm dark:prose-invert whitespace-pre-wrap text-sm;
93+
.blockMarker {
94+
@apply flex flex-row h-5 justify-center items-center;
2695
}
2796

28-
.pageContentFooter {
29-
@apply flex flex-row justify-end;
97+
.blockMarkerCheckbox {
98+
@apply h-4 w-4 m-0 border-none transition ease-in-out mr-1 transform hover:scale-110 duration-150 rounded-sm;
99+
appearance: none;
100+
background-color: var(--markerCheckerBGColor);
30101
}
31102

32-
.copilotCardHeader {
33-
@apply flex flex-row justify-between items-center text-sm pb-2;
34-
35-
a {
36-
@apply text-sm text-center object-center;
37-
}
38-
}
39-
40-
.divide {
41-
@apply divide-y divide-x-0 divide-dashed;
103+
.blockMarkerCheckbox:checked {
104+
appearance: auto;
105+
background-color: var(--markerCheckerBGColor);
42106
}
43107

44-
.block {
45-
@apply py-2;
108+
.blockMarkerStatus {
109+
@apply h-4 text-sm flex items-center self-center text-center border-none font-bold no-underline text-orange-500 hover:no-underline transform duration-300 px-0;
110+
background: none;
46111
}
47-
48-
.toBlock {
49-
@apply no-underline hover:underline;
50-
}
51-
52-
.logseqPageLink {
53-
@apply no-underline hover:underline;
112+
.blockMarkerStatus:hover {
113+
color: var(--markerStatusHoverColor);
54114
}

‎src/manifest.json.cjs‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,11 @@ const build = (releaseFor) => {
5252
},
5353
commands: {
5454
clip: {
55-
"suggested_key": {
56-
"default": "Ctrl+Shift+U",
55+
suggested_key: {
56+
default: 'Ctrl+Shift+U',
5757
},
58-
"description": "Make Clip note"
59-
}
58+
description: 'Make Clip note',
59+
},
6060
},
6161
web_accessible_resources: [
6262
{

0 commit comments

Comments
 (0)