Skip to content
Snippets Groups Projects
Commit f01b7081 authored by KASSEM Passam's avatar KASSEM Passam
Browse files

[VAS] BUG 7332 : Correction sur la position de la barre permettant de...

[VAS] BUG 7332 : Correction sur la position de la barre permettant de redimensionner le panneau latéral gauche
parent 5f763dc1
No related branches found
No related tags found
10 merge requests!51Merge mis a jour vitam-ui,!25Nouveau mis a jour Vitamui,!24Nouveau mis a jour Vitamui,!23Nouveau mis a jour Vitamui,!22WIP: nouveau mis a jour Vitamui,!21nouveau mis a jour Vitamui,!20nouveau mis à jour Vitamui,!19nouveau mis à jour Vitamui,!18New MAJ Vitamui,!16[VAS] BUG 7332 : Correction sur la position de la barre permettant de...
...@@ -34,31 +34,39 @@ ...@@ -34,31 +34,39 @@
* The fact that you are presently reading this means that you have had * The fact that you are presently reading this means that you have had
* knowledge of the CeCILL-C license and that you accept its terms. * knowledge of the CeCILL-C license and that you accept its terms.
*/ */
import {Directive, ElementRef, HostListener, Inject, Input, OnInit, Renderer2} from '@angular/core'; import { DOCUMENT } from "@angular/common";
import {DOCUMENT} from "@angular/common"; import {
Directive,
ElementRef,
HostListener,
Inject,
Input,
OnInit,
Renderer2,
} from "@angular/core";
@Directive({ @Directive({
selector: '[vitamuiCommonResizeSidebar]' selector: "[vitamuiCommonResizeSidebar]",
}) })
export class ResizeSidebarDirective implements OnInit { export class ResizeSidebarDirective implements OnInit {
/** /**
* Orientation du block à redimensionner, permet de positionner à droite ou à gauche la barre permettant de * Orientation du block à redimensionner, permet de positionner à droite ou à gauche la barre permettant de
* redimensionner * redimensionner
* valeur possible: left (par défaut) ou right * valeur possible: left ou right (par défaut)
*/ */
@Input('vitamuiCommonResizeSidebar') orientation: 'right'|'left' = 'left'; @Input("vitamuiCommonResizeSidebar") orientation: "right" | "left" = "right";
/** /**
* largeur de la barre permettant de redimensionner * largeur de la barre permettant de redimensionner
* valeur par défaut : 4px * valeur par défaut : 4px
*/ */
@Input() barSize: string = '4px'; @Input() barSize: string = "4px";
/** /**
* Couleur de la barre permettant de redimensionner * Couleur de la barre permettant de redimensionner
* valeur par défaut #702382 * valeur par défaut #702382
*/ */
@Input() barColor: string = 'rgb(112, 35, 130)'; @Input() barColor: string = "rgb(112, 35, 130)";
/** /**
* Largeur du block à redimensionner * Largeur du block à redimensionner
...@@ -68,45 +76,49 @@ export class ResizeSidebarDirective implements OnInit { ...@@ -68,45 +76,49 @@ export class ResizeSidebarDirective implements OnInit {
private status = 0; private status = 0;
@HostListener('window:mousemove', ['$event']) @HostListener("window:mousemove", ["$event"])
onMouseMove(event: MouseEvent) { onMouseMove(event: MouseEvent) {
let mouse = { x: event.clientX, y: event.clientY }; let mouse = { x: event.clientX, y: event.clientY };
if(this.status === 1) { if (this.status === 1) {
const space = Number(mouse.x) ? mouse.x : 0; const space = Number(mouse.x) ? mouse.x : 0;
if(this.orientation === 'left') { if (this.orientation === "left") {
this.width = space; this.width = space;
this.elementRef.nativeElement.style.width = this.width + 'px'; this.elementRef.nativeElement.style.width = this.width + "px";
} else { } else {
const {left} = this.elementRef.nativeElement.getBoundingClientRect(); const { left } = this.elementRef.nativeElement.getBoundingClientRect();
this.width = left - space + this.width; this.width = left - space + this.width;
this.elementRef.nativeElement.style.width = this.width + 'px'; this.elementRef.nativeElement.style.width = this.width + "px";
} }
} }
} }
@HostListener('window:mouseup') @HostListener("window:mouseup")
onMouseUp() { onMouseUp() {
this.status = 0; this.status = 0;
} }
constructor(private elementRef: ElementRef, private renderer: Renderer2, @Inject(DOCUMENT) private document) { } constructor(
private elementRef: ElementRef,
private renderer: Renderer2,
@Inject(DOCUMENT) private document
) {}
ngOnInit(): void { ngOnInit(): void {
const nativeElt = this.elementRef.nativeElement; const nativeElt = this.elementRef.nativeElement;
nativeElt.style.width = this.width + 'px'; nativeElt.style.width = this.width + "px";
const child = this.createResizeBar(); const child = this.createResizeBar();
this.renderer.appendChild(nativeElt, child); this.renderer.appendChild(nativeElt, child);
} }
private createResizeBar() { private createResizeBar() {
const div = this.document.createElement('div'); const div = this.document.createElement("div");
div.style.display = 'block'; div.style.display = "block";
div.style.height = '100%'; div.style.height = "100%";
div.style.position = 'absolute'; div.style.position = "absolute";
div.className = 'vitamuiResizeSidebar'; div.className = "vitamuiResizeSidebar";
div.style.zIndex = '99'; div.style.zIndex = "99";
div.style.top = '0'; div.style.top = "0";
if(this.orientation === 'left') { if (this.orientation === "left") {
div.style.left = `calc(100% - ${this.barSize})`; div.style.left = `calc(100% - ${this.barSize})`;
div.style.borderRight = `${this.barSize} solid ${this.barColor}`; div.style.borderRight = `${this.barSize} solid ${this.barColor}`;
} else { } else {
...@@ -114,15 +126,15 @@ export class ResizeSidebarDirective implements OnInit { ...@@ -114,15 +126,15 @@ export class ResizeSidebarDirective implements OnInit {
div.style.borderLeft = `${this.barSize} solid ${this.barColor}`; div.style.borderLeft = `${this.barSize} solid ${this.barColor}`;
} }
div.style.cursor = 'ew-resize'; div.style.cursor = "ew-resize";
div.addEventListener('mousedown', event => this.setStatus(event, 1)); div.addEventListener("mousedown", (event) => this.setStatus(event, 1));
return div; return div;
} }
private setStatus(event: MouseEvent, status: number) { private setStatus(event: MouseEvent, status: number) {
if(status === 1) { if (status === 1) {
event.stopPropagation(); event.stopPropagation();
} }
this.status = status; this.status = status;
......
<mat-sidenav-container [autosize]="true" [hasBackdrop]="false"> <mat-sidenav-container [autosize]="true" [hasBackdrop]="false">
<mat-sidenav
<mat-sidenav mode="side" [fixedInViewport]="true" opened="{{show}}" *ngIf="foundAccessContract" vitamuiCommonResizeSidebar> mode="side"
<app-filing-holding-scheme (fillingSchemaClose)="closePanel()" [accessContract]="accessContract"></app-filing-holding-scheme> [fixedInViewport]="true"
opened="{{ show }}"
*ngIf="foundAccessContract"
vitamuiCommonResizeSidebar="left"
>
<app-filing-holding-scheme
(fillingSchemaClose)="closePanel()"
[accessContract]="accessContract"
></app-filing-holding-scheme>
</mat-sidenav> </mat-sidenav>
<mat-sidenav #panel mode="side" position="end" [fixedInViewport]="true"> <mat-sidenav #panel mode="side" position="end" [fixedInViewport]="true">
<app-archive-preview *ngIf="openedItem" (previewClose)="closePanel()" [archiveUnit]="openedItem" <app-archive-preview
[accessContract]="accessContract"></app-archive-preview> *ngIf="openedItem"
(previewClose)="closePanel()"
[archiveUnit]="openedItem"
[accessContract]="accessContract"
></app-archive-preview>
</mat-sidenav> </mat-sidenav>
<mat-sidenav-content> <mat-sidenav-content>
<div class="vitamui-heading"> <div class="vitamui-heading">
<vitamui-common-title-breadcrumb> <vitamui-common-title-breadcrumb>
{{'ARCHIVE_SEARCH.TITLE_SEARCH_AREA' | translate}} {{ "ARCHIVE_SEARCH.TITLE_SEARCH_AREA" | translate }}
</vitamui-common-title-breadcrumb> </vitamui-common-title-breadcrumb>
<div class="marge"> <div class="marge">
<app-access-contract (selectedAccessContract)="onSelectAccessContract($event)"> <app-access-contract
(selectedAccessContract)="onSelectAccessContract($event)"
>
</app-access-contract> </app-access-contract>
</div> </div>
</div> </div>
<div class="vitamui-content" *ngIf="foundAccessContract"> <div class="vitamui-content" *ngIf="foundAccessContract">
<div class="row"> <div class="row">
<button
<button *ngIf="!show" type="button" class="btn secondary right-arround left-not-arround" *ngIf="!show"
(click)="hiddenTreeBlock(show)" matTooltip="{{'ARCHIVE_SEARCH.SHOW_TREES_PLANS' | translate}}" type="button"
matTooltipClass="vitamui-tooltip" [matTooltipShowDelay]="300"> class="btn secondary right-arround left-not-arround"
<i class="material-icons">chevron_right</i> (click)="hiddenTreeBlock(show)"
</button> matTooltip="{{ 'ARCHIVE_SEARCH.SHOW_TREES_PLANS' | translate }}"
</div> matTooltipClass="vitamui-tooltip"
<app-archive-search (archiveUnitClick)="showPreviewArchiveUnit($event)" [matTooltipShowDelay]="300"
[accessContract]="accessContract"> >
</app-archive-search> <i class="material-icons">chevron_right</i>
</button>
</div>
<app-archive-search
(archiveUnitClick)="showPreviewArchiveUnit($event)"
[accessContract]="accessContract"
>
</app-archive-search>
</div> </div>
</mat-sidenav-content> </mat-sidenav-content>
</mat-sidenav-container> </mat-sidenav-container>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment