diff --git a/src/bar.js b/src/bar.js index 7f68f4a..dd95e1b 100644 --- a/src/bar.js +++ b/src/bar.js @@ -58,7 +58,7 @@ export default class Bar { this.compute_duration(); this.corner_radius = this.gantt.options.bar_corner_radius; this.width = this.gantt.config.column_width * this.duration; - if (this.task.progress < 0) this.task.progress = 0; + if (!this.task.progress || this.task.progress < 0) this.task.progress = 0; if (this.task.progress > 100) this.task.progress = 100; } @@ -111,11 +111,7 @@ export default class Bar { height: this.height, rx: this.corner_radius, ry: this.corner_radius, - class: - 'bar' + - (/^((?!chrome|android).)*safari/i.test(navigator.userAgent) - ? ' safari' - : ''), + class: 'bar', append_to: this.bar_group, }); if (this.task.color) this.$bar.style.fill = this.task.color; @@ -150,13 +146,16 @@ export default class Bar { draw_progress_bar() { if (this.invalid) return; this.progress_width = this.calculate_progress_width(); + let r = this.corner_radius; + if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) + r = this.corner_radius + 2; this.$bar_progress = createSVG('rect', { x: this.x, y: this.y, width: this.progress_width, height: this.height, - rx: this.corner_radius + 2, - ry: this.corner_radius + 2, + rx: r, + ry: r, class: 'bar-progress', append_to: this.bar_group, }); diff --git a/src/index.js b/src/index.js index 088c29d..054d3e2 100644 --- a/src/index.js +++ b/src/index.js @@ -846,7 +846,7 @@ export default class Gantt { last_date, this.options.language, ), - upper_y: 15, + upper_y: 17, lower_y: this.options.upper_header_height + 5, }; } @@ -1335,7 +1335,6 @@ export default class Gantt { bind_bar_progress() { let x_on_start = 0; - let y_on_start = 0; let is_resizing = null; let bar = null; let $bar_progress = null; diff --git a/src/styles/gantt.css b/src/styles/gantt.css index 419d6f8..983aecc 100644 --- a/src/styles/gantt.css +++ b/src/styles/gantt.css @@ -75,6 +75,7 @@ position: sticky; top: 0; left: 0; + border-bottom: 1px solid var(--g-row-border-color); z-index: 1000; } @@ -106,7 +107,7 @@ position: absolute; width: fit-content; font-weight: 500; - font-size: 16px; + font-size: 14px; color: var(--g-text-dark); height: calc(var(--gv-lower-header-height) * 0.66); } @@ -114,13 +115,13 @@ & .current-upper { position: sticky; left: 0 !important; - padding: 0 calc(var(--gv-lower-header-height) * 0.33); + padding-left: 17px; background: white; } & .side-header { position: sticky; - top: 5px; + top: 0; right: 0; float: right; @@ -129,9 +130,10 @@ font-weight: 400; width: max-content; margin-left: auto; - padding-right: 5px; - padding-top: 5px; + padding-right: 10px; + padding-top: 10px; background: var(--g-header-background); + display: flex; } & .side-header * { @@ -140,18 +142,16 @@ transition-duration: 150ms; background-color: var(--g-actions-background); text-align: -webkit-center; - text-align: center; - height: 1.75rem; border-radius: 0.5rem; border: none; - padding: 0 0.5rem; + padding: 5px 8px; color: var(--g-text-dark); - position: sticky; - margin: 5px; font-size: 14px; - line-height: 1.15; letter-spacing: 0.02em; font-weight: 420; + box-sizing: content-box; + + margin-right: 5px; &:last-child { margin-right: 0; @@ -163,9 +163,8 @@ } & .side-header select { - padding: 0; - padding-right: 1rem; - width: 85px; + padding-right: 1.25rem; + width: 50px; } & .date-range-highlight { @@ -324,7 +323,7 @@ cursor: pointer; & .bar { - outline: 1px solid black; + outline: 1px solid var(--g-row-border-color); border-radius: 3px; } diff --git a/src/styles/light.css b/src/styles/light.css index daa4ec1..8f0448e 100644 --- a/src/styles/light.css +++ b/src/styles/light.css @@ -1,9 +1,9 @@ :root { - --g-arrow-color: #575654; + --g-arrow-color: #1f2937; --g-bar-color: #fff; --g-bar-border: #fff; - --g-tick-color-thick: #e0e0e0; - --g-tick-color: #ebeef0; + --g-tick-color-thick: #ededed; + --g-tick-color: #f3f3f3; --g-actions-background: #f3f3f3; --g-border-color: #ebeff2; --g-text-muted: #7c7c7c; @@ -15,6 +15,7 @@ --g-expected-progress: #c4c4e9; --g-header-background: #fff; --g-row-color: #fdfdfd; + --g-row-border-color: #c7c7c7; --g-today-highlight: #37352f; --g-popup-actions: #ebeff2; --g-weekend-highlight-color: #f7f7f7;