Implements native scrollbars with styling
Replaces custom scrollbar implementation with native scrollbars for better performance and accessibility. Adds configuration options for scrollbar styling, including width, color, track color, hover color, and border radius. Synchronizes week header and time axis scrolling with the scrollable content.
This commit is contained in:
Janus Knudsen
parent
e6d6599a1e
commit
36ac8d18ab
4 changed files with 97 additions and 424 deletions
|
|
@ -38,8 +38,8 @@ swp-calendar-nav {
|
|||
/* Calendar container grid - POC structure */
|
||||
swp-calendar-container {
|
||||
display: grid;
|
||||
grid-template-columns: 60px 1fr 20px;
|
||||
grid-template-rows: auto 1fr 20px;
|
||||
grid-template-columns: 60px 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
|
@ -60,22 +60,10 @@ swp-header-spacer {
|
|||
}
|
||||
|
||||
|
||||
/* Right header spacer for scrollbar alignment */
|
||||
swp-right-header-spacer {
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
height: calc(var(--header-height) + var(--all-day-row-height)); /* Dynamic height including all-day events */
|
||||
background: var(--color-surface);
|
||||
border-left: 1px solid var(--color-border);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
z-index: 5; /* Higher than time-axis to cover it when scrolling */
|
||||
position: relative;
|
||||
transition: height 300ms ease; /* Smooth height transitions */
|
||||
}
|
||||
|
||||
/* Week container for sliding */
|
||||
swp-week-container {
|
||||
grid-column: 2 / 3;
|
||||
grid-column: 2;
|
||||
grid-row: 1 / 3;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
|
|
@ -85,15 +73,6 @@ swp-week-container {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Right column for scrollbar */
|
||||
swp-right-column {
|
||||
grid-column: 3;
|
||||
grid-row: 2;
|
||||
background: #f0f0f0;
|
||||
border-left: 2px solid #333;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Time axis */
|
||||
swp-time-axis {
|
||||
|
|
@ -116,81 +95,8 @@ swp-time-axis-content {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
/* Right bottom spacer */
|
||||
swp-right-bottom-spacer {
|
||||
grid-column: 3;
|
||||
grid-row: 3;
|
||||
height: 20px;
|
||||
background: var(--color-surface);
|
||||
border-left: 1px solid var(--color-border);
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
/* Scroll handle */
|
||||
swp-scroll-handle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 2px;
|
||||
width: 16px;
|
||||
height: 40px;
|
||||
background: #666;
|
||||
border-radius: 8px;
|
||||
cursor: grab;
|
||||
transition: background-color 0.2s ease;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
swp-scroll-handle:hover {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
swp-scroll-handle.dragging {
|
||||
background: #007bff;
|
||||
}
|
||||
|
||||
/* Bottom row for horizontal scrollbar */
|
||||
swp-bottom-spacer {
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
height: 20px;
|
||||
background: var(--color-surface);
|
||||
border-right: 1px solid var(--color-border);
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
/* Bottom middle spacer */
|
||||
swp-bottom-middle-spacer {
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
height: 20px;
|
||||
background: #f0f0f0;
|
||||
border-top: 2px solid #333;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
/* Horizontal scroll handle */
|
||||
swp-horizontal-scroll-handle {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 2px;
|
||||
width: 40px;
|
||||
height: 16px;
|
||||
background: #666;
|
||||
border-radius: 8px;
|
||||
cursor: grab;
|
||||
transition: background-color 0.2s ease;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
swp-horizontal-scroll-handle:hover {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
swp-horizontal-scroll-handle.dragging {
|
||||
background: #007bff;
|
||||
}
|
||||
|
||||
swp-hour-marker {
|
||||
height: var(--hour-height);
|
||||
|
|
@ -321,15 +227,31 @@ swp-scrollable-content {
|
|||
position: relative;
|
||||
display: grid;
|
||||
/* Height and width will be set dynamically by ScrollManager via ResizeObserver */
|
||||
|
||||
/* Hide native scrollbars */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE/Edge */
|
||||
}
|
||||
|
||||
/* Chrome/Safari/Opera */
|
||||
/* Style native scrollbars for Webkit browsers (Chrome, Safari, Edge) */
|
||||
swp-scrollable-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: var(--scrollbar-width, 12px);
|
||||
height: var(--scrollbar-width, 12px);
|
||||
}
|
||||
|
||||
swp-scrollable-content::-webkit-scrollbar-track {
|
||||
background: var(--scrollbar-track-color, #f0f0f0);
|
||||
}
|
||||
|
||||
swp-scrollable-content::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbar-color, #666);
|
||||
border-radius: var(--scrollbar-border-radius, 6px);
|
||||
}
|
||||
|
||||
swp-scrollable-content::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--scrollbar-hover-color, #333);
|
||||
}
|
||||
|
||||
/* Style native scrollbars for Firefox */
|
||||
swp-scrollable-content {
|
||||
scrollbar-width: auto; /* Let it use the webkit width */
|
||||
scrollbar-color: var(--scrollbar-color, #666) var(--scrollbar-track-color, #f0f0f0);
|
||||
}
|
||||
|
||||
/* Fit to width mode - disable horizontal scroll */
|
||||
|
|
@ -337,10 +259,6 @@ swp-calendar[data-fit-to-width="true"] swp-scrollable-content {
|
|||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Hide horizontal scrollbar by collapsing bottom row */
|
||||
swp-calendar[data-fit-to-width="true"] swp-calendar-container {
|
||||
grid-template-rows: auto 1fr 0px;
|
||||
}
|
||||
|
||||
/* Time grid */
|
||||
swp-time-grid {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue