This is an automated email from the ASF dual-hosted git repository.
mcgilman 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 380ce0eb20 [NIFI-13519] allow user to choose to enable, disable, or
use device s… (#9076)
380ce0eb20 is described below
commit 380ce0eb204d1e0a75f1e51867f523cb162e7dc9
Author: Scott Aslan <[email protected]>
AuthorDate: Fri Jul 12 19:04:06 2024 -0500
[NIFI-13519] allow user to choose to enable, disable, or use device s…
(#9076)
* [NIFI-13519] allow user to choose to enable, disable, or use device
settings for animations
* address review feedback
This closes #9076
---
.../nifi-jolt-transform-ui/src/app/app.module.ts | 15 ++++++++++-
.../main/frontend/apps/nifi/src/app/app.module.ts | 15 ++++++++++-
.../ui/common/navigation/navigation.component.html | 30 ++++++++++++++++++++++
.../ui/common/navigation/navigation.component.ts | 20 ++++++++++-----
4 files changed, 71 insertions(+), 9 deletions(-)
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/app.module.ts
b/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/app.module.ts
index 6dbf9655ef..6a16824998 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/app.module.ts
+++
b/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/app.module.ts
@@ -19,7 +19,11 @@ import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {
+ BrowserAnimationsModule,
+ provideAnimations,
+ provideNoopAnimations
+} from '@angular/platform-browser/animations';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { environment } from '../environments/environment';
@@ -30,6 +34,14 @@ import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from
'@angular/material/form-field';
import { EffectsModule } from '@ngrx/effects';
import { JoltTransformJsonUiEffects } from
'./pages/jolt-transform-json-ui/state/jolt-transform-json-ui/jolt-transform-json-ui.effects';
+const entry = localStorage.getItem('disable-animations');
+let disableAnimations: string = entry !== null ? JSON.parse(entry).item : '';
+
+// honor OS settings if user has not explicitly disabled animations for the
application
+if (disableAnimations !== 'true' && disableAnimations !== 'false') {
+ disableAnimations = window.matchMedia('(prefers-reduced-motion:
reduce)').matches.toString();
+}
+
@NgModule({
declarations: [AppComponent],
imports: [
@@ -54,6 +66,7 @@ import { JoltTransformJsonUiEffects } from
'./pages/jolt-transform-json-ui/state
})
],
providers: [
+ disableAnimations === 'true' ? provideNoopAnimations() :
provideAnimations(),
{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance:
'outline' } },
provideHttpClient(withInterceptors([]))
],
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/app.module.ts
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/app.module.ts
index 4bfb26af8b..bf87d23fc9 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/app.module.ts
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/app.module.ts
@@ -19,7 +19,11 @@ import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {
+ BrowserAnimationsModule,
+ provideAnimations,
+ provideNoopAnimations
+} from '@angular/platform-browser/animations';
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
@@ -51,6 +55,14 @@ import { loadingInterceptor } from
'./service/interceptors/loading.interceptor';
import { LoginConfigurationEffects } from
'./state/login-configuration/login-configuration.effects';
import { BannerTextEffects } from './state/banner-text/banner-text.effects';
+const entry = localStorage.getItem('disable-animations');
+let disableAnimations: string = entry !== null ? JSON.parse(entry).item : '';
+
+// honor OS settings if user has not explicitly disabled animations for the
application
+if (disableAnimations !== 'true' && disableAnimations !== 'false') {
+ disableAnimations = window.matchMedia('(prefers-reduced-motion:
reduce)').matches.toString();
+}
+
@NgModule({
declarations: [AppComponent],
imports: [
@@ -95,6 +107,7 @@ import { BannerTextEffects } from
'./state/banner-text/banner-text.effects';
PipesModule
],
providers: [
+ disableAnimations === 'true' ? provideNoopAnimations() :
provideAnimations(),
{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance:
'outline' } },
provideHttpClient(withInterceptors([authInterceptor,
loadingInterceptor, pollingInterceptor]))
],
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 300ea6afe1..0d3314d3f7 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
@@ -157,6 +157,10 @@
<i class="fa mr-2"></i>
Appearance
</button>
+ <button mat-menu-item [matMenuTriggerFor]="animations">
+ <i class="fa mr-2"></i>
+ Animations
+ </button>
</mat-menu>
<mat-menu #theming="matMenu" xPosition="before">
<button mat-menu-item class="global-menu-item"
(click)="toggleTheme(LIGHT_THEME)">
@@ -187,6 +191,32 @@
Device
</button>
</mat-menu>
+ <mat-menu #animations="matMenu" xPosition="before">
+ <button mat-menu-item class="global-menu-item"
(click)="toggleAnimations('false')">
+ @if (disableAnimations === 'false') {
+ <i class="fa fa-check primary-color mr-2"></i>
+ } @else {
+ <i class="fa mr-2"></i>
+ }
+ Enabled
+ </button>
+ <button mat-menu-item class="global-menu-item"
(click)="toggleAnimations('true')">
+ @if (disableAnimations === 'true') {
+ <i class="fa fa-check primary-color mr-2"></i>
+ } @else {
+ <i class="fa mr-2"></i>
+ }
+ Disabled
+ </button>
+ <button mat-menu-item class="global-menu-item"
(click)="toggleAnimations()">
+ @if (disableAnimations === null) {
+ <i class="fa fa-check primary-color mr-2"></i>
+ } @else {
+ <i class="fa mr-2"></i>
+ }
+ Device
+ </button>
+ </mat-menu>
</div>
}
</div>
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 f82d388853..24c1ec1c59 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
@@ -70,6 +70,7 @@ export class Navigation implements OnInit, OnDestroy {
LIGHT_THEME: string = LIGHT_THEME;
DARK_THEME: string = DARK_THEME;
OS_SETTING: string = OS_SETTING;
+ disableAnimations: string | null;
currentUser = this.store.selectSignal(selectCurrentUser);
flowConfiguration = this.store.selectSignal(selectFlowConfiguration);
@@ -84,14 +85,13 @@ export class Navigation implements OnInit, OnDestroy {
) {
this.darkModeOn = window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;
this.theme = this.storage.getItem('theme');
+ 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');
- });
- }
+ // Watch for changes of the preference
+ window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
+ this.darkModeOn = e.matches;
+ this.theme = this.storage.getItem('theme');
+ });
}
ngOnInit(): void {
@@ -154,4 +154,10 @@ export class Navigation implements OnInit, OnDestroy {
this.storage.setItem('theme', theme);
this.themingService.toggleTheme(!!this.darkModeOn, theme);
}
+
+ toggleAnimations(disableAnimations: string = '') {
+ this.disableAnimations = disableAnimations;
+ this.storage.setItem('disable-animations',
this.disableAnimations.toString());
+ window.location.reload();
+ }
}
