feat: more like notion

src/bar.js

@@ -18,12 +18,6 @@ export default class Bar {
             this.group.classList = ['bar-wrapper'];
         }
 
-        if (this.task.important) {
-            this.group.classList.add('important');
-        } else {
-            this.group.classList.remove('important');
-        }
-
         this.prepare_values();
         this.draw();
         this.bind();
@@ -40,8 +34,7 @@ export default class Bar {
         this.group = createSVG('g', {
             class:
                 'bar-wrapper' +
-                (this.task.custom_class ? ' ' + this.task.custom_class : '') +
+                (this.task.custom_class ? ' ' + this.task.custom_class : ''),
-                (this.task.important ? ' important' : ''),
             'data-id': this.task.id,
         });
         this.bar_group = createSVG('g', {
@@ -118,8 +111,7 @@ export default class Bar {
             ry: this.corner_radius,
             class:
                 'bar' +
-                (/^((?!chrome|android).)*safari/i.test(navigator.userAgent) &&
+                (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)
-                !this.task.important
                     ? ' safari'
                     : ''),
             append_to: this.bar_group,

src/defaults.js

@@ -119,7 +119,7 @@ const DEFAULT_OPTIONS = {
     holidays: { 'var(--g-weekend-highlight-color)': 'weekend' },
     ignore: [],
     language: 'en',
-    lines: 'both',
+    lines: 'none',
     move_dependencies: true,
     padding: 18,
     popup: (ctx) => {
@@ -143,10 +143,6 @@ const DEFAULT_OPTIONS = {
         );
 
         if (!ctx.chart.options.readonly) {
-            ctx.add_action('Toggle Priority', (task, chart) => {
-                task.important = !task.important;
-                chart.update_task(task);
-            });
             if (!ctx.chart.options.readonly_progress) {
                 ctx.add_action('+', (task, chart) => {
                     task.progress += (1 / task.actual_duration) * 100;

src/index.js

@@ -247,7 +247,7 @@ export default class Gantt {
         this.config.step = duration;
         this.config.unit = scale;
         this.config.column_width =
-            this.options.column_width || mode.column_width || 30;
+            this.options.column_width || mode.column_width || 45;
         this.$container.style.setProperty(
             '--gv-column-width',
             this.config.column_width + 'px',

src/styles/dark.css

@@ -2,12 +2,12 @@
     --g-bar-stroke-dark: #c6ccd2;
     --g-border-color-dark: #616161;
     --g-bar-color-dark: #616161;
-    --g-light-bg-dark: #3e3e3e;
+    --g-bg-dark: #3e3e3e;
     --g-light-border-color-dark: #3e3e3e;
     --g-text-muted-dark: #eee;
     --g-text-light-dark: #ececec;
     --g-text-color-dark: #f7f7f7;
-    --g-blue-dark: #8a8aff;
+    --g-progress-color: #8a8aff;
 }
 
 .dark > .gantt-container .gantt {
@@ -15,10 +15,6 @@
         fill: #252525;
     }
 
-    & .grid-row:nth-child(even) {
-        fill: var(--g-light-bg-dark);
-    }
-
     & .row-line {
         stroke: var(--g-light-border-color-dark);
     }
@@ -27,10 +23,6 @@
         stroke: var(--g-border-color-dark);
     }
 
-    & .holiday-highlight {
-        fill: var(--g-light-bg-dark);
-    }
-
     & .arrow {
         stroke: var(--g-text-muted-dark);
     }
@@ -41,7 +33,7 @@
     }
 
     & .bar-progress {
-        fill: var(--g-blue-dark);
+        fill: var(--g-progress-color);
     }
 
     & .bar-invalid {
@@ -64,7 +56,7 @@
             }
 
             & .bar-progress {
-                fill: lighten(var(--g-blue-dark, 5));
+                fill: lighten(var(--g-progress-color, 5));
             }
         }
 
@@ -74,7 +66,7 @@
             }
 
             & .bar-progress {
-                fill: lighten(var(--g-blue-dark, 5));
+                fill: lighten(var(--g-progress-color, 5));
             }
         }
     }
@@ -89,7 +81,7 @@
         background-color: #333;
 
         & .title {
-            border-color: lighten(var(--g-blue-dark, 5));
+            border-color: lighten(var(--g-progress-color, 5));
         }
     }
 }

src/styles/gantt.css

@@ -166,13 +166,13 @@
 
     & .current-highlight {
         position: absolute;
-        background: var(--g-blue-dark);
+        background: var(--g-today-highlight);
         width: 1px;
         z-index: 999;
     }
 
     & .current-date-highlight {
-        background: var(--g-blue-dark);
+        background: var(--g-today-highlight);
         color: var(--g-text-light);
         border-radius: 5px;
     }
@@ -243,7 +243,7 @@
     & .arrow {
         fill: none;
         stroke: var(--g-arrow-color);
-        stroke-width: 1;
+        stroke-width: 1.5;
     }
 
     & .bar-wrapper .bar {
@@ -258,7 +258,7 @@
     }
 
     & .bar-expected-progress {
-        fill: var(--g-blue-light);
+        fill: var(--g-expected-progress);
     }
 
     & .bar-invalid {
@@ -285,32 +285,6 @@
         }
     }
 
-    & .bar-wrapper.important {
-        & .bar {
-            fill: var(--g-bar-color-important);
-        }
-
-        & .bar-progress {
-            fill: var(--g-blue-dark);
-        }
-
-        & .bar-label {
-            fill: var(--g-text-light);
-
-            &.big {
-                fill: var(--g-text-dark);
-            }
-        }
-
-        & .handle {
-            fill: var(--g-handle-color-important);
-        }
-
-        & .handle.progress {
-            fill: var(--g-text-light);
-        }
-    }
-
     & .handle {
         fill: var(--g-handle-color);
         cursor: ew-resize;

src/styles/light.css

@@ -1,23 +1,20 @@
 :root {
-    --g-arrow-color: #9fa9b1;
+    --g-arrow-color: #d7b15b;
     --g-bar-color: #fff;
-    --g-bar-color-important: #94c4f4;
     --g-bar-border: #fff;
     --g-tick-color-thick: #e0e0e0;
     --g-tick-color: #ebeef0;
-    --g-light-bg: #f5f5f5;
     --g-actions-background: #f4f5f6;
     --g-border-color: #ebeff2;
     --g-text-muted: #7c7c7c;
     --g-text-light: #fff;
     --g-text-dark: #171717;
-    --g-progress-color: #ebeef0;
+    --g-progress-color: #f3f3f3;
     --g-handle-color: #dcdce4;
-    --g-handle-color-important: #94c4f4;
     --g-holiday-label-color: #dcdce4;
-    --g-blue-light: #c4c4e9;
+    --g-expected-progress: #c4c4e9;
-    --g-blue-dark: #2c94ec;
     --g-header-background: #ffffff;
-    --g-row-color: #fff;
+    --g-row-color: #fdfdfd;
-    --g-weekend-highlight-color: #bfdbfe;
+    --g-today-highlight: #c45841;
+    --g-weekend-highlight-color: #f7f7f7;
 }