fix: many small bugs
This commit is contained in:
Safwan Samsudeen
parent
7dcc132830
commit
1f1a5f04e1
33
src/bar.js
33
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;
|
||||
}
|
||||
|
||||
@ -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 = [
|
||||
|
||||
14
src/index.js
14
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) => {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user