From 1817a1f9587c8a83fb75ff579cc58a9d573661ce Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 20 May 2021 17:44:25 +0200
Subject: [PATCH] Add background stripes and such

---
 src/components/tasks/gantt-component.vue | 34 +++++++++++++++++++++---
 src/styles/components/gantt.scss         | 21 +++++++++++++--
 2 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue
index 27c07a685..ec2d55e00 100644
--- a/src/components/tasks/gantt-component.vue
+++ b/src/components/tasks/gantt-component.vue
@@ -24,8 +24,10 @@
 			:push-on-overlap="true"
 			row-label-width="0"
 			:row-height="37"
-			:grid="true"
+			:grid="false"
 			@dragend-bar="dragged($event)"
+			:style="{'--day-width': dayWidthPercent + 'px'}"
+			ref="g-gantt-chart-container"
 		>
 			<g-gantt-row
 				v-for="(t, k) in ganttBars"
@@ -236,6 +238,18 @@ import Rights from '../../models/rights.json'
 import FilterPopup from '@/components/list/partials/filter-popup'
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 
+// Source: https://stackoverflow.com/a/11252167/10924593
+const treatAsUTC = date => {
+	const  result = new Date(date)
+	result.setMinutes(result.getMinutes() - result.getTimezoneOffset())
+	return result
+}
+
+const daysBetween = (startDate, endDate) => {
+	const millisecondsPerDay = 24 * 60 * 60 * 1000;
+	return (treatAsUTC(endDate) - treatAsUTC(startDate)) / millisecondsPerDay;
+}
+
 export default {
 	name: 'GanttChart',
 	components: {
@@ -313,9 +327,21 @@ export default {
 	mounted() {
 		this.buildTheGanttChart()
 	},
-	computed: mapState({
-		canWrite: (state) => state.currentList.maxRight > Rights.READ,
-	}),
+	computed: {
+		...mapState({
+			canWrite: (state) => state.currentList.maxRight > Rights.READ,
+		}),
+		dayWidthPercent() {
+			const days = daysBetween(this.startDate, this.endDate)
+
+			let containerWidth = 1
+			if(this.$refs['g-gantt-chart-container']) {
+				containerWidth = this.$refs['g-gantt-chart-container'].$el.clientWidth
+			}
+
+			return Math.round(containerWidth / days)
+		},
+	},
 	methods: {
 		buildTheGanttChart() {
 			this.setDates()
diff --git a/src/styles/components/gantt.scss b/src/styles/components/gantt.scss
index 7151dad00..4e4658838 100644
--- a/src/styles/components/gantt.scss
+++ b/src/styles/components/gantt.scss
@@ -236,18 +236,35 @@ $gantt-vertical-border-color: $grey-100;
   display: none;
 }
 
+:root {
+  --day-width: 50px;
+}
+
 #g-gantt-chart {
   * {
     font-family: $family-sans-serif !important;
   }
 
-  // .85rem
+
+  .g-gantt-row {
+    &:nth-child(even) {
+      background: rgba(0, 0, 0, 0) repeating-linear-gradient(90deg, #ededed, #ededed 1px, #fff 1px, #fff var(--day-width)) repeat scroll 0% 0%;
+    }
+
+    &:nth-child(odd) {
+      background: rgba(0, 0, 0, 0) repeating-linear-gradient(90deg, #ededed, #ededed 1px, #fafafa 1px, #fafafa var(--day-width)) repeat scroll 0% 0%;
+    }
+
+    > .g-gantt-row-bars-container {
+      border: 0;
+    }
+  }
 
   .g-gantt-bar {
     border-radius: 6px !important;
     overflow: visible !important;
     cursor: grab;
-    
+
     &:active {
       cursor: grabbing;
     }