feat: supports gantt dark theme

haydenull · May 3, 2022 · a54eed6 · a54eed6
1 parent 490dc30
commit a54eed6
Show file tree

Hide file tree

Showing 14 changed files with 116 additions and 31 deletions.
diff --git a/src/model/gantt.ts b/src/model/gantt.ts
@@ -7,7 +7,7 @@ import dayjs from 'dayjs'
 import { scheduleCalendarMapAtom } from './schedule'
 
 const MOCK_PROJECTS: IGroup[] = [
-  { id: '111', title: 'project1', events: [], milestones: [ {start: '2022-05-03', end: '2022-05-03', title: 'milesttttsfasfsadfasffdasf', 'id': 'xxx'} ], style: { bgColor: '#fff', borderColor: '#fff', color: '#000' } },
+  { id: '111', title: 'project1', events: [ { title: 'xxxxxxx', start: '2022-05-03', end: '2022-05-04', id: 'yyyy' } ], milestones: [ {start: '2022-05-03', end: '2022-05-03', title: 'milesttttsfasfsadfasffdasf', 'id': 'xxx'} ], style: { bgColor: '#fff', borderColor: '#fff', color: '#000' } },
   { id: '222', title: 'project1', events: [], milestones: [], style: { bgColor: '#fff', borderColor: '#fff', color: '#000' } },
   { id: '333', title: 'project1', events: [], milestones: [], style: { bgColor: '#fff', borderColor: '#fff', color: '#000' } },
  ]

