From ae0bae42a5a49930c62de9d1e961c88e74af1d54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Henry=20T=C3=A4schner?= <129834483+HenryT-CG@users.noreply.github.com> Date: Tue, 26 Nov 2024 11:39:25 +0100 Subject: [PATCH] fix: combine zebra look with frozen columns (#289) --- src/app/_apm-mixins.scss | 5 +-- src/app/app.component.spec.ts | 4 +-- src/app/app.component.ts | 2 +- src/app/onecx-permission-remote.module.ts | 31 +++++++++---------- .../app-detail/app-detail.component.html | 2 +- .../app-detail/app-detail.component.scss | 7 +++-- src/app/shared/shared.module.ts | 7 ++--- 7 files changed, 28 insertions(+), 30 deletions(-) diff --git a/src/app/_apm-mixins.scss b/src/app/_apm-mixins.scss index 0d0bb1a..211c4e7 100644 --- a/src/app/_apm-mixins.scss +++ b/src/app/_apm-mixins.scss @@ -421,13 +421,14 @@ } @mixin table-zebra-rows { :host ::ng-deep { - .p-datatable .p-datatable-tbody > tr:nth-child(even) > td { + /* this works only on non-frozen columns (table.p-datatable-striped does not work) */ + .p-datatable .p-datatable-tbody > tr:nth-child(even) > td:not(.p-frozen-column) { background-color: var(--table-body-row-even-bg); } } } -/* LISTBOX*/ +/* LISTBOX */ @mixin listbox-layout { :host ::ng-deep { .p-listbox { diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 66647c3..3aa856d 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -17,9 +17,9 @@ describe('AppComponent', () => { expect(app).toBeTruthy() }) - it(`should have as title 'onecx-permission-ui'`, () => { + it(`should have as title 'onecx-ui'`, () => { const fixture = TestBed.createComponent(AppComponent) const app = fixture.componentInstance - expect(app.title).toEqual('onecx-permission-ui') + expect(app.title).toEqual('onecx-ui') }) }) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 3891bd7..8f0d0e8 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -5,5 +5,5 @@ import { Component } from '@angular/core' templateUrl: './app.component.html' }) export class AppComponent { - title = 'onecx-permission-ui' + title = 'onecx-ui' } diff --git a/src/app/onecx-permission-remote.module.ts b/src/app/onecx-permission-remote.module.ts index 97bdfd8..04fe1e6 100644 --- a/src/app/onecx-permission-remote.module.ts +++ b/src/app/onecx-permission-remote.module.ts @@ -1,24 +1,23 @@ +import { APP_INITIALIZER, DoBootstrap, Injector, NgModule } from '@angular/core' import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http' import { BrowserModule } from '@angular/platform-browser' -import { APP_INITIALIZER, DoBootstrap, Injector, NgModule } from '@angular/core' -import { Router, RouterModule, Routes } from '@angular/router' -import { MissingTranslationHandler, TranslateLoader, TranslateModule } from '@ngx-translate/core' +import { BrowserAnimationsModule } from '@angular/platform-browser/animations' +import { RouterModule, Routes, Router } from '@angular/router' +import { TranslateLoader, TranslateModule, MissingTranslationHandler } from '@ngx-translate/core' +import { AngularAuthModule } from '@onecx/angular-auth' +import { createTranslateLoader } from '@onecx/angular-accelerator' +import { createAppEntrypoint, initializeRouter, startsWith } from '@onecx/angular-webcomponents' +import { addInitializeModuleGuard, AppStateService, ConfigurationService } from '@onecx/angular-integration-interface' import { - AppStateService, - ConfigurationService, - createTranslateLoader, PortalApiConfiguration, PortalCoreModule, PortalMissingTranslationHandler } from '@onecx/portal-integration-angular' -import { addInitializeModuleGuard } from '@onecx/angular-integration-interface' -import { createAppEntrypoint, initializeRouter, startsWith } from '@onecx/angular-webcomponents' -import { AppEntrypointComponent } from './app-entrypoint.component' -import { AngularAuthModule } from '@onecx/angular-auth' -import { BrowserAnimationsModule } from '@angular/platform-browser/animations' -import { environment } from 'src/environments/environment' + import { Configuration } from './shared/generated' +import { environment } from 'src/environments/environment' +import { AppEntrypointComponent } from './app-entrypoint.component' function apiConfigProvider(configService: ConfigurationService, appStateService: AppStateService) { return new PortalApiConfiguration(Configuration, environment.apiPrefix, configService, appStateService) @@ -34,8 +33,8 @@ const routes: Routes = [ declarations: [AppEntrypointComponent], imports: [ AngularAuthModule, - BrowserAnimationsModule, BrowserModule, + BrowserAnimationsModule, PortalCoreModule.forMicroFrontend(), RouterModule.forRoot(addInitializeModuleGuard(routes)), TranslateModule.forRoot({ @@ -48,19 +47,17 @@ const routes: Routes = [ missingTranslationHandler: { provide: MissingTranslationHandler, useClass: PortalMissingTranslationHandler } }) ], - exports: [], providers: [ ConfigurationService, + { provide: Configuration, useFactory: apiConfigProvider, deps: [ConfigurationService, AppStateService] }, { provide: APP_INITIALIZER, useFactory: initializeRouter, multi: true, deps: [Router, AppStateService] }, - { provide: Configuration, useFactory: apiConfigProvider, deps: [ConfigurationService, AppStateService] }, provideHttpClient(withInterceptorsFromDi()) - ], - schemas: [] + ] }) export class OneCXPermissionModule implements DoBootstrap { constructor(private readonly injector: Injector) { diff --git a/src/app/permission/app-detail/app-detail.component.html b/src/app/permission/app-detail/app-detail.component.html index 14324b4..dda9e3b 100644 --- a/src/app/permission/app-detail/app-detail.component.html +++ b/src/app/permission/app-detail/app-detail.component.html @@ -28,7 +28,7 @@ *ngIf="!exceptionKey && !loadingApp && !loadingPermissions" #permissionTable id="apm_app_detail_permission_table" - styleClass="pb-2 px-3 p-datatable-striped" + styleClass="pb-2 px-3" [columns]="rolesFiltered" [value]="permissionRows" [globalFilterFields]="filterBy" diff --git a/src/app/permission/app-detail/app-detail.component.scss b/src/app/permission/app-detail/app-detail.component.scss index 2663812..bdd4088 100644 --- a/src/app/permission/app-detail/app-detail.component.scss +++ b/src/app/permission/app-detail/app-detail.component.scss @@ -1,15 +1,16 @@ @import '/src/app/_apm-mixins.scss'; +@include danger-action; +@include prepare-inputgroup; @include correct-data-view-control; @include correct-select-button; @include search-criteria-select-button; @include search-criteria-select-button-slim; @include search-criteria-select-button-filter; -@include table-inline-buttons; @include compact-dropdown-list-items; -@include danger-action; -@include prepare-inputgroup; @include dataview-list-zebra-rows; +@include table-zebra-rows; +@include table-inline-buttons; :host ::ng-deep { .word-break-all { diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 25d8e58..01f223c 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -1,4 +1,4 @@ -import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core' +import { NgModule } from '@angular/core' import { CommonModule } from '@angular/common' import { FormsModule, ReactiveFormsModule } from '@angular/forms' import { TranslateModule, TranslateService } from '@ngx-translate/core' @@ -11,6 +11,7 @@ import { ConfirmationService } from 'primeng/api' import { DataViewModule } from 'primeng/dataview' import { DialogModule } from 'primeng/dialog' import { DropdownModule } from 'primeng/dropdown' +import { FileUploadModule } from 'primeng/fileupload' import { InputTextModule } from 'primeng/inputtext' import { InputTextareaModule } from 'primeng/inputtextarea' import { KeyFilterModule } from 'primeng/keyfilter' @@ -20,7 +21,6 @@ import { SelectButtonModule } from 'primeng/selectbutton' import { TableModule } from 'primeng/table' import { TabViewModule } from 'primeng/tabview' import { ToastModule } from 'primeng/toast' -import { FileUploadModule } from 'primeng/fileupload' import { PortalCoreModule } from '@onecx/portal-integration-angular' @@ -99,7 +99,6 @@ import { LabelResolver } from './label.resolver' ) } }) - ], - schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA] + ] }) export class SharedModule {}