Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added more keys and fixes for help mode

Browse Source
This commit is contained in:
Valentin 2021-11-25 15:24:57 +02:00
parent 4621e95481
commit d58cfd543b
8 changed files with 49 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/assets/styles/common-help-mode.scss
View File

@ -1,5 +1,5 @@
.help-mode-on-mouse-over {
z-index: 1000;
z-index: 10;
position: absolute;
top: -5px;
left: -5px;
@ -61,3 +61,17 @@
margin-top: 10px;
margin-left: 15px;
}
.help-mode-on-mouse-over-reset-filters {
z-index: 20;
padding-left: 4px;
}
.help-mode-on-mouse-over-dossier-list,
.help-mode-on-mouse-over-document-list {
margin-top: 5px;
}
.help-mode-on-mouse-over-edit-dossier-attributes {
z-index: 20;
}

2
src/lib/help-mode/help-mode/help-mode.component.scss
View File

@ -42,7 +42,7 @@
border-right: 8px solid var(--iqser-helpmode-primary);
border-top: 8px solid var(--iqser-helpmode-primary);
border-bottom: 60px solid var(--iqser-helpmode-primary);
z-index: 10;
z-index: 5;
position: absolute;
display: flex;
justify-content: center;

1
src/lib/listing/page-header/models/action-config.model.ts
View File

@ -2,4 +2,5 @@ import { BaseHeaderConfig } from './base-config.model';
export interface ActionConfig extends BaseHeaderConfig {
readonly action: ($event: MouseEvent) => void;
readonly helpModeKey?: string;
}

3
src/lib/listing/page-header/page-header.component.html
View File

@ -12,7 +12,7 @@
<ng-container *ngIf="searchPosition === searchPositions.afterFilters" [ngTemplateOutlet]="searchBar"></ng-container>
<div (click)="resetFilters()" *ngIf="showResetFilters$ | async" class="reset-filters" translate="reset-filters"></div>
<div (click)="resetFilters()" *ngIf="showResetFilters$ | async" class="reset-filters" translate="reset-filters" iqserHelpMode="reset-filters"></div>
</div>
<div *ngIf="showCloseButton || actionConfigs || buttonConfigs || viewModeSelection" class="actions">
@ -36,6 +36,7 @@
*ngIf="!config.hide"
[icon]="config.icon"
[tooltip]="config.label"
[iqserHelpMode]="config.helpModeKey"
tooltipPosition="below"
></iqser-circle-button>
</ng-container>

52
src/lib/listing/table-content/table-content.component.html
View File

@ -1,27 +1,29 @@
<cdk-virtual-scroll-viewport
[class.no-data]="listingComponent.noContent$ | async"
[itemSize]="itemSize"
[maxBufferPx]="1500"
[minBufferPx]="300"
iqserHasScrollbar
>
<ng-container *cdkVirtualFor="let entity of listingComponent.sortedDisplayedEntities$; trackBy: trackBy; templateCacheSize: 60">
<!-- mouseenter and mouseleave triggers change detection event if itemMouse functions are undefined -->
<!-- this little hack below ensures that change detection won't be triggered if functions are undefined -->
<div
(mouseenter)="itemMouseEnterFn && itemMouseEnterFn(entity)"
(mouseleave)="itemMouseLeaveFn && itemMouseLeaveFn(entity)"
*ngIf="itemMouseEnterFn || itemMouseLeaveFn; else withoutMouseEvents"
[ngClass]="getTableItemClasses(entity)"
[routerLink]="entity.routerLink"
>
<iqser-table-item [entity]="entity" [selectionEnabled]="selectionEnabled"></iqser-table-item>
</div>
<ng-template #withoutMouseEvents>
<div [ngClass]="getTableItemClasses(entity)" [routerLink]="entity.routerLink">
<div [iqserHelpMode]="helpModeKey">
<cdk-virtual-scroll-viewport
[class.no-data]="listingComponent.noContent$ | async"
[itemSize]="itemSize"
[maxBufferPx]="1500"
[minBufferPx]="300"
iqserHasScrollbar
>
<ng-container *cdkVirtualFor="let entity of listingComponent.sortedDisplayedEntities$; trackBy: trackBy; templateCacheSize: 60">
<!-- mouseenter and mouseleave triggers change detection event if itemMouse functions are undefined -->
<!-- this little hack below ensures that change detection won't be triggered if functions are undefined -->
<div
(mouseenter)="itemMouseEnterFn && itemMouseEnterFn(entity)"
(mouseleave)="itemMouseLeaveFn && itemMouseLeaveFn(entity)"
*ngIf="itemMouseEnterFn || itemMouseLeaveFn; else withoutMouseEvents"
[ngClass]="getTableItemClasses(entity)"
[routerLink]="entity.routerLink"
>
<iqser-table-item [entity]="entity" [selectionEnabled]="selectionEnabled"></iqser-table-item>
</div>
</ng-template>
</ng-container>
</cdk-virtual-scroll-viewport>
<ng-template #withoutMouseEvents>
<div [ngClass]="getTableItemClasses(entity)" [routerLink]="entity.routerLink">
<iqser-table-item [entity]="entity" [selectionEnabled]="selectionEnabled"></iqser-table-item>
</div>
</ng-template>
</ng-container>
</cdk-virtual-scroll-viewport>
</div>

1
src/lib/listing/table-content/table-content.component.ts
View File

@ -18,6 +18,7 @@ export class TableContentComponent<T extends IListable> extends AutoUnsubscribe
@Input() itemMouseLeaveFn?: (entity: T) => void;
@Input() tableItemClasses?: Record<string, (e: T) => boolean>;
@Input() selectionEnabled!: boolean;
@Input() helpModeKey?: 'dossier-list' | 'document-list';
readonly trackBy = trackBy<T>();
@ViewChild(CdkVirtualScrollViewport, { static: true }) readonly scrollViewport!: CdkVirtualScrollViewport;

1
src/lib/listing/table/table.component.html
View File

@ -29,6 +29,7 @@
[itemSize]="itemSize"
[selectionEnabled]="selectionEnabled"
[tableItemClasses]="tableItemClasses"
[helpModeKey]="helpModeKey"
></iqser-table-content>
<iqser-scroll-button

1
src/lib/listing/table/table.component.ts
View File

@ -46,6 +46,7 @@ export class TableComponent<T extends IListable> extends AutoUnsubscribe impleme
@Input() tableItemClasses?: Record<string, (e: T) => boolean>;
@Input() itemMouseEnterFn?: (entity: T) => void;
@Input() itemMouseLeaveFn?: (entity: T) => void;
@Input() helpModeKey?: 'dossier-list' | 'document-list';
@Output() readonly noDataAction = new EventEmitter<void>();
@ViewChild(TableContentComponent, { static: true }) private readonly _tableContent!: TableContentComponent<T>;