This is an automated email from the ASF dual-hosted git repository.
rfellows pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/nifi.git
The following commit(s) were added to refs/heads/main by this push:
new ee00299888 NIFI-15033 selected styles applied to appearance and
animations global menus (#10364)
ee00299888 is described below
commit ee00299888cb3df89331ce8838c2c42c3ba6382e
Author: Scott Aslan <[email protected]>
AuthorDate: Fri Oct 3 08:06:35 2025 -0400
NIFI-15033 selected styles applied to appearance and animations global
menus (#10364)
This closes #10364
---
.../src/app/app.component.ts | 6 +--
.../apps/nifi-registry/src/app/app.component.ts | 6 +--
.../src/app/ui/header/_header.component-theme.scss | 28 +++++++++++++
.../src/app/ui/header/header.component.html | 36 +++++++++++++---
.../src/app/ui/header/header.component.ts | 4 +-
.../frontend/apps/nifi/src/app/app.component.ts | 6 +--
.../navigation/_navigation.component-theme.scss | 28 +++++++++++++
.../ui/common/navigation/navigation.component.html | 48 ++++++++++++++++------
.../ui/common/navigation/navigation.component.ts | 4 +-
.../src/app/app.component.ts | 6 +--
.../apps/update-attribute/src/app/app.component.ts | 6 +--
11 files changed, 141 insertions(+), 37 deletions(-)
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/app.component.ts
b/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/app.component.ts
index d8348f1935..9643c7a4ca 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/app.component.ts
+++
b/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/app.component.ts
@@ -16,7 +16,7 @@
*/
import { Component, inject } from '@angular/core';
-import { Storage, ThemingService } from '@nifi/shared';
+import { OS_SETTING, Storage, ThemingService } from '@nifi/shared';
@Component({
selector: 'nifi-jolt-transform-json-ui',
@@ -31,7 +31,7 @@ export class AppComponent {
title = 'nifi-jolt-transform-json-ui';
constructor() {
- let theme = this.storage.getItem('theme');
+ let theme = this.storage.getItem('theme') ?
this.storage.getItem('theme') : OS_SETTING;
// Initially check if dark mode is enabled on system
const darkModeOn = window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -42,7 +42,7 @@ export class AppComponent {
if (window.matchMedia) {
// Watch for changes of the preference
window.matchMedia('(prefers-color-scheme: dark)').addListener((e)
=> {
- theme = this.storage.getItem('theme');
+ theme = this.storage.getItem('theme') ?
this.storage.getItem('theme') : OS_SETTING;
this.themingService.toggleTheme(e.matches, theme);
});
}
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/app.component.ts
b/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/app.component.ts
index b63b3b69db..35b972ae19 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/app.component.ts
+++
b/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/app.component.ts
@@ -16,7 +16,7 @@
*/
import { Component, inject } from '@angular/core';
-import { ThemingService, Storage } from '@nifi/shared';
+import { ThemingService, Storage, OS_SETTING } from '@nifi/shared';
@Component({
selector: 'nifi-registry-app-root',
@@ -31,7 +31,7 @@ export class AppComponent {
title = 'nifi-registry';
constructor() {
- let theme = this.storage.getItem('theme');
+ let theme = this.storage.getItem('theme') ?
this.storage.getItem('theme') : OS_SETTING;
// Initially check if dark mode is enabled on system
const darkModeOn = window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -42,7 +42,7 @@ export class AppComponent {
if (window.matchMedia) {
// Watch for changes of the preference
window.matchMedia('(prefers-color-scheme:
dark)').addEventListener('change', (e) => {
- theme = this.storage.getItem('theme');
+ theme = this.storage.getItem('theme') ?
this.storage.getItem('theme') : OS_SETTING;
this.themingService.toggleTheme(e.matches, theme);
});
}
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/ui/header/_header.component-theme.scss
b/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/ui/header/_header.component-theme.scss
index a8dd6f0751..66134360bb 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/ui/header/_header.component-theme.scss
+++
b/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/ui/header/_header.component-theme.scss
@@ -44,4 +44,32 @@
opacity: 0.6;
}
}
+
+ .global-menu-item {
+ &.selected {
+ @include mat.menu-overrides(
+ (
+ item-icon-color: var(--mat-sys-primary),
+ item-label-text-color: var(--mat-sys-primary)
+ )
+ );
+
+ .fa {
+ color: var(--mat-sys-primary);
+ }
+ }
+
+ &.selected:hover {
+ @include mat.menu-overrides(
+ (
+ item-icon-color: var(--mat-sys-primary),
+ item-label-text-color: var(--mat-sys-primary)
+ )
+ );
+
+ .fa {
+ color: var(--mat-sys-primary);
+ }
+ }
+ }
}
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/ui/header/header.component.html
b/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/ui/header/header.component.html
index 519111c38a..c990052ac0 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/ui/header/header.component.html
+++
b/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/ui/header/header.component.html
@@ -69,7 +69,11 @@
</button>
</mat-menu>
<mat-menu #theming="matMenu" xPosition="before">
- <button mat-menu-item class="global-menu-item"
(click)="toggleTheme(LIGHT_THEME)">
+ <button
+ mat-menu-item
+ class="global-menu-item"
+ [class.selected]="theme === LIGHT_THEME"
+ (click)="toggleTheme(LIGHT_THEME)">
@if (theme === LIGHT_THEME) {
<i class="fa fa-check primary-color mr-2"></i>
}
@@ -78,7 +82,11 @@
}
Light
</button>
- <button mat-menu-item class="global-menu-item"
(click)="toggleTheme(DARK_THEME)">
+ <button
+ mat-menu-item
+ class="global-menu-item"
+ [class.selected]="theme === DARK_THEME"
+ (click)="toggleTheme(DARK_THEME)">
@if (theme === DARK_THEME) {
<i class="fa fa-check primary-color mr-2"></i>
}
@@ -87,7 +95,11 @@
}
Dark
</button>
- <button mat-menu-item class="global-menu-item"
(click)="toggleTheme(OS_SETTING)">
+ <button
+ mat-menu-item
+ class="global-menu-item"
+ [class.selected]="theme === OS_SETTING"
+ (click)="toggleTheme(OS_SETTING)">
@if (theme === OS_SETTING || theme === null) {
<i class="fa fa-check primary-color mr-2"></i>
}
@@ -98,7 +110,11 @@
</button>
</mat-menu>
<mat-menu #animations="matMenu" xPosition="before">
- <button mat-menu-item class="global-menu-item"
(click)="toggleAnimations('false')">
+ <button
+ mat-menu-item
+ class="global-menu-item"
+ [class.selected]="disableAnimations === 'false'"
+ (click)="toggleAnimations('false')">
@if (disableAnimations === 'false') {
<i class="fa fa-check primary-color mr-2"></i>
} @else {
@@ -106,7 +122,11 @@
}
Enabled
</button>
- <button mat-menu-item class="global-menu-item"
(click)="toggleAnimations('true')">
+ <button
+ mat-menu-item
+ class="global-menu-item"
+ [class.selected]="disableAnimations === 'true'"
+ (click)="toggleAnimations('true')">
@if (disableAnimations === 'true') {
<i class="fa fa-check primary-color mr-2"></i>
} @else {
@@ -114,7 +134,11 @@
}
Disabled
</button>
- <button mat-menu-item class="global-menu-item"
(click)="toggleAnimations()">
+ <button
+ mat-menu-item
+ class="global-menu-item"
+ [class.selected]="disableAnimations === null"
+ (click)="toggleAnimations()">
@if (disableAnimations === null) {
<i class="fa fa-check primary-color mr-2"></i>
} @else {
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/ui/header/header.component.ts
b/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/ui/header/header.component.ts
index 9b800d83ca..477b9e672d 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/ui/header/header.component.ts
+++
b/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/ui/header/header.component.ts
@@ -51,14 +51,14 @@ export class HeaderComponent implements OnInit {
constructor() {
this.darkModeOn = window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;
- this.theme = this.storage.getItem('theme');
+ this.theme = this.storage.getItem('theme') ?
this.storage.getItem('theme') : OS_SETTING;
this.disableAnimations = this.storage.getItem('disable-animations');
if (window.matchMedia) {
// Watch for changes of the preference
window.matchMedia('(prefers-color-scheme: dark)').addListener((e)
=> {
this.darkModeOn = e.matches;
- this.theme = this.storage.getItem('theme');
+ this.theme = this.storage.getItem('theme') ?
this.storage.getItem('theme') : OS_SETTING;
});
}
}
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/app.component.ts
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/app.component.ts
index e1d4f434d0..8871ddb383 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/app.component.ts
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/app.component.ts
@@ -25,7 +25,7 @@ import {
Router
} from '@angular/router';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Storage, ThemingService } from '@nifi/shared';
+import { OS_SETTING, Storage, ThemingService } from '@nifi/shared';
import { MatDialog } from '@angular/material/dialog';
import { NiFiState } from './state';
import { Store } from '@ngrx/store';
@@ -102,7 +102,7 @@ export class AppComponent implements OnDestroy {
}
});
- let theme = this.storage.getItem('theme');
+ let theme = this.storage.getItem('theme') ?
this.storage.getItem('theme') : OS_SETTING;
// Initially check if dark mode is enabled on system
const darkModeOn = window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -113,7 +113,7 @@ export class AppComponent implements OnDestroy {
if (window.matchMedia) {
// Watch for changes of the preference
window.matchMedia('(prefers-color-scheme: dark)').addListener((e)
=> {
- theme = this.storage.getItem('theme');
+ theme = this.storage.getItem('theme') ?
this.storage.getItem('theme') : OS_SETTING;
this.themingService.toggleTheme(e.matches, theme);
});
}
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
index e4d0ca5190..57c7dcce22 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
@@ -44,4 +44,32 @@
opacity: 0.6;
}
}
+
+ .global-menu-item {
+ &.selected {
+ @include mat.menu-overrides(
+ (
+ item-icon-color: var(--mat-sys-primary),
+ item-label-text-color: var(--mat-sys-primary)
+ )
+ );
+
+ .fa {
+ color: var(--mat-sys-primary);
+ }
+ }
+
+ &.selected:hover {
+ @include mat.menu-overrides(
+ (
+ item-icon-color: var(--mat-sys-primary),
+ item-label-text-color: var(--mat-sys-primary)
+ )
+ );
+
+ .fa {
+ color: var(--mat-sys-primary);
+ }
+ }
+ }
}
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/navigation.component.html
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/navigation.component.html
index b78ecb8420..42c83d6a74 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/navigation.component.html
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/navigation.component.html
@@ -167,27 +167,39 @@
</button>
</mat-menu>
<mat-menu #theming="matMenu" xPosition="before">
- <button mat-menu-item class="global-menu-item"
(click)="toggleTheme(LIGHT_THEME)">
+ <button
+ mat-menu-item
+ class="global-menu-item"
+ [class.selected]="theme === LIGHT_THEME"
+ (click)="toggleTheme(LIGHT_THEME)">
@if (theme === LIGHT_THEME) {
- <i class="fa fa-check primary-color mr-2"></i>
+ <i class="fa fa-check mr-2"></i>
}
@if (theme !== LIGHT_THEME) {
<i class="fa mr-2"></i>
}
Light
</button>
- <button mat-menu-item class="global-menu-item"
(click)="toggleTheme(DARK_THEME)">
+ <button
+ mat-menu-item
+ class="global-menu-item"
+ [class.selected]="theme === DARK_THEME"
+ (click)="toggleTheme(DARK_THEME)">
@if (theme === DARK_THEME) {
- <i class="fa fa-check primary-color mr-2"></i>
+ <i class="fa fa-check mr-2"></i>
}
@if (theme !== DARK_THEME) {
<i class="fa mr-2"></i>
}
Dark
</button>
- <button mat-menu-item class="global-menu-item"
(click)="toggleTheme(OS_SETTING)">
+ <button
+ mat-menu-item
+ class="global-menu-item"
+ [class.selected]="theme === OS_SETTING"
+ (click)="toggleTheme(OS_SETTING)">
@if (theme === OS_SETTING || theme === null) {
- <i class="fa fa-check primary-color mr-2"></i>
+ <i class="fa fa-check mr-2"></i>
}
@if (theme !== OS_SETTING && theme !== null) {
<i class="fa mr-2"></i>
@@ -196,25 +208,37 @@
</button>
</mat-menu>
<mat-menu #animations="matMenu" xPosition="before">
- <button mat-menu-item class="global-menu-item"
(click)="toggleAnimations('false')">
+ <button
+ mat-menu-item
+ class="global-menu-item"
+ [class.selected]="disableAnimations === 'false'"
+ (click)="toggleAnimations('false')">
@if (disableAnimations === 'false') {
- <i class="fa fa-check primary-color mr-2"></i>
+ <i class="fa fa-check mr-2"></i>
} @else {
<i class="fa mr-2"></i>
}
Enabled
</button>
- <button mat-menu-item class="global-menu-item"
(click)="toggleAnimations('true')">
+ <button
+ mat-menu-item
+ class="global-menu-item"
+ [class.selected]="disableAnimations === 'true'"
+ (click)="toggleAnimations('true')">
@if (disableAnimations === 'true') {
- <i class="fa fa-check primary-color mr-2"></i>
+ <i class="fa fa-check mr-2"></i>
} @else {
<i class="fa mr-2"></i>
}
Disabled
</button>
- <button mat-menu-item class="global-menu-item"
(click)="toggleAnimations()">
+ <button
+ mat-menu-item
+ class="global-menu-item"
+ [class.selected]="disableAnimations === null"
+ (click)="toggleAnimations()">
@if (disableAnimations === null) {
- <i class="fa fa-check primary-color mr-2"></i>
+ <i class="fa fa-check mr-2"></i>
} @else {
<i class="fa mr-2"></i>
}
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/navigation.component.ts
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/navigation.component.ts
index cfe2c0da4c..67b1ef9f61 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/navigation.component.ts
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/navigation.component.ts
@@ -86,13 +86,13 @@ export class Navigation implements OnInit, OnDestroy {
constructor() {
this.darkModeOn = window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;
- this.theme = this.storage.getItem('theme');
+ this.theme = this.storage.getItem('theme') ?
this.storage.getItem('theme') : OS_SETTING;
this.disableAnimations = this.storage.getItem('disable-animations');
// Watch for changes of the preference
window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
this.darkModeOn = e.matches;
- this.theme = this.storage.getItem('theme');
+ this.theme = this.storage.getItem('theme') ?
this.storage.getItem('theme') : OS_SETTING;
});
}
diff --git
a/nifi-frontend/src/main/frontend/apps/standard-content-viewer/src/app/app.component.ts
b/nifi-frontend/src/main/frontend/apps/standard-content-viewer/src/app/app.component.ts
index 482d5d903a..9a9fd5d12f 100644
---
a/nifi-frontend/src/main/frontend/apps/standard-content-viewer/src/app/app.component.ts
+++
b/nifi-frontend/src/main/frontend/apps/standard-content-viewer/src/app/app.component.ts
@@ -16,7 +16,7 @@
*/
import { Component, inject } from '@angular/core';
-import { Storage, ThemingService } from '@nifi/shared';
+import { OS_SETTING, Storage, ThemingService } from '@nifi/shared';
@Component({
selector: 'app',
@@ -31,7 +31,7 @@ export class AppComponent {
title = 'standard-content-viewer';
constructor() {
- let theme = this.storage.getItem('theme');
+ let theme = this.storage.getItem('theme') ?
this.storage.getItem('theme') : OS_SETTING;
// Initially check if dark mode is enabled on system
const darkModeOn = window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -42,7 +42,7 @@ export class AppComponent {
if (window.matchMedia) {
// Watch for changes of the preference
window.matchMedia('(prefers-color-scheme: dark)').addListener((e)
=> {
- theme = this.storage.getItem('theme');
+ theme = this.storage.getItem('theme') ?
this.storage.getItem('theme') : OS_SETTING;
this.themingService.toggleTheme(e.matches, theme);
});
}
diff --git
a/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/app.component.ts
b/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/app.component.ts
index 6e7412cbc8..5d3bbf0411 100644
---
a/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/app.component.ts
+++
b/nifi-frontend/src/main/frontend/apps/update-attribute/src/app/app.component.ts
@@ -16,7 +16,7 @@
*/
import { Component, inject } from '@angular/core';
-import { Storage, ThemingService } from '@nifi/shared';
+import { OS_SETTING, Storage, ThemingService } from '@nifi/shared';
@Component({
selector: 'app',
@@ -31,7 +31,7 @@ export class AppComponent {
title = 'update-attribute';
constructor() {
- let theme = this.storage.getItem('theme');
+ let theme = this.storage.getItem('theme') ?
this.storage.getItem('theme') : OS_SETTING;
// Initially check if dark mode is enabled on system
const darkModeOn = window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -42,7 +42,7 @@ export class AppComponent {
if (window.matchMedia) {
// Watch for changes of the preference
window.matchMedia('(prefers-color-scheme: dark)').addListener((e)
=> {
- theme = this.storage.getItem('theme');
+ theme = this.storage.getItem('theme') ?
this.storage.getItem('theme') : OS_SETTING;
this.themingService.toggleTheme(e.matches, theme);
});
}
