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

28
src/index.js
View File

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