From 1f1a5f04e190d8078201462de3965ae72bb7498c Mon Sep 17 00:00:00 2001 From: Safwan Samsudeen Date: Wed, 8 Jan 2025 14:52:46 +0530 Subject: [PATCH] fix: many small bugs --- src/bar.js | 33 ++++++++++++++-------------- src/defaults.js | 2 +- src/index.js | 14 +++++++----- src/styles/gantt.css | 51 ++++++++++++++++++++++++++------------------ src/styles/light.css | 4 ++-- 5 files changed, 59 insertions(+), 45 deletions(-) diff --git a/src/bar.js b/src/bar.js index 304d1f2..115a4d2 100644 --- a/src/bar.js +++ b/src/bar.js @@ -340,7 +340,6 @@ export default class Bar { const posX = e.offsetX || e.layerX; if (this.$handle_progress) { const cx = +this.$handle_progress.getAttribute('cx'); - console.log(cx, posX, this.gantt.bar_being_dragged); if (cx > posX - 1 && cx < posX + 1) return; if (this.gantt.bar_being_dragged) return; } @@ -427,7 +426,8 @@ export default class Bar { } update_label_position_on_horizontal_scroll({ x, sx }) { - const container = document.querySelector('.gantt-container'); + const container = + this.gantt.$container.querySelector('.gantt-container'); const label = this.group.querySelector('.bar-label'); const img = this.group.querySelector('.bar-img') || ''; const img_mask = this.bar_group.querySelector('.img_mask') || ''; @@ -551,6 +551,7 @@ export default class Bar { const diff = date_utils.diff(task_start, gantt_start, this.gantt.config.unit) / this.gantt.config.step; + let x = diff * column_width; /* Since the column width is based on 30, @@ -558,21 +559,21 @@ export default class Bar { and then add the days in the month, making sure the number does not exceed 29 so it is within the column */ - if (this.gantt.view_is('Month')) { - const diffDaysBasedOn30DayMonths = - date_utils.diff(task_start, gantt_start, 'month') * 30; - const dayInMonth = Math.min( - 29, - date_utils.format( - task_start, - 'DD', - this.gantt.options.language, - ), - ); - const diff = diffDaysBasedOn30DayMonths + dayInMonth; + // if (this.gantt.view_is('Month')) { + // const diffDaysBasedOn30DayMonths = + // date_utils.diff(task_start, gantt_start, 'month') * 30; + // const dayInMonth = Math.min( + // 29, + // date_utils.format( + // task_start, + // 'DD', + // this.gantt.options.language, + // ), + // ); + // const diff = diffDaysBasedOn30DayMonths + dayInMonth; - x = (diff * column_width) / 30; - } + // x = (diff * column_width) / 30; + // } this.x = x; } diff --git a/src/defaults.js b/src/defaults.js index 462ed6c..8db77d0 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -9,7 +9,7 @@ function formatWeek(d, ld, lang) { let endOfWeek = date_utils.add(d, 6, 'day'); let endFormat = endOfWeek.getMonth() !== d.getMonth() ? 'D MMM' : 'D'; let beginFormat = !ld || d.getMonth() !== ld.getMonth() ? 'D MMM' : 'D'; - return `${date_utils.format(d, beginFormat, lang)}-${date_utils.format(endOfWeek, endFormat, lang)}`; + return `${date_utils.format(d, beginFormat, lang)} - ${date_utils.format(endOfWeek, endFormat, lang)}`; } const DEFAULT_VIEW_MODES = [ diff --git a/src/index.js b/src/index.js index 23830d6..ff890a7 100644 --- a/src/index.js +++ b/src/index.js @@ -283,9 +283,8 @@ export default class Gantt { } } - gantt_start = date_utils.start_of(gantt_start, 'day'); - gantt_end = date_utils.start_of(gantt_end, 'day'); - + gantt_start = date_utils.start_of(gantt_start, this.config.unit); + gantt_end = date_utils.start_of(gantt_end, this.config.unit); // handle single value for padding if (!refresh) { if (!this.options.infinite_padding) { @@ -325,6 +324,7 @@ export default class Gantt { this.config.format_string = this.config.view_mode.format_string || 'YYYY-MM-DD HH'; this.gantt_start.setHours(0, 0, 0, 0); + console.log(this.gantt_start); } setup_date_values() { @@ -485,6 +485,8 @@ export default class Gantt { const $option = document.createElement('option'); $option.value = mode.name; $option.textContent = mode.name; + if (mode.name === this.config.view_mode.name) + $option.selected = true; $select.appendChild($option); } @@ -688,7 +690,7 @@ export default class Gantt { classes: 'current-highlight', append_to: this.$container, }); - this.$current_highlight = this.create_el({ + this.$current_ball_highlight = this.create_el({ top: this.config.header_height - 6, left: left - 2.5, width: 6, @@ -1315,7 +1317,9 @@ export default class Gantt { is_dragging = false; is_resizing_left = false; is_resizing_right = false; - document.querySelector('.visible').classList.remove('visible'); + this.$container + .querySelector('.visible') + ?.classList?.remove?.('visible'); }); $.on(this.$svg, 'mouseup', (e) => { diff --git a/src/styles/gantt.css b/src/styles/gantt.css index c9f549b..8bd41e6 100644 --- a/src/styles/gantt.css +++ b/src/styles/gantt.css @@ -120,42 +120,51 @@ & .side-header { position: sticky; + top: 5px; + right: 0; + float: right; + z-index: 1000; line-height: 20px; - background: white; font-weight: 400; - top: 5px; width: max-content; margin-left: auto; - right: 5px; padding-left: 5px; + padding-top: 5px; + background: var(--g-header-background); } & .side-header * { - background: var(--g-actions-background); + transition-property: background-color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + background-color: var(--g-actions-background); text-align: -webkit-center; text-align: center; - height: 30px; - border-radius: 0; - border: 1px solid grey; - border-right: none; + height: 1.75rem; + border-radius: 0.5rem; + border: none; + padding: 0 0.5rem; color: var(--g-text-dark); - padding: 4px 10px; position: sticky; - float: right; - right: 0; - top: 5px; - font-size: 12px; + margin: 5px; + font-size: 14px; + line-height: 1.15; + letter-spacing: 0.02em; + font-weight: 420; + + &:last-child { + margin-right: 0; + } + + &:hover { + filter: brightness(97.5%); + } } - & .side-header *:first-child { - border-radius: 0 8px 8px 0; - border-right: 1px solid grey; - } - - & .side-header *:last-child { - border-top-left-radius: 8px; - border-bottom-left-radius: 8px; + & .side-header select { + padding: 0; + width: 50%; } & .date-range-highlight { diff --git a/src/styles/light.css b/src/styles/light.css index bbea17e..de6b8c1 100644 --- a/src/styles/light.css +++ b/src/styles/light.css @@ -4,7 +4,7 @@ --g-bar-border: #fff; --g-tick-color-thick: #e0e0e0; --g-tick-color: #ebeef0; - --g-actions-background: #f4f5f6; + --g-actions-background: #f3f3f3; --g-border-color: #ebeff2; --g-text-muted: #7c7c7c; --g-text-light: #fff; @@ -13,7 +13,7 @@ --g-handle-color: #37352f; --g-weekend-label-color: #dcdce4; --g-expected-progress: #c4c4e9; - --g-header-background: #ffffff; + --g-header-background: #fff; --g-row-color: #fdfdfd; --g-today-highlight: #37352f; --g-weekend-highlight-color: #f7f7f7;