feat: ✨ Optimize the style of completed tasks in the calendar

haydenull · Dec 2, 2022 · 4945430 · 4945430
1 parent fe32c2f
commit 4945430
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 7 deletions.
diff --git a/src/helper/transform.tsx b/src/helper/transform.tsx
@@ -10,6 +10,7 @@ import { deleteProjectTaskTime, fillBlockReference, isOverdue, judgeIsMilestone,
 import { format } from 'date-fns'
 import { getPomodoroInfo, removePomodoroInfo } from './pomodoro'
 import { md } from './md'
+import { CALENDAR_DONN_TASK_ALLDAY_STYLE, CALENDAR_DONN_TASK_TIME_STYLE } from '@/util/constants'
 
 /** ========== calendar schedules ========== */
 export const transformTaskEventToSchedule = (block: IEvent) => {
@@ -21,6 +22,8 @@ export const transformTaskEventToSchedule = (block: IEvent) => {
   let calendarStyle: { bgColor: string; textColor: string; borderColor: string; } | undefined = block?.addOns?.isJournal ? journal : projectList.find(project => project.id === block?.addOns?.project)
   if (!calendarStyle) calendarStyle = DEFAULT_CALENDAR_STYLE
 
+  const doneStyle = block.addOns.allDay ? CALENDAR_DONN_TASK_ALLDAY_STYLE : CALENDAR_DONN_TASK_TIME_STYLE
+
   return {
     id: block.uuid,
     calendarId: block.addOns.isJournal ? 'Journal' : block.addOns.project,
@@ -35,7 +38,7 @@ export const transformTaskEventToSchedule = (block: IEvent) => {
     bgColor: calendarStyle?.bgColor,
     borderColor: calendarStyle?.borderColor,
     isAllDay: !block?.addOns?.isOverdue && block.addOns.allDay,
-    customStyle: block.addOns.status === 'done' ? 'opacity: 0.6;' : '',
+    customStyle: ['done', 'canceled'].includes(block.addOns.status) ? doneStyle : '',
     isReadOnly: false,
   }
 }
@@ -44,6 +47,9 @@ export const transformMilestoneEventToSchedule = (block: IEvent) => {
 
   let calendarStyle: { bgColor: string; textColor: string; borderColor: string; } | undefined = block?.addOns?.isJournal ? journal : projectList.find(project => project.id === block?.addOns?.project)
   if (!calendarStyle) calendarStyle = DEFAULT_CALENDAR_STYLE
+
+  const doneStyle = block.addOns.allDay ? CALENDAR_DONN_TASK_ALLDAY_STYLE : CALENDAR_DONN_TASK_TIME_STYLE
+
   return {
     id: block.uuid,
     calendarId: block.addOns.isJournal ? 'Journal' : block.addOns.project,
@@ -58,7 +64,7 @@ export const transformMilestoneEventToSchedule = (block: IEvent) => {
     bgColor: calendarStyle?.bgColor,
     borderColor: calendarStyle?.borderColor,
     isAllDay: false,
-    customStyle: block.addOns.status === 'done' ? 'opacity: 0.6;' : '',
+    customStyle: ['done', 'canceled'].includes(block.addOns.status) ? doneStyle : '',
     isReadOnly: false,
   }
 }

diff --git a/src/style/index.less b/src/style/index.less
@@ -6,6 +6,9 @@
 @tailwind utilities;
 
 
+html {
+  --ls-checked-img: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAAEtElEQVRoge2Zz29UVRTHP+e9KQuCC1tAptNK+KGdCq4YOm1XQtxI+NWFwYgmLlxIgMR/wIWJcW+kVWJ0VRIpJi0NumxMIS0zGdxI6ZRYIqXTEkpnoVgE581xMQXaeXfmvdd51gX97Obec+79nnvPve/NebDGGs83EsYgfdpnb81tbcNin6J7QOJAFNiwaPIAmAGdEOSaWjqUfCmZFpFirXPXFEA6l25WS0+q8h4QC+g+DdpLke72pvbplWpYUQDDs79sWqeFz0A/ANatdPJFHit8V4f9SaIxcT+oc+AAUjOpdxW+BOqD+nowj+qp9lj790GcfAeQ0UydM+v0KHwYXFsgzkai9umEJP7xY+wrgMxMZn2Bwg8gb9WmzTc/RbDfTjQmFrwMLS+DjGbqVlk8wIEChYtjY2Oe58szAGfW6Vll8YvIm3+8+OALT6tqnaMz6eOC9oYnKjiq8k5HrO18pf6KAaSmUw1qkQU2/ifK/JOPYLdUumIrppBa8jmrKH7u4VylrvqCFj6t1GncgavTV5uwZJLaH1K+uDGfZWDyIu1bkux/+Q2TyeMI9iuJxsRUeYdxB8SWU6yS+PF8SXxRi4zMjjI09bPJbF2BwglThysAVbVUOR62UBPj8+P0/1YS/4Srd1PcWzClk7zfp312easrgHQunQSaQlVqYDyfpX9ycJl4EeHw9oNsXr/J5BJrurttT3mjO4Us9oUp1MR4PutaeRHhyPZD7N64q6Kfpbrf1VbeUIREWEJNVBJ/ePvBquJLqPcOCLxau0wz1cS/vnG3jxGkpbzFdAtF/QoyHzYzpgMrIhzdcdineAB1aTMFsMHQ5mI4d5lvrn/Lr/eve9pWO7C7Gl7zM13JB14ob4v49l7CcO4yw9NXABi8dQmg4iouveefCgmUNtUx7cCDag73Fua4kht5+ltVGbx1ibH5Gy7bG/OlnHeKtaTNMxT+LG8zBTBbbZDN6zfRtfMIljxzVVUGJgeXpVM2P8HFW+aVD5I2yxGXNlcKKdwUqHqftdbHYScMTD5b3Sc7AVBn1dE/OeBa+drTRic8A7Ago9DlNVRrfRxUlx3OJ0EI4n5I7TjE7gave95DvpIx6C0zsnTI74CtDa107TyCbS1PJ+NDqkbxALYlLm2u12lVtVKz6d+BZr8DZ/MTrpSBcG8bhan2aNu28mqe+0ksUgQ9F2TweH0LXTuOLtuJMMUDCHLOVIo0/yMr0g08DjLB0iDCF8+jolPortBnZnQm9ZXAR0EnG89ncYqOjxcz/6hwpiOaPG3qqxjAyJ2Resu2J/j//9TPR7Djgf/UdzZ35lE1Rr2aiHCiWtG3amFrsdB6NnRVflHpTkaTF6qZeFbmpqK3TwIDoYnyz48PG//62MsoQHHXuQAcqFmWD1S5VCf2sVCKuwCJxsRCJGofVfi6dnkeqHT/3bjQ5Uc8rOADx2gufUxEzxDy7SQwh3DSK+fL8bUDS+mItZ2XInFUewQeBfUvR+CRCmccx4kHFb/ov3JG7ozELNs6BXKcAO9Oi9wB6S06he7O5s7cSjWE8plVVa3Ru5lEqW6je0rVA42x9DOrMI1yU5WMbcnQ3i17r4XxmXWNNZ53/gWeFuU7tUC6hwAAAABJRU5ErkJggg==");
+}
 html, body {
   background-color: var(--ls-primary-background-color);
   margin: 0;

diff --git a/src/util/constants.ts b/src/util/constants.ts
@@ -381,4 +381,9 @@ export const YES_NO_SELECTION = [
 
 export const POMODORO_INTERRUPTION_SEPARATOR = '|`~|'
 
-export const DEFAULT_PROJECT = { id: undefined, bgColor: '#b8e986', textColor: '#4a4a4a', borderColor: '#047857', enabled: true }
+export const DEFAULT_PROJECT = { id: undefined, bgColor: '#b8e986', textColor: '#4a4a4a', borderColor: '#047857', enabled: true }
+
+
+const CALENDAR_DONN_TASK_BASE_STYLE = 'opacity: 0.6; background-image: var(--ls-checked-img); background-size: 18px; background-repeat: no-repeat; padding-left: 20px;'
+export const CALENDAR_DONN_TASK_ALLDAY_STYLE = CALENDAR_DONN_TASK_BASE_STYLE + 'background-position: 2px center;'
+export const CALENDAR_DONN_TASK_TIME_STYLE = CALENDAR_DONN_TASK_BASE_STYLE + 'background-position: 8px center;'
diff --git a/src/util/schedule.ts b/src/util/schedule.ts
@@ -5,8 +5,8 @@ import { endOfDay, formatISO, parse } from 'date-fns'
 import dayjs, { Dayjs } from 'dayjs'
 import { getInitalSettings } from './baseInfo'
 import { ICategory, IQueryWithCalendar, ISettingsForm } from './type'
-import { DEFAULT_BLOCK_DEADLINE_DATE_FORMAT, DEFAULT_JOURNAL_FORMAT, MARKDOWN_PROJECT_TIME_REG, ORG_PROJECT_TIME_REG, TIME_REG } from './constants'
-import { getBlockData, getPageData, pureTaskBlockContent } from './logseq'
+import { CALENDAR_DONN_TASK_ALLDAY_STYLE, CALENDAR_DONN_TASK_TIME_STYLE, DEFAULT_BLOCK_DEADLINE_DATE_FORMAT, DEFAULT_JOURNAL_FORMAT, MARKDOWN_PROJECT_TIME_REG, ORG_PROJECT_TIME_REG, TIME_REG } from './constants'
+import { getBlockData, getPageData } from './logseq'
 import { BlockEntity } from '@logseq/libs/dist/LSPlugin'
 import { parseUrlParams } from './util'
 import { IEvent } from './events';
@@ -286,7 +286,7 @@ export async function genSchedule(params: {
                   ?.replace(projectTimeReg, '')
                   ?.replace(' #milestone', '')
                   ?.trim?.()
-  const isDone = blockData.marker === 'DONE'
+  const isDone = ['DONE', 'CANCELED'].includes(blockData.marker)
 
   function supportEdit() {
     if (blockData.page?.properties?.agenda === true) return true
@@ -306,6 +306,7 @@ export async function genSchedule(params: {
 
   // const uuid = typeof blockData?.uuid === 'string' ? blockData?.uuid : blockData?.uuid?.['$uuid$']
   blockData.uuid = uuid
+  const doneStyle = isAllDay ? CALENDAR_DONN_TASK_ALLDAY_STYLE : CALENDAR_DONN_TASK_TIME_STYLE
   return {
     id: id || uuid,
     calendarId: calendarConfig.id,
@@ -321,7 +322,7 @@ export async function genSchedule(params: {
     bgColor: calendarConfig?.bgColor,
     borderColor: calendarConfig?.borderColor,
     isAllDay,
-    customStyle: isDone ? 'opacity: 0.6;' : '',
+    customStyle: isDone ? doneStyle : '',
     isReadOnly: !isSupportEdit,
   }
 }