diff --git a/src/packages/Gantt/components/Calendar.tsx b/src/packages/Gantt/components/Calendar.tsx
@@ -72,20 +72,20 @@ const Calendar: React.FC<{
   return (
     <div className="calendar h-fit w-fit">
       {/* ========= calendar header start ========= */}
-      <div className="w-fit whitespace-nowrap bg-white sticky top-0 z-20 text-gray-400">
+      <div className="w-fit whitespace-nowrap bg-quaternary sticky top-0 z-20 text">
         {
           dateMarks.map((mark) => {
             const date = mark.format('DD')
             const isShowMonth = date === '01' || mark.isSame(start, 'day') || mark.isSame(end, 'day')
             return (<div className="inline" key={'month' + mark.valueOf()}>
-              <span className="inline-block text-center sticky bg-white overflow-visible box-content" style={{ width: `${calendarEventWidth}px`, left: 0, lineHeight: '25px', paddingRight: '100px', marginRight: '-100px' }}>
+              <span className="inline-block text-center sticky bg-quaternary overflow-visible box-content" style={{ width: `${calendarEventWidth}px`, left: 0, lineHeight: '25px', paddingRight: '100px', marginRight: '-100px' }}>
                 {isShowMonth ? mark.format('MMMM YYYY') : ''}
               </span>
             </div>)
           })
         }
       </div>
-      <div className="calendar__header w-fit whitespace-nowrap bg-white sticky z-20" style={{ top: '25px' }}>
+      <div className="calendar__header w-fit whitespace-nowrap bg-quaternary sticky z-20" style={{ top: '25px' }}>
         {
           dateMarks.map((mark) => {
             const date = mark.format('DD')
@@ -134,7 +134,7 @@ const Calendar: React.FC<{
                     return (
                       <div
                         key={event.id}
-                        className="calendar__event absolute bg-white rounded cursor-pointer single_ellipsis shadow"
+                        className="calendar__event absolute bg-quaternary rounded cursor-pointer single_ellipsis shadow"
                         style={{
                           left: coordinates.x,
                           top: coordinates.y + SIDEBAR_GROUP_TITLE_HEIGHT,

diff --git a/src/packages/Gantt/components/Group.tsx b/src/packages/Gantt/components/Group.tsx
@@ -13,7 +13,7 @@ const Group: React.FC<{
 }> = ({ groupName, events, milestones = [], mode, levelCount = 0 }) => {
   return (
     <div className="group rounded-sm">
-      <div className="group__title font-medium sticky bg-white">{groupName}</div>
+      <div className="group__title font-medium sticky bg-quaternary title-text">{groupName}</div>
       <div className="group__content">
         {
           mode === 'simple'

diff --git a/src/packages/Gantt/index.css b/src/packages/Gantt/index.css
@@ -1,3 +1,71 @@
+.gantt.light {
+  --ls-primary-background-color: #fff;
+  --ls-secondary-background-color: #f8f8f8;
+  --ls-tertiary-background-color: #047857;
+  --ls-quaternary-background-color: #fff;
+  --ls-quinary-background-color: #c7e8e0;
+
+  --ls-title-text-color: #181a2b;
+  --ls-text-color: #5f636c;
+  --ls-description-text-color: #a7a7a7;
+  --ls-tint-text-color: #e3e3e3;
+}
+.gantt.dark {
+  --ls-primary-background-color: #212528;
+  --ls-secondary-background-color: #282c31;
+  --ls-tertiary-background-color: #fcb714;
+  --ls-quaternary-background-color: #32373d;
+  --ls-quinary-background-color: #6b531a;
+
+  --ls-title-text-color: #fafafe;
+  --ls-text-color: #aaadb3;
+  --ls-description-text-color: #7d7f83;
+  --ls-tint-text-color: #47484a;
+}
+.bg-primary {
+  background-color: var(--ls-primary-background-color);
+}
+.bg-secondary {
+  background-color: var(--ls-secondary-background-color);
+}
+.bg-tertiary {
+  background-color: var(--ls-tertiary-background-color);
+}
+.bg-quaternary {
+  background-color: var(--ls-quaternary-background-color);
+}
+.bg-quinary {
+  background-color: var(--ls-quinary-background-color);
+}
+.title-text {
+  color: var(--ls-title-text-color);
+}
+.text {
+  color: var(--ls-text-color);
+}
+.description-text {
+  color: var(--ls-description-text-color);
+}
+.tint-text {
+  color: var(--ls-tint-text-color);
+}
+.scroll-style::-webkit-scrollbar {
+  background-color: var(--ls-primary-background-color);
+}
+.scroll-style::-webkit-scrollbar-thumb {
+  background-color: var(--ls-tint-text-color);
+}
+.select-style {
+  background-color: var(--ls-quaternary-background-color) !important;
+  color: var(--ls-title-text-color) !important;
+}
+.select-style .ant-select-selector {
+  background-color: var(--ls-quaternary-background-color) !important;
+}
+.select-style .ant-select-arrow {
+  color: var(--ls-title-text-color) !important;
+}
+
 /* 左上角空白占位 */
 .calendar__placeholder {
   width: 160px;
@@ -18,7 +86,7 @@
 
 .group {
   margin-bottom: 36px;  /* CALENDAR_GROUP_GAP */
-  border-right: 1px solid #efefef;
+  border-right: 1px solid var(--ls-tint-text-color);
   /* 内阴影边框 */
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
   /* @apply shadow; */
@@ -49,7 +117,8 @@
 /* 日历头部 */
 .calendar__header {
   height: 25px;
-  border-bottom: 1px solid #efefef;
+  border-bottom: 1px solid var(--ls-tint-text-color);
+  /* border-bottom: 1px solid #efefef; */
 }
 .calendar__header::-webkit-scrollbar {
   display: none;
@@ -78,8 +147,10 @@
 .calendar__content__back {
   width: 108px;  /* CALENDAR_EVENT_WIDTH */
   height: 100%;
-  background-color: #f8f8f8;
-  border-right: 1px solid #efefef;
+  /* background-color: #f8f8f8; */
+  background-color: var(--ls-primary-background-color);
+
+  border-right: 1px solid var(--ls-tint-text-color);
 }
 .view-week .calendar__content__back {
   width: 44px;  /* CALENDAR_EVENT_WIDTH */
@@ -88,10 +159,11 @@
   width: 20px;  /* CALENDAR_EVENT_WIDTH */
 }
 .calendar__content__back.weekend {
-  background-color: #f4f3f3;
+  /* background-color: #f4f3f3; */
+  background-color: var(--ls-secondary-background-color);
 }
 .calendar__content__back.today {
-  background-color: #f6ebfa;
+  background-color: var(--ls-quinary-background-color);
 }
 .calendar__group {
   /* border-bottom: 1px solid #e9dceb;
@@ -105,7 +177,7 @@
   padding: 0 4px;
 }
 .calendar__milestone__line {
-  border-left: 2px solid #047857;
+  border-left: 2px solid var(--ls-tertiary-background-color);
 }
 .calendar__milestone__text {
   height: 40px;
@@ -119,7 +191,7 @@
   width: 16px;
   height: 16px;
   border-radius: 3px;
-  background-color: #047857;
+  background-color: var(--ls-tertiary-background-color);
   transform: rotateZ(45deg);
 }
 .single_ellipsis {

diff --git a/src/packages/Gantt/index.tsx b/src/packages/Gantt/index.tsx
@@ -1,4 +1,5 @@
 import { Button, Select } from 'antd'
+import classNames from 'classnames'
 import dayjs from 'dayjs'
 import React, { useRef, useState } from 'react'
 import Calendar from './components/Calendar'
@@ -13,10 +14,12 @@ const Gantt: React.FC<{
   data: IGroup[]
   showSidebar?: boolean
   showOptions?: boolean
+  showModeSelector?: boolean
   defaultView?: IView
   defaultMode?: IMode
+  theme?: 'light' | 'dark' | string
   [prop: string]: any
-}> = ({ weekStartDay, data, showSidebar = true, showOptions = true, defaultView = 'day', defaultMode = 'simple', ...props }) => {
+}> = ({ weekStartDay, data, showSidebar = true, showOptions = true, defaultView = 'day', defaultMode = 'simple', showModeSelector = false, theme = 'light', ...props }) => {
   const calendarRef = useRef<{ scrollToToday: () => void }>()
   const [view, setView] = useState<IView>(defaultView)
   const [mode, setMode] = useState<IMode>(defaultMode)
@@ -112,25 +115,27 @@ const Gantt: React.FC<{
   const _data = mode === 'simple' ? transformDataToSimpleMode(data) : transformDataToAdvancedMode(data)
 
   return (
-    <div className={`w-full h-full relative view-${view}`} {...props}>
+    <div className={classNames(`w-full h-full relative gantt text view-${view}`, { dark: theme === 'dark' }, { light: theme !== 'dark' })} {...props}>
       {
         showSidebar && (
-          <div className="calendar__placeholder absolute bg-white"></div>
+          <div className="calendar__placeholder absolute bg-quaternary"></div>
         )
       }
       {
         showOptions && (
-          <div className="operation absolute right-0 top-0 z-30 bg-white">
-            <Button size="small" shape="round" onClick={() => scrollToDate(dayjs())}>Today</Button>
-            <Select size="small" options={VIEWS} defaultValue={view} onChange={(e: IView) => setView(e)} style={{ minWidth: '80px' }} className="ml-2" />
-            <Select size="small" options={MODES} defaultValue="simple" onChange={(e: IMode) => setMode(e)} style={{ minWidth: '110px' }} className="ml-2" />
+          <div className="operation absolute right-0 top-0 z-30 bg-quaternary">
+            <Button size="small" shape="round" onClick={() => scrollToDate(dayjs())} className="bg-quaternary title-text">Today</Button>
+            <Select size="small" options={VIEWS} defaultValue={view} onChange={(e: IView) => setView(e)} style={{ minWidth: '80px' }} className="ml-2 select-style" />
+            {showModeSelector && (
+              <Select size="small" options={MODES} defaultValue="simple" onChange={(e: IMode) => setMode(e)} style={{ minWidth: '110px' }} className="ml-2 select-style" />
+            )}
           </div>
         )
       }
-      <div className="flex h-full overflow-auto relative">
+      <div className="flex h-full overflow-auto relative scroll-style">
         {
           showSidebar && (
-            <div className="side-bar bg-white sticky left-0 z-10 h-fit">
+            <div className="side-bar bg-quaternary sticky left-0 z-10 h-fit">
               {
                 _data.map((group, index) => (
                   <Group

diff --git a/src/pages/Calendar/index.tsx b/src/pages/Calendar/index.tsx
@@ -260,7 +260,7 @@ const index: React.FC<{}> = () => {
     <div className={classNames('page-container', 'flex')}>
       <div className={classNames(s.content, 'flex flex-1 flex-col overflow-hidden p-8')} style={{ maxWidth: '1400px' }}>
 
-        <h1>Calendar View</h1>
+        <h1 className="title-text">Calendar</h1>
         <div className={classNames(s.calendarWrapper, 'flex flex-col flex-1 rounded-2xl box-border')}>
           <div className="flex flex-col w-full h-full p-6">
               {/* ========= title bar start ========= */}
@@ -291,7 +291,7 @@ const index: React.FC<{}> = () => {
 
                       <Tooltip title={ currentView === 'day' ? 'Navigate to this journal note' : '' }>
                         <span
-                          className={`ml-4 text-xl h-full items-center inline-block ${currentView === 'day' ? 'cursor-pointer' : 'cursor-auto'}`}
+                          className={`ml-4 text-xl h-full items-center inline-block title-text ${currentView === 'day' ? 'cursor-pointer' : 'cursor-auto'}`}
                           style={{ height: '34px', lineHeight: '34px' }}
                           onClick={onClickShowDate}
                         >

diff --git a/src/pages/Dashboard/components/Project.tsx b/src/pages/Dashboard/components/Project.tsx
@@ -7,6 +7,7 @@ import dayjs from 'dayjs'
 import Gantt from '@/packages/Gantt'
 
 import s from '../index.module.less'
+import useTheme from '@/hooks/useTheme'
 
 function getNearestMilestone(data: IGroup) {
   const { milestones = [] } = data
@@ -23,6 +24,7 @@ const Project: React.FC<{
   data: IGroup
 }> = ({ data }) => {
   const [expand, setExpand] = useState(false)
+  const theme = useTheme()
 
   const milestone = getNearestMilestone(data)
 
@@ -69,7 +71,7 @@ const Project: React.FC<{
               exit={{ opacity: 0, height: 0, marginTop: 0, padding: 0 }}
               transition={{ ease: 'easeInOut', duration: 0.2 }}
             >
-              <Gantt data={[data]} weekStartDay={0} showOptions={false} showSidebar={false} defaultView="week" />
+              <Gantt data={[data]} weekStartDay={0} showOptions={false} showSidebar={false} defaultView="week" theme={theme} />
             </motion.div>
           )}
         </AnimatePresence>

diff --git a/src/pages/Gantt/components/Gantt.tsx b/src/pages/Gantt/components/Gantt.tsx
@@ -6,11 +6,13 @@ import { motion, AnimatePresence  } from 'framer-motion'
 import { IoIosArrowUp, IoIosArrowDown} from 'react-icons/io'
 
 import s from '../index.module.less'
+import useTheme from '@/hooks/useTheme'
 
 const Timeline: React.FC<{
   project: IGroup
 }> = ({ project }) => {
   const [expand, setExpand] = useState(true)
+  const theme = useTheme()
 
   return (
     <div className={classNames(s.timelineWrapper, {[s.expand]: expand}, 'rounded-2xl mb-9 h-auto p-6 shadow')}>
@@ -30,6 +32,7 @@ const Timeline: React.FC<{
             <Gantt
               data={[project]}
               weekStartDay={logseq.settings?.weekStartDay || 0}
+              theme={theme}
             />
           </motion.div>
         )}

diff --git a/src/pages/Gantt/index.tsx b/src/pages/Gantt/index.tsx
@@ -13,7 +13,7 @@ const index: React.FC<{}> = () => {
 
   return (
     <div className="page-container p-8 flex flex-col">
-      <h1>Gantt</h1>
+      <h1 className="title-text">Gantt</h1>
       <div className={classNames(s.contentWrapper)}>
         {
           projectData.map(project => {

diff --git a/src/pages/Settings/index.tsx b/src/pages/Settings/index.tsx
@@ -82,7 +82,7 @@ const Settings: React.FC<{
 
   return (
     <div className="page-container p-8 flex flex-col items-center">
-      <h1 className={s.title}>Settings</h1>
+      <h1 className={classNames(s.title, 'title-text')}>Settings</h1>
       <div className={classNames(s.content, 'rounded-2xl flex')}>
         <Tabs value={tab} tabs={TABS} onChange={onTabChange} />
         <Form

diff --git a/src/pages/Timeline/components/Timeline.tsx b/src/pages/Timeline/components/Timeline.tsx
@@ -6,11 +6,13 @@ import { motion, AnimatePresence  } from 'framer-motion'
 import { IoIosArrowUp, IoIosArrowDown} from 'react-icons/io'
 
 import s from '../index.module.less'
+import useTheme from '@/hooks/useTheme'
 
 const Timeline: React.FC<{
   project: IGroup
 }> = ({ project }) => {
   const [expand, setExpand] = useState(true)
+  const theme = useTheme()
 
   return (
     <div className={classNames(s.timelineWrapper, {[s.expand]: expand}, 'rounded-2xl mb-9 h-auto p-6 shadow')}>
@@ -31,6 +33,7 @@ const Timeline: React.FC<{
               data={[project]}
               weekStartDay={logseq.settings?.weekStartDay || 0}
               showSidebar={false}
+              theme={theme}
             />
           </motion.div>
         )}

diff --git a/src/pages/Timeline/index.tsx b/src/pages/Timeline/index.tsx
@@ -13,7 +13,7 @@ const index: React.FC<{}> = () => {
 
   return (
     <div className="page-container p-8 flex flex-col">
-      <h1>Timeline</h1>
+      <h1 className="title-text">Timeline</h1>
       <div className={classNames(s.contentWrapper)}>
         {
           projectData.map(project => {

diff --git a/src/util/logseq.ts b/src/util/logseq.ts
@@ -55,7 +55,7 @@ export const getPageData = async (srcPage: { id?: number; uuid?: string; origina
 }
 
 export const getCurrentTheme = async () => {
-  if (import.meta.env.DEV) return 'green'
+  if (import.meta.env.DEV) return 'dark'
   const logseqTheme = await logseq.App.getStateFromStore<'dark' | 'light'>('ui/theme')
   const lightTheme = (logseq.settings?.lightTheme as ISettingsForm['lightTheme']) || 'green'
   return logseqTheme === 'dark' ? 'dark' : lightTheme

diff --git a/src/util/util.ts b/src/util/util.ts
@@ -43,7 +43,7 @@ export const setPluginTheme = (theme: 'dark' | 'light') => {
   }
 }
 export const managePluginTheme = async () => {
-  if (import.meta.env.DEV) return setPluginTheme('light')
+  if (import.meta.env.DEV) return setPluginTheme('dark')
   const { theme } = logseq.settings as ISettingsForm & {disabled: boolean}
   if (theme === 'dark') return setPluginTheme('dark')
   if (theme === 'light') return setPluginTheme('light')