From 65ade1fc87dc77a7a35dd9f58d8865e8e8814859 Mon Sep 17 00:00:00 2001
From: boojack <imrealleonardo@gmail.com>
Date: Sun, 3 Jul 2022 11:24:57 +0800
Subject: [PATCH] chore: update todo block

---
 web/src/components/DailyMemo.tsx            | 2 +-
 web/src/components/Memo.tsx                 | 2 +-
 web/src/components/PreviewImageDialog.tsx   | 2 +-
 web/src/components/ShareMemoImageDialog.tsx | 9 +--------
 web/src/helpers/marked.ts                   | 4 ++--
 web/src/less/memo-content.less              | 5 ++++-
 web/src/less/memo.less                      | 4 ++--
 7 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/web/src/components/DailyMemo.tsx b/web/src/components/DailyMemo.tsx
index 9c572cbf7..26eaa25bf 100644
--- a/web/src/components/DailyMemo.tsx
+++ b/web/src/components/DailyMemo.tsx
@@ -32,7 +32,7 @@ const DailyMemo: React.FC<Props> = (props: Props) => {
         <Only when={imageUrls.length > 0}>
           <div className="images-container">
             {imageUrls.map((imgUrl, idx) => (
-              <img key={idx} crossOrigin="anonymous" src={imgUrl} decoding="async" />
+              <img key={idx} src={imgUrl} decoding="async" />
             ))}
           </div>
         </Only>
diff --git a/web/src/components/Memo.tsx b/web/src/components/Memo.tsx
index ac583912d..07ec43754 100644
--- a/web/src/components/Memo.tsx
+++ b/web/src/components/Memo.tsx
@@ -112,7 +112,7 @@ const Memo: React.FC<Props> = (props: Props) => {
       } else {
         locationService.setTagQuery(tagName);
       }
-    } else if (targetEl.className === "todo-block") {
+    } else if (targetEl.classList.contains("todo-block")) {
       const status = targetEl.dataset?.value;
       const todoElementList = [...(memoContainerRef.current?.querySelectorAll(`span.todo-block[data-value=${status}]`) ?? [])];
       for (const element of todoElementList) {
diff --git a/web/src/components/PreviewImageDialog.tsx b/web/src/components/PreviewImageDialog.tsx
index 734bd4ca6..fc1b23742 100644
--- a/web/src/components/PreviewImageDialog.tsx
+++ b/web/src/components/PreviewImageDialog.tsx
@@ -29,7 +29,7 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrl }: Props) => {
         </button>
       </div>
       <div className="img-container">
-        <img src={imgUrl} crossOrigin="anonymous" />
+        <img src={imgUrl} />
       </div>
     </>
   );
diff --git a/web/src/components/ShareMemoImageDialog.tsx b/web/src/components/ShareMemoImageDialog.tsx
index 8856d1818..f4569e8eb 100644
--- a/web/src/components/ShareMemoImageDialog.tsx
+++ b/web/src/components/ShareMemoImageDialog.tsx
@@ -91,14 +91,7 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
           <Only when={imageUrls.length > 0}>
             <div className="images-container">
               {imageUrls.map((imgUrl, idx) => (
-                <img
-                  crossOrigin="anonymous"
-                  decoding="async"
-                  key={idx}
-                  src={imgUrl}
-                  onLoad={handleImageOnLoad}
-                  onError={handleImageOnLoad}
-                />
+                <img decoding="async" key={idx} src={imgUrl} onLoad={handleImageOnLoad} onError={handleImageOnLoad} />
               ))}
             </div>
           </Only>
diff --git a/web/src/helpers/marked.ts b/web/src/helpers/marked.ts
index 5b9e95a73..569e1cd91 100644
--- a/web/src/helpers/marked.ts
+++ b/web/src/helpers/marked.ts
@@ -11,8 +11,8 @@ const parseMarkedToHtml = (markedStr: string): string => {
     .replace(/([\u4e00-\u9fa5])([A-Za-z0-9?.,;[\]]+)/g, "$1 $2")
     .replace(/([A-Za-z0-9?.,;[\]]+)([\u4e00-\u9fa5])/g, "$1 $2")
     .replace(CODE_BLOCK_REG, "<pre lang=''>$1</pre>")
-    .replace(TODO_BLOCK_REG, "<span class='todo-block' data-value='TODO'>⬜</span>")
-    .replace(DONE_BLOCK_REG, "<span class='todo-block' data-value='DONE'>✅</span>")
+    .replace(TODO_BLOCK_REG, "<span class='todo-block todo' data-value='TODO'></span>")
+    .replace(DONE_BLOCK_REG, "<span class='todo-block done' data-value='DONE'>✓</span>")
     .replace(DOT_LI_REG, "<span class='counter-block'>•</span>")
     .replace(NUM_LI_REG, "<span class='counter-block'>$1.</span>")
     .replace(BOLD_TEXT_REG, "<strong>$1</strong>")
diff --git a/web/src/less/memo-content.less b/web/src/less/memo-content.less
index f563ef84f..b6fcd9afe 100644
--- a/web/src/less/memo-content.less
+++ b/web/src/less/memo-content.less
@@ -25,7 +25,10 @@
   }
 
   .todo-block {
-    @apply rounded select-none cursor-pointer hover:shadow-inner;
+    @apply w-4 h-4 leading-4 border rounded float-left box-border text-lg cursor-pointer shadow-inner hover:opacity-80;
+    margin-top: 6px;
+    margin-left: 6px;
+    margin-right: 6px;
   }
 
   pre {
diff --git a/web/src/less/memo.less b/web/src/less/memo.less
index 6821e437f..9fff5f850 100644
--- a/web/src/less/memo.less
+++ b/web/src/less/memo.less
@@ -127,11 +127,11 @@
     .pretty-scroll-bar(0, 2px);
 
     > .memo-img {
-      @apply mr-2 last:mr-0 w-auto h-32 shrink-0 grow-0 overflow-y-hidden;
+      @apply mr-2 last:mr-0 w-auto h-auto shrink-0 grow-0 overflow-y-hidden;
       .hide-scroll-bar();
 
       > img {
-        @apply w-auto max-h-32 rounded-lg;
+        @apply w-auto max-h-40 rounded-lg;
       }
     }
   }