feat: move ViewStyle selection from header to settings menu
- Relocated Simple/Calendar/List toggles to General settings tab - Positioned ViewStyle above localization setting - Removed redundant dropdown from settings - Cleaned up header whitespace
This commit is contained in:
parent
138f5d8030
commit
ce58c3673e
@ -3266,45 +3266,7 @@ export default function WeeklyView() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* View Style Toggles */}
|
|
||||||
<div
|
|
||||||
className="flex items-center gap-1 bg-gray-100 dark:bg-gray-800 rounded p-1"
|
|
||||||
title="View Style"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
setViewStyle("simple");
|
|
||||||
setShowTimeGrid(true);
|
|
||||||
saveSetting("viewStyle", "simple");
|
|
||||||
saveSetting("showTimeGrid", true);
|
|
||||||
}}
|
|
||||||
className={`px-2 py-0.5 text-xs rounded transition-colors ${showTimeGrid && viewStyle === "simple" ? "bg-white shadow-sm font-bold text-black" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
|
|
||||||
>
|
|
||||||
Simple
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
setViewStyle("calendar");
|
|
||||||
setShowTimeGrid(true);
|
|
||||||
saveSetting("viewStyle", "calendar");
|
|
||||||
saveSetting("showTimeGrid", true);
|
|
||||||
}}
|
|
||||||
className={`px-2 py-0.5 text-xs rounded transition-colors ${showTimeGrid && viewStyle === "calendar" ? "bg-white shadow-sm font-bold text-black" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
|
|
||||||
>
|
|
||||||
Calendar
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
setViewStyle("list");
|
|
||||||
setShowTimeGrid(false);
|
|
||||||
saveSetting("viewStyle", "list");
|
|
||||||
saveSetting("showTimeGrid", false);
|
|
||||||
}}
|
|
||||||
className={`px-2 py-0.5 text-xs rounded transition-colors ${!showTimeGrid && viewStyle === "list" ? "bg-white shadow-sm font-bold text-black" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
|
|
||||||
>
|
|
||||||
List
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* CENTER SECTION: Week/Year, Goal, Focus Mode - Reveal on Hover */}
|
{/* CENTER SECTION: Week/Year, Goal, Focus Mode - Reveal on Hover */}
|
||||||
@ -7054,35 +7016,7 @@ function SettingsSidebar({
|
|||||||
<option value={120}>2 hours</option>
|
<option value={120}>2 hours</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
style={{
|
|
||||||
display: "block",
|
|
||||||
fontSize: "0.9rem",
|
|
||||||
fontWeight: 600,
|
|
||||||
marginBottom: "4px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{t.viewStyle}
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
value={viewStyle}
|
|
||||||
onChange={(e) =>
|
|
||||||
setViewStyle(e.target.value as ViewStyle)
|
|
||||||
}
|
|
||||||
className="weekly-input"
|
|
||||||
style={{
|
|
||||||
width: "100%",
|
|
||||||
padding: "8px",
|
|
||||||
border: "1px solid #ddd",
|
|
||||||
borderRadius: "4px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<option value="simple">{t.simpleView}</option>
|
|
||||||
<option value="calendar">{t.calendarView}</option>
|
|
||||||
<option value="list">{t.listView}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Configurable Hours */}
|
{/* Configurable Hours */}
|
||||||
<div style={{ display: "flex", gap: "12px" }}>
|
<div style={{ display: "flex", gap: "12px" }}>
|
||||||
@ -7192,7 +7126,59 @@ function SettingsSidebar({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div style={{ marginTop: "12px" }}>
|
<div style={{ marginTop: "16px" }}>
|
||||||
|
<label
|
||||||
|
style={{
|
||||||
|
display: "block",
|
||||||
|
fontSize: "0.9rem",
|
||||||
|
fontWeight: 600,
|
||||||
|
marginBottom: "8px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t.viewStyle}
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
className="flex items-center gap-1 bg-gray-100 dark:bg-gray-800 rounded p-1"
|
||||||
|
style={{ width: "fit-content" }}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setViewStyle("simple");
|
||||||
|
setShowTimeGrid(true);
|
||||||
|
saveSetting("viewStyle", "simple");
|
||||||
|
saveSetting("showTimeGrid", true);
|
||||||
|
}}
|
||||||
|
className={`px-4 py-2 text-sm rounded transition-colors ${showTimeGrid && viewStyle === "simple" ? "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.simpleView}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setViewStyle("calendar");
|
||||||
|
setShowTimeGrid(true);
|
||||||
|
saveSetting("viewStyle", "calendar");
|
||||||
|
saveSetting("showTimeGrid", true);
|
||||||
|
}}
|
||||||
|
className={`px-4 py-2 text-sm rounded transition-colors ${showTimeGrid && viewStyle === "calendar" ? "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.calendarView}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setViewStyle("list");
|
||||||
|
setShowTimeGrid(false);
|
||||||
|
saveSetting("viewStyle", "list");
|
||||||
|
saveSetting("showTimeGrid", false);
|
||||||
|
}}
|
||||||
|
className={`px-4 py-2 text-sm rounded transition-colors ${!showTimeGrid && viewStyle === "list" ? "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.listView}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div style={{ marginTop: "16px" }}>
|
||||||
<label
|
<label
|
||||||
style={{
|
style={{
|
||||||
display: "block",
|
display: "block",
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user