Apache/nifi
1
0
Fork 0
mirror of https://github.com/apache/nifi.git synced 2025-03-03 07:59:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[NIFI-13519] allow user to choose to enable, disable, or use device s… (#9076)

Browse Source 
* [NIFI-13519] allow user to choose to enable, disable, or use device settings for animations

* address review feedback

This closes #9076
This commit is contained in:
Scott Aslan 2024-07-12 19:04:06 -05:00 committed by GitHub
parent 3c7b262619
commit 380ce0eb20
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 71 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/app.module.ts
View File

@ -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([]))
],

15
nifi-frontend/src/main/frontend/apps/nifi/src/app/app.module.ts
View File

@ -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]))
],

30
nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/navigation.component.html
View File

@ -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>

20
nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/navigation.component.ts
View File

@ -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();
}
}