feat: ✨ Optimize gantt style

haydenull · Oct 20, 2022 · 9cd91bf · 9cd91bf
1 parent a5a1d16
commit 9cd91bf
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 21 deletions.
diff --git a/src/helper/transform.tsx b/src/helper/transform.tsx
@@ -76,7 +76,7 @@ export const transformEventToGanttEvent = (event: IEvent): IGanttEvent => {
     completed: event.addOns.status === 'done',
     detailPopup: (<div className="text-xs">
       <div className="font-bold text-base my-2">{event.addOns.showTitle}</div>
-      <div className="my-2">{`${dayStart.format('YYYY.MM.DD hh:mm a')} - ${dayEnd.format('hh:mm a')}`}</div>
+      <div className="my-2">{`${dayStart.format('YYYY.MM.DD')} - ${dayEnd.format('YYYY.MM.DD')}`}</div>
       <p className="whitespace-pre-line">{event.content}</p>
 
       <a onClick={async () => {

diff --git a/src/model/gantt.ts b/src/model/gantt.ts
@@ -6,14 +6,7 @@ import { categorizeTask } from '@/util/schedule'
 import { journalEventsAtom, projectEventsAtom } from './events'
 import { transformEventToGanttEvent } from '@/helper/transform'
 
-// const MOCK_PROJECTS: IGroup[] = [
-//   { id: '111', title: 'project1', events: [ { title: 'xxxxxxx', start: '2022-05-03', end: '2022-05-04', id: 'yyyy' } ], milestones: [ {start: '2022-05-07', end: '2022-05-07', 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' } },
-//  ]
-
 export const ganttDataAtom = atom<IGroup[] | null>((get) => {
-  // if (import.meta.env.DEV) return MOCK_PROJECTS
   const { projectList = [], journal } = getInitalSettings()
   const enabledCalendarList: ICustomCalendar[] = [journal! as ICustomCalendar].concat(projectList)?.filter(calendar => calendar?.enabled)
   const ganttData: IGroup[] = enabledCalendarList.map(calendar => {

diff --git a/src/packages/Gantt/components/Calendar.tsx b/src/packages/Gantt/components/Calendar.tsx
@@ -151,7 +151,6 @@ const Calendar: React.FC<{
                             top: coordinates.y + SIDEBAR_GROUP_TITLE_HEIGHT,
                             width: size.width + 'px',
                             height: size.height + 'px',
-                            zIndex: 1,
                           }}
                           title={event.title}
                         >
@@ -168,7 +167,7 @@ const Calendar: React.FC<{
                     const { coordinates, detailPopup, completed } = milestone
                     return (
                       <>
-                        <div key={'milestone-line' + milestone.id} className="calendar__milestone__line absolute" style={{ left: coordinates.x + calendarEventWidth / 2, top: group.coordinate.y, height: group.height + 16 }}>
+                        <div key={'milestone-line' + milestone.id} className="calendar__milestone__line absolute" style={{ left: coordinates.x + calendarEventWidth / 2, top: 0, height: groupHeightCount + 'px' }}>
                           {/* <span className="absolute ml-3">{milestone.title}</span> */}
                         </div>
                         <Popover
@@ -181,7 +180,7 @@ const Calendar: React.FC<{
                             style={{ left: coordinates.x + 2 + calendarEventWidth / 2, top: coordinates.y + SIDEBAR_GROUP_TITLE_HEIGHT }}
                             title={milestone.title}
                           >
-                            { completed && <svg data-v-651e2bfe="" viewBox="0 0 16 16" fill="white" className="milestone__mark"><path data-v-651e2bfe="" d="M5.536 11.175L2 7.639l1.497-1.497L7 9.642l6-6.28 1.497 1.497-7.464 7.814-1.497-1.497z"></path></svg> }
+                            { completed && <svg data-v-651e2bfe="" viewBox="0 0 16 16" fill="var(--ls-primary-background-color)" className="milestone__mark"><path data-v-651e2bfe="" d="M5.536 11.175L2 7.639l1.497-1.497L7 9.642l6-6.28 1.497 1.497-7.464 7.814-1.497-1.497z"></path></svg> }
                             <span className="single_ellipsis" style={{ maxWidth: calendarEventWidth - 20 }}>
                               {milestone.title}
                             </span>

diff --git a/src/packages/Gantt/components/Group.tsx b/src/packages/Gantt/components/Group.tsx
@@ -22,7 +22,7 @@ const Group: React.FC<{
 
   return (
     <div className="group rounded-sm">
-      <div className="group__title font-medium sticky bg-quaternary title-text single_ellipsis" title={groupName}>
+      <div className="group__title sticky bg-quaternary title-text single_ellipsis" title={groupName}>
         {isFold ? <IoIosArrowDown onClick={() => onFold?.(false)} className="ml-2" /> : <IoIosArrowUp onClick={() => onFold(true)} className="ml-2" />}
         {groupName}
       </div>
@@ -44,7 +44,7 @@ const Group: React.FC<{
               mode === 'simple'
               ? (milestones?.length > 0 ? <div className="group__event cursor-pointer flex justify-between items-center">{/* Milestones */}</div> : null)
               : milestones?.map((milestone, index) => (
-                <div className="group__event cursor-pointer single_ellipsis" onClick={() => scrollToDate(dayjs(milestone.start), uniqueId)}>
+                <div className="group__event cursor-pointer single_ellipsis milestone" onClick={() => scrollToDate(dayjs(milestone.start), uniqueId)}>
                   {milestone?.title}
                 </div>
               ))

diff --git a/src/packages/Gantt/constants.ts b/src/packages/Gantt/constants.ts
@@ -1,5 +1,5 @@
 /** 日历 group 间隙 */
-export const CALENDAR_GROUP_GAP = 36
+export const CALENDAR_GROUP_GAP = 0
 
 /** 日历事件的高度 */
 export const CALENDAR_EVENT_HEIGHT = 40

diff --git a/src/packages/Gantt/index.css b/src/packages/Gantt/index.css
@@ -9,9 +9,13 @@
   --ls-text-color: #5f636c;
   --ls-description-text-color: #a7a7a7;
   --ls-tint-text-color: #e3e3e3;
+
+  --ls-calendar-weekday-background-color: #f5f7f9;
+  --ls-calendar-weekend-background-color: #f3f5f9;
+  --ls-calendar-weekend-background-pattern: #e1e2e6;
 }
 .gantt.dark {
-  --ls-primary-background-color: #212528;
+  --ls-primary-background-color: #282c32;
   --ls-secondary-background-color: #282c31;
   --ls-tertiary-background-color: #fcb714;
   --ls-quaternary-background-color: #32373d;
@@ -21,6 +25,10 @@
   --ls-text-color: #aaadb3;
   --ls-description-text-color: #7d7f83;
   --ls-tint-text-color: #47484a;
+
+  --ls-calendar-weekday-background-color: #212528;
+  --ls-calendar-weekend-background-color: #1d2124;
+  --ls-calendar-weekend-background-pattern: #2e2f30;
 }
 .bg-primary {
   background-color: var(--ls-primary-background-color);
@@ -75,10 +83,10 @@
 }
 
 .group {
-  margin-bottom: 36px;  /* CALENDAR_GROUP_GAP */
+  margin-bottom: 0;  /* CALENDAR_GROUP_GAP */
   border-right: 1px solid var(--ls-tint-text-color);
   /* 内阴影边框 */
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+  /* box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); */
   /* @apply shadow; */
 }
 .group__title {
@@ -96,6 +104,18 @@
 .group__event {
   height: 40px;  /* CALENDAR_GROUP_EVENT_HEIGHT */
   line-height: 40px;
+  display: flex;
+  align-items: center;
+}
+.group__event.milestone::before{
+  display: block;
+  content: '';
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--ls-tertiary-background-color);
+  border-radius: 3px;
+  transform: rotate(45deg);
+  margin: 0 8px 0 2px;
 }
 
 
@@ -138,7 +158,7 @@
   width: 108px;  /* CALENDAR_EVENT_WIDTH */
   height: 100%;
   /* background-color: #f8f8f8; */
-  background-color: var(--ls-primary-background-color);
+  background-color: var(--ls-calendar-weekday-background-color);
 
   border-right: 1px solid var(--ls-tint-text-color);
 }
@@ -149,16 +169,16 @@
   width: 20px;  /* CALENDAR_EVENT_WIDTH */
 }
 .calendar__content__back.weekend {
-  /* background-color: #f4f3f3; */
-  background-color: var(--ls-secondary-background-color);
+  background-color: var(--ls-calendar-weekend-background-color);
+  background-image: repeating-linear-gradient(120deg, var(--ls-calendar-weekend-background-pattern), var(--ls-calendar-weekend-background-pattern) 1px, transparent 0, transparent 12px);
 }
 .calendar__content__back.today {
   background-color: var(--ls-quinary-background-color);
 }
 .calendar__group {
   /* border-bottom: 1px solid #e9dceb;
   border-top: 1px solid #e9dceb; */
-  margin-bottom: 36px;   /* CALENDAR_GROUP_GAP */
+  margin-bottom: 0;   /* CALENDAR_GROUP_GAP */
   box-sizing: content-box;
 }
 .calendar__event {