Skip to content

Fix dropdown menu backgrounds and settings popup theme matching #570

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
WyattGorman wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Fix dropdown menu backgrounds and settings popup theme matching #570

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1254c63
fix(ui): Support theme switching and solid backgrounds in settings di…
google-labs-jules[bot] May 17, 2026
a9b3984
fix(ui): Support theme switching and solid backgrounds in settings di…
google-labs-jules[bot] May 17, 2026
4c2db8f
fix(ui): Support theme switching and solid backgrounds in dialogs/menus
google-labs-jules[bot] May 18, 2026
8db0278
fix: theme inheritance and transparent dropdown backgrounds in settings
google-labs-jules[bot] May 18, 2026
4b2d029
Merge pull request #1 from WyattGorman/fix-settings-dialog-theme-1076…
WyattGorman May 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 27 additions & 27 deletions webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>

<mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
<mat-label>Dark Mode</mat-label>
<mat-select [(ngModel)]="theme">
<mat-select panelClass="theme-select-panel" [(ngModel)]="theme">
<mat-option value="system">System</mat-option>
<mat-option value="dark">Dark</mat-option>
<mat-option value="light">Light</mat-option>
Expand All @@ -17,7 +17,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
<div class="flex flex-col mt-5 gt-md:flex-row">
<mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
<mat-label>Display Title</mat-label>
<mat-select [(ngModel)]="dashboardDisplay">
<mat-select panelClass="theme-select-panel" [(ngModel)]="dashboardDisplay">
<mat-option value="name">Name</mat-option>
<mat-option value="serial_id">Serial ID</mat-option>
<mat-option value="uuid">UUID</mat-option>
Expand All @@ -27,7 +27,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>

<mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pl-3">
<mat-label>Sort By</mat-label>
<mat-select [(ngModel)]="dashboardSort">
<mat-select panelClass="theme-select-panel" [(ngModel)]="dashboardSort">
<mat-option value="status_desc">Status (Failed First)</mat-option>
<mat-option value="status_asc">Status (Passed First)</mat-option>
<mat-option value="title_asc">Title (A-Z)</mat-option>
Expand All @@ -45,15 +45,15 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
<div class="flex flex-col mt-5 gt-md:flex-row">
<mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
<mat-label>Temperature</mat-label>
<mat-select [(ngModel)]="temperatureUnit">
<mat-select panelClass="theme-select-panel" [(ngModel)]="temperatureUnit">
<mat-option value="celsius">Celsius</mat-option>
<mat-option value="fahrenheit">Fahrenheit</mat-option>
</mat-select>
</mat-form-field>

<mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
<mat-label>Time Format</mat-label>
<mat-select [(ngModel)]="timeFormat">
<mat-select panelClass="theme-select-panel" [(ngModel)]="timeFormat">
<mat-option value="24">24-hour (15:00)</mat-option>
<mat-option value="12">12-hour (3:00 PM)</mat-option>
</mat-select>
Expand All @@ -63,7 +63,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
<div class="flex flex-col mt-5 gt-md:flex-row">
<mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
<mat-label>File Size</mat-label>
<mat-select [(ngModel)]="fileSizeSIUnits">
<mat-select panelClass="theme-select-panel" [(ngModel)]="fileSizeSIUnits">
<mat-option [value]=true>SI Units (GB)</mat-option>
<mat-option [value]=false>Binary Units (GiB)</mat-option>
</mat-select>
Expand All @@ -73,15 +73,15 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
<div class="flex flex-col mt-5 gt-md:flex-row">
<mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
<mat-label>Powered On Format</mat-label>
<mat-select [(ngModel)]="poweredOnHoursUnit">
<mat-select panelClass="theme-select-panel" [(ngModel)]="poweredOnHoursUnit">
<mat-option value="humanize">Humanize</mat-option>
<mat-option value="device_hours">Device Hours</mat-option>
</mat-select>
</mat-form-field>

<mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
<mat-label>Line stroke</mat-label>
<mat-select [(ngModel)]="lineStroke">
<mat-select panelClass="theme-select-panel" [(ngModel)]="lineStroke">
<mat-option value="smooth">Smooth</mat-option>
<mat-option value="straight">Straight</mat-option>
<mat-option value="stepline">Stepline</mat-option>
Expand All @@ -92,7 +92,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
<div class="flex flex-col mt-5 gt-md:flex-row">
<mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
<mat-label>Device Status - Thresholds</mat-label>
<mat-select [(ngModel)]=statusThreshold>
<mat-select panelClass="theme-select-panel" [(ngModel)]=statusThreshold>
<mat-option [value]=1>Smart</mat-option>
<mat-option [value]=2>Scrutiny</mat-option>
<mat-option [value]=3>Both</mat-option>
Expand All @@ -104,7 +104,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
<div class="flex flex-col mt-5 gt-md:flex-row">
<mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
<mat-label>Notify - Level</mat-label>
<mat-select [(ngModel)]=notifyLevel>
<mat-select panelClass="theme-select-panel" [(ngModel)]=notifyLevel>
<mat-option [value]=1>Warn</mat-option>
<mat-option [value]=2>Fail</mat-option>
</mat-select>
Expand All @@ -115,7 +115,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
<div class="flex flex-col mt-5 gt-md:flex-row">
<mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
<mat-label>Notify - Filter Attributes</mat-label>
<mat-select [(ngModel)]=statusFilterAttributes>
<mat-select panelClass="theme-select-panel" [(ngModel)]=statusFilterAttributes>
<mat-option [value]=0>All</mat-option>
<mat-option [value]=1>Critical</mat-option>
</mat-select>
Expand All @@ -125,7 +125,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
<div class="flex flex-col mt-5 gt-md:flex-row">
<mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
<mat-label>Repeat Notifications</mat-label>
<mat-select [(ngModel)]=repeatNotifications>
<mat-select panelClass="theme-select-panel" [(ngModel)]=repeatNotifications>
<mat-option [value]=true>Always</mat-option>
<mat-option [value]=false>Only when the value has changed</mat-option>
</mat-select>
Expand All @@ -135,7 +135,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
<div class="flex flex-col mt-5 gt-md:flex-row">
<mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
<mat-label>Retrieve SCT Temperature History</mat-label>
<mat-select [(ngModel)]=retrieveSCTTemperatureHistory>
<mat-select panelClass="theme-select-panel" [(ngModel)]=retrieveSCTTemperatureHistory>
<mat-option [value]=true>Enabled</mat-option>
<mat-option [value]=false>Disabled</mat-option>
</mat-select>
Expand All @@ -146,7 +146,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
<div class="flex flex-col mt-5 gt-md:flex-row">
<mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
<mat-label>Notify on Collector smartctl Errors</mat-label>
<mat-select [(ngModel)]="notifyOnCollectorError">
<mat-select panelClass="theme-select-panel" [(ngModel)]="notifyOnCollectorError">
<mat-option [value]="true">Enabled</mat-option>
<mat-option [value]="false">Disabled</mat-option>
</mat-select>
Expand All @@ -158,7 +158,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
<div class="flex flex-col mt-5 gt-md:flex-row">
<mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
<mat-label>Notify on Missed Collector Ping</mat-label>
<mat-select [(ngModel)]="notifyOnMissedPing">
<mat-select panelClass="theme-select-panel" [(ngModel)]="notifyOnMissedPing">
<mat-option [value]="true">Enabled</mat-option>
<mat-option [value]="false">Disabled</mat-option>
</mat-select>
Expand Down Expand Up @@ -215,7 +215,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
<div class="flex flex-col mt-5 gt-md:flex-row">
<mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
<mat-label>Heartbeat Notifications</mat-label>
<mat-select [(ngModel)]="heartbeatEnabled">
<mat-select panelClass="theme-select-panel" [(ngModel)]="heartbeatEnabled">
<mat-option [value]="true">Enabled</mat-option>
<mat-option [value]="false">Disabled</mat-option>
</mat-select>
Expand All @@ -235,7 +235,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
<div class="flex flex-col mt-5 gt-md:flex-row">
<mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
<mat-label>Uptime Kuma Push Monitor</mat-label>
<mat-select [(ngModel)]="uptimeKumaEnabled">
<mat-select panelClass="theme-select-panel" [(ngModel)]="uptimeKumaEnabled">
<mat-option [value]="true">Enabled</mat-option>
<mat-option [value]="false">Disabled</mat-option>
</mat-select>
Expand Down Expand Up @@ -291,7 +291,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
<div class="flex flex-col gt-md:flex-row">
<mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
<mat-label>Scheduled Reports</mat-label>
<mat-select [(ngModel)]="reportEnabled">
<mat-select panelClass="theme-select-panel" [(ngModel)]="reportEnabled">
<mat-option [value]="true">Enabled</mat-option>
<mat-option [value]="false">Disabled</mat-option>
</mat-select>
Expand All @@ -303,7 +303,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
<div class="flex flex-col mt-5 gt-md:flex-row">
<mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
<mat-label>Daily Report</mat-label>
<mat-select [(ngModel)]="reportDailyEnabled">
<mat-select panelClass="theme-select-panel" [(ngModel)]="reportDailyEnabled">
<mat-option [value]="true">Enabled</mat-option>
<mat-option [value]="false">Disabled</mat-option>
</mat-select>
Expand All @@ -319,15 +319,15 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
<div class="flex flex-col mt-5 gt-md:flex-row">
<mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
<mat-label>Weekly Report</mat-label>
<mat-select [(ngModel)]="reportWeeklyEnabled">
<mat-select panelClass="theme-select-panel" [(ngModel)]="reportWeeklyEnabled">
<mat-option [value]="true">Enabled</mat-option>
<mat-option [value]="false">Disabled</mat-option>
</mat-select>
</mat-form-field>

<mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pl-3" *ngIf="reportWeeklyEnabled">
<mat-label>Day of Week</mat-label>
<mat-select [(ngModel)]="reportWeeklyDay">
<mat-select panelClass="theme-select-panel" [(ngModel)]="reportWeeklyDay">
<mat-option [value]="0">Sunday</mat-option>
<mat-option [value]="1">Monday</mat-option>
<mat-option [value]="2">Tuesday</mat-option>
Expand All @@ -347,7 +347,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
<div class="flex flex-col mt-5 gt-md:flex-row">
<mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
<mat-label>Monthly Report</mat-label>
<mat-select [(ngModel)]="reportMonthlyEnabled">
<mat-select panelClass="theme-select-panel" [(ngModel)]="reportMonthlyEnabled">
<mat-option [value]="true">Enabled</mat-option>
<mat-option [value]="false">Disabled</mat-option>
</mat-select>
Expand All @@ -368,7 +368,7 @@ <h2 mat-dialog-title>Scrutiny Settings</h2>
<div class="flex flex-col mt-5 gt-md:flex-row">
<mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
<mat-label>PDF Generation</mat-label>
<mat-select [(ngModel)]="reportPDFEnabled">
<mat-select panelClass="theme-select-panel" [(ngModel)]="reportPDFEnabled">
<mat-option [value]="true">Enabled</mat-option>
<mat-option [value]="false">Disabled</mat-option>
</mat-select>
Expand Down Expand Up @@ -450,7 +450,7 @@ <h4 class="mb-4 font-medium">Add New Override</h4>
<div class="flex flex-wrap gap-4">
<mat-form-field class="flex-1 min-w-[120px]">
<mat-label>Protocol</mat-label>
<mat-select [(ngModel)]="newOverride.protocol">
<mat-select panelClass="theme-select-panel" [(ngModel)]="newOverride.protocol">
<mat-option *ngFor="let p of protocols" [value]="p">{{p}}</mat-option>
</mat-select>
</mat-form-field>
Expand All @@ -463,15 +463,15 @@ <h4 class="mb-4 font-medium">Add New Override</h4>

<mat-form-field class="flex-1 min-w-[120px]">
<mat-label>Action</mat-label>
<mat-select [(ngModel)]="newOverride.action">
<mat-select panelClass="theme-select-panel" [(ngModel)]="newOverride.action">
<mat-option *ngFor="let a of actions" [value]="a.value">{{a.label}}</mat-option>
</mat-select>
</mat-form-field>

