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

WIP on updating helpmode keys and links

Browse Source
This commit is contained in:
Valentin 2021-11-16 23:15:56 +02:00
parent 710d014455
commit 9dcc58d57d
3 changed files with 44 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,6 +30,14 @@
padding-left: 4px;
}
.help-mode-on-mouse-over-edit-dossier-owner {
padding-left: 5px;
}
.help-mode-on-mouse-over-edit-dossier-member {
margin-left: 3px;
}
.help-mode-on-mouse-over-open-usermenu {
padding-top: 1px;
margin-left: 5px;

21
src/lib/help-mode/help-mode.directive.ts
View File

@ -1,5 +1,6 @@
import { Directive, ElementRef, HostListener, Input, OnInit, Renderer2 } from '@angular/core';
import { HelpModeService } from './help-mode.service';
import { Router } from '@angular/router';
@Directive({
selector: '[iqserHelpMode]',
@ -7,12 +8,16 @@ import { HelpModeService } from './help-mode.service';
})
export class HelpModeDirective implements OnInit {
@Input('iqserHelpMode') elementName!: string;
private _path: string;
constructor(
private readonly _elementRef: ElementRef,
private readonly _renderer: Renderer2,
private readonly _helpModeService: HelpModeService,
) {}
private readonly _router: Router,
) {
this._path = this._router.url.split('/').pop() as string;
}
ngOnInit(): void {
this._createHelperElement();
@ -21,11 +26,17 @@ export class HelpModeDirective implements OnInit {
private _createHelperElement() {
const element = this._elementRef.nativeElement as HTMLElement;
const helperElement = this._renderer.createElement('div') as HTMLElement;
this._renderer.addClass(helperElement, 'help-mode-on-mouse-over');
this._renderer.addClass(helperElement, `help-mode-on-mouse-over-${this.elementName}`);
if (!this._isDisabledElement()) {
const helperElement = this._renderer.createElement('div') as HTMLElement;
this._renderer.addClass(helperElement, 'help-mode-on-mouse-over');
this._renderer.addClass(helperElement, `help-mode-on-mouse-over-${this.elementName}`);
this._helpModeService.addElement(this.elementName, element, helperElement);
this._helpModeService.addElement(this.elementName, element, helperElement);
}
}
private _isDisabledElement() {
return this._path === 'dossiers' && this.elementName === 'filter-for-status';
}
@HostListener('click') onClick(): void {

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

@ -29,27 +29,29 @@
></iqser-icon-button>
</ng-container>
<ng-container *ngFor="let config of actionConfigs; trackBy: trackByLabel">
<div class="actions" iqserHelpMode="edit-dossier">
<ng-container *ngFor="let config of actionConfigs; trackBy: trackByLabel">
<iqser-circle-button
(action)="config.action($event)"
*ngIf="!config.hide"
[icon]="config.icon"
[tooltip]="config.label"
tooltipPosition="below"
></iqser-circle-button>
</ng-container>
<!-- Extra custom actions here -->
<ng-content></ng-content>
<iqser-circle-button
(action)="config.action($event)"
*ngIf="!config.hide"
[icon]="config.icon"
[tooltip]="config.label"
(action)="closeAction.emit()"
*ngIf="showCloseButton"
[class.ml-6]="actionConfigs"
[tooltip]="'common.close' | translate"
icon="iqser:close"
tooltipPosition="below"
></iqser-circle-button>
</ng-container>
<!-- Extra custom actions here -->
<ng-content></ng-content>
<iqser-circle-button
(action)="closeAction.emit()"
*ngIf="showCloseButton"
[class.ml-6]="actionConfigs"
[tooltip]="'common.close' | translate"
icon="iqser:close"
tooltipPosition="below"
></iqser-circle-button>
</div>
</div>
</div>