diff --git a/.gitignore b/.gitignore index 7292033..95fa510 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,10 @@ # Build outputs bin/ obj/ +node_modules/ +test-results/ +playwright-report/ +blob-report/ # User-specific files *.user @@ -27,6 +31,8 @@ Data/*.db-* *.sqlite3 App_Data/ .docker-data/ +probe-desktop.png +probe-mobile.png # Secrets and environment files .env diff --git a/Components/App.razor b/Components/App.razor index a2917af..1cf0d7a 100644 --- a/Components/App.razor +++ b/Components/App.razor @@ -5,6 +5,28 @@ + @@ -15,6 +37,7 @@ + diff --git a/Components/Layout/MainLayout.razor b/Components/Layout/MainLayout.razor index 7e9232b..b49bc25 100644 --- a/Components/Layout/MainLayout.razor +++ b/Components/Layout/MainLayout.razor @@ -1,24 +1,16 @@ @inherits LayoutComponentBase +@implements IDisposable + +@inject AppThemeState ThemeState +@inject IJSRuntime JS
- +
- About
@@ -37,8 +29,39 @@ @code { private bool sidebarCollapsed = true; + protected override void OnInitialized() + { + ThemeState.ThemeModeChanged += HandleThemeModeChanged; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (!firstRender) + { + return; + } + + var themeMode = await ThemeState.EnsureLoadedAsync(); + await ApplyThemeAsync(themeMode); + } + private void ToggleSidebar() { sidebarCollapsed = !sidebarCollapsed; } + + private void HandleThemeModeChanged(AppThemeMode themeMode) + { + _ = InvokeAsync(() => ApplyThemeAsync(themeMode).AsTask()); + } + + private ValueTask ApplyThemeAsync(AppThemeMode themeMode) + { + return JS.InvokeVoidAsync("workTrackerTheme.setTheme", themeMode.ToString().ToLowerInvariant()); + } + + public void Dispose() + { + ThemeState.ThemeModeChanged -= HandleThemeModeChanged; + } } diff --git a/Components/Layout/MainLayout.razor.css b/Components/Layout/MainLayout.razor.css index 8204d7a..cfbb458 100644 --- a/Components/Layout/MainLayout.razor.css +++ b/Components/Layout/MainLayout.razor.css @@ -14,8 +14,8 @@ main { } .top-row { - background-color: #f7f7f7; - border-bottom: 1px solid #d6d5d5; + background-color: var(--wt-header-bg); + border-bottom: 1px solid var(--wt-header-border); justify-content: flex-end; height: 3.5rem; display: flex; @@ -23,6 +23,7 @@ main { } .top-row ::deep a, .top-row ::deep .btn-link { + color: var(--wt-header-link); white-space: nowrap; margin-left: 1.5rem; text-decoration: none; @@ -37,30 +38,9 @@ main { text-overflow: ellipsis; } -.sidebar-toggle { - display: none; - align-items: center; - justify-content: center; - flex-direction: column; - gap: 0.2rem; - width: 2.5rem; - height: 2.5rem; - margin-right: auto; - border: 1px solid #d6d5d5; - border-radius: 0.65rem; - background: #fff; -} - -.sidebar-toggle-bar { - width: 1rem; - height: 2px; - background: #334155; - border-radius: 999px; -} - @media (max-width: 640.98px) { .top-row { - justify-content: space-between; + justify-content: flex-end; } .top-row ::deep a, .top-row ::deep .btn-link { @@ -100,10 +80,6 @@ main { padding-right: 1.5rem !important; } - .sidebar-toggle { - display: inline-flex; - } - .sidebar.sidebar-collapsed { width: 5rem; } diff --git a/Components/Layout/NavMenu.razor b/Components/Layout/NavMenu.razor index 4a34d50..514e372 100644 --- a/Components/Layout/NavMenu.razor +++ b/Components/Layout/NavMenu.razor @@ -4,15 +4,29 @@ @code { [Parameter] public bool IsCollapsed { get; set; } + [Parameter] public EventCallback OnToggleSidebar { get; set; } + + private Task ToggleSidebarAsync() + { + return OnToggleSidebar.InvokeAsync(); + } }
-
-
- - WorkTracker - - +
+
+
diff --git a/Components/Layout/NavMenu.razor.css b/Components/Layout/NavMenu.razor.css index b4e5429..68a8b8e 100644 --- a/Components/Layout/NavMenu.razor.css +++ b/Components/Layout/NavMenu.razor.css @@ -1,10 +1,19 @@ .top-row { min-height: 3.5rem; background-color: rgba(0,0,0,0.4); + padding-left: 0.75rem !important; + padding-right: 0.75rem !important; +} + +.nav-menu-header { + display: flex; + align-items: center; + gap: 0.75rem; } .navbar-brand { font-size: 1.1rem; + margin-bottom: 0; } .sidebar-brand-compact { @@ -15,6 +24,32 @@ height: 100%; } +.sidebar-toggle { + display: inline-flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 0.2rem; + width: 2.5rem; + height: 2.5rem; + border: 1px solid rgba(255, 255, 255, 0.18); + border-radius: 0.65rem; + background: rgba(255, 255, 255, 0.08); + color: #fff; + flex: 0 0 auto; +} + +.sidebar-toggle:hover { + background: rgba(255, 255, 255, 0.16); +} + +.sidebar-toggle-bar { + width: 1rem; + height: 2px; + background: currentColor; + border-radius: 999px; +} + .bi { display: inline-block; position: relative; @@ -122,19 +157,22 @@ display: none; } + .nav-menu-shell-collapsed .nav-scrollable { + display: none; + } + + .nav-menu-shell:not(.nav-menu-shell-collapsed) .nav-scrollable { + display: block; + } + .nav-scrollable { height: auto; } } @media (min-width: 641px) { - .nav-menu-shell-collapsed .top-row { - padding-left: 0.5rem !important; - padding-right: 0.5rem !important; - } - .nav-menu-shell-collapsed .container-fluid { - justify-content: center; + justify-content: flex-start; } .nav-menu-shell-collapsed .sidebar-brand-full, diff --git a/Components/Pages/CalendarView.razor b/Components/Pages/CalendarView.razor index 60f2df0..8052c58 100644 --- a/Components/Pages/CalendarView.razor +++ b/Components/Pages/CalendarView.razor @@ -10,6 +10,7 @@ Calendar +

Calendar

@@ -51,11 +52,11 @@ else { @if (cell is null) { - + } else { - +
@cell.Date.Day
@foreach (var workUnit in cell.Entry?.WorkUnits ?? []) @@ -193,6 +194,7 @@ else
} } +
@code { [Parameter] public string? YearMonth { get; set; } @@ -306,6 +308,8 @@ else private bool IsActiveCell(DateOnly date) => activeDate == date; + private static bool IsToday(DateOnly date) => date == DateOnly.FromDateTime(DateTime.Today); + private void CreateWorkUnit(DateOnly date) { Navigation.NavigateTo($"/work-unit/{date:yyyy-MM-dd}"); diff --git a/Components/Pages/GridView.razor b/Components/Pages/GridView.razor index 2887739..c21e3f8 100644 --- a/Components/Pages/GridView.razor +++ b/Components/Pages/GridView.razor @@ -24,7 +24,7 @@ else {
- +
@@ -150,31 +150,31 @@ else private string GetRowClass(CalendarDayRow row) { - if (row.IsWeekend || row.IsFestivity) return "table-danger"; - if (row.Entry is null) return ""; + if (row.IsWeekend || row.IsFestivity) return "grid-row-weekend"; + if (row.Entry is null) return string.Empty; if (row.Entry.CalendarEvents.Any(entry => entry.EventType == CalendarEventType.Holiday)) { - return "table-success"; + return "grid-row-holiday"; } if (row.Entry.CalendarEvents.Any(entry => entry.EventType == CalendarEventType.Closure)) { - return "table-warning"; + return "grid-row-closure"; } if (row.Entry.CalendarEvents.Any(entry => entry.EventType == CalendarEventType.Illness)) { - return "table-info"; + return "grid-row-illness"; } if (row.Entry.CalendarEvents.Any(entry => entry.EventType == CalendarEventType.DayOff)) { - return "table-secondary"; + return "grid-row-dayoff"; } if (row.Entry.WorkUnits.Any(entry => entry.Location == WorkUnitLocation.Home)) { - return "table-light"; + return "grid-row-home"; } return string.Empty; diff --git a/Components/Pages/Settings.razor b/Components/Pages/Settings.razor index 0cb3a2d..38d2689 100644 --- a/Components/Pages/Settings.razor +++ b/Components/Pages/Settings.razor @@ -2,6 +2,7 @@ @attribute [Authorize] @inject IAppSettingsService AppSettingsService +@inject AppThemeState ThemeState Settings @@ -18,6 +19,14 @@ else
+
+ + + + + + +
@@ -75,6 +84,7 @@ else } settings = await AppSettingsService.SaveAsync(settings); + ThemeState.SetThemeMode(settings.ThemeMode); statusMessage = $"Saved at {DateTime.Now:t}"; } } diff --git a/Domain/AppSettingsDocument.cs b/Domain/AppSettingsDocument.cs index a3a93d1..ead685a 100644 --- a/Domain/AppSettingsDocument.cs +++ b/Domain/AppSettingsDocument.cs @@ -4,6 +4,8 @@ public sealed class AppSettingsDocument { public string Id { get; set; } = "global"; + public AppThemeMode ThemeMode { get; set; } = AppThemeMode.System; + public decimal StandardWorkHoursPerDay { get; set; } = 8m; public decimal HourlyGrossRate { get; set; } = 17.5m; diff --git a/Domain/AppThemeMode.cs b/Domain/AppThemeMode.cs new file mode 100644 index 0000000..f5cd3b7 --- /dev/null +++ b/Domain/AppThemeMode.cs @@ -0,0 +1,8 @@ +namespace WorkTracker.Domain; + +public enum AppThemeMode +{ + System, + Light, + Dark +} \ No newline at end of file diff --git a/Program.cs b/Program.cs index 68c4cec..d67f0ef 100644 --- a/Program.cs +++ b/Program.cs @@ -19,6 +19,17 @@ using WorkTracker.Services.WorkDays; var builder = WebApplication.CreateBuilder(args); +var runningInContainer = string.Equals( + Environment.GetEnvironmentVariable("DOTNET_RUNNING_IN_CONTAINER"), + "true", + StringComparison.OrdinalIgnoreCase) + || File.Exists("/.dockerenv"); + +if (!runningInContainer) +{ + builder.WebHost.UseStaticWebAssets(); +} + builder.Logging.ClearProviders(); builder.Host.UseNLog(); @@ -60,6 +71,7 @@ builder.Services.Configure(builder.Configuration.GetSection(S builder.Services.AddSingleton(); builder.Services.AddScoped(); +builder.Services.AddScoped(); builder.Services.AddSingleton(); builder.Services.AddSingleton(); builder.Services.AddScoped(); diff --git a/Services/Settings/AppThemeState.cs b/Services/Settings/AppThemeState.cs new file mode 100644 index 0000000..f8c27b8 --- /dev/null +++ b/Services/Settings/AppThemeState.cs @@ -0,0 +1,41 @@ +using WorkTracker.Domain; + +namespace WorkTracker.Services.Settings; + +public sealed class AppThemeState +{ + private readonly IAppSettingsService appSettingsService; + private AppThemeMode? currentThemeMode; + + public AppThemeState(IAppSettingsService appSettingsService) + { + this.appSettingsService = appSettingsService; + } + + public event Action? ThemeModeChanged; + + public AppThemeMode CurrentThemeMode => currentThemeMode ?? AppThemeMode.System; + + public async Task EnsureLoadedAsync(CancellationToken cancellationToken = default) + { + if (currentThemeMode.HasValue) + { + return currentThemeMode.Value; + } + + var settings = await appSettingsService.GetAsync(cancellationToken); + currentThemeMode = settings.ThemeMode; + return CurrentThemeMode; + } + + public void SetThemeMode(AppThemeMode themeMode) + { + if (currentThemeMode == themeMode) + { + return; + } + + currentThemeMode = themeMode; + ThemeModeChanged?.Invoke(themeMode); + } +} \ No newline at end of file diff --git a/Services/Settings/CouchbaseLiteAppSettingsService.cs b/Services/Settings/CouchbaseLiteAppSettingsService.cs index fc934bf..c2c1584 100644 --- a/Services/Settings/CouchbaseLiteAppSettingsService.cs +++ b/Services/Settings/CouchbaseLiteAppSettingsService.cs @@ -47,6 +47,7 @@ public sealed class CouchbaseLiteAppSettingsService : IAppSettingsService private void SaveDocument(AppSettingsDocument settings) { var document = new MutableDocument(DefaultSettingsId); + document.SetString("themeMode", settings.ThemeMode.ToString()); document.SetDouble("standardWorkHoursPerDay", Decimal.ToDouble(settings.StandardWorkHoursPerDay)); document.SetDouble("hourlyGrossRate", Decimal.ToDouble(settings.HourlyGrossRate)); document.SetDouble("profitabilityCoefficient", Decimal.ToDouble(settings.ProfitabilityCoefficient)); @@ -65,6 +66,7 @@ public sealed class CouchbaseLiteAppSettingsService : IAppSettingsService return new AppSettingsDocument { Id = document.Id, + ThemeMode = ReadThemeMode(document), StandardWorkHoursPerDay = ReadDecimal(document, "standardWorkHoursPerDay", 8m), HourlyGrossRate = ReadDecimal(document, "hourlyGrossRate", 17.5m), ProfitabilityCoefficient = ReadDecimal(document, "profitabilityCoefficient", 0.67m), @@ -84,6 +86,14 @@ public sealed class CouchbaseLiteAppSettingsService : IAppSettingsService : defaultValue; } + private static AppThemeMode ReadThemeMode(Document document) + { + var value = document.GetString("themeMode"); + return Enum.TryParse(value, ignoreCase: true, out var themeMode) + ? themeMode + : AppThemeMode.System; + } + private static DateTimeOffset ReadDateTimeOffset(Document document, string key) { var value = document.GetString(key); diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..05e095f --- /dev/null +++ b/package-lock.json @@ -0,0 +1,76 @@ +{ + "name": "worktracker-playwright", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "worktracker-playwright", + "dependencies": { + "playwright": "^1.59.1" + }, + "devDependencies": { + "@playwright/test": "^1.59.1" + } + }, + "node_modules/@playwright/test": { + "version": "1.59.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.59.1.tgz", + "integrity": "sha512-PG6q63nQg5c9rIi4/Z5lR5IVF7yU5MqmKaPOe0HSc0O2cX1fPi96sUQu5j7eo4gKCkB2AnNGoWt7y4/Xx3Kcqg==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "playwright": "1.59.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/playwright": { + "version": "1.59.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.59.1.tgz", + "integrity": "sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==", + "license": "Apache-2.0", + "dependencies": { + "playwright-core": "1.59.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, + "node_modules/playwright-core": { + "version": "1.59.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.59.1.tgz", + "integrity": "sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==", + "license": "Apache-2.0", + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=18" + } + } + } +} diff --git a/package.json b/package.json index 64ec29f..031f157 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,9 @@ "test:e2e": "playwright test" }, "devDependencies": { - "@playwright/test": "1.59.1" + "@playwright/test": "^1.59.1" + }, + "dependencies": { + "playwright": "^1.59.1" } -} \ No newline at end of file +} diff --git a/tests/playwright/auth-bypass.spec.ts b/tests/playwright/auth-bypass.spec.ts index 670b5e8..0cd22cf 100644 --- a/tests/playwright/auth-bypass.spec.ts +++ b/tests/playwright/auth-bypass.spec.ts @@ -1,9 +1,14 @@ import { expect, test } from '@playwright/test'; +async function waitForBlazorConnection(page: Parameters[0]['page']) { + await page.waitForTimeout(750); +} + test.describe('sidebar collapse', () => { test('starts collapsed and expands through the toggle button', async ({ page }) => { await page.setViewportSize({ width: 1440, height: 960 }); - await page.goto('/'); + await page.goto('/', { waitUntil: 'networkidle' }); + await waitForBlazorConnection(page); const sidebar = page.getByTestId('sidebar-shell'); const toggle = page.getByRole('button', { name: 'Toggle sidebar' }); @@ -13,16 +18,43 @@ test.describe('sidebar collapse', () => { await expect(page.getByRole('link', { name: 'Dashboard' })).toBeVisible(); await toggle.click(); + await page.waitForTimeout(500); await expect(sidebar).toHaveAttribute('data-collapsed', 'false'); await expect(toggle).toHaveAttribute('aria-expanded', 'true'); await expect(page.getByText('Dashboard')).toBeVisible(); await toggle.click(); + await page.waitForTimeout(500); await expect(sidebar).toHaveAttribute('data-collapsed', 'true'); await expect(toggle).toHaveAttribute('aria-expanded', 'false'); }); + + test('renders sidebar styles and toggles on narrow layouts', async ({ page }) => { + await page.setViewportSize({ width: 500, height: 900 }); + await page.goto('/', { waitUntil: 'networkidle' }); + await waitForBlazorConnection(page); + + const sidebar = page.getByTestId('sidebar-shell'); + const toggle = page.getByRole('button', { name: 'Toggle sidebar' }); + const navScrollable = page.locator('.nav-scrollable'); + const sidebarPanel = page.locator('.sidebar'); + const toggleBar = page.locator('.sidebar-toggle-bar').first(); + + await expect(sidebar).toHaveAttribute('data-collapsed', 'true'); + await expect(navScrollable).toBeHidden(); + + await expect(sidebarPanel).toHaveCSS('background-image', /linear-gradient/); + await expect(toggleBar).toHaveCSS('background-color', 'rgb(255, 255, 255)'); + + await toggle.click(); + await page.waitForTimeout(500); + + await expect(sidebar).toHaveAttribute('data-collapsed', 'false'); + await expect(toggle).toHaveAttribute('aria-expanded', 'true'); + await expect(navScrollable).toBeVisible(); + }); }); test('home loads without a login screen', async ({ page }) => { diff --git a/wwwroot/app.css b/wwwroot/app.css index 071fd5d..90768ef 100644 --- a/wwwroot/app.css +++ b/wwwroot/app.css @@ -2,6 +2,405 @@ html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } +:root { + --wt-header-bg: #f7f7f7; + --wt-header-border: #d6d5d5; + --wt-header-link: #1f2937; + --wt-calendar-cell-hover: rgba(0, 0, 0, 0.05); + --wt-calendar-active: #1b6ec2; + --wt-calendar-total: #334155; + --wt-calendar-hours: #666; + --wt-popup-bg: #fff; + --wt-popup-border: rgba(0, 0, 0, 0.15); + --wt-popup-link-bg: #f1f3f5; + --wt-calendar-today-ring: #0d6efd; + --wt-calendar-today-badge-bg: #0d6efd; + --wt-calendar-today-badge-text: #fff; + --wt-summary-head-bg: #f8f9fa; + --wt-summary-sticky-bg: #fff; + --wt-summary-row-alt: #fcfcfd; + --wt-summary-popup-bg: #fff; + --wt-summary-popup-border: rgba(0, 0, 0, 0.12); + --wt-summary-popup-text: #1f2937; + --wt-summary-popup-event: #475569; +} + +[data-bs-theme=dark] { + --wt-header-bg: #1d2228; + --wt-header-border: rgba(255, 255, 255, 0.08); + --wt-header-link: #dee2e6; + --wt-calendar-cell-hover: rgba(255, 255, 255, 0.06); + --wt-calendar-active: #6ea8fe; + --wt-calendar-total: #d0d7de; + --wt-calendar-hours: #adb5bd; + --wt-popup-bg: #212529; + --wt-popup-border: rgba(255, 255, 255, 0.12); + --wt-popup-link-bg: #343a40; + --wt-calendar-today-ring: #8ec5ff; + --wt-calendar-today-badge-bg: #8ec5ff; + --wt-calendar-today-badge-text: #0f172a; + --wt-summary-head-bg: #2b3035; + --wt-summary-sticky-bg: #212529; + --wt-summary-row-alt: #1a1e22; + --wt-summary-popup-bg: #212529; + --wt-summary-popup-border: rgba(255, 255, 255, 0.12); + --wt-summary-popup-text: #e9ecef; + --wt-summary-popup-event: #adb5bd; +} + +.page { + position: relative; + display: flex; + flex-direction: column; +} + +main { + flex: 1; + min-width: 0; +} + +.sidebar { + background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); +} + +.top-row { + background-color: var(--wt-header-bg); + border-bottom: 1px solid var(--wt-header-border); + justify-content: flex-end; + height: 3.5rem; + display: flex; + align-items: center; +} + +.top-row a, +.top-row .btn-link { + color: var(--wt-header-link); + white-space: nowrap; + margin-left: 1.5rem; + text-decoration: none; +} + +.top-row a:hover, +.top-row .btn-link:hover { + text-decoration: underline; +} + +.top-row a:first-child { + overflow: hidden; + text-overflow: ellipsis; +} + +.nav-menu-header { + display: flex; + align-items: center; + gap: 0.75rem; + justify-content: flex-start; +} + +.nav-menu-shell { + height: 100%; +} + +.nav-menu-shell .top-row { + min-height: 3.5rem; + background-color: rgba(0, 0, 0, 0.4); + border-bottom: 0; + padding-left: 0.75rem !important; + padding-right: 0.75rem !important; +} + +.sidebar-toggle { + display: inline-flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 0.2rem; + width: 2.5rem; + height: 2.5rem; + border: 1px solid rgba(255, 255, 255, 0.18); + border-radius: 0.65rem; + background: rgba(255, 255, 255, 0.08); + color: #fff; + flex: 0 0 auto; +} + +.sidebar-toggle:hover { + background: rgba(255, 255, 255, 0.16); +} + +.sidebar-toggle-bar { + width: 1rem; + height: 2px; + background: currentColor; + border-radius: 999px; +} + +.bi { + display: inline-block; + position: relative; + width: 1.25rem; + height: 1.25rem; + margin-right: 0.75rem; + top: -1px; + background-size: cover; +} + +.bi-house-door-fill-nav-menu { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E"); +} + +.bi-plus-square-fill-nav-menu { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E"); +} + +.bi-list-nested-nav-menu { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E"); +} + +.bi-lock-nav-menu { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); +} + +.bi-person-nav-menu { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E"); +} + +.bi-person-badge-nav-menu { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E"); +} + +.bi-person-fill-nav-menu { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E"); +} + +.bi-arrow-bar-left-nav-menu { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E"); +} + +.bi-gear-fill-nav-menu { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E"); +} + +.bi-calendar3-nav-menu { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z'/%3E%3Cpath d='M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E"); +} + +.bi-bar-chart-fill-nav-menu { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2z'/%3E%3C/svg%3E"); +} + +.nav-item { + font-size: 0.9rem; + padding-bottom: 0.5rem; +} + +.nav-label { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.nav-item:first-of-type { + padding-top: 1rem; +} + +.nav-item:last-of-type { + padding-bottom: 1rem; +} + +.nav-item .nav-link { + color: #d7d7d7; + background: none; + border: none; + border-radius: 4px; + height: 3rem; + display: flex; + align-items: center; + line-height: 3rem; + width: 100%; +} + +.nav-item a.active { + background-color: rgba(255, 255, 255, 0.37); + color: white; +} + +.nav-item .nav-link:hover { + background-color: rgba(255, 255, 255, 0.1); + color: white; +} + +.nav-scrollable { + display: block; + height: calc(100vh - 3.5rem); + overflow-y: auto; +} + +@media (max-width: 640.98px) { + .top-row { + justify-content: flex-end; + } + + .top-row a, + .top-row .btn-link { + margin-left: 0; + } + + .nav-menu-shell-collapsed .sidebar-brand-full, + .nav-menu-shell:not(.nav-menu-shell-collapsed) .sidebar-brand-compact { + display: none; + } + + .nav-menu-shell-collapsed .nav-scrollable { + display: none; + } + + .nav-menu-shell:not(.nav-menu-shell-collapsed) .nav-scrollable { + display: block; + } + + .nav-scrollable { + height: auto; + } +} + +@media (min-width: 641px) { + .page { + flex-direction: row; + } + + .sidebar { + width: 250px; + height: 100vh; + position: sticky; + top: 0; + transition: width 0.2s ease; + overflow: hidden; + flex: 0 0 auto; + } + + .top-row { + position: sticky; + top: 0; + z-index: 1; + } + + .top-row.auth a:first-child { + flex: 1; + text-align: right; + width: 0; + } + + .top-row, + article { + padding-left: 2rem !important; + padding-right: 1.5rem !important; + } + + .sidebar.sidebar-collapsed { + width: 5rem; + } + + .nav-menu-shell-collapsed .container-fluid { + justify-content: flex-start; + } + + .nav-menu-shell-collapsed .nav-label { + display: none; + } + + .nav-menu-shell-collapsed .nav-item { + padding-bottom: 0.3rem; + } + + .nav-menu-shell-collapsed .nav-item.px-3 { + padding-left: 0.5rem !important; + padding-right: 0.5rem !important; + } + + .nav-menu-shell-collapsed .nav-item .nav-link { + justify-content: center; + padding-left: 0; + padding-right: 0; + } + + .nav-menu-shell-collapsed .nav-item .nav-link, + .nav-menu-shell-collapsed .nav-item button.nav-link { + min-width: 0; + } + + .nav-menu-shell-collapsed .bi { + margin-right: 0; + } +} + +#blazor-error-ui { + color-scheme: light only; + background: lightyellow; + bottom: 0; + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); + box-sizing: border-box; + display: none; + left: 0; + padding: 0.6rem 1.25rem 0.7rem 1.25rem; + position: fixed; + width: 100%; + z-index: 1000; +} + +#blazor-error-ui .dismiss { + cursor: pointer; + position: absolute; + right: 0.75rem; + top: 0.5rem; +} + +.grid-view-table { + --wt-grid-row-weekend: #f8d7da; + --wt-grid-row-holiday: #d4edda; + --wt-grid-row-closure: #fff3cd; + --wt-grid-row-illness: #d1ecf1; + --wt-grid-row-dayoff: #e2e3e5; + --wt-grid-row-home: #f8f9fa; +} + +[data-bs-theme=dark] .grid-view-table { + --wt-grid-row-weekend: #522c35; + --wt-grid-row-holiday: #1f4e3f; + --wt-grid-row-closure: #5c4a20; + --wt-grid-row-illness: #16404a; + --wt-grid-row-dayoff: #3b4046; + --wt-grid-row-home: #2b3035; +} + +.grid-view-table .grid-row-weekend > * { + background-color: var(--wt-grid-row-weekend); +} + +.grid-view-table .grid-row-holiday > * { + background-color: var(--wt-grid-row-holiday); +} + +.grid-view-table .grid-row-closure > * { + background-color: var(--wt-grid-row-closure); +} + +.grid-view-table .grid-row-illness > * { + background-color: var(--wt-grid-row-illness); +} + +.grid-view-table .grid-row-dayoff > * { + background-color: var(--wt-grid-row-dayoff); +} + +.grid-view-table .grid-row-home > * { + background-color: var(--wt-grid-row-home); +} + +.grid-view-table tbody tr > * { + color: inherit; +} + a, .btn-link { color: #006bb7; } @@ -70,17 +469,41 @@ h1:focus { } .calendar-table td.calendar-cell:hover { - background-color: rgba(0, 0, 0, 0.05); + background-color: var(--wt-calendar-cell-hover); +} + +.calendar-cell-empty { + background-color: var(--bs-tertiary-bg); } .calendar-cell-active { - box-shadow: inset 0 0 0 0.15rem #1b6ec2; + box-shadow: inset 0 0 0 0.15rem var(--wt-calendar-active); +} + +.calendar-cell-today::after { + content: ""; + position: absolute; + inset: 0.2rem; + border: 0.15rem solid var(--wt-calendar-today-ring); + border-radius: 0.75rem; + pointer-events: none; } .calendar-day-number { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 2rem; + height: 2rem; font-weight: bold; font-size: 0.9rem; margin-bottom: 0.3rem; + border-radius: 999px; +} + +.calendar-cell-today .calendar-day-number { + background-color: var(--wt-calendar-today-badge-bg); + color: var(--wt-calendar-today-badge-text); } .calendar-day-total { @@ -89,12 +512,12 @@ h1:focus { font-size: 0.72rem; font-weight: 700; text-align: right; - color: #334155; + color: var(--wt-calendar-total); } .calendar-hours { font-size: 0.75rem; - color: #666; + color: var(--wt-calendar-hours); } .calendar-item { @@ -163,8 +586,8 @@ h1:focus { z-index: 20; width: min(16rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); - background: #fff; - border: 1px solid rgba(0, 0, 0, 0.15); + background: var(--wt-popup-bg); + border: 1px solid var(--wt-popup-border); border-radius: 0.75rem; box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.18); padding: 0.75rem; @@ -189,7 +612,8 @@ h1:focus { .calendar-popup-link { border: 0; border-radius: 0.5rem; - background: #f1f3f5; + background: var(--wt-popup-link-bg); + color: inherit; padding: 0.45rem 0.6rem; text-align: left; } @@ -229,6 +653,45 @@ h1:focus { background-color: #d4edda !important; } +[data-bs-theme=dark] .calendar-legend-work { + background-color: #24476f; + color: #e8f3ff; +} + +[data-bs-theme=dark] .calendar-legend-home { + background-color: #245744; + color: #e7fff4; +} + +[data-bs-theme=dark] .calendar-legend-preview { + background-color: #6b5314; + color: #fff5d7; +} + +[data-bs-theme=dark] .calendar-weekend { + background-color: #4b2c33 !important; +} + +[data-bs-theme=dark] .calendar-closure { + background-color: #5c4a20 !important; +} + +[data-bs-theme=dark] .calendar-illness { + background-color: #16404a !important; +} + +[data-bs-theme=dark] .calendar-dayoff { + background-color: #3b4046 !important; +} + +[data-bs-theme=dark] .calendar-holiday { + background-color: #1f4e3f !important; +} + +.calendar-page { + padding-bottom: 3rem; +} + @media (max-width: 767.98px) { .calendar-table td.calendar-cell { height: 8rem; @@ -251,7 +714,7 @@ h1:focus { } .timesheet-summary-table thead th { - background-color: #f8f9fa; + background-color: var(--wt-summary-head-bg); white-space: nowrap; } @@ -267,22 +730,22 @@ h1:focus { left: 0; z-index: 2; min-width: 15rem !important; - background-color: #fff; + background-color: var(--wt-summary-sticky-bg); } .timesheet-summary-table thead .timesheet-summary-sticky-column { z-index: 3; - background-color: #f8f9fa; + background-color: var(--wt-summary-head-bg); } .timesheet-summary-total-column { - background-color: #f8f9fa; + background-color: var(--wt-summary-head-bg); min-width: 3.3rem !important; } .timesheet-summary-table tbody tr:nth-child(odd) td, .timesheet-summary-table tbody tr:nth-child(odd) .timesheet-summary-sticky-column { - background-color: #fcfcfd; + background-color: var(--wt-summary-row-alt); } .timesheet-summary-table .timesheet-summary-day-danger { @@ -293,6 +756,14 @@ h1:focus { background-color: #e2e3e5 !important; } +[data-bs-theme=dark] .timesheet-summary-table .timesheet-summary-day-danger { + background-color: #5b2833 !important; +} + +[data-bs-theme=dark] .timesheet-summary-table .timesheet-summary-day-closure { + background-color: #3b4046 !important; +} + .timesheet-summary-day-header { position: relative; cursor: default; @@ -306,9 +777,9 @@ h1:focus { width: min(18rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); padding: 0.65rem 0.75rem; - border: 1px solid rgba(0, 0, 0, 0.12); + border: 1px solid var(--wt-summary-popup-border); border-radius: 0.7rem; - background: #fff; + background: var(--wt-summary-popup-bg); box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.18); text-align: left; transform: translateX(-50%); @@ -337,7 +808,7 @@ h1:focus { .timesheet-summary-day-popup-item { font-size: 0.75rem; line-height: 1.35; - color: #1f2937; + color: var(--wt-summary-popup-text); } .timesheet-summary-day-popup-item + .timesheet-summary-day-popup-item { @@ -345,7 +816,7 @@ h1:focus { } .timesheet-summary-day-popup-item-event { - color: #475569; + color: var(--wt-summary-popup-event); } @media (max-width: 767.98px) { diff --git a/wwwroot/theme.js b/wwwroot/theme.js new file mode 100644 index 0000000..9a9d794 --- /dev/null +++ b/wwwroot/theme.js @@ -0,0 +1,58 @@ +window.workTrackerTheme = (() => { + const storageKey = "worktracker.themeMode"; + const mediaQuery = window.matchMedia + ? window.matchMedia("(prefers-color-scheme: dark)") + : null; + + function normalize(mode) { + const normalized = (mode || "system").toString().toLowerCase(); + return normalized === "light" || normalized === "dark" || normalized === "system" + ? normalized + : "system"; + } + + function resolve(mode) { + if (mode === "system") { + return mediaQuery && mediaQuery.matches ? "dark" : "light"; + } + + return mode; + } + + function apply(mode) { + const normalized = normalize(mode); + const effectiveMode = resolve(normalized); + + document.documentElement.setAttribute("data-bs-theme", effectiveMode); + document.documentElement.setAttribute("data-theme-mode", normalized); + document.documentElement.style.colorScheme = effectiveMode; + localStorage.setItem(storageKey, normalized); + } + + function handleSystemThemeChange() { + const currentMode = normalize(localStorage.getItem(storageKey) || document.documentElement.getAttribute("data-theme-mode")); + if (currentMode === "system") { + apply(currentMode); + } + } + + if (mediaQuery) { + if (typeof mediaQuery.addEventListener === "function") { + mediaQuery.addEventListener("change", handleSystemThemeChange); + } + else if (typeof mediaQuery.addListener === "function") { + mediaQuery.addListener(handleSystemThemeChange); + } + } + + return { + init() { + apply(localStorage.getItem(storageKey) || document.documentElement.getAttribute("data-theme-mode")); + }, + setTheme(mode) { + apply(mode); + } + }; +})(); + +window.workTrackerTheme.init(); \ No newline at end of file
Date