fix terminal wrapper global color, search contract color, popover color

cisco-open · Jan 31, 2025 · 30200e3 · 30200e3
1 parent a7d5518
commit 30200e3
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 21 deletions.
diff --git a/...rc/app/modules/core/components/ms-popover/components/ms-popover/ms-popover.component.scss b/...rc/app/modules/core/components/ms-popover/components/ms-popover/ms-popover.component.scss
@@ -17,7 +17,7 @@
 .tooltip-container {
 	position: relative;
 	background-color: var(--tooltip);
-	color: var(--terminal-color);
+	color: var(--popover-color);
 	border-radius: 6px;
 	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 

diff --git a/...ents/ms-terminal-messages-history-dialog/ms-terminal-messages-history-dialog.component.ts b/...ents/ms-terminal-messages-history-dialog/ms-terminal-messages-history-dialog.component.ts
@@ -122,16 +122,9 @@ export class MsTerminalMessagesHistoryDialogComponent implements OnInit, OnDestr
 			});
 	}
 
-	private search(value: string) {
+	private search(value: string): void {
 		this.searchAddon.findNext(value, {
-			decorations: {
-				matchBackground: '#FFFF00',
-				matchBorder: '#FFFF00',
-				matchOverviewRuler: '#FFFF00',
-				activeMatchBackground: '#FFFF00',
-				activeMatchBorder: '#FFFF00',
-				activeMatchColorOverviewRuler: '#FFFF00'
-			}
+			decorations: this.terminalStylesService.getSearchDecorationOptions()
 		});
 	}
 

diff --git a/...l/components/ms-terminal-style-configurator/ms-terminal-style-configurator.component.scss b/...l/components/ms-terminal-style-configurator/ms-terminal-style-configurator.component.scss
@@ -30,9 +30,7 @@
 		.terminal-wrapper {
 			display: flex;
 			width: 90%;
-
 			height: 460px;
-
 			border: 10px solid;
 			border-radius: 10px;
 		}

diff --git a/...shared/components/ms-terminal/components/ms-terminal-xterm/ms-terminal-xterm.component.ts b/...shared/components/ms-terminal/components/ms-terminal-xterm/ms-terminal-xterm.component.ts
@@ -65,6 +65,7 @@ export class MsTerminalXtermComponent implements OnInit, AfterViewInit, OnDestro
 		this.terminal.open(this.terminalDiv.nativeElement);
 		this.setupResizeObserver();
 
+		// Forward typed data to the WebSocket
 		this.terminal.onData((data) => {
 			this.terminalWebSocketService.sendMessage(data);
 		});
@@ -110,17 +111,9 @@ export class MsTerminalXtermComponent implements OnInit, AfterViewInit, OnDestro
 		this.terminal.dispose();
 	}
 
-	// Expose methods for search, clear, scroll, etc.
 	public search(value: string): void {
 		this.searchAddon.findNext(value, {
-			decorations: {
-				matchBackground: '#FFFF00',
-				matchBorder: '#FFFF00',
-				matchOverviewRuler: '#FFFF00',
-				activeMatchBackground: '#FFFF00',
-				activeMatchBorder: '#FFFF00',
-				activeMatchColorOverviewRuler: '#FFFF00'
-			}
+			decorations: this.terminalStylesService.getSearchDecorationOptions()
 		});
 	}
 

diff --git a/frontend/src/app/modules/shared/components/ms-terminal/services/terminal-styles.service.ts b/frontend/src/app/modules/shared/components/ms-terminal/services/terminal-styles.service.ts
@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { ISearchDecorationOptions } from '@xterm/addon-search';
 import { ITerminalOptions, ITheme, Terminal } from '@xterm/xterm';
 import { DEFAULT_TERMINAL_STYLES } from '../models/default-terminal-styles.const';
 import { DefaultTerminalStyles } from '../models/default-terminal-styles.interface';
@@ -14,6 +15,7 @@ export class TerminalStylesService {
 
 	saveTerminalStyles(styles: DefaultTerminalStyles): void {
 		localStorage.setItem(this.TERMINAL_STYLES_STORAGE_KEY, JSON.stringify(styles));
+		document.documentElement.style.setProperty('--terminal-color', styles.background);
 	}
 
 	restoreDefaultStyles(): void {
@@ -23,6 +25,8 @@ export class TerminalStylesService {
 	createTerminalInstance(optionsOverrides?: Partial<ITerminalOptions>, themeOverrides?: Partial<ITheme>): Terminal {
 		const savedStyles = this.getTerminalStyles();
 
+		document.documentElement.style.setProperty('--terminal-color', savedStyles.background);
+
 		const theme = {
 			background: savedStyles.background,
 			foreground: savedStyles.foreground,
@@ -45,4 +49,40 @@ export class TerminalStylesService {
 
 		return new Terminal(options);
 	}
+
+	getSearchDecorationOptions(): ISearchDecorationOptions {
+		const savedStyles = this.getTerminalStyles();
+		const highlightColor = this.getContrastColor(savedStyles.background);
+
+		return {
+			matchBackground: highlightColor,
+			matchBorder: highlightColor,
+			matchOverviewRuler: highlightColor,
+			activeMatchBackground: highlightColor,
+			activeMatchBorder: highlightColor,
+			activeMatchColorOverviewRuler: highlightColor
+		};
+	}
+
+	private getContrastColor(hex: string): string {
+		let c = hex.startsWith('#') ? hex.substring(1) : hex;
+		// Convert 3-digit hex to 6-digit
+		if (c.length === 3) {
+			c = c
+				.split('')
+				.map((x) => x + x)
+				.join('');
+		}
+		const rgb = parseInt(c, 16);
+		const r = (rgb >> 16) & 0xff;
+		const g = (rgb >> 8) & 0xff;
+		const b = rgb & 0xff;
+
+		// Simple luminance approximation
+		const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
+
+		// If background is dark, return a bright highlight color;
+		// otherwise use a darker color that contrasts against light backgrounds.
+		return luminance < 128 ? '#FFFF00' : '#FF8C00';
+	}
 }
diff --git a/frontend/src/app/styles/theme/_ms-theme-palettes.scss b/frontend/src/app/styles/theme/_ms-theme-palettes.scss
@@ -166,6 +166,7 @@ $ms-theme-variables: (
 	),
 	tooltip: #373c42,
 	terminal-color: #d0d4d9,
+	popover-color: #d0d4d9,
 	login-title: #27a7de,
 	header: (
 		left: #3fd9b6,