mARTin-B78/My-Weekly-ToDo-List
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add element/weekend color controls to CSS Variables panel, color-first layout

Browse Source 
Today Highlight, Past Days, Saturday and Sunday now also appear as their
own groups in the CSS Variables panel, bound to the same profile fields
as the existing Element/Weekend Colors controls so both stay in sync.
Every row now shows the color swatch before its label.

v1.113.1
This commit is contained in:
mARTin-B78 2026-07-08 20:51:01 +02:00
parent 02b2e40649
commit 5510197cf4
3 changed files with 72 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
CHANGELOG.md
View File

@ -2,6 +2,14 @@
All notable changes to this project are documented in this file.
## [1.113.1] - 2026-07-08
### Changed
- CSS Variables panel: added the existing "Today Highlight", "Past Days", "Saturday" and
"Sunday" color controls as their own groups (bound to the same profile fields as the
standalone Element/Weekend Colors sections, so both stay in sync).
- CSS Variables panel: every row now shows the color swatch before its label.
## [1.113.0] - 2026-07-08
### Added

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "my-weekly-todo-list",
"version": "1.113.0",
"version": "1.113.1",
"description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
"main": "index.js",
"scripts": {

97
src/components/SettingsSidebar.tsx
View File

@ -147,8 +147,25 @@ function ExtraTimezonesEditor({
// All customizable color custom-properties defined in globals.css :root, grouped for the
// "Styling" tab's CSS Variables editor. Overrides are stored as a flat { "--var-name": "#hex" }
// map in profile.customCssVars and applied on top of containerStyle in WeeklyView.
const CSS_VARIABLE_GROUPS: { title: string; vars: { name: string; label: string; default: string }[] }[] = [
// map in profile.customCssVars and applied on top of containerStyle in WeeklyView. Entries with
// a `profileKey` instead read/write that scalar profile field directly (same fields the
// "Element Colors" / "Weekend Highlight Colors" controls elsewhere in this tab use), so both
// controls for the same setting always stay in sync.
const CSS_VARIABLE_GROUPS: { title: string; vars: { name: string; label: string; default: string; profileKey?: string }[] }[] = [
{
title: "Element Colors",
vars: [
{ name: "todayHighlightColor", label: "Today Highlight", default: "#f0fafa", profileKey: "todayHighlightColor" },
{ name: "pastDayColor", label: "Past Days", default: "#a6a6a7", profileKey: "pastDayColor" },
],
},
{
title: "Weekend Highlight Colors",
vars: [
{ name: "weekendColorSat", label: "Saturday", default: "#666666", profileKey: "weekendColorSat" },
{ name: "weekendColorSun", label: "Sunday", default: "#dc2626", profileKey: "weekendColorSun" },
],
},
{
title: "Base Colors",
vars: [
@ -256,6 +273,7 @@ function CssVariablesEditor({
const de = profile.language === "de";
const vars: Record<string, string> = profile.customCssVars || {};
const debounceTimer = useRef<NodeJS.Timeout | null>(null);
const fieldDebounceTimers = useRef<Record<string, NodeJS.Timeout>>({});
const setVar = (name: string, value: string) => {
const next = { ...(profile.customCssVars || {}), [name]: value };
@ -264,6 +282,12 @@ function CssVariablesEditor({
debounceTimer.current = setTimeout(() => saveSetting("customCssVars", next), 500);
};
const setProfileField = (key: string, value: string) => {
setProfile((p: any) => ({ ...p, [key]: value }));
if (fieldDebounceTimers.current[key]) clearTimeout(fieldDebounceTimers.current[key]);
fieldDebounceTimers.current[key] = setTimeout(() => saveSetting(key, value), 500);
};
const reset = () => {
setProfile((p: any) => ({ ...p, customCssVars: {} }));
saveSetting("customCssVars", {});
@ -318,39 +342,44 @@ function CssVariablesEditor({
{group.title}
</div>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "6px 12px" }}>
{group.vars.map((v) => (
<div
key={v.name}
title={v.name}
style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "8px" }}
>
<span
style={{
fontSize: "0.72rem",
color: "var(--weekly-settings-label)",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
{group.vars.map((v) => {
const value = v.profileKey ? (profile[v.profileKey] || v.default) : (vars[v.name] || v.default);
const onChange = (e: React.ChangeEvent<HTMLInputElement>) =>
v.profileKey ? setProfileField(v.profileKey, e.target.value) : setVar(v.name, e.target.value);
return (
<div
key={v.name}
title={v.name}
style={{ display: "flex", alignItems: "center", gap: "8px" }}
>
{v.label}
</span>
<input
type="color"
value={vars[v.name] || v.default}
onChange={(e) => setVar(v.name, e.target.value)}
style={{
width: "32px",
height: "22px",
cursor: "pointer",
border: "1px solid var(--weekly-settings-input-border)",
borderRadius: "4px",
background: "transparent",
flexShrink: 0,
}}
/>
</div>
))}
<input
type="color"
value={value}
onChange={onChange}
style={{
width: "32px",
height: "22px",
cursor: "pointer",
border: "1px solid var(--weekly-settings-input-border)",
borderRadius: "4px",
background: "transparent",
flexShrink: 0,
}}
/>
<span
style={{
fontSize: "0.72rem",
color: "var(--weekly-settings-label)",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
{v.label}
</span>
</div>
);
})}
</div>
</div>
))}