diff --git a/src/bar.js b/src/bar.js index 252e3c4..2ff5c45 100644 --- a/src/bar.js +++ b/src/bar.js @@ -280,12 +280,12 @@ export default class Bar { if (!this.gantt.options.readonly_dates) { this.handles.push( createSVG('rect', { - x: bar.getEndX(), - y: bar.getY() + 1, + x: bar.getEndX() - handle_width / 2, + y: bar.getY() + this.height / 4, width: handle_width, - height: this.height - 2, - rx: 1, - ry: 1, + height: this.height / 2, + rx: 2, + ry: 2, class: 'handle right', append_to: this.handle_group, }), @@ -293,12 +293,12 @@ export default class Bar { this.handles.push( createSVG('rect', { - x: bar.getX(), - y: bar.getY() + 1, + x: bar.getX() - handle_width / 2, + y: bar.getY() + this.height / 4, width: handle_width, - height: this.height - 2, - rx: 1, - ry: 1, + height: this.height / 2, + rx: 2, + ry: 2, class: 'handle left', append_to: this.handle_group, }), @@ -309,7 +309,7 @@ export default class Bar { this.$handle_progress = createSVG('circle', { cx: bar_progress.getEndX(), cy: bar_progress.getY() + bar_progress.getHeight() / 2, - r: 5, + r: 4.5, class: 'handle progress', append_to: this.handle_group, }); diff --git a/src/date_utils.js b/src/date_utils.js index cf23041..f9112e9 100644 --- a/src/date_utils.js +++ b/src/date_utils.js @@ -78,7 +78,7 @@ export default { return date_string + (with_time ? ' ' + time_string : ''); }, - format(date, format_string = 'YYYY-MM-DD HH:mm:ss.SSS', lang = 'en') { + format(date, date_format = 'YYYY-MM-DD HH:mm:ss.SSS', lang = 'en') { const dateTimeFormat = new Intl.DateTimeFormat(lang, { month: 'long', }); @@ -103,7 +103,7 @@ export default { MMM: dateTimeFormatShort.format(date), }; - let str = format_string; + let str = date_format; const formatted_values = []; Object.keys(format_map) diff --git a/src/defaults.js b/src/defaults.js index 48b5588..e63e8ef 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -17,6 +17,7 @@ const DEFAULT_VIEW_MODES = [ name: 'Hour', padding: '7d', step: '1h', + date_format: 'YYYY-MM-DD HH:', lower_text: 'HH', upper_text: (d, ld, lang) => !ld || d.getDate() !== ld.getDate() @@ -28,6 +29,7 @@ const DEFAULT_VIEW_MODES = [ name: 'Quarter Day', padding: '7d', step: '6h', + date_format: 'YYYY-MM-DD HH:', lower_text: 'HH', upper_text: (d, ld, lang) => !ld || d.getDate() !== ld.getDate() @@ -39,6 +41,7 @@ const DEFAULT_VIEW_MODES = [ name: 'Half Day', padding: '14d', step: '12h', + date_format: 'YYYY-MM-DD HH:', lower_text: 'HH', upper_text: (d, ld, lang) => !ld || d.getDate() !== ld.getDate() @@ -51,7 +54,7 @@ const DEFAULT_VIEW_MODES = [ { name: 'Day', padding: '7d', - format_string: 'YYYY-MM-DD', + date_format: 'YYYY-MM-DD', step: '1d', lower_text: (d, ld, lang) => !ld || d.getDate() !== ld.getDate() @@ -67,7 +70,7 @@ const DEFAULT_VIEW_MODES = [ name: 'Week', padding: '1m', step: '7d', - format_string: 'YYYY-MM-DD', + date_format: 'YYYY-MM-DD', column_width: 140, lower_text: formatWeek, upper_text: (d, ld, lang) => @@ -82,7 +85,7 @@ const DEFAULT_VIEW_MODES = [ padding: '2m', step: '1m', column_width: 120, - format_string: 'YYYY-MM', + date_format: 'YYYY-MM', lower_text: 'MMMM', upper_text: (d, ld, lang) => !ld || d.getFullYear() !== ld.getFullYear() @@ -96,7 +99,7 @@ const DEFAULT_VIEW_MODES = [ padding: '2y', step: '1y', column_width: 120, - format_string: 'YYYY', + date_format: 'YYYY', upper_text: (d, ld, lang) => !ld || getDecade(d) !== getDecade(ld) ? getDecade(d) : '', lower_text: 'YYYY', @@ -111,7 +114,7 @@ const DEFAULT_OPTIONS = { bar_height: 30, container_height: 'auto', column_width: null, - date_format: 'YYYY-MM-DD', + date_format: 'YYYY-MM-DD HH:mm', upper_header_height: 45, lower_header_height: 30, snap_at: null, @@ -141,23 +144,6 @@ const DEFAULT_OPTIONS = { ctx.set_details( `${start_date} - ${end_date} (${ctx.task.actual_duration} days${ctx.task.ignored_duration ? ' + ' + ctx.task.ignored_duration + ' excluded' : ''})
Progress: ${Math.floor(ctx.task.progress * 100) / 100}%`, ); - - if (!ctx.chart.options.readonly) { - if (!ctx.chart.options.readonly_progress) { - ctx.add_action('+', (task, chart) => { - chart.update_task(task.id, { - progress: - task.progress + (1 / task.actual_duration) * 100, - }); - }); - ctx.add_action('-', (task, chart) => { - chart.update_task(task.id, { - progress: - task.progress - (1 / task.actual_duration) * 100, - }); - }); - } - } }, popup_on: 'click', readonly_progress: false, diff --git a/src/index.js b/src/index.js index 0e63a97..93524b6 100644 --- a/src/index.js +++ b/src/index.js @@ -228,11 +228,11 @@ export default class Gantt { if (typeof mode === 'string') { mode = this.options.view_modes.find((d) => d.name === mode); } - let old_scroll_op, old_scroll_pos; + let old_date, old_scroll_op; if (maintain_pos) { + old_date = this.current_date; old_scroll_op = this.options.scroll_to; this.options.scroll_to = null; - old_scroll_pos = this.$container.scrollLeft; } this.options.view_mode = mode.name; this.config.view_mode = mode; @@ -241,7 +241,10 @@ export default class Gantt { this.render(); if (maintain_pos) { this.options.scroll_to = old_scroll_op; - this.$container.scrollLeft = old_scroll_pos; + this.$container.scrollLeft = + (date_utils.diff(old_date, this.gantt_start, this.config.unit) / + this.config.step) * + this.config.column_width; } this.trigger_event('view_change', [mode]); } @@ -321,8 +324,8 @@ export default class Gantt { ); } } - this.config.format_string = - this.config.view_mode.format_string || 'YYYY-MM-DD HH'; + this.config.date_format = + this.config.view_mode.date_format || this.options.date_format; this.gantt_start.setHours(0, 0, 0, 0); } @@ -491,7 +494,7 @@ export default class Gantt { $select.addEventListener( 'change', function () { - this.change_view_mode($select.value); + this.change_view_mode($select.value, true); }.bind(this), ); this.$side_header.appendChild($select); @@ -830,7 +833,7 @@ export default class Gantt { formatted_date: sanitize( date_utils.format( date, - this.config.format_string, + this.config.date_format, this.options.language, ), ), @@ -985,7 +988,7 @@ export default class Gantt { sanitize( date_utils.format( current, - this.config.format_string, + this.config.date_format, this.options.language, ), ), @@ -1000,19 +1003,18 @@ export default class Gantt { sanitize( date_utils.format( current, - this.config.format_string, + this.config.date_format, this.options.language, ), ), ); c++; } - return [ new Date( date_utils.format( current, - this.config.format_string, + this.config.date_format, this.options.language, ) + ' ', ), @@ -1208,7 +1210,6 @@ export default class Gantt { let $el = this.upperTexts.find( (el) => el.textContent === current_upper, ); - console.log(this.current_date); // Recalculate for smoother experience this.current_date = date_utils.add( diff --git a/src/popup.js b/src/popup.js index 673f46d..fe30a5b 100644 --- a/src/popup.js +++ b/src/popup.js @@ -47,13 +47,8 @@ export default class Popup { if (html === false) return; if (html) this.parent.innerHTML = html; - // set position - let position_meta; - if (target instanceof HTMLElement) { - position_meta = target.getBoundingClientRect(); - } else if (target instanceof SVGElement) { - position_meta = target.getBBox(); - } + if (this.actions.innerHTML === '') this.actions.remove(); + else this.parent.appendChild(this.actions); this.parent.style.left = x + 10 + 'px'; this.parent.style.top = y - 10 + 'px'; diff --git a/src/styles/gantt.css b/src/styles/gantt.css index be99b17..bddfc47 100644 --- a/src/styles/gantt.css +++ b/src/styles/gantt.css @@ -47,11 +47,11 @@ & .action-btn { border: none; padding: 5px 8px; - background-color: #dbeafe; + background-color: var(--g-popup-actions); border-right: 1px solid var(--g-text-light); &:hover { - background-color: #93c5fd; + background-color: brightness(97%); } &:first-child { @@ -165,7 +165,7 @@ & .side-header select { padding: 0; padding-right: 1rem; - width: 50%; + width: 85px; } & .date-range-highlight { diff --git a/src/styles/light.css b/src/styles/light.css index de6b8c1..a17c74c 100644 --- a/src/styles/light.css +++ b/src/styles/light.css @@ -16,5 +16,6 @@ --g-header-background: #fff; --g-row-color: #fdfdfd; --g-today-highlight: #37352f; + --g-popup-actions: #ebeff2; --g-weekend-highlight-color: #f7f7f7; }