fix: small bugs and style changes

src/bar.js

@@ -337,10 +337,11 @@ export default class Bar {
 
         this.popup_opened = false;
         if (this.gantt.options.popup_on === 'click') {
-            $.on(this.group, 'click', (e) => {
+            $.on(this.group, 'mouseup', (e) => {
                 const posX = e.offsetX || e.layerX;
                 const cx = +this.$handle_progress.getAttribute('cx');
                 if (cx > posX - 1 && cx < posX + 1) return;
+                if (this.gantt.bar_being_dragged) return;
                 if (!this.popup_opened)
                     this.gantt.show_popup({
                         x: e.offsetX || e.layerX,

src/defaults.js

@@ -119,11 +119,23 @@ const DEFAULT_OPTIONS = {
     holidays: { 'var(--g-weekend-highlight-color)': 'weekend' },
     ignore: [],
     language: 'en',
-    lines: 'none',
+    lines: 'both',
     move_dependencies: true,
     padding: 18,
     popup: (ctx) => {
         ctx.set_title(ctx.task.name);
+        let title = ctx.get_title();
+        title.style.border = '0.5px solid black';
+        title.style.borderRadius = '1.5px';
+        title.style.padding = '3px 5px ';
+        title.style.backgroundColor = 'black';
+        title.style.opacity = '0.85';
+        title.style.color = 'white';
+        title.style.width = 'fit-content';
+        title.onclick = () => {
+            let ans = prompt('New Title: ');
+            if (ans) ctx.set_title(ans);
+        };
         if (ctx.task.description) ctx.set_subtitle(ctx.task.description);
         else ctx.set_subtitle('');
 
@@ -139,18 +151,27 @@ const DEFAULT_OPTIONS = {
         );
 
         ctx.set_details(
-            `${start_date} - ${end_date} (${ctx.task.actual_duration} days${ctx.task.ignored_duration ? ' + ' + ctx.task.ignored_duration + ' excluded' : ''})<br/>Progress: ${Math.floor(ctx.task.progress * 100) / 100}%`,
+            `<em>Progress</em>: ${ctx.task.progress.toFixed(2)}%<br/><em>Duration</em>: ${ctx.task.actual_duration} days<br/><em>Dates</em>: ${ctx.task._start.toLocaleDateString('en-US')} - ${ctx.task._end.toLocaleDateString('en-US')}`,
         );
-
+        let details = ctx.get_details();
+        details.style.lineHeight = '1.75';
+        details.style.margin = '10px 4px';
+        const COLORS = [
+            'FAEDCB',
+            'C9E4DE',
+            'C6DEF1',
+            'DBCDF0',
+            'F2C6DE',
+            'F7D9C4',
+        ];
         if (!ctx.chart.options.readonly) {
             if (!ctx.chart.options.readonly_progress) {
-                ctx.add_action('+', (task, chart) => {
+                ctx.add_action('Set Color', (task, chart) => {
-                    task.progress += (1 / task.actual_duration) * 100;
+                    const bar = chart.bars.find(
-                    chart.update_task(task);
+                        ({ task: t }) => t.id === task.id,
-                });
+                    ).$bar;
-                ctx.add_action('-', (task, chart) => {
+                    bar.style.fill =
-                    task.progress -= (1 / task.actual_duration) * 100;
+                        '#' + COLORS[Math.floor(Math.random() * 6)];
-                    chart.update_task(task);
                 });
             }
         }

src/index.js

@@ -73,7 +73,6 @@ export default class Gantt {
     setup_options(options) {
         this.original_options = options;
         this.options = { ...DEFAULT_OPTIONS, ...options };
-
         const CSS_VARIABLES = {
             'grid-height': 'container_height',
             'bar-height': 'bar_height',
@@ -1063,9 +1062,8 @@ export default class Gantt {
         let bars = []; // instanceof Bar
         this.bar_being_dragged = null;
 
-        function action_in_progress() {
+        const action_in_progress = () =>
-            return is_dragging || is_resizing_left || is_resizing_right;
+            is_dragging || is_resizing_left || is_resizing_right;
-        }
 
         this.$svg.onclick = (e) => {
             if (e.target.classList.contains('grid-row')) this.unselect_all();
@@ -1284,7 +1282,7 @@ export default class Gantt {
             });
         });
 
-        document.addEventListener('mouseup', (e) => {
+        document.addEventListener('mouseup', () => {
             is_dragging = false;
             is_resizing_left = false;
             is_resizing_right = false;

src/popup.js

@@ -27,8 +27,11 @@ export default class Popup {
         let html = this.popup_func({
             task,
             chart: this.gantt,
+            get_title: () => this.title,
             set_title: (title) => (this.title.innerHTML = title),
+            get_subtitle: () => this.subtitle,
             set_subtitle: (subtitle) => (this.subtitle.innerHTML = subtitle),
+            get_details: () => this.details,
             set_details: (details) => (this.details.innerHTML = details),
             add_action: (html, func) => {
                 let action = this.gantt.create_el({
@@ -41,7 +44,8 @@ export default class Popup {
                 action.onclick = (e) => func(task, this.gantt, e);
             },
         });
-
+        console.log(html);
+        if (html === false) return;
         if (html) this.parent.innerHTML = html;
 
         // set position

src/styles/gantt.css

@@ -61,7 +61,8 @@
 
             &:last-child {
                 border-right: none;
-                border-radius: 0 4px 4px 0;
+                border-top-right-radius: 4px;
+                border-bottom-right-radius: 4px;
             }
         }
     }
@@ -144,6 +145,7 @@
         float: right;
         right: 0;
         top: 5px;
+        font-size: 12px;
     }
 
     & .side-header *:first-child {

src/styles/light.css

@@ -15,6 +15,6 @@
     --g-expected-progress: #c4c4e9;
     --g-header-background: #ffffff;
     --g-row-color: #fdfdfd;
-    --g-today-highlight: #c45841;
+    --g-today-highlight: #37352f;
     --g-weekend-highlight-color: #f7f7f7;
 }