feat: improved progress handle

shockwave40 · Apr 28, 2024 · e9931bd · e9931bd
1 parent 8bdd488
commit e9931bd
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 9 deletions.
diff --git a/src/bar.js b/src/bar.js
@@ -149,7 +149,7 @@ export default class Bar {
     $date_highlight.classList.add('date-highlight')
     $date_highlight.style.height = this.height * 0.8 + 'px'
     $date_highlight.style.width = this.width + 'px'
-    $date_highlight.style.top = this.gantt.options.header_height - 24 + 'px'
+    $date_highlight.style.top = this.gantt.options.header_height - 25 + 'px'
     $date_highlight.style.left = x + 'px'
     this.$date_highlight = $date_highlight
     this.gantt.$lower_header.prepend($date_highlight)
@@ -254,13 +254,24 @@ export default class Bar {
 
   get_progress_polygon_points() {
     const bar_progress = this.$bar_progress;
+    let icon_width = 10;
+    let icon_height = 15;
+
     return [
-      bar_progress.getEndX() - 6,
-      bar_progress.getY() + bar_progress.getHeight() + 8,
-      bar_progress.getEndX() + 6,
-      bar_progress.getY() + bar_progress.getHeight() + 8,
+      bar_progress.getEndX() - icon_width / 2,
+      bar_progress.getY() + bar_progress.getHeight() / 2,
+
+      bar_progress.getEndX(),
+      bar_progress.getY() + bar_progress.getHeight() / 2 - icon_height / 2,
+
+      bar_progress.getEndX() + icon_width / 2,
+      bar_progress.getY() + bar_progress.getHeight() / 2,
+
       bar_progress.getEndX(),
-      bar_progress.getY() + bar_progress.getHeight() + 0.5,
+      bar_progress.getY() + bar_progress.getHeight() / 2 + icon_height / 2,
+
+      bar_progress.getEndX() - icon_width / 2,
+      bar_progress.getY() + bar_progress.getHeight() / 2,
     ];
   }
 

diff --git a/src/gantt.scss b/src/gantt.scss
@@ -38,11 +38,11 @@ $dark-blue: #2c94ec !default;
   }
 
   .upper-header {
-    height: 50px;
+    height: 40px;
   }
 
   .lower-header {
-    height: 56px;
+    height: 30px;
   }
 
   .lower-text {
@@ -218,6 +218,10 @@ $dark-blue: #2c94ec !default;
     .handle {
       fill: $handle-color-important;
     }
+
+    .handle.progress {
+      fill: $text-light;
+    }
   }
 
 
@@ -229,6 +233,10 @@ $dark-blue: #2c94ec !default;
     transition: opacity 0.3s ease;
   }
 
+  .handle.progress {
+    fill: $text-muted;
+  }
+
   .bar-wrapper {
     cursor: pointer;
     outline: none;

diff --git a/src/index.js b/src/index.js
@@ -1182,7 +1182,7 @@ export default class Gantt {
     this.$svg.innerHTML = "";
     this.$header?.remove?.()
     this.$current_highlight?.remove?.()
-    this.$popup_wrapper?.remove?.()
+    this.$popup_wrapper.innerHTML = ''
   }
 }