<mat-form-field class="flex-1 min-w-[120px]"
*ngIf="newOverride.action === 'force_status'">
<mat-label>Status</mat-label>
<mat-select [(ngModel)]="newOverride.status">
<mat-select panelClass="theme-select-panel" [(ngModel)]="newOverride.status">
<mat-option *ngFor="let s of statuses" [value]="s">{{s}}</mat-option>
</mat-select>
</mat-form-field>
Expand Down Expand Up @@ -588,7 +588,7 @@ <h4 class="mb-4 font-medium">Add Notification Channel</h4>

<mat-form-field class="w-full mb-2">
<mat-label>Service</mat-label>
<mat-select [(ngModel)]="selectedService">
<mat-select panelClass="theme-select-panel" [(ngModel)]="selectedService">
<mat-option value="custom">Custom Shoutrrr URL</mat-option>
<mat-option value="smtp">SMTP Email</mat-option>
<mat-option value="discord">Discord</mat-option>
Expand Down
4 changes: 2 additions & 2 deletions webapp/frontend/src/app/layout/common/detail-settings/detail-settings.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ <h2 mat-dialog-title>Device Settings</h2>
<div class="flex flex-col gt-xs:flex-row">
<mat-form-field class="flex-auto gt-xs:pr-3">
<mat-label>Threshold Data</mat-label>
<mat-select [value]="'scrutiny'">
<mat-select panelClass="theme-select-panel" [value]="'scrutiny'">
<mat-option value="scrutiny">Scrutiny</mat-option>
<mat-option value="name" disabled>Manufacturer</mat-option>
</mat-select>
Expand All @@ -23,7 +23,7 @@ <h2 mat-dialog-title>Device Settings</h2>
<div class="flex flex-col gt-xs:flex-row">
<mat-form-field class="flex-auto gt-xs:pr-3">
<mat-label>Notifications</mat-label>
<mat-select [(value)]="muted">
<mat-select panelClass="theme-select-panel" [(value)]="muted">
<mat-option [value]="false">Enabled</mat-option>
<mat-option [value]="true">Disabled</mat-option>
</mat-select>
Expand Down
3 changes: 2 additions & 1 deletion webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -442,7 +442,8 @@ export class DashboardComponent implements OnInit, OnDestroy
}

openDialog(): void {
const dialogRef = this.dialog.open(DashboardSettingsComponent, {width: '800px', maxWidth: '95vw'});
const theme = document.body.classList.contains('treo-theme-dark') ? 'treo-theme-dark' : 'treo-theme-light';
const dialogRef = this.dialog.open(DashboardSettingsComponent, {width: '800px', maxWidth: '95vw', panelClass: [theme, 'settings-dialog-panel']});

dialogRef.afterClosed().subscribe();
}
Expand Down
2 changes: 2 additions & 0 deletions webapp/frontend/src/app/modules/detail/detail.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -729,9 +729,11 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
if (!this.device) return;

const globalMissedPingTimeout = this.config?.metrics?.missed_ping_timeout_minutes || 15;
const theme = document.body.classList.contains('treo-theme-dark') ? 'treo-theme-dark' : 'treo-theme-light';

const dialogRef = this.dialog.open(DetailSettingsComponent, {
width: '600px',
panelClass: [theme, 'settings-dialog-panel'],
data: {
curMuted: this.device.muted,
curLabel: this.device.label,
Expand Down
3 changes: 2 additions & 1 deletion webapp/frontend/src/app/modules/mobile-settings/mobile-settings.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,12 @@ export class MobileSettingsComponent {
constructor(private readonly dialog: MatDialog) {}

openSettings(): void {
const theme = document.body.classList.contains('treo-theme-dark') ? 'treo-theme-dark' : 'treo-theme-light';
this.dialog.open(DashboardSettingsComponent, {
width: '100vw',
maxWidth: '100vw',
height: '100vh',
panelClass: 'mobile-settings-dialog'
panelClass: ['mobile-settings-dialog', theme, 'settings-dialog-panel']
});
}
}
Loading