Commit 53d14fc3 authored by Romain DELEAU's avatar Romain DELEAU

direction cross to move tasks

parent 60b7bae0
......@@ -8,12 +8,6 @@
<div class="piece-attach piece-attach-right" [style.background]="task.supplementaryRole ? task.supplementaryRole.color : 'var(--piece-background-color)'"></div>
<div class="piece-menu" [class]="displayMenu">
<mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"
matTooltip="Décaler la tuile vers la gauche."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="expand_less" (click)="moveTask('top')" *ngIf="canMoveTo('top')"
matTooltip="Décaler la tuile vers le haut."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<div>
<mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"
matTooltip="Changer le type de cette tuile."
......@@ -30,13 +24,31 @@
<mat-icon fontIcon="delete" (click)="onClickDelete()"
matTooltip="Supprimer la tuile."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="expand_more" (click)="moveTask('bottom')" *ngIf="canMoveTo('bottom')"
<div class="piece-menu-directioncross">
<div class="piece-menu-directioncross-left">
<mat-icon style="transform: rotate(0turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('left')"
matTooltip="Décaler la tuile vers la gauche."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
</div>
<div class="piece-menu-directioncross-updownarrows">
<div class="piece-menu-updownarrows-up">
<mat-icon style="transform: rotate(0.25turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('top')"
matTooltip="Décaler la tuile vers le haut."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
</div>
<div class="piece-menu-directioncross-updownarrows-down">
<mat-icon style="transform: rotate(0.75turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('bottom')"
matTooltip="Décaler la tuile vers le bas."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"
</div>
</div>
<div class="piece-menu-directioncross-right">
<mat-icon style="transform: rotate(0.5turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('right')"
matTooltip="Décaler la tuile vers la droite."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
</div>
</div>
</div>
<div class="piece-prerequires" [class]="displayPrequires">
<div class="piece-prerequires-prerequires">
......
......@@ -8,7 +8,7 @@
&-menu {
position: absolute;
width: 200px;
width: 220px;
height: 50px;
background-color: #f7f7f7;
z-index: -1;
......@@ -21,7 +21,7 @@
border: solid black 1px;
display: flex;
padding: 15px 20px 15px 20px;
justify-content: space-around;
justify-content: space-between;
mat-icon {
cursor: pointer;
......@@ -40,6 +40,23 @@
&-changeMenuButton:hover {
opacity: 0.75;
}
&-directioncross {
display: flex;
flex-direction: row;
&-updownarrows {
display: flex;
flex-direction: column;
position: relative;
top: -10px;
&-down {
position: relative;
top: -8px;
}
}
}
}
&-menu.show {
......
......@@ -131,11 +131,31 @@ export class AnnexeTaskComponent implements OnInit {
}
moveTask(direction: string): void {
if (direction == 'left' && this.canMoveTo('left')) {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.displayPrequires = 'hide';
this.displaySymbolChoice = 'hide';
this.mission.equalizeLengths();
} else if (direction == 'top' && this.canMoveTo('top')) {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.displayPrequires = 'hide';
this.displaySymbolChoice = 'hide';
this.mission.equalizeLengths();
} else if (direction == 'right' && this.canMoveTo('right')) {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.displayPrequires = 'hide';
this.displaySymbolChoice = 'hide';
this.mission.equalizeLengths();
} else if (direction == 'bottom' && this.canMoveTo('bottom')) {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.displayPrequires = 'hide';
this.displaySymbolChoice = 'hide';
this.mission.equalizeLengths();
}
}
canMoveTo(direction: string): boolean {
......
......@@ -7,12 +7,6 @@
<div class="piece-attach piece-attach-left"></div>
<div class="piece-menu" [class]="displayMenu">
<mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"
matTooltip="Décaler la tuile vers la gauche."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="expand_less" (click)="moveTask('top')" *ngIf="canMoveTo('top')"
matTooltip="Décaler la tuile vers le haut."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<div>
<mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"
matTooltip="Changer le type de cette tuile."
......@@ -29,13 +23,31 @@
<mat-icon fontIcon="delete" (click)="onClickDelete()"
matTooltip="Supprimer la tuile."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="expand_more" (click)="moveTask('bottom')" *ngIf="canMoveTo('bottom')"
<div class="piece-menu-directioncross">
<div class="piece-menu-directioncross-left">
<mat-icon style="transform: rotate(0turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('left')"
matTooltip="Décaler la tuile vers la gauche."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
</div>
<div class="piece-menu-directioncross-updownarrows">
<div class="piece-menu-updownarrows-up">
<mat-icon style="transform: rotate(0.25turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('top')"
matTooltip="Décaler la tuile vers le haut."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
</div>
<div class="piece-menu-directioncross-updownarrows-down">
<mat-icon style="transform: rotate(0.75turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('bottom')"
matTooltip="Décaler la tuile vers le bas."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"
</div>
</div>
<div class="piece-menu-directioncross-right">
<mat-icon style="transform: rotate(0.5turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('right')"
matTooltip="Décaler la tuile vers la droite."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
</div>
</div>
</div>
<div class="piece-symbolchoice" [class]="displaySymbolChoice">
<div class="piece-symbolchoice-header">
......
......@@ -8,7 +8,7 @@
&-menu {
position: absolute;
width: 200px;
width: 220px;
height: 50px;
background-color: #f7f7f7;
z-index: -1;
......@@ -21,7 +21,7 @@
border: solid black 1px;
display: flex;
padding: 15px 20px 15px 20px;
justify-content: space-around;
justify-content: space-between;
mat-icon {
cursor: pointer;
......@@ -40,6 +40,23 @@
&-changeMenuButton:hover {
opacity: 0.75;
}
&-directioncross {
display: flex;
flex-direction: row;
&-updownarrows {
display: flex;
flex-direction: column;
position: relative;
top: -10px;
&-down {
position: relative;
top: -8px;
}
}
}
}
&-menu.show {
......
......@@ -137,11 +137,31 @@ export class FinalTaskComponent implements OnInit {
}
moveTask(direction: string): void {
if (direction == 'left' && this.canMoveTo('left')) {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.displayPrequires = 'hide';
this.displaySymbolChoice = 'hide';
this.mission.equalizeLengths();
} else if (direction == 'top' && this.canMoveTo('top')) {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.displayPrequires = 'hide';
this.displaySymbolChoice = 'hide';
this.mission.equalizeLengths();
} else if (direction == 'right' && this.canMoveTo('right')) {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.displayPrequires = 'hide';
this.displaySymbolChoice = 'hide';
this.mission.equalizeLengths();
} else if (direction == 'bottom' && this.canMoveTo('bottom')) {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.displayPrequires = 'hide';
this.displaySymbolChoice = 'hide';
this.mission.equalizeLengths();
}
}
canMoveTo(direction: string): boolean {
......
......@@ -8,12 +8,6 @@
<div class="piece-attach piece-attach-right" [style.background]="task.supplementaryRole ? task.supplementaryRole.color : 'var(--piece-background-color)'"></div>
<div class="piece-menu" [class]="displayMenu">
<mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"
matTooltip="Décaler la tuile vers la gauche."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="expand_less" (click)="moveTask('top')" *ngIf="canMoveTo('top')"
matTooltip="Décaler la tuile vers le haut."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<div>
<mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"
matTooltip="Changer le type de cette tuile."
......@@ -30,13 +24,31 @@
<mat-icon fontIcon="delete" (click)="onClickDelete()"
matTooltip="Supprimer la tuile."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="expand_more" (click)="moveTask('bottom')" *ngIf="canMoveTo('bottom')"
<div class="piece-menu-directioncross">
<div class="piece-menu-directioncross-left">
<mat-icon style="transform: rotate(0turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('left')"
matTooltip="Décaler la tuile vers la gauche."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
</div>
<div class="piece-menu-directioncross-updownarrows">
<div class="piece-menu-updownarrows-up">
<mat-icon style="transform: rotate(0.25turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('top')"
matTooltip="Décaler la tuile vers le haut."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
</div>
<div class="piece-menu-directioncross-updownarrows-down">
<mat-icon style="transform: rotate(0.75turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('bottom')"
matTooltip="Décaler la tuile vers le bas."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"
</div>
</div>
<div class="piece-menu-directioncross-right">
<mat-icon style="transform: rotate(0.5turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('right')"
matTooltip="Décaler la tuile vers la droite."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
</div>
</div>
</div>
<div class="piece-symbolchoice" [class]="displaySymbolChoice">
<div class="piece-symbolchoice-header">
......
......@@ -8,7 +8,7 @@
&-menu {
position: absolute;
width: 200px;
width: 220px;
height: 50px;
background-color: #f7f7f7;
z-index: -1;
......@@ -21,7 +21,7 @@
border: solid black 1px;
display: flex;
padding: 15px 20px 15px 20px;
justify-content: space-around;
justify-content: space-between;
mat-icon {
cursor: pointer;
......@@ -40,6 +40,23 @@
&-changeMenuButton:hover {
opacity: 0.75;
}
&-directioncross {
display: flex;
flex-direction: row;
&-updownarrows {
display: flex;
flex-direction: column;
position: relative;
top: -10px;
&-down {
position: relative;
top: -8px;
}
}
}
}
&-menu.show {
......
......@@ -151,11 +151,31 @@ export class OptionnalTaskComponent implements OnInit {
}
moveTask(direction: string): void {
if (direction == 'left' && this.canMoveTo('left')) {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.displayPrequires = 'hide';
this.displaySymbolChoice = 'hide';
this.mission.equalizeLengths();
} else if (direction == 'top' && this.canMoveTo('top')) {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.displayPrequires = 'hide';
this.displaySymbolChoice = 'hide';
this.mission.equalizeLengths();
} else if (direction == 'right' && this.canMoveTo('right')) {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.displayPrequires = 'hide';
this.displaySymbolChoice = 'hide';
this.mission.equalizeLengths();
} else if (direction == 'bottom' && this.canMoveTo('bottom')) {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.displayPrequires = 'hide';
this.displaySymbolChoice = 'hide';
this.mission.equalizeLengths();
}
}
canMoveTo(direction: string): boolean {
let res: boolean = true;
......
......@@ -6,25 +6,37 @@
<div class="piece-attach piece-attach-right" [style.background]="task.supplementaryRole ? task.supplementaryRole.color : 'var(--piece-background-color)'"></div>
<div class="piece-menu" [class]="displayMenu">
<mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"
matTooltip="Décaler la tuile vers la gauche."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="expand_less" (click)="moveTask('top')" *ngIf="canMoveTo('top')"
matTooltip="Décaler la tuile vers le haut."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="backspace" (click)="onClickErase()"
matTooltip="Effacer le contenu de cette tuile."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="delete" (click)="onClickDelete()"
matTooltip="Supprimer la tuile."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="expand_more" (click)="moveTask('bottom')" *ngIf="canMoveTo('bottom')"
<div class="piece-menu-directioncross">
<div class="piece-menu-directioncross-left">
<mat-icon style="transform: rotate(0turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('left')"
matTooltip="Décaler la tuile vers la gauche."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
</div>
<div class="piece-menu-directioncross-updownarrows">
<div class="piece-menu-updownarrows-up">
<mat-icon style="transform: rotate(0.25turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('top')"
matTooltip="Décaler la tuile vers le haut."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
</div>
<div class="piece-menu-directioncross-updownarrows-down">
<mat-icon style="transform: rotate(0.75turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('bottom')"
matTooltip="Décaler la tuile vers le bas."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"
</div>
</div>
<div class="piece-menu-directioncross-right">
<mat-icon style="transform: rotate(0.5turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('right')"
matTooltip="Décaler la tuile vers la droite."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
</div>
</div>
</div>
<div class="piece-symbolchoice" [class]="displaySymbolChoice">
<div class="piece-symbolchoice-header">
......
......@@ -8,7 +8,7 @@
&-menu {
position: absolute;
width: 200px;
width: 220px;
height: 50px;
background-color: #f7f7f7;
z-index: -1;
......@@ -21,7 +21,7 @@
border: solid black 1px;
display: flex;
padding: 15px 20px 15px 20px;
justify-content: space-around;
justify-content: space-between;
mat-icon {
cursor: pointer;
......@@ -31,6 +31,23 @@
mat-icon:hover {
opacity: 0.75;
}
&-directioncross {
display: flex;
flex-direction: row;
&-updownarrows {
display: flex;
flex-direction: column;
position: relative;
top: -10px;
&-down {
position: relative;
top: -8px;
}
}
}
}
&-menu.show {
......
......@@ -128,11 +128,31 @@ export class RandomEventComponent implements OnInit {
}
moveTask(direction: string): void {
if (direction == 'left' && this.canMoveTo('left')) {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.displayPrequires = 'hide';
this.displaySymbolChoice = 'hide';
this.mission.equalizeLengths();
} else if (direction == 'top' && this.canMoveTo('top')) {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.displayPrequires = 'hide';
this.displaySymbolChoice = 'hide';
this.mission.equalizeLengths();
} else if (direction == 'right' && this.canMoveTo('right')) {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.displayPrequires = 'hide';
this.displaySymbolChoice = 'hide';
this.mission.equalizeLengths();
} else if (direction == 'bottom' && this.canMoveTo('bottom')) {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.displayPrequires = 'hide';
this.displaySymbolChoice = 'hide';
this.mission.equalizeLengths();
}
}
canMoveTo(direction: string): boolean {
......
......@@ -2,25 +2,37 @@
<div class="piece-attach piece-attach-left"></div>
<div class="piece-menu" [class]="displayMenu">
<mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"
matTooltip="Décaler la tuile vers la gauche."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="expand_less" (click)="moveTask('top')" *ngIf="canMoveTo('top')"
matTooltip="Décaler la tuile vers le haut."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="backspace" (click)="onClickErase()"
matTooltip="Effacer le contenu de cette tuile."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="delete" (click)="onClickDelete()"
matTooltip="Supprimer la tuile."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="expand_more" (click)="moveTask('bottom')" *ngIf="canMoveTo('bottom')"
<div class="piece-menu-directioncross">
<div class="piece-menu-directioncross-left">
<mat-icon style="transform: rotate(0turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('left')"
matTooltip="Décaler la tuile vers la gauche."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
</div>
<div class="piece-menu-directioncross-updownarrows">
<div class="piece-menu-updownarrows-up">
<mat-icon style="transform: rotate(0.25turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('top')"
matTooltip="Décaler la tuile vers le haut."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
</div>
<div class="piece-menu-directioncross-updownarrows-down">
<mat-icon style="transform: rotate(0.75turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('bottom')"
matTooltip="Décaler la tuile vers le bas."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"
</div>
</div>
<div class="piece-menu-directioncross-right">
<mat-icon style="transform: rotate(0.5turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('right')"
matTooltip="Décaler la tuile vers la droite."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
</div>
</div>
</div>
<div class="piece-form">
<label>Recommencer<br>le tour jusqu'à ce que :</label>
......
......@@ -11,7 +11,7 @@
&-menu {
position: absolute;
width: 200px;
width: 220px;
height: 50px;
background-color: #f7f7f7;
z-index: -1;
......@@ -24,7 +24,7 @@
border: solid black 1px;
display: flex;
padding: 15px 20px 15px 20px;
justify-content: space-around;
justify-content: space-between;
mat-icon {
cursor: pointer;
......@@ -34,6 +34,23 @@
mat-icon:hover {
opacity: 0.75;
}
&-directioncross {
display: flex;
flex-direction: row;
&-updownarrows {
display: flex;
flex-direction: column;
position: relative;
top: -10px;
&-down {
position: relative;
top: -8px;
}
}
}
}
&-menu.show {
......
......@@ -65,9 +65,23 @@ export class RepeatTaskComponent implements OnInit {
}
moveTask(direction: string): void {
if (direction == 'left' && this.canMoveTo('left')) {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.mission.equalizeLengths();
} else if (direction == 'top' && this.canMoveTo('top')) {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.mission.equalizeLengths();
} else if (direction == 'right' && this.canMoveTo('right')) {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.mission.equalizeLengths();
} else if (direction == 'bottom' && this.canMoveTo('bottom')) {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.mission.equalizeLengths();
}
}
canMoveTo(direction: string): boolean {
......
......@@ -6,12 +6,6 @@
<div class="piece-attach piece-attach-right" [style.background]="task.supplementaryRole ? task.supplementaryRole.color : 'var(--piece-background-color)'"></div>
<div class="piece-menu" [class]="displayMenu">
<mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"
matTooltip="Décaler la tuile vers la gauche."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="expand_less" (click)="moveTask('top')" *ngIf="canMoveTo('top')"
matTooltip="Décaler la tuile vers le haut."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<div>
<mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"
matTooltip="Changer le type de cette tuile."
......@@ -28,13 +22,31 @@
<mat-icon fontIcon="delete" (click)="onClickDelete()"
matTooltip="Supprimer la tuile."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="expand_more" (click)="moveTask('bottom')" *ngIf="canMoveTo('bottom')"
<div class="piece-menu-directioncross">
<div class="piece-menu-directioncross-left">
<mat-icon style="transform: rotate(0turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('left')"
matTooltip="Décaler la tuile vers la gauche."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
</div>
<div class="piece-menu-directioncross-updownarrows">
<div class="piece-menu-updownarrows-up">
<mat-icon style="transform: rotate(0.25turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('top')"
matTooltip="Décaler la tuile vers le haut."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
</div>
<div class="piece-menu-directioncross-updownarrows-down">
<mat-icon style="transform: rotate(0.75turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('bottom')"
matTooltip="Décaler la tuile vers le bas."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"
</div>
</div>
<div class="piece-menu-directioncross-right">
<mat-icon style="transform: rotate(0.5turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('right')"
matTooltip="Décaler la tuile vers la droite."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
</div>
</div>
</div>
<div class="piece-symbolchoice" [class]="displaySymbolChoice">
<div class="piece-symbolchoice-header">
......
......@@ -8,7 +8,7 @@
&-menu {
position: absolute;
width: 200px;
width: 220px;
height: 50px;
background-color: #f7f7f7;
z-index: -1;
......@@ -21,7 +21,7 @@
border: solid black 1px;
display: flex;
padding: 15px 20px 15px 20px;
justify-content: space-around;
justify-content: space-between;
mat-icon {
cursor: pointer;
......@@ -40,6 +40,24 @@
&-changeMenuButton:hover {
opacity: 0.75;
}
&-directioncross {
display: flex;
flex-direction: row;
&-updownarrows {
display: flex;
flex-direction: column;
position: relative;
top: -10px;
&-down {
position: relative;
top: -8px;
}
}
}
}
&-menu.show {
......
......@@ -151,11 +151,31 @@ export class TaskComponent implements OnInit {
}
moveTask(direction: string): void {
if (direction == 'left' && this.canMoveTo('left')) {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.displayPrequires = 'hide';
this.displaySymbolChoice = 'hide';
this.mission.equalizeLengths();
} else if (direction == 'top' && this.canMoveTo('top')) {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.displayPrequires = 'hide';
this.displaySymbolChoice = 'hide';
this.mission.equalizeLengths();
} else if (direction == 'right' && this.canMoveTo('right')) {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.displayPrequires = 'hide';
this.displaySymbolChoice = 'hide';
this.mission.equalizeLengths();
} else if (direction == 'bottom' && this.canMoveTo('bottom')) {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.displayPrequires = 'hide';
this.displaySymbolChoice = 'hide';
this.mission.equalizeLengths();
}
}
canMoveTo(direction: string): boolean {
......
Markdown is supported
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