jingrow/gantt
1
0
Fork 0
Code Pull Requests Activity

fix: date highlight, aligning

Browse Source 
chore: build
This commit is contained in:
Safwan Samsudeen 2024-04-25 21:08:04 +05:30
parent 0ee9b6ad69
commit e7c735db68
9 changed files with 64 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
dist/frappe-gantt.css vendored
View File

@ -107,6 +107,14 @@
padding: 3px 5px;
margin-right: 4px;
}
.gantt-container .date-highlight {
border: 2px dotted black;
border-radius: 12px;
z-index: 1;
position: absolute;
opacity: 0.4;
display: none;
}
.gantt {
user-select: none;
@ -164,10 +172,6 @@
.gantt .bar-progress {
fill: #dedfe0;
}
.gantt .date-highlight {
fill: #e8e8e8;
display: none;
}
.gantt .bar-expected-progress {
fill: #c4c4e9;
}

38
dist/frappe-gantt.js vendored
View File

@ -547,15 +547,16 @@ var Gantt = (function () {
this.gantt.options.step) *
this.gantt.options.column_width;
this.$date_highlight = createSVG("rect", {
x,
y: this.gantt.options.header_height - 17,
width: this.width,
height: this.height * 0.8,
rx: 12,
class: "date-highlight",
append_to: this.bar_group,
});
let $date_highlight = document.createElement("div");
$date_highlight.id = `${this.task.id}-highlight`;
$date_highlight.classList.add('date-highlight');
$date_highlight.style.height = this.height * 0.8 + 'px';
$date_highlight.style.width = this.width + 'px';
$date_highlight.style.top = this.gantt.options.header_height - 21 + 'px';
$date_highlight.style.left = x + 'px';
this.$date_highlight = $date_highlight;
this.gantt.$lower_header.appendChild($date_highlight);
animateSVG(this.$bar_progress, "width", 0, this.progress_width);
@ -672,9 +673,13 @@ var Gantt = (function () {
}
setup_click_event() {
$.on(this.group, "mouseover", (e) => this.gantt.trigger_event("hover", [this.task, e.screenX, e.screenY, e]));
let task_id = this.task.id;
$.on(this.group, "mouseover", (e) => {
this.gantt.trigger_event("hover", [this.task, e.screenX, e.screenY, e]);
document.querySelector(`#${task_id}-highlight`).style.display = 'block';
});
$.on(this.group, "mouseenter", (e) => this.show_popup(e.offsetX));
$.on(this.group, "mouseleave", () => this.gantt.hide_popup());
$.on(this.group, "mouseleave", () => document.querySelector(`#${task_id}-highlight`).style.display = 'none');
$.on(this.group, "focus " + this.gantt.options.popup_trigger, (e) => {
@ -1761,13 +1766,13 @@ var Gantt = (function () {
make_dates() {
this.upper_texts_x = {};
for (let date of this.get_dates_to_draw()) {
this.get_dates_to_draw().forEach((date, i) => {
let $lower_text = document.createElement('div');
$lower_text.classList.add('lower-text');
$lower_text.style.left = date.lower_x + 'px';
$lower_text.style.top = date.lower_y + 'px';
$lower_text.innerText = date.lower_text;
this.$lower_header.appendChild($lower_text);
$lower_text.style.left = date.lower_x - ($lower_text.clientWidth / 2 ) + 'px';
$lower_text.style.top = date.lower_y + 'px';
if (date.upper_text) {
this.upper_texts_x[date.upper_text] = date.upper_x;
@ -1783,7 +1788,7 @@ var Gantt = (function () {
$upper_text.remove();
}
}
}
});
}
get_dates_to_draw() {
@ -1851,7 +1856,6 @@ var Gantt = (function () {
lower_y: this.options.header_height - 15,
upper_y: this.options.header_height - 40,
};
const x_pos = {
Hour_lower: column_width / 2,
Hour_upper: column_width * 12,
@ -1861,7 +1865,7 @@ var Gantt = (function () {
"Half Day_upper": column_width,
Day_lower: column_width / 2,
Day_upper: column_width / 2,
Week_lower: 0,
Week_lower: column_width / 2,
Week_upper: (column_width * 4) / 2,
Month_lower: column_width / 2,
Month_upper: column_width / 2,

2
dist/frappe-gantt.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-gantt.min.css vendored
View File

@ -1 +1 @@
.dark>.gantt-container .gantt .grid-header{fill:#252525;stroke:#616161}.dark>.gantt-container .gantt .grid-row{fill:#252525}.dark>.gantt-container .gantt .grid-row:nth-child(even){fill:#3e3e3e}.dark>.gantt-container .gantt .row-line{stroke:#3e3e3e}.dark>.gantt-container .gantt .tick{stroke:#616161}.dark>.gantt-container .gantt .today-highlight{opacity:.2}.dark>.gantt-container .gantt .arrow{stroke:#eee}.dark>.gantt-container .gantt .bar{fill:#616161;stroke:none}.dark>.gantt-container .gantt .bar-progress{fill:#8a8aff}.dark>.gantt-container .gantt .bar-invalid{fill:rgba(0,0,0,0);stroke:#c6ccd2}.dark>.gantt-container .gantt .bar-invalid~.bar-label{fill:#ececec}.dark>.gantt-container .gantt .bar-label.big{fill:#ececec}.dark>.gantt-container .gantt .bar-wrapper:hover .bar{fill:#6e6e6e}.dark>.gantt-container .gantt .bar-wrapper:hover .bar-progress{fill:#a4a4ff}.dark>.gantt-container .gantt .bar-wrapper.active .bar{fill:#6e6e6e}.dark>.gantt-container .gantt .bar-wrapper.active .bar-progress{fill:#a4a4ff}.dark>.gantt-container .gantt .upper-text{fill:#a2a2a2}.dark>.gantt-container .gantt .lower-text{fill:#f7f7f7}.dark>.gantt-container .popup-wrapper{background-color:#333}.dark>.gantt-container .popup-wrapper .title{border-color:#a4a4ff}.dark>.gantt-container .popup-wrapper .pointer{border-top-color:#333}.gantt-container .grid-header{background-color:#fff;position:sticky;top:0;left:0}.gantt-container .lower-text,.gantt-container .upper-text{font-size:14px;text-anchor:middle;color:#666}.gantt-container .lower-text{position:absolute;width:fit-content}.gantt-container .upper-text{position:absolute;width:fit-content}.gantt-container .current-upper{position:fixed}.gantt-container .side-header{position:fixed;padding:0 10px;background:#fff}.gantt-container .today-button,.gantt-container .viewmode-select{background-color:#fff;border:1px solid #000;color:#111;padding:4px 10px;font-size:14px;border-radius:5px}.gantt-container .viewmode-select{padding:3px 5px;margin-right:4px}.gantt{user-select:none;-webkit-user-select:none;position:absolute}.gantt .grid-background{fill:none}.gantt .grid-row{fill:#fff}.gantt .row-line{stroke:#ebeff2}.gantt .tick{stroke:#e0e0e0;stroke-width:.2}.gantt .tick.thick{stroke:#000;stroke-width:.5}.gantt .today-highlight{fill:#f6e796;opacity:.5}.gantt .week-highlight{fill:#f6e796;opacity:.5}.gantt .holiday-highlight{fill:#f3f4f7;opacity:.5}.gantt .month-highlight{fill:#f6e796;opacity:.5}.gantt .year-highlight{fill:#f6e796;opacity:.5}.gantt .arrow{fill:none;stroke:#666;stroke-width:1.4}.gantt .bar-wrapper .bar{fill:#fff;stroke:#fff;stroke-width:0;transition:stroke-width .3s ease}.gantt .bar-progress{fill:#dedfe0}.gantt .date-highlight{fill:#e8e8e8;display:none}.gantt .bar-expected-progress{fill:#c4c4e9}.gantt .bar-invalid{fill:rgba(0,0,0,0);stroke:#fff;stroke-width:1;stroke-dasharray:5}.gantt .bar-invalid~.bar-label{fill:#fff}.gantt .bar-label{fill:#111;dominant-baseline:central;font-family:Helvetica;font-size:14px;font-weight:400}.gantt .bar-label.big{fill:#111;text-anchor:start}.gantt .bar-wrapper.important .bar{fill:#94c4f4}.gantt .bar-wrapper.important .bar-progress{fill:#2c94ec}.gantt .bar-wrapper.important .bar-label{fill:#fff}.gantt .bar-wrapper.important .handle{fill:#94c4f4}.gantt .handle{fill:#dcdce4;cursor:ew-resize;opacity:0;visibility:hidden;transition:opacity .3s ease}.gantt .bar-wrapper{cursor:pointer;outline:none}.gantt .bar-wrapper.active .handle{visibility:visible;opacity:1}.gantt .bar-wrapper .bar{-webkit-filter:drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));filter:drop-shadow(0 0 2px rgba(17, 43, 66, 0.16));border-radius:3px}.gantt .bar-wrapper:hover .bar{transition:transform .3s ease}.gantt .bar-wrapper:hover .date-highlight{display:block}.gantt .hide{display:none}.gantt-container{position:relative;overflow:auto;font-size:12px;height:500px}.gantt-container .popup-wrapper{position:absolute;top:0;left:0;background:#000;padding:0;color:#959da5;border-radius:3px;border:1px solid #000;width:max-content}.gantt-container .popup-wrapper.hidden{opacity:0 !important}.gantt-container .popup-wrapper .title{border-bottom:1px solid #dedfe0;padding:10px;text-align:center;color:#fff}.gantt-container .popup-wrapper .subtitle{padding:10px;color:#dfe2e5}.gantt-container .popup-wrapper .pointer{position:absolute;height:5px;margin:0 0 0 -5px;border:5px solid rgba(0,0,0,0);border-bottom-color:rgba(0,0,0,.8)}
.dark>.gantt-container .gantt .grid-header{fill:#252525;stroke:#616161}.dark>.gantt-container .gantt .grid-row{fill:#252525}.dark>.gantt-container .gantt .grid-row:nth-child(even){fill:#3e3e3e}.dark>.gantt-container .gantt .row-line{stroke:#3e3e3e}.dark>.gantt-container .gantt .tick{stroke:#616161}.dark>.gantt-container .gantt .today-highlight{opacity:.2}.dark>.gantt-container .gantt .arrow{stroke:#eee}.dark>.gantt-container .gantt .bar{fill:#616161;stroke:none}.dark>.gantt-container .gantt .bar-progress{fill:#8a8aff}.dark>.gantt-container .gantt .bar-invalid{fill:rgba(0,0,0,0);stroke:#c6ccd2}.dark>.gantt-container .gantt .bar-invalid~.bar-label{fill:#ececec}.dark>.gantt-container .gantt .bar-label.big{fill:#ececec}.dark>.gantt-container .gantt .bar-wrapper:hover .bar{fill:#6e6e6e}.dark>.gantt-container .gantt .bar-wrapper:hover .bar-progress{fill:#a4a4ff}.dark>.gantt-container .gantt .bar-wrapper.active .bar{fill:#6e6e6e}.dark>.gantt-container .gantt .bar-wrapper.active .bar-progress{fill:#a4a4ff}.dark>.gantt-container .gantt .upper-text{fill:#a2a2a2}.dark>.gantt-container .gantt .lower-text{fill:#f7f7f7}.dark>.gantt-container .popup-wrapper{background-color:#333}.dark>.gantt-container .popup-wrapper .title{border-color:#a4a4ff}.dark>.gantt-container .popup-wrapper .pointer{border-top-color:#333}.gantt-container .grid-header{background-color:#fff;position:sticky;top:0;left:0}.gantt-container .lower-text,.gantt-container .upper-text{font-size:14px;text-anchor:middle;color:#666}.gantt-container .lower-text{position:absolute;width:fit-content}.gantt-container .upper-text{position:absolute;width:fit-content}.gantt-container .current-upper{position:fixed}.gantt-container .side-header{position:fixed;padding:0 10px;background:#fff}.gantt-container .today-button,.gantt-container .viewmode-select{background-color:#fff;border:1px solid #000;color:#111;padding:4px 10px;font-size:14px;border-radius:5px}.gantt-container .viewmode-select{padding:3px 5px;margin-right:4px}.gantt-container .date-highlight{border:2px dotted #000;border-radius:12px;z-index:1;position:absolute;opacity:.4;display:none}.gantt{user-select:none;-webkit-user-select:none;position:absolute}.gantt .grid-background{fill:none}.gantt .grid-row{fill:#fff}.gantt .row-line{stroke:#ebeff2}.gantt .tick{stroke:#e0e0e0;stroke-width:.2}.gantt .tick.thick{stroke:#000;stroke-width:.5}.gantt .today-highlight{fill:#f6e796;opacity:.5}.gantt .week-highlight{fill:#f6e796;opacity:.5}.gantt .holiday-highlight{fill:#f3f4f7;opacity:.5}.gantt .month-highlight{fill:#f6e796;opacity:.5}.gantt .year-highlight{fill:#f6e796;opacity:.5}.gantt .arrow{fill:none;stroke:#666;stroke-width:1.4}.gantt .bar-wrapper .bar{fill:#fff;stroke:#fff;stroke-width:0;transition:stroke-width .3s ease}.gantt .bar-progress{fill:#dedfe0}.gantt .bar-expected-progress{fill:#c4c4e9}.gantt .bar-invalid{fill:rgba(0,0,0,0);stroke:#fff;stroke-width:1;stroke-dasharray:5}.gantt .bar-invalid~.bar-label{fill:#fff}.gantt .bar-label{fill:#111;dominant-baseline:central;font-family:Helvetica;font-size:14px;font-weight:400}.gantt .bar-label.big{fill:#111;text-anchor:start}.gantt .bar-wrapper.important .bar{fill:#94c4f4}.gantt .bar-wrapper.important .bar-progress{fill:#2c94ec}.gantt .bar-wrapper.important .bar-label{fill:#fff}.gantt .bar-wrapper.important .handle{fill:#94c4f4}.gantt .handle{fill:#dcdce4;cursor:ew-resize;opacity:0;visibility:hidden;transition:opacity .3s ease}.gantt .bar-wrapper{cursor:pointer;outline:none}.gantt .bar-wrapper.active .handle{visibility:visible;opacity:1}.gantt .bar-wrapper .bar{-webkit-filter:drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));filter:drop-shadow(0 0 2px rgba(17, 43, 66, 0.16));border-radius:3px}.gantt .bar-wrapper:hover .bar{transition:transform .3s ease}.gantt .bar-wrapper:hover .date-highlight{display:block}.gantt .hide{display:none}.gantt-container{position:relative;overflow:auto;font-size:12px;height:500px}.gantt-container .popup-wrapper{position:absolute;top:0;left:0;background:#000;padding:0;color:#959da5;border-radius:3px;border:1px solid #000;width:max-content}.gantt-container .popup-wrapper.hidden{opacity:0 !important}.gantt-container .popup-wrapper .title{border-bottom:1px solid #dedfe0;padding:10px;text-align:center;color:#fff}.gantt-container .popup-wrapper .subtitle{padding:10px;color:#dfe2e5}.gantt-container .popup-wrapper .pointer{position:absolute;height:5px;margin:0 0 0 -5px;border:5px solid rgba(0,0,0,0);border-bottom-color:rgba(0,0,0,.8)}

2
dist/frappe-gantt.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-gantt.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

27
src/bar.js
View File

@ -144,15 +144,16 @@ export default class Bar {
this.gantt.options.step) *
this.gantt.options.column_width;
this.$date_highlight = createSVG("rect", {
x,
y: this.gantt.options.header_height - 17,
width: this.width,
height: this.height * 0.8,
rx: 12,
class: "date-highlight",
append_to: this.bar_group,
});
let $date_highlight = document.createElement("div");
$date_highlight.id = `${this.task.id}-highlight`
$date_highlight.classList.add('date-highlight')
$date_highlight.style.height = this.height * 0.8 + 'px'
$date_highlight.style.width = this.width + 'px'
$date_highlight.style.top = this.gantt.options.header_height - 21 + 'px'
$date_highlight.style.left = x + 'px'
this.$date_highlight = $date_highlight
this.gantt.$lower_header.appendChild($date_highlight)
animateSVG(this.$bar_progress, "width", 0, this.progress_width);
@ -270,9 +271,13 @@ export default class Bar {
setup_click_event() {
let in_action = false;
$.on(this.group, "mouseover", (e) => this.gantt.trigger_event("hover", [this.task, e.screenX, e.screenY, e]))
let task_id = this.task.id;
$.on(this.group, "mouseover", (e) => {
this.gantt.trigger_event("hover", [this.task, e.screenX, e.screenY, e])
document.querySelector(`#${task_id}-highlight`).style.display = 'block'
})
$.on(this.group, "mouseenter", (e) => this.show_popup(e.offsetX))
$.on(this.group, "mouseleave", () => this.gantt.hide_popup())
$.on(this.group, "mouseleave", () => document.querySelector(`#${task_id}-highlight`).style.display = 'none')
$.on(this.group, "focus " + this.gantt.options.popup_trigger, (e) => {

16
src/gantt.scss
View File

@ -66,6 +66,15 @@ $light-blue: #c4c4e9 !default;
padding: 3px 5px;
margin-right: 4px;
}
.date-highlight {
border: 2px dotted black;
border-radius: 12px;
z-index: 1;
position: absolute;
opacity: 0.4;
display: none;
}
}
.gantt {
@ -145,10 +154,7 @@ $light-blue: #c4c4e9 !default;
fill: $progress;
}
.date-highlight {
fill: darken(#f5f5f5, 5);
display: none;
}
.bar-expected-progress {
fill: $light-blue;
@ -233,8 +239,6 @@ $light-blue: #c4c4e9 !default;
display: block;
}
}
}

11
src/index.js
View File

@ -621,13 +621,13 @@ export default class Gantt {
make_dates() {
this.upper_texts_x = {}
for (let date of this.get_dates_to_draw()) {
this.get_dates_to_draw().forEach((date, i) => {
let $lower_text = document.createElement('div');
$lower_text.classList.add('lower-text')
$lower_text.style.left = date.lower_x + 'px'
$lower_text.style.top = date.lower_y + 'px'
$lower_text.innerText = date.lower_text
this.$lower_header.appendChild($lower_text)
$lower_text.style.left = date.lower_x - (true ? $lower_text.clientWidth / 2 : 0) + 'px'
$lower_text.style.top = date.lower_y + 'px'
if (date.upper_text) {
this.upper_texts_x[date.upper_text] = date.upper_x
@ -643,7 +643,7 @@ export default class Gantt {
$upper_text.remove();
}
}
}
})
}
get_dates_to_draw() {
@ -711,7 +711,6 @@ export default class Gantt {
lower_y: this.options.header_height - 15,
upper_y: this.options.header_height - 40,
};
const x_pos = {
Hour_lower: column_width / 2,
Hour_upper: column_width * 12,
@ -721,7 +720,7 @@ export default class Gantt {
"Half Day_upper": column_width,
Day_lower: column_width / 2,
Day_upper: column_width / 2,
Week_lower: 0,
Week_lower: column_width / 2,
Week_upper: (column_width * 4) / 2,
Month_lower: column_width / 2,
Month_upper: column_width / 2,