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

Merge remote-tracking branch 'origin/master' into RED-2830

Browse Source
This commit is contained in:
Adina Țeudan 2021-12-02 03:49:22 +02:00
commit 6286eea9db
6 changed files with 63 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -40,10 +40,6 @@
margin-left: 3px;
}
.help-mode-on-mouse-over-filter-for-editing-notes {
width: 100px;
}
.help-mode-on-mouse-over-open-usermenu {
padding-top: 1px;
margin-left: 5px;
@ -70,8 +66,46 @@
.help-mode-on-mouse-over-dossier-list,
.help-mode-on-mouse-over-document-list {
margin-top: 5px;
height: calc(100% - 70px);
}
.help-mode-on-mouse-over-edit-dossier-attributes {
z-index: 20;
}
.help-mode-on-mouse-over-dossier-features {
z-index: 20;
height: 50px;
margin-top: 17px;
width: 95%;
}
.help-mode-on-mouse-over-edit-dossier-from-list {
z-index: 30;
padding-left: 5px ;
}
.help-mode-on-mouse-over-redaction-edit-reason,
.help-mode-on-mouse-over-redaction-remove-only-here,
.help-mode-on-mouse-over-redaction-remove-from-dictionary,
.help-mode-on-mouse-over-redaction-false-positive,
.help-mode-on-mouse-over-recommendation-accept-or-reject {
z-index: 20;
width: 20px;
height: 20px;
margin-left: 9px;
margin-top: 8px;
}
.help-mode-on-mouse-over-document-features {
margin-top: 7px;
margin-left: 7px;
height: 20px;
width: 95%;
}
.help-mode-on-mouse-over-navigate-in-breadcrumbs {
height: 20px;
margin-top: 20px;
}

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

@ -8,6 +8,7 @@ import { Router } from '@angular/router';
})
export class HelpModeDirective implements OnInit {
@Input('iqserHelpMode') elementName!: string;
@Input() updateElementPosition = true;
private _path: string;
constructor(
@ -24,6 +25,7 @@ export class HelpModeDirective implements OnInit {
}
private _createHelperElement() {
const elementNameWithId = `${this.elementName}-${this._getRandomId()}`;
const element = this._elementRef.nativeElement as HTMLElement;
if (!this._isDisabledElement()) {
@ -31,7 +33,7 @@ export class HelpModeDirective implements OnInit {
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(elementNameWithId, element, helperElement, this.updateElementPosition);
}
}
@ -39,6 +41,11 @@ export class HelpModeDirective implements OnInit {
return this._path === 'dossiers' && this.elementName === 'filter-for-status';
}
private _getRandomId(): string {
return Math.random().toString(36).substr(2, 9);
}
@HostListener('click') onClick(): void {
this._helpModeService.openDocsFor(this.elementName);
}

13
src/lib/help-mode/help-mode.service.ts
View File

@ -8,6 +8,7 @@ import { HELP_DOCS } from './tokens';
interface Helper {
readonly element: HTMLElement;
readonly helperElement: HTMLElement;
readonly updateElementPosition: boolean;
}
@Injectable({
@ -75,7 +76,7 @@ export class HelpModeService {
if (!this.isHelpModeActive) {
return;
}
Object.values(this._elements).forEach(({ helperElement }) => {
this._renderer.addClass(helperElement, 'help-highlight');
setTimeout(() => {
@ -84,13 +85,15 @@ export class HelpModeService {
});
}
addElement(elementName: string, element: HTMLElement, helperElement: HTMLElement): void {
this._elements[elementName] = { element, helperElement };
addElement(elementName: string, element: HTMLElement, helperElement: HTMLElement, updateElementPosition: boolean): void {
this._elements[elementName] = { element, helperElement, updateElementPosition };
}
private _enableHelperElements() {
Object.values(this._elements).forEach(({ element, helperElement }) => {
this._renderer.setStyle(element, 'position', 'relative');
Object.values(this._elements).forEach(({ element, helperElement, updateElementPosition }) => {
if (updateElementPosition) {
this._renderer.setStyle(element, 'position', 'relative');
}
this._renderer.appendChild(element, helperElement);
});
}

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

@ -13,6 +13,7 @@
(mouseenter)="itemMouseEnterFn && itemMouseEnterFn(entity)"
(mouseleave)="itemMouseLeaveFn && itemMouseLeaveFn(entity)"
*ngIf="itemMouseEnterFn || itemMouseLeaveFn; else withoutMouseEvents"
[class.help-mode]="helpModeService.isHelpModeActive$ | async"
[ngClass]="getTableItemClasses(entity)"
[routerLink]="entity.routerLink"
>
@ -20,7 +21,11 @@
</div>
<ng-template #withoutMouseEvents>
<div [ngClass]="getTableItemClasses(entity)" [routerLink]="entity.routerLink">
<div
[class.help-mode]="helpModeService.isHelpModeActive$ | async"
[ngClass]="getTableItemClasses(entity)"
[routerLink]="entity.routerLink"
>
<iqser-table-item [entity]="entity" [selectionEnabled]="selectionEnabled"></iqser-table-item>
</div>
</ng-template>

2
src/lib/listing/table-content/table-content.component.scss
View File

@ -35,7 +35,7 @@
margin-top: 0;
}
&:hover {
&:hover, &.help-mode {
.selection-column iqser-round-checkbox .wrapper {
opacity: 1;
}

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

@ -5,6 +5,7 @@ import { AutoUnsubscribe, trackBy } from '../../utils';
import { IListable } from '../models';
import { ListingComponent, ListingService } from '../index';
import { HasScrollbarDirective } from '../../scrollbar';
import { HelpModeService } from '@iqser/common-ui';
@Component({
selector: 'iqser-table-content',
@ -29,6 +30,7 @@ export class TableContentComponent<T extends IListable> extends AutoUnsubscribe
constructor(
@Inject(forwardRef(() => ListingComponent)) readonly listingComponent: ListingComponent<T>,
readonly listingService: ListingService<T>,
readonly helpModeService: HelpModeService,
) {
super();
this.addSubscription = this.listingComponent.noContent$.subscribe(() => {