feat: enhanced popup

src/bar.js

@@ -149,8 +149,7 @@ export default class Bar {
       y: this.gantt.options.header_height - 17,
       width: this.width,
       height: this.height * 0.8,
-      rx: this.corner_radius * 2,
-      ry: this.corner_radius * 2,
+      rx: 12,
       class: "date-highlight",
       append_to: this.bar_group,
     });
@@ -283,7 +282,7 @@ export default class Bar {
         this.gantt.hide_popup();
         this.group.classList.remove("active");
       } else {
-        this.show_popup();
+        this.show_popup(e.offsetX);
         this.gantt.unselect_all();
         this.group.classList.add("active");
       }
@@ -301,7 +300,7 @@ export default class Bar {
     });
   }
 
-  show_popup() {
+  show_popup(x) {
     if (this.gantt.bar_being_dragged) return;
 
     const start_date = date_utils.format(
@@ -317,6 +316,7 @@ export default class Bar {
     const subtitle = start_date + " - " + end_date;
 
     this.gantt.show_popup({
+      x,
       target_element: this.$bar,
       title: this.task.name,
       subtitle: subtitle,

src/date_utils.js

@@ -6,6 +6,21 @@ const MINUTE = "minute";
 const SECOND = "second";
 const MILLISECOND = "millisecond";
 
+const SHORTENED = {
+  January: "Jan",
+  February: "Feb",
+  March: "Mar",
+  April: "Apr",
+  May: "May",
+  June: "Jun",
+  July: "Jul",
+  August: "Aug",
+  September: "Sep",
+  October: "Oct",
+  November: "Nov",
+  December: "Dec"
+};
+
 export default {
   parse_duration(duration) {
     const regex = /([0-9])+(y|m|d|h|min|s|ms)/gm;
@@ -98,7 +113,7 @@ export default {
       SSS: values[6],
       D: values[2],
       MMMM: month_name_capitalized,
-      MMM: month_name_capitalized,
+      MMM: SHORTENED[month_name_capitalized],
     };
 
     let str = format_string;

src/gantt.scss

@@ -227,14 +227,17 @@ $light-blue: #c4c4e9 !default;
     position: absolute;
     top: 0;
     left: 0;
-    background: rgba(0, 0, 0, 0.8);
+    background: rgba(0, 0, 0);
     padding: 0;
     color: #959da5;
     border-radius: 3px;
+    border: 1px solid rgba(0, 0, 0);
 
     .title {
-      border-bottom: 3px solid $progress;
+      border-bottom: 1px solid $progress;
       padding: 10px;
+      text-align: center;
+      color: $text-light;
     }
 
     .subtitle {
@@ -247,7 +250,7 @@ $light-blue: #c4c4e9 !default;
       height: 5px;
       margin: 0 0 0 -5px;
       border: 5px solid transparent;
-      border-top-color: rgba(0, 0, 0, 0.8);
+      border-bottom-color: rgba(0, 0, 0, 0.8);
     }
   }
 }

src/popup.js

@@ -23,9 +23,6 @@ export default class Popup {
     if (!options.target_element) {
       throw new Error("target_element is required to show popup");
     }
-    if (!options.position) {
-      options.position = "left";
-    }
     const target_element = options.target_element;
 
     if (this.custom_html) {
@@ -48,15 +45,11 @@ export default class Popup {
       position_meta = options.target_element.getBBox();
     }
 
-    if (options.position === "left") {
-      this.parent.style.left =
-        position_meta.x + (position_meta.width + 10) + "px";
-      this.parent.style.top = position_meta.y + "px";
+    this.parent.style.left = options.x - this.parent.clientWidth / 2 + "px";
+    this.parent.style.top = position_meta.y + position_meta.height + 10 + "px";
 
-      this.pointer.style.transform = "rotateZ(90deg)";
-      this.pointer.style.left = "-7px";
-      this.pointer.style.top = "2px";
-    }
+    this.pointer.style.left = this.parent.clientWidth / 2 + "px";
+    this.pointer.style.top = "-15px";
 
     // show
     this.parent.style.opacity = 1;