feat: ✨ add textColor picker[skip ci]

haydenull · Feb 23, 2022 · 6001967 · 6001967
1 parent f8229e1
commit 6001967
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 21 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -18,7 +18,7 @@ const getDefaultOptions = () => ({
   isReadOnly: true,
   week: {
     startDayOfWeek: logseq.settings?.weekStartDay || 0,
-    narrowWeekend: true,
+    // narrowWeekend: true,
   },
   month: {
     startDayOfWeek: logseq.settings?.weekStartDay || 0,
@@ -137,7 +137,9 @@ const App: React.FC<{ env: string }> = ({ env }) => {
       })
     }
     // if (values.logKey !== logseq.settings?.logKey) setSchedules()
-    setSchedules()
+
+    // exec after 500ms to make sure the settings are updated
+    setTimeout(() => setSchedules(), 500)
     setSettingModal(false)
   }
 
@@ -187,7 +189,7 @@ const App: React.FC<{ env: string }> = ({ env }) => {
   return (
     <div className="w-screen h-screen flex items-center justify-center">
       <div className="w-screen h-screen fixed top-0 left-0 bg-black bg-opacity-50" onClick={() => logseq.hideMainUI()}></div>
-      <div className="w-5/6 h-5/6 flex flex-col overflow-hidden bg-white relative rounded text-black p-3">
+      <div className="w-5/6 flex flex-col overflow-hidden bg-white relative rounded text-black p-3">
         <div className="mb-2 flex items-center justify-between">
           <div>
             <Select
@@ -212,7 +214,7 @@ const App: React.FC<{ env: string }> = ({ env }) => {
             <Button onClick={() => setSettingModal(true)} shape="circle" icon={<SettingOutlined />}></Button>
           </div>
         </div>
-        <div id="calendar"></div>
+        <div id="calendar" style={{ maxHeight: '606px' }}></div>
         <Weekly
           visible={weeklyModal.visible}
           start={weeklyModal.start}

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
@@ -69,14 +69,17 @@ const Settings: React.FC<{
               <Form.Item required label={index === 0 ? 'Calendars' : ''} {...(index === 0 ? {} : { wrapperCol: {offset: 7} })}>
                 <div className="flex items-center justify-between">
                   <Form.Item name={[field.name, 'id']} noStyle rules={[{ required: true }]}>
-                    <Input placeholder="Calendar key" disabled={index === 0} style={{ width: '180px' }} />
+                    <Input placeholder="Calendar ID" disabled={index === 0} style={{ width: '110px' }} />
                   </Form.Item>
                   <Form.Item name={[field.name, 'bgColor']} noStyle rules={[{ required: true }]}>
                     <ColorPicker text="background" />
                   </Form.Item>
                   <Form.Item name={[field.name, 'textColor']} noStyle rules={[{ required: true }]}>
                     <ColorPicker text="text" />
                   </Form.Item>
+                  <Form.Item name={[field.name, 'borderColor']} noStyle rules={[{ required: true }]}>
+                    <ColorPicker text="border" />
+                  </Form.Item>
                   <Form.Item name={[field.name, 'enabled']} noStyle valuePropName="checked">
                     <Switch size="small" />
                   </Form.Item>

diff --git a/src/util.ts b/src/util.ts
@@ -34,21 +34,23 @@ export type ISettingsForm = {
     enabled: boolean
   }[]
 }
-export const getInitalSettings = (): ISettingsForm => ({
-  defaultView: logseq.settings?.defaultView || 'week',
-  weekStartDay: logseq.settings?.weekStartDay || 0,
-  journalDateFormatter: logseq.settings?.journalDateFormatter || 'YYYY-MM-DD ddd',
-  logKey: logseq.settings?.logKey || 'Daily Log',
-  calendarList: logseq.settings?.calendarList || [
-    {
-      id: 'journal',
-      bgColor: '#047857',
-      textColor: '#fff',
-      borderColor: '#047857',
-      enabled: true,
-    },
-  ],
-})
+export const getInitalSettings = (): ISettingsForm => {
+  return {
+    defaultView: logseq.settings?.defaultView || 'week',
+    weekStartDay: logseq.settings?.weekStartDay || 0,
+    journalDateFormatter: logseq.settings?.journalDateFormatter || 'YYYY-MM-DD ddd',
+    logKey: logseq.settings?.logKey || 'Daily Log',
+    calendarList: logseq.settings?.calendarList || [
+      {
+        id: 'journal',
+        bgColor: '#047857',
+        textColor: '#fff',
+        borderColor: '#047857',
+        enabled: true,
+      },
+    ],
+  }
+}
 
 export const getSchedules = async () => {
   console.log('[faiz:] === getSchedules start ===', logseq.settings, getInitalSettings())
@@ -235,8 +237,8 @@ function genSchedule(params: {
     dueDateClass: '',
     start,
     raw: blockData,
+    color: calendarConfig?.textColor,
     bgColor: calendarConfig?.bgColor,
-    textColor: calendarConfig?.textColor,
     borderColor: calendarConfig?.borderColor,
     isAllDay,
   }