diff --git a/CHANGELOG.md b/CHANGELOG.md index dca5c218b..693baa9f5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -40,6 +40,8 @@ Plugin developers: - add 'homebridge name' setting to settings page - migrate bootstrap from `v4` to `v5` - fix plugin config/bridge screens for certain plugins +- add lighting mode option for terminal and log widgets + - only available when the UI is already in light mode ### Other Changes diff --git a/ui/src/app/modules/status/widget-control/widget-control.component.html b/ui/src/app/modules/status/widget-control/widget-control.component.html index 282236159..fe80082ca 100644 --- a/ui/src/app/modules/status/widget-control/widget-control.component.html +++ b/ui/src/app/modules/status/widget-control/widget-control.component.html @@ -83,7 +83,17 @@
{{ 'status.widget.title_manage_widget' | translate }} - } @case ('TerminalWidgetComponent') { + @if (this.isLightMode) { +
  • + +
    + +
    +
    • + } } @case ('TerminalWidgetComponent') {
  • @@ -104,7 +114,17 @@
    {{ 'status.widget.title_manage_widget' | translate }}
    • - } @case ('ClockWidgetComponent') { + @if (this.isLightMode) { +
  • + +
    + +
    +
    • + } } @case ('ClockWidgetComponent') {
  • diff --git a/ui/src/app/modules/status/widget-control/widget-control.component.ts b/ui/src/app/modules/status/widget-control/widget-control.component.ts index fdf096d88..a40db23de 100644 --- a/ui/src/app/modules/status/widget-control/widget-control.component.ts +++ b/ui/src/app/modules/status/widget-control/widget-control.component.ts @@ -15,6 +15,7 @@ import { } from 'rxjs/operators' import { ApiService } from '@/app/core/api.service' +import { SettingsService } from '@/app/core/settings.service' import { environment } from '@/environments/environment' @Component({ @@ -32,6 +33,7 @@ export class WidgetControlComponent implements OnInit { $activeModal = inject(NgbActiveModal) private $api = inject(ApiService) private $http = inject(HttpClient) + private $settings = inject(SettingsService) private $translate = inject(TranslateService) @Input() widget: any @@ -72,6 +74,7 @@ export class WidgetControlComponent implements OnInit { ] public networkInterfaces: string[] = [] + public isLightMode: boolean constructor() {} @@ -96,6 +99,7 @@ export class WidgetControlComponent implements OnInit { public searchCountryCodeFormatter = (result: any) => `${result.name}, ${result.country}` ngOnInit() { + this.isLightMode = this.$settings.actualLightingMode === 'light' if (this.widget.component === 'HomebridgeLogsWidgetComponent' || this.widget.component === 'TerminalWidgetComponent') { if (!this.widget.fontWeight) { this.widget.fontWeight = '400' @@ -103,6 +107,9 @@ export class WidgetControlComponent implements OnInit { if (!this.widget.fontSize) { this.widget.fontSize = 15 } + if (!this.widget.theme) { + this.widget.theme = 'dark' + } } if (this.widget.component === 'NetworkWidgetComponent') { // Get a list of active network interfaces from the settings diff --git a/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.html b/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.html index 6c45fe296..ed0bbd2ee 100644 --- a/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.html +++ b/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.html @@ -1,7 +1,14 @@ -
    +
    diff --git a/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts b/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts index ba538bd4c..0836948dd 100644 --- a/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts +++ b/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts @@ -5,6 +5,7 @@ import { Subject } from 'rxjs' import { ITerminalOptions } from 'xterm' import { LogService } from '@/app/core/log.service' +import { SettingsService } from '@/app/core/settings.service' @Component({ templateUrl: './homebridge-logs-widget.component.html', @@ -17,6 +18,7 @@ import { LogService } from '@/app/core/log.service' }) export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy { private $log = inject(LogService) + private $settings = inject(SettingsService) readonly widgetContainerElement = viewChild('widgetcontainer') readonly titleElement = viewChild('terminaltitle') @@ -30,19 +32,32 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy { private fontSize = 15 private fontWeight: ITerminalOptions['fontWeight'] = '400' + public theme: 'dark' | 'light' = 'dark' constructor() {} ngOnInit() { this.fontSize = this.widget.fontSize || 15 this.fontWeight = this.widget.fontWeight || 400 + if (this.$settings.actualLightingMode === 'dark') { + this.widget.theme = 'dark' + } + this.theme = this.widget.theme || 'dark' setTimeout(() => { this.$log.startTerminal(this.termTarget(), { cursorBlink: false, - theme: { - background: '#2b2b2b', - }, + theme: this.theme !== 'light' + ? { + background: '#2b2b2b', + } + : { + background: '#00000000', + foreground: '#2b2b2b', + cursor: '#d2d2d2', + selection: '#d2d2d2', + }, + allowTransparency: this.theme === 'light', fontSize: this.fontSize, fontWeight: this.fontWeight, }, this.resizeEvent) @@ -56,11 +71,34 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy { this.configureEvent.subscribe({ next: () => { - if (this.widget.fontSize !== this.fontSize || this.widget.fontWeight !== this.fontWeight) { + let changed = false + if (this.widget.fontSize !== this.fontSize) { this.fontSize = this.widget.fontSize - this.fontWeight = this.widget.fontWeight this.$log.term.options.fontSize = this.widget.fontSize + changed = true + } + if (this.widget.fontWeight !== this.fontWeight) { + this.fontWeight = this.widget.fontWeight this.$log.term.options.fontWeight = this.widget.fontWeight + changed = true + } + if (this.widget.theme !== this.theme) { + this.theme = this.widget.theme + this.$log.term.options.theme = this.theme !== 'light' + ? { + background: '#2b2b2b', + } + : { + background: '#00000000', + foreground: '#2b2b2b', + cursor: '#d2d2d2', + selection: '#d2d2d2', + } + this.$log.term.options.allowTransparency = this.theme === 'light' + changed = true + } + + if (changed) { this.resizeEvent.next(undefined) setTimeout(() => { this.$log.term.scrollToBottom() diff --git a/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.html b/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.html index 929395d62..26d34c262 100644 --- a/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.html +++ b/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.html @@ -1,7 +1,14 @@ -
    +
    diff --git a/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts b/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts index 278c8c475..e9fd44fc9 100644 --- a/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts +++ b/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts @@ -4,6 +4,7 @@ import { TranslatePipe } from '@ngx-translate/core' import { Subject } from 'rxjs' import { ITerminalOptions } from 'xterm' +import { SettingsService } from '@/app/core/settings.service' import { TerminalService } from '@/app/core/terminal.service' @Component({ @@ -17,6 +18,7 @@ import { TerminalService } from '@/app/core/terminal.service' }) export class TerminalWidgetComponent implements OnInit, OnDestroy { private $terminal = inject(TerminalService) + private $settings = inject(SettingsService) readonly widgetContainerElement = viewChild('widgetcontainer') readonly titleElement = viewChild('terminaltitle') @@ -30,19 +32,32 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy { private fontSize = 15 private fontWeight: ITerminalOptions['fontWeight'] = '400' + public theme: 'dark' | 'light' = 'dark' constructor() {} ngOnInit() { this.fontSize = this.widget.fontSize || 15 this.fontWeight = this.widget.fontWeight || 400 + if (this.$settings.actualLightingMode === 'dark') { + this.widget.theme = 'dark' + } + this.theme = this.widget.theme || 'dark' setTimeout(() => { this.$terminal.startTerminal(this.termTarget(), { cursorBlink: false, - theme: { - background: '#2b2b2b', - }, + theme: this.theme !== 'light' + ? { + background: '#2b2b2b', + } + : { + background: '#00000000', + foreground: '#2b2b2b', + cursor: '#d2d2d2', + selection: '#d2d2d2', + }, + allowTransparency: this.theme === 'light', fontSize: this.fontSize, fontWeight: this.fontWeight, }, this.resizeEvent) @@ -56,11 +71,34 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy { this.configureEvent.subscribe({ next: () => { - if (this.widget.fontSize !== this.fontSize || this.widget.fontWeight !== this.fontWeight) { + let changed = false + if (this.widget.fontSize !== this.fontSize) { this.fontSize = this.widget.fontSize - this.fontWeight = this.widget.fontWeight this.$terminal.term.options.fontSize = this.widget.fontSize + changed = true + } + if (this.widget.fontWeight !== this.fontWeight) { + this.fontWeight = this.widget.fontWeight this.$terminal.term.options.fontWeight = this.widget.fontWeight + changed = true + } + if (this.widget.theme !== this.theme) { + this.theme = this.widget.theme + this.$terminal.term.options.theme = this.theme !== 'light' + ? { + background: '#2b2b2b', + } + : { + background: '#00000000', + foreground: '#2b2b2b', + cursor: '#d2d2d2', + selection: '#d2d2d2', + } + this.$terminal.term.options.allowTransparency = this.theme === 'light' + changed = true + } + + if (changed) { this.resizeEvent.next(undefined) setTimeout(() => { this.$terminal.term.scrollToBottom()