diff --git a/src/bar.js b/src/bar.js index 56c7f6f..2223af2 100644 --- a/src/bar.js +++ b/src/bar.js @@ -18,12 +18,6 @@ export default class Bar { this.group.classList = ['bar-wrapper']; } - if (this.task.important) { - this.group.classList.add('important'); - } else { - this.group.classList.remove('important'); - } - this.prepare_values(); this.draw(); this.bind(); @@ -40,8 +34,7 @@ export default class Bar { this.group = createSVG('g', { class: 'bar-wrapper' + - (this.task.custom_class ? ' ' + this.task.custom_class : '') + - (this.task.important ? ' important' : ''), + (this.task.custom_class ? ' ' + this.task.custom_class : ''), 'data-id': this.task.id, }); this.bar_group = createSVG('g', { @@ -118,8 +111,7 @@ export default class Bar { ry: this.corner_radius, class: 'bar' + - (/^((?!chrome|android).)*safari/i.test(navigator.userAgent) && - !this.task.important + (/^((?!chrome|android).)*safari/i.test(navigator.userAgent) ? ' safari' : ''), append_to: this.bar_group, diff --git a/src/defaults.js b/src/defaults.js index 54198ba..1cf9e9b 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -119,7 +119,7 @@ const DEFAULT_OPTIONS = { holidays: { 'var(--g-weekend-highlight-color)': 'weekend' }, ignore: [], language: 'en', - lines: 'both', + lines: 'none', move_dependencies: true, padding: 18, popup: (ctx) => { @@ -143,10 +143,6 @@ const DEFAULT_OPTIONS = { ); if (!ctx.chart.options.readonly) { - ctx.add_action('Toggle Priority', (task, chart) => { - task.important = !task.important; - chart.update_task(task); - }); if (!ctx.chart.options.readonly_progress) { ctx.add_action('+', (task, chart) => { task.progress += (1 / task.actual_duration) * 100; diff --git a/src/index.js b/src/index.js index f791687..962c0cf 100644 --- a/src/index.js +++ b/src/index.js @@ -247,7 +247,7 @@ export default class Gantt { this.config.step = duration; this.config.unit = scale; this.config.column_width = - this.options.column_width || mode.column_width || 30; + this.options.column_width || mode.column_width || 45; this.$container.style.setProperty( '--gv-column-width', this.config.column_width + 'px', diff --git a/src/styles/dark.css b/src/styles/dark.css index 15ad1d6..7fdedc6 100644 --- a/src/styles/dark.css +++ b/src/styles/dark.css @@ -2,12 +2,12 @@ --g-bar-stroke-dark: #c6ccd2; --g-border-color-dark: #616161; --g-bar-color-dark: #616161; - --g-light-bg-dark: #3e3e3e; + --g-bg-dark: #3e3e3e; --g-light-border-color-dark: #3e3e3e; --g-text-muted-dark: #eee; --g-text-light-dark: #ececec; --g-text-color-dark: #f7f7f7; - --g-blue-dark: #8a8aff; + --g-progress-color: #8a8aff; } .dark > .gantt-container .gantt { @@ -15,10 +15,6 @@ fill: #252525; } - & .grid-row:nth-child(even) { - fill: var(--g-light-bg-dark); - } - & .row-line { stroke: var(--g-light-border-color-dark); } @@ -27,10 +23,6 @@ stroke: var(--g-border-color-dark); } - & .holiday-highlight { - fill: var(--g-light-bg-dark); - } - & .arrow { stroke: var(--g-text-muted-dark); } @@ -41,7 +33,7 @@ } & .bar-progress { - fill: var(--g-blue-dark); + fill: var(--g-progress-color); } & .bar-invalid { @@ -64,7 +56,7 @@ } & .bar-progress { - fill: lighten(var(--g-blue-dark, 5)); + fill: lighten(var(--g-progress-color, 5)); } } @@ -74,7 +66,7 @@ } & .bar-progress { - fill: lighten(var(--g-blue-dark, 5)); + fill: lighten(var(--g-progress-color, 5)); } } } @@ -89,7 +81,7 @@ background-color: #333; & .title { - border-color: lighten(var(--g-blue-dark, 5)); + border-color: lighten(var(--g-progress-color, 5)); } } } diff --git a/src/styles/gantt.css b/src/styles/gantt.css index 50d3e57..e7d4555 100644 --- a/src/styles/gantt.css +++ b/src/styles/gantt.css @@ -166,13 +166,13 @@ & .current-highlight { position: absolute; - background: var(--g-blue-dark); + background: var(--g-today-highlight); width: 1px; z-index: 999; } & .current-date-highlight { - background: var(--g-blue-dark); + background: var(--g-today-highlight); color: var(--g-text-light); border-radius: 5px; } @@ -243,7 +243,7 @@ & .arrow { fill: none; stroke: var(--g-arrow-color); - stroke-width: 1; + stroke-width: 1.5; } & .bar-wrapper .bar { @@ -258,7 +258,7 @@ } & .bar-expected-progress { - fill: var(--g-blue-light); + fill: var(--g-expected-progress); } & .bar-invalid { @@ -285,32 +285,6 @@ } } - & .bar-wrapper.important { - & .bar { - fill: var(--g-bar-color-important); - } - - & .bar-progress { - fill: var(--g-blue-dark); - } - - & .bar-label { - fill: var(--g-text-light); - - &.big { - fill: var(--g-text-dark); - } - } - - & .handle { - fill: var(--g-handle-color-important); - } - - & .handle.progress { - fill: var(--g-text-light); - } - } - & .handle { fill: var(--g-handle-color); cursor: ew-resize; diff --git a/src/styles/light.css b/src/styles/light.css index 9ca0ad5..2014ac4 100644 --- a/src/styles/light.css +++ b/src/styles/light.css @@ -1,23 +1,20 @@ :root { - --g-arrow-color: #9fa9b1; + --g-arrow-color: #d7b15b; --g-bar-color: #fff; - --g-bar-color-important: #94c4f4; --g-bar-border: #fff; --g-tick-color-thick: #e0e0e0; --g-tick-color: #ebeef0; - --g-light-bg: #f5f5f5; --g-actions-background: #f4f5f6; --g-border-color: #ebeff2; --g-text-muted: #7c7c7c; --g-text-light: #fff; --g-text-dark: #171717; - --g-progress-color: #ebeef0; + --g-progress-color: #f3f3f3; --g-handle-color: #dcdce4; - --g-handle-color-important: #94c4f4; --g-holiday-label-color: #dcdce4; - --g-blue-light: #c4c4e9; - --g-blue-dark: #2c94ec; + --g-expected-progress: #c4c4e9; --g-header-background: #ffffff; - --g-row-color: #fff; - --g-weekend-highlight-color: #bfdbfe; + --g-row-color: #fdfdfd; + --g-today-highlight: #c45841; + --g-weekend-highlight-color: #f7f7f7; }