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

Convert header display settings to dropdown (v1.33.1)

Browse Source
This commit is contained in:
mARTin 2026-03-13 15:53:16 +01:00
parent b827f39722
commit 58de23a18f
2 changed files with 15 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "my-weekly-todo-list",
"version": "1.33.0",
"version": "1.33.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": {

58
src/components/WeeklyView.tsx
View File

@ -10863,52 +10863,22 @@ function SettingsSidebar({
<label style={{ fontSize: "0.85rem", fontWeight: 600, color: "var(--weekly-settings-label)" }}>
{t.headerDisplay}
</label>
<div className="flex items-center gap-1 bg-gray-100 dark:bg-gray-800 rounded p-1 mt-1" style={{ width: "fit-content" }}>
<button
onClick={() => {
setProfile({ ...profile, headerDisplay: "kw" });
saveSetting("headerDisplay", "kw");
<div className="mt-1">
<select
value={profile.headerDisplay || "kw"}
onChange={(e) => {
const val = e.target.value as any;
setProfile({ ...profile, headerDisplay: val });
saveSetting("headerDisplay", val);
}}
className={`px-4 py-2 text-sm rounded transition-colors ${(profile.headerDisplay || "kw") === "kw" ? "bg-white shadow-sm font-bold text-black" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
className="weekly-input w-full p-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded"
>
{t.headerDisplayKW}
</button>
<button
onClick={() => {
setProfile({ ...profile, headerDisplay: "month" });
saveSetting("headerDisplay", "month");
}}
className={`px-4 py-2 text-sm rounded transition-colors ${profile.headerDisplay === "month" ? "bg-white shadow-sm font-bold text-black" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
>
{t.headerDisplayMonth}
</button>
<button
onClick={() => {
setProfile({ ...profile, headerDisplay: "month_year" });
saveSetting("headerDisplay", "month_year");
}}
className={`px-4 py-2 text-sm rounded transition-colors ${profile.headerDisplay === "month_year" ? "bg-white shadow-sm font-bold text-black" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
>
{t.headerDisplayMonthYear}
</button>
<button
onClick={() => {
setProfile({ ...profile, headerDisplay: "date" });
saveSetting("headerDisplay", "date");
}}
className={`px-4 py-2 text-sm rounded transition-colors ${profile.headerDisplay === "date" ? "bg-white shadow-sm font-bold text-black" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
>
{t.headerDisplayDate}
</button>
<button
onClick={() => {
setProfile({ ...profile, headerDisplay: "custom" });
saveSetting("headerDisplay", "custom");
}}
className={`px-4 py-2 text-sm rounded transition-colors ${profile.headerDisplay === "custom" ? "bg-white shadow-sm font-bold text-black" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
>
{t.headerDisplayCustom}
</button>
<option value="kw">{t.headerDisplayKW}</option>
<option value="month">{t.headerDisplayMonth}</option>
<option value="month_year">{t.headerDisplayMonthYear}</option>
<option value="date">{t.headerDisplayDate}</option>
<option value="custom">{t.headerDisplayCustom}</option>
</select>
</div>
{profile.headerDisplay === "custom" && (
<div className="mt-2">