Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhances CSS grid configuration synchronization

Browse source 
Replaces isolated grid column update with comprehensive CSS property management

Extends configuration synchronization to include:
- Dynamic grid layout dimensions
- Hour height configuration
- Work and day hour boundaries

Provides more flexible and configurable grid styling
This commit is contained in:
Janus C. H. Knudsen 2025-11-03 23:07:30 +01:00
parent d3f4667b61
commit 8456d8aa28
2 changed files with 19 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/configurations/ConfigManager.ts
View file

@ -9,11 +9,22 @@ import { TimeFormatter } from '../utils/TimeFormatter';
*/
export class ConfigManager {
/**
* Update CSS custom property for grid columns
* This ensures the CSS grid matches the number of visible columns
* Synchronize all CSS custom properties with configuration
* This ensures CSS grid, time axis, and grid lines match the configuration
*/
static updateGridColumns(weekDays: number): void {
document.documentElement.style.setProperty('--grid-columns', weekDays.toString());
static updateCSSProperties(config: Configuration): void {
const gridSettings = config.gridSettings;
const workWeekSettings = config.getWorkWeekSettings();
// Grid layout
document.documentElement.style.setProperty('--grid-columns', workWeekSettings.totalDays.toString());
// Grid timing and dimensions
document.documentElement.style.setProperty('--hour-height', `${gridSettings.hourHeight}px`);
document.documentElement.style.setProperty('--day-start-hour', gridSettings.dayStartHour.toString());
document.documentElement.style.setProperty('--day-end-hour', gridSettings.dayEndHour.toString());
document.documentElement.style.setProperty('--work-start-hour', gridSettings.workStartHour.toString());
document.documentElement.style.setProperty('--work-end-hour', gridSettings.workEndHour.toString());
}
/**
@ -59,9 +70,8 @@ export class ConfigManager {
// Configure TimeFormatter
TimeFormatter.configure(config.timeFormatConfig);
// Set initial CSS grid columns based on the current work week preset
const workWeekSettings = config.getWorkWeekSettings();
ConfigManager.updateGridColumns(workWeekSettings.totalDays);
// Synchronize all CSS custom properties with configuration
ConfigManager.updateCSSProperties(config);
return config;
}

4
src/managers/ViewManager.ts
View file

@ -96,8 +96,8 @@ export class ViewManager {
this.config.setWorkWeek(workweekId);
// Update CSS grid columns to match new week days count
ConfigManager.updateGridColumns(this.config.dateViewSettings.weekDays);
// Update all CSS properties to match new configuration
ConfigManager.updateCSSProperties(this.config);
this.updateAllButtons();