jingrow/gantt
1
0
Fork 0
Code Pull Requests Activity

feat: implement header with css

Browse Source
This commit is contained in:
Safwan Samsudeen 2024-12-12 17:26:56 +05:30
parent ffb53b935f
commit dae014d009
2 changed files with 30 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/gantt.css
View File

@ -100,46 +100,50 @@
}
& .current-upper {
position: absolute;
left: 10px;
position: sticky;
left: 2px !important;
padding: 0 10px;
height: 20px;
background: white;
z-index: 1000;
top: 5px;
}
& .side-header {
position: absolute;
position: sticky;
z-index: 1000;
line-height: 20px;
background: white;
font-weight: 400;
top: 5px;
width: max-content;
margin-left: auto;
right: 0;
padding-left: 5px;
}
& .today-button,
& .viewmode-select {
& .side-header * {
background: #f4f5f6;
text-align: -webkit-center;
text-align: center;
height: 25px;
border-radius: 8px;
border: none;
height: 30px;
border-radius: 0;
border: 1px dotted grey;
border-right: none;
color: var(--text-dark);
padding: 4px 10px;
border-radius: 8px;
height: 25px;
position: sticky;
float: right;
right: 0;
top: 5px;
}
& .viewmode-select {
outline: none !important;
padding: 4px 8px;
margin-right: 4px;
& .side-header *:first-child {
border-radius: 0 8px 8px 0;
border-right: 1px dotted grey;
}
/* -webkit-appearance: none; */
/* -moz-appearance: none; */
text-indent: 1px;
text-overflow: '';
& .side-header *:last-child {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
& .date-highlight {

28
src/index.js
View File

@ -460,11 +460,11 @@ export default class Gantt {
$today_button.classList.add('today-button');
$today_button.textContent = 'Today';
$today_button.onclick = this.scroll_today.bind(this);
$side_header.appendChild($today_button);
$side_header.prepend($today_button);
this.$today_button = $today_button;
}
this.$container.appendChild($side_header);
this.$upper_header.prepend($side_header);
this.$side_header = $side_header;
}
@ -902,15 +902,10 @@ export default class Gantt {
this.config.column_width;
parent_element.scrollTo({ left: scroll_pos - 4, behavior: 'smooth' });
this.$side_header.style.left =
this.$container.clientWidth +
this.$container.scrollLeft -
this.$side_header.clientWidth -
5 +
'px';
// Calculate current scroll position's upper text
if (this.$current) this.$current.classList.remove('current-upper');
if (this.$current) {
this.$current.classList.remove('current-upper');
}
this.upperTexts = Array.from(
this.$container.querySelectorAll('.upper-text'),
@ -934,9 +929,7 @@ export default class Gantt {
);
current_upper = this.config.view_mode.upper_text(this.current_date);
$el = this.upperTexts.find((el) => el.textContent === current_upper);
$el.classList.add('current-upper');
$el.style.left = this.$container.scrollLeft + 'px';
this.$current = $el;
}
@ -1088,15 +1081,6 @@ export default class Gantt {
if (x_on_scroll_start) {
dx = e.currentTarget.scrollLeft - x_on_scroll_start;
}
this.$side_header.style.left =
e.currentTarget.clientWidth +
e.currentTarget.scrollLeft -
this.$side_header.clientWidth -
5 +
'px';
if (this.$current)
this.$current.style.left = e.currentTarget.scrollLeft + 'px';
// Calculate current scroll position's upper text
this.current_date = date_utils.add(
@ -1110,6 +1094,7 @@ export default class Gantt {
let $el = this.upperTexts.find(
(el) => el.textContent === current_upper,
);
// Recalculate for smoother experience
this.current_date = date_utils.add(
this.gantt_start,
@ -1127,7 +1112,6 @@ export default class Gantt {
this.$current.classList.remove('current-upper');
$el.classList.add('current-upper');
$el.style.left = e.currentTarget.scrollLeft + 'px';
this.$current = $el;
}