Skip to content

R
RLG Maker
Commit 53d14fc3 authored by Romain DELEAU's avatar Romain DELEAU
Browse files
Options

direction cross to move tasks

parent 60b7bae0
Hide whitespace changes
Inline Side-by-side
Showing with 401 additions and 112 deletions
src/app/pieces/tasks/annexe-task/annexe-task.component.html
View file @ 53d14fc3
...@@ -8,12 +8,6 @@ ...@@ -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-attach piece-attach-right" [style.background]="task.supplementaryRole ? task.supplementaryRole.color : 'var(--piece-background-color)'"></div>
<div class="piece-menu" [class]="displayMenu"> <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> <div>
<mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange" <mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"
matTooltip="Changer le type de cette tuile." matTooltip="Changer le type de cette tuile."
...@@ -30,12 +24,30 @@ ...@@ -30,12 +24,30 @@
<mat-icon fontIcon="delete" (click)="onClickDelete()" <mat-icon fontIcon="delete" (click)="onClickDelete()"
matTooltip="Supprimer la tuile." matTooltip="Supprimer la tuile."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon> matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="expand_more" (click)="moveTask('bottom')" *ngIf="canMoveTo('bottom')" <div class="piece-menu-directioncross">
matTooltip="Décaler la tuile vers le bas." <div class="piece-menu-directioncross-left">
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon> <mat-icon style="transform: rotate(0turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('left')"
<mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')" matTooltip="Décaler la tuile vers la gauche."
matTooltip="Décaler la tuile vers la droite." matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
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>
</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>
<div class="piece-prerequires" [class]="displayPrequires"> <div class="piece-prerequires" [class]="displayPrequires">
......
src/app/pieces/tasks/annexe-task/annexe-task.component.scss
View file @ 53d14fc3
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
&-menu { &-menu {
position: absolute; position: absolute;
width: 200px; width: 220px;
height: 50px; height: 50px;
background-color: #f7f7f7; background-color: #f7f7f7;
z-index: -1; z-index: -1;
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
border: solid black 1px; border: solid black 1px;
display: flex; display: flex;
padding: 15px 20px 15px 20px; padding: 15px 20px 15px 20px;
justify-content: space-around; justify-content: space-between;
mat-icon { mat-icon {
cursor: pointer; cursor: pointer;
...@@ -40,6 +40,23 @@ ...@@ -40,6 +40,23 @@
&-changeMenuButton:hover { &-changeMenuButton:hover {
opacity: 0.75; 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 { &-menu.show {
......
src/app/pieces/tasks/annexe-task/annexe-task.component.ts
View file @ 53d14fc3
...@@ -131,11 +131,31 @@ export class AnnexeTaskComponent implements OnInit { ...@@ -131,11 +131,31 @@ export class AnnexeTaskComponent implements OnInit {
} }
moveTask(direction: string): void { moveTask(direction: string): void {
this.role.moveTask(this.i, this.j, direction); if (direction == 'left' && this.canMoveTo('left')) {
this.displayMenu = 'hide'; this.role.moveTask(this.i, this.j, direction);
this.displayPrequires = 'hide'; this.displayMenu = 'hide';
this.displaySymbolChoice = 'hide'; this.displayPrequires = 'hide';
this.mission.equalizeLengths(); 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 { canMoveTo(direction: string): boolean {
......
src/app/pieces/tasks/final-task/final-task.component.html
View file @ 53d14fc3
...@@ -7,12 +7,6 @@ ...@@ -7,12 +7,6 @@
<div class="piece-attach piece-attach-left"></div> <div class="piece-attach piece-attach-left"></div>
<div class="piece-menu" [class]="displayMenu"> <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> <div>
<mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange" <mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"
matTooltip="Changer le type de cette tuile." matTooltip="Changer le type de cette tuile."
...@@ -29,12 +23,30 @@ ...@@ -29,12 +23,30 @@
<mat-icon fontIcon="delete" (click)="onClickDelete()" <mat-icon fontIcon="delete" (click)="onClickDelete()"
matTooltip="Supprimer la tuile." matTooltip="Supprimer la tuile."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon> matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="expand_more" (click)="moveTask('bottom')" *ngIf="canMoveTo('bottom')" <div class="piece-menu-directioncross">
matTooltip="Décaler la tuile vers le bas." <div class="piece-menu-directioncross-left">
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon> <mat-icon style="transform: rotate(0turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('left')"
<mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')" matTooltip="Décaler la tuile vers la gauche."
matTooltip="Décaler la tuile vers la droite." matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
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>
</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>
<div class="piece-symbolchoice" [class]="displaySymbolChoice"> <div class="piece-symbolchoice" [class]="displaySymbolChoice">
......
src/app/pieces/tasks/final-task/final-task.component.scss
View file @ 53d14fc3
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
&-menu { &-menu {
position: absolute; position: absolute;
width: 200px; width: 220px;
height: 50px; height: 50px;
background-color: #f7f7f7; background-color: #f7f7f7;
z-index: -1; z-index: -1;
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
border: solid black 1px; border: solid black 1px;
display: flex; display: flex;
padding: 15px 20px 15px 20px; padding: 15px 20px 15px 20px;
justify-content: space-around; justify-content: space-between;
mat-icon { mat-icon {
cursor: pointer; cursor: pointer;
...@@ -40,6 +40,23 @@ ...@@ -40,6 +40,23 @@
&-changeMenuButton:hover { &-changeMenuButton:hover {
opacity: 0.75; 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 { &-menu.show {
......
src/app/pieces/tasks/final-task/final-task.component.ts
View file @ 53d14fc3
...@@ -137,11 +137,31 @@ export class FinalTaskComponent implements OnInit { ...@@ -137,11 +137,31 @@ export class FinalTaskComponent implements OnInit {
} }
moveTask(direction: string): void { moveTask(direction: string): void {
this.role.moveTask(this.i, this.j, direction); if (direction == 'left' && this.canMoveTo('left')) {
this.displayMenu = 'hide'; this.role.moveTask(this.i, this.j, direction);
this.displayPrequires = 'hide'; this.displayMenu = 'hide';
this.displaySymbolChoice = 'hide'; this.displayPrequires = 'hide';
this.mission.equalizeLengths(); 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 { canMoveTo(direction: string): boolean {
......
src/app/pieces/tasks/optionnal-task/optionnal-task.component.html
View file @ 53d14fc3
...@@ -8,12 +8,6 @@ ...@@ -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-attach piece-attach-right" [style.background]="task.supplementaryRole ? task.supplementaryRole.color : 'var(--piece-background-color)'"></div>
<div class="piece-menu" [class]="displayMenu"> <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> <div>
<mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange" <mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"
matTooltip="Changer le type de cette tuile." matTooltip="Changer le type de cette tuile."
...@@ -30,12 +24,30 @@ ...@@ -30,12 +24,30 @@
<mat-icon fontIcon="delete" (click)="onClickDelete()" <mat-icon fontIcon="delete" (click)="onClickDelete()"
matTooltip="Supprimer la tuile." matTooltip="Supprimer la tuile."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon> matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="expand_more" (click)="moveTask('bottom')" *ngIf="canMoveTo('bottom')" <div class="piece-menu-directioncross">
matTooltip="Décaler la tuile vers le bas." <div class="piece-menu-directioncross-left">
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon> <mat-icon style="transform: rotate(0turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('left')"
<mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')" matTooltip="Décaler la tuile vers la gauche."
matTooltip="Décaler la tuile vers la droite." matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
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>
</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>
<div class="piece-symbolchoice" [class]="displaySymbolChoice"> <div class="piece-symbolchoice" [class]="displaySymbolChoice">
......
src/app/pieces/tasks/optionnal-task/optionnal-task.component.scss
View file @ 53d14fc3
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
&-menu { &-menu {
position: absolute; position: absolute;
width: 200px; width: 220px;
height: 50px; height: 50px;
background-color: #f7f7f7; background-color: #f7f7f7;
z-index: -1; z-index: -1;
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
border: solid black 1px; border: solid black 1px;
display: flex; display: flex;
padding: 15px 20px 15px 20px; padding: 15px 20px 15px 20px;
justify-content: space-around; justify-content: space-between;
mat-icon { mat-icon {
cursor: pointer; cursor: pointer;
...@@ -40,6 +40,23 @@ ...@@ -40,6 +40,23 @@
&-changeMenuButton:hover { &-changeMenuButton:hover {
opacity: 0.75; 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 { &-menu.show {
......
src/app/pieces/tasks/optionnal-task/optionnal-task.component.ts
View file @ 53d14fc3
...@@ -151,11 +151,31 @@ export class OptionnalTaskComponent implements OnInit { ...@@ -151,11 +151,31 @@ export class OptionnalTaskComponent implements OnInit {
} }
moveTask(direction: string): void { moveTask(direction: string): void {
this.role.moveTask(this.i, this.j, direction); if (direction == 'left' && this.canMoveTo('left')) {
this.displayMenu = 'hide'; this.role.moveTask(this.i, this.j, direction);
this.displayPrequires = 'hide'; this.displayMenu = 'hide';
this.displaySymbolChoice = 'hide'; this.displayPrequires = 'hide';
this.mission.equalizeLengths(); 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 { canMoveTo(direction: string): boolean {
let res: boolean = true; let res: boolean = true;
......
src/app/pieces/tasks/random-event/random-event.component.html
View file @ 53d14fc3
...@@ -6,24 +6,36 @@ ...@@ -6,24 +6,36 @@
<div class="piece-attach piece-attach-right" [style.background]="task.supplementaryRole ? task.supplementaryRole.color : 'var(--piece-background-color)'"></div> <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"> <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()" <mat-icon fontIcon="backspace" (click)="onClickErase()"
matTooltip="Effacer le contenu de cette tuile." matTooltip="Effacer le contenu de cette tuile."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon> matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="delete" (click)="onClickDelete()" <mat-icon fontIcon="delete" (click)="onClickDelete()"
matTooltip="Supprimer la tuile." matTooltip="Supprimer la tuile."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon> matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="expand_more" (click)="moveTask('bottom')" *ngIf="canMoveTo('bottom')" <div class="piece-menu-directioncross">
matTooltip="Décaler la tuile vers le bas." <div class="piece-menu-directioncross-left">
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon> <mat-icon style="transform: rotate(0turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('left')"
<mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')" matTooltip="Décaler la tuile vers la gauche."
matTooltip="Décaler la tuile vers la droite." matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
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>
</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>
<div class="piece-symbolchoice" [class]="displaySymbolChoice"> <div class="piece-symbolchoice" [class]="displaySymbolChoice">
......
src/app/pieces/tasks/random-event/random-event.component.scss
View file @ 53d14fc3
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
&-menu { &-menu {
position: absolute; position: absolute;
width: 200px; width: 220px;
height: 50px; height: 50px;
background-color: #f7f7f7; background-color: #f7f7f7;
z-index: -1; z-index: -1;
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
border: solid black 1px; border: solid black 1px;
display: flex; display: flex;
padding: 15px 20px 15px 20px; padding: 15px 20px 15px 20px;
justify-content: space-around; justify-content: space-between;
mat-icon { mat-icon {
cursor: pointer; cursor: pointer;
...@@ -31,6 +31,23 @@ ...@@ -31,6 +31,23 @@
mat-icon:hover { mat-icon:hover {
opacity: 0.75; 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 { &-menu.show {
......
src/app/pieces/tasks/random-event/random-event.component.ts
View file @ 53d14fc3
...@@ -128,11 +128,31 @@ export class RandomEventComponent implements OnInit { ...@@ -128,11 +128,31 @@ export class RandomEventComponent implements OnInit {
} }
moveTask(direction: string): void { moveTask(direction: string): void {
this.role.moveTask(this.i, this.j, direction); if (direction == 'left' && this.canMoveTo('left')) {
this.displayMenu = 'hide'; this.role.moveTask(this.i, this.j, direction);
this.displayPrequires = 'hide'; this.displayMenu = 'hide';
this.displaySymbolChoice = 'hide'; this.displayPrequires = 'hide';
this.mission.equalizeLengths(); 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 { canMoveTo(direction: string): boolean {
......
src/app/pieces/tasks/repeat-task/repeat-task.component.html
View file @ 53d14fc3
...@@ -2,24 +2,36 @@ ...@@ -2,24 +2,36 @@
<div class="piece-attach piece-attach-left"></div> <div class="piece-attach piece-attach-left"></div>
<div class="piece-menu" [class]="displayMenu"> <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()" <mat-icon fontIcon="backspace" (click)="onClickErase()"
matTooltip="Effacer le contenu de cette tuile." matTooltip="Effacer le contenu de cette tuile."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon> matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="delete" (click)="onClickDelete()" <mat-icon fontIcon="delete" (click)="onClickDelete()"
matTooltip="Supprimer la tuile." matTooltip="Supprimer la tuile."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon> matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="expand_more" (click)="moveTask('bottom')" *ngIf="canMoveTo('bottom')" <div class="piece-menu-directioncross">
matTooltip="Décaler la tuile vers le bas." <div class="piece-menu-directioncross-left">
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon> <mat-icon style="transform: rotate(0turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('left')"
<mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')" matTooltip="Décaler la tuile vers la gauche."
matTooltip="Décaler la tuile vers la droite." matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
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>
</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>
<div class="piece-form"> <div class="piece-form">
......
src/app/pieces/tasks/repeat-task/repeat-task.component.scss
View file @ 53d14fc3
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
&-menu { &-menu {
position: absolute; position: absolute;
width: 200px; width: 220px;
height: 50px; height: 50px;
background-color: #f7f7f7; background-color: #f7f7f7;
z-index: -1; z-index: -1;
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
border: solid black 1px; border: solid black 1px;
display: flex; display: flex;
padding: 15px 20px 15px 20px; padding: 15px 20px 15px 20px;
justify-content: space-around; justify-content: space-between;
mat-icon { mat-icon {
cursor: pointer; cursor: pointer;
...@@ -34,6 +34,23 @@ ...@@ -34,6 +34,23 @@
mat-icon:hover { mat-icon:hover {
opacity: 0.75; 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 { &-menu.show {
......
src/app/pieces/tasks/repeat-task/repeat-task.component.ts
View file @ 53d14fc3
...@@ -65,9 +65,23 @@ export class RepeatTaskComponent implements OnInit { ...@@ -65,9 +65,23 @@ export class RepeatTaskComponent implements OnInit {
} }
moveTask(direction: string): void { moveTask(direction: string): void {
this.role.moveTask(this.i, this.j, direction); if (direction == 'left' && this.canMoveTo('left')) {
this.displayMenu = 'hide'; this.role.moveTask(this.i, this.j, direction);
this.mission.equalizeLengths(); 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 { canMoveTo(direction: string): boolean {
......
src/app/pieces/tasks/task/task.component.html
View file @ 53d14fc3
...@@ -6,12 +6,6 @@ ...@@ -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-attach piece-attach-right" [style.background]="task.supplementaryRole ? task.supplementaryRole.color : 'var(--piece-background-color)'"></div>
<div class="piece-menu" [class]="displayMenu"> <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> <div>
<mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange" <mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"
matTooltip="Changer le type de cette tuile." matTooltip="Changer le type de cette tuile."
...@@ -28,12 +22,30 @@ ...@@ -28,12 +22,30 @@
<mat-icon fontIcon="delete" (click)="onClickDelete()" <mat-icon fontIcon="delete" (click)="onClickDelete()"
matTooltip="Supprimer la tuile." matTooltip="Supprimer la tuile."
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon> matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
<mat-icon fontIcon="expand_more" (click)="moveTask('bottom')" *ngIf="canMoveTo('bottom')" <div class="piece-menu-directioncross">
matTooltip="Décaler la tuile vers le bas." <div class="piece-menu-directioncross-left">
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon> <mat-icon style="transform: rotate(0turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('left')"
<mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')" matTooltip="Décaler la tuile vers la gauche."
matTooltip="Décaler la tuile vers la droite." matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
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>
</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>
<div class="piece-symbolchoice" [class]="displaySymbolChoice"> <div class="piece-symbolchoice" [class]="displaySymbolChoice">
......
src/app/pieces/tasks/task/task.component.scss
View file @ 53d14fc3
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
&-menu { &-menu {
position: absolute; position: absolute;
width: 200px; width: 220px;
height: 50px; height: 50px;
background-color: #f7f7f7; background-color: #f7f7f7;
z-index: -1; z-index: -1;
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
border: solid black 1px; border: solid black 1px;
display: flex; display: flex;
padding: 15px 20px 15px 20px; padding: 15px 20px 15px 20px;
justify-content: space-around; justify-content: space-between;
mat-icon { mat-icon {
cursor: pointer; cursor: pointer;
...@@ -40,6 +40,24 @@ ...@@ -40,6 +40,24 @@
&-changeMenuButton:hover { &-changeMenuButton:hover {
opacity: 0.75; 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 { &-menu.show {
......
src/app/pieces/tasks/task/task.component.ts
View file @ 53d14fc3
...@@ -151,11 +151,31 @@ export class TaskComponent implements OnInit { ...@@ -151,11 +151,31 @@ export class TaskComponent implements OnInit {
} }
moveTask(direction: string): void { moveTask(direction: string): void {
this.role.moveTask(this.i, this.j, direction); if (direction == 'left' && this.canMoveTo('left')) {
this.displayMenu = 'hide'; this.role.moveTask(this.i, this.j, direction);
this.displayPrequires = 'hide'; this.displayMenu = 'hide';
this.displaySymbolChoice = 'hide'; this.displayPrequires = 'hide';
this.mission.equalizeLengths(); 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 { 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