feat: ✨ add full screen btn & support custom duration

haydenull · Mar 11, 2022 · 87eaf1f · 87eaf1f
1 parent 02a43e5
commit 87eaf1f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 11 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 import Calendar, { ISchedule } from 'tui-calendar'
 import { Button, Select } from 'antd'
-import { LeftOutlined, RightOutlined, SettingOutlined, ReloadOutlined } from '@ant-design/icons'
+import { LeftOutlined, RightOutlined, SettingOutlined, ReloadOutlined, FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons'
 import dayjs from 'dayjs'
 import { getSchedules, ISettingsForm, managePluginTheme } from './util/util'
 import Settings from './components/Settings'
@@ -50,6 +50,7 @@ const App: React.FC<{ env: string }> = ({ env }) => {
 
   const DEFAULT_OPTIONS = getDefaultOptions()
 
+  const [isFullScreen, setIsFullScreen] = useState(false)
   const [currentView, setCurrentView] = useState(logseq.settings?.defaultView || 'month')
   const [showDate, setShowDate] = useState<string>()
   const [showExportWeekly, setShowExportWeekly] = useState<boolean>(Boolean(logseq.settings?.logKey?.enabled) && logseq.settings?.defaultView === 'week')
@@ -156,6 +157,9 @@ const App: React.FC<{ env: string }> = ({ env }) => {
     calendarRef.current?.next()
     changeShowDate()
   }
+  const onClickFullScreen = () => {
+    setIsFullScreen(_isFullScreen => !_isFullScreen)
+  }
   const onSettingChange = (values: ISettingsForm) => {
     console.log('[faiz:] === onSettingChange', values)
     logseq.updateSettings({calendarList: 1})
@@ -224,7 +228,7 @@ const App: React.FC<{ env: string }> = ({ env }) => {
   return (
     <div className="w-screen h-screen flex items-center justify-center">
       <div className="mask w-screen h-screen fixed top-0 left-0 bg-black bg-opacity-50" onClick={() => logseq.hideMainUI()}></div>
-      <div className="w-5/6 flex flex-col overflow-hidden bg-white relative rounded text-black p-3">
+      <div className={`${isFullScreen ? 'w-full h-full' : 'w-5/6'} flex flex-col justify-center overflow-hidden bg-white relative rounded text-black p-3`}>
         <div className="mb-2 flex items-center justify-between">
           <div>
             <Select
@@ -246,10 +250,12 @@ const App: React.FC<{ env: string }> = ({ env }) => {
           <div>
             { showExportWeekly && <Button className="mr-4" onClick={exportWeekly}>Export Weekly</Button> }
             <Button className="mr-4" onClick={setSchedules} type="primary" icon={<ReloadOutlined />}>Reload</Button>
-            <Button onClick={() => setSettingModal(true)} shape="circle" icon={<SettingOutlined />}></Button>
+            <Button className="mr-4" onClick={() => setSettingModal(true)} shape="circle" icon={<SettingOutlined />}></Button>
+            <Button onClick={onClickFullScreen} shape="circle" icon={isFullScreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}></Button>
           </div>
         </div>
-        <div id="calendar" style={{ maxHeight: '606px' }}></div>
+        {/* <div id="calendar" style={{ maxHeight: '606px' }}></div> */}
+        <div id="calendar"></div>
         <Weekly
           visible={weeklyModal.visible}
           start={weeklyModal.start}

diff --git a/src/util/constants.ts b/src/util/constants.ts
@@ -26,7 +26,7 @@ export const DEFAULT_SETTINGS: ISettingsForm = {
   journalDateFormatter: 'YYYY-MM-DD ddd',
   defaultDuration: {
     value: 0.5,
-    unit: 'hour',
+    unit: 'h',
   },
   logKey: {
     id: DEFAULT_LOG_KEY,
@@ -188,10 +188,10 @@ export const CALENDAR_THEME = {
 export const DEFAULT_BLOCK_DEADLINE_DATE_FORMAT = "YYYYMMDD"
 
 export const DURATION_UNITS = [
-  { value: 'd', label: 'day' },
-  { value: 'w', label: 'week' },
-  { value: 'M', label: 'month' },
-  { value: 'y', label: 'year' },
-  { value: 'h', label: 'hour' },
+  // { value: 'w', label: 'week' },
+  // { value: 'M', label: 'month' },
+  // { value: 'y', label: 'year' },
   { value: 'm', label: 'minute' },
+  { value: 'h', label: 'hour' },
+  // { value: 'd', label: 'day' },
 ]
diff --git a/src/util/util.ts b/src/util/util.ts
@@ -127,6 +127,7 @@ export const getSchedules = async () => {
         start: _start,
         end: _end,
         calendarConfig,
+        defaultDuration,
       })
       // show overdue tasks in today
       return _isOverdue
@@ -136,6 +137,7 @@ export const getSchedules = async () => {
             blockData: block,
             category: _category,
             calendarConfig,
+            defaultDuration,
           })
         ]
         : schedule
@@ -185,6 +187,7 @@ message: ${res.reason.message}`
         start: _startTime ? dayjs(date + ' ' + _startTime, 'YYYYMMDD HH:mm').format() : genCalendarDate(date),
         end: _endTime ? dayjs(date + ' ' + _endTime, 'YYYYMMDD HH:mm').format() : undefined,
         calendarConfig: logKey,
+        defaultDuration,
       })
     }))
   }
@@ -213,7 +216,9 @@ function genSchedule(params: {
   const { defaultDuration: _defaultDuration } = DEFAULT_SETTINGS
   let _end = end
   if (category === 'time' && !end && defaultDuration) {
-    _end = dayjs(start).add(defaultDuration.value | _defaultDuration.value, defaultDuration.unit || _defaultDuration.unit).format()
+    const value = defaultDuration.value || _defaultDuration.value
+    const unit = defaultDuration.unit || _defaultDuration.unit
+    _end = dayjs(start).add(value, unit).format()
   }
 
   return {