Choice symbol menu

src/app/pieces/educational-objective/educational-objective.component.scss

@@ -11,7 +11,6 @@
         width: 150px;
         height: 50px;
         background-color: #f7f7f7;
-        opacity: 0.75;
         z-index: -1;
         top: -51px;
         left: 50%;

src/app/pieces/educational-objective/educational-objective.component.ts

@@ -12,7 +12,7 @@ export class EducationalObjectiveComponent implements OnInit {
   ngOnInit(): void {
   }
 
-  displayMenu: String = 'hide';
+  displayMenu: string = 'hide';
 
   onClickComments(): void {
     

src/app/pieces/game-context/game-context.component.scss

@@ -11,7 +11,6 @@
         width: 150px;
         height: 50px;
         background-color: #f7f7f7;
-        opacity: 0.75;
         z-index: -1;
         top: -51px;
         left: 50%;

src/app/pieces/game-context/game-context.component.ts

@@ -12,7 +12,7 @@ export class GameContextComponent implements OnInit {
   ngOnInit(): void {
   }
 
-  displayMenu: String = 'hide';
+  displayMenu: string = 'hide';
 
   onClickComments(): void {
     

src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.scss

@@ -11,7 +11,6 @@
         width: 150px;
         height: 50px;
         background-color: #f7f7f7;
-        opacity: 0.75;
         z-index: -1;
         top: -51px;
         left: 50%;

src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.ts

@@ -12,7 +12,7 @@ export class GameEducationnalObjectiveComponent implements OnInit {
   ngOnInit(): void {
   }
 
-  displayMenu: String = 'hide';
+  displayMenu: string = 'hide';
 
   onClickComments(): void {
     

src/app/pieces/mission-context/mission-context.component.scss

@@ -11,7 +11,6 @@
         width: 150px;
         height: 50px;
         background-color: #f7f7f7;
-        opacity: 0.75;
         z-index: -1;
         top: -51px;
         left: 50%;

src/app/pieces/mission-context/mission-context.component.ts

@@ -12,7 +12,7 @@ export class MissionContextComponent implements OnInit {
   ngOnInit(): void {
   }
 
-  displayMenu: String = 'hide';
+  displayMenu: string = 'hide';
 
   onClickComments(): void {
     

src/app/pieces/role/role.component.scss

@@ -11,7 +11,6 @@
         width: 150px;
         height: 50px;
         background-color: #f7f7f7;
-        opacity: 0.75;
         z-index: -1;
         top: -51px;
         left: 50%;

src/app/pieces/role/role.component.ts

@@ -12,7 +12,7 @@ export class RoleComponent implements OnInit {
   ngOnInit(): void {
   }
 
-  displayMenu: String = 'hide';
+  displayMenu: string = 'hide';
 
   onClickComments(): void {
     

src/app/pieces/task/task.component.html

@@ -9,11 +9,40 @@
         <mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
     </div>
 
+    <div class="piece-symbolchoice" [class]="displaySymbolChoice">
+        <label>Choisir un symbole de tâche commune :</label>
+        <div class="piece-symbolchoice-symbols">
+            <mat-icon [style.color]="'#d79297'" fontIcon="favorite" (click)="setSymbol('favorite','#d79297')"></mat-icon>
+            <mat-icon [style.color]="'#9ad5ec'" fontIcon="diamond" (click)="setSymbol('diamond','#9ad5ec')"></mat-icon>
+            <mat-icon [style.color]="'#e9ec54'" fontIcon="star" (click)="setSymbol('star','#e9ec54')"></mat-icon>
+            <mat-icon [style.color]="'#f5cee3'" fontIcon="hexagon" (click)="setSymbol('hexagon','#f5cee3')"></mat-icon>
+            <mat-icon [style.color]="'#d3d2d2'" fontIcon="add" (click)="setSymbol('add','#d3d2d2')"></mat-icon>
+            <mat-icon [style.color]="'#9ad5ec'" fontIcon="circle" (click)="setSymbol('circle','#9ad5ec')"></mat-icon>
+            <mat-icon [style.color]="'#b6cc87'" fontIcon="eco" (click)="setSymbol('eco','#b6cc87')"></mat-icon>
+            <mat-icon [style.color]="'#d0bbdb'" fontIcon="play_arrow" (click)="setSymbol('play_arrow','#d0bbdb')"></mat-icon>
+            <mat-icon [style.color]="'#8b7e64'" fontIcon="remove" (click)="setSymbol('remove','#8b7e64')"></mat-icon>
+        </div>
+        <div class="piece-symbolchoice-symbols">
+            <mat-icon [style.color]="'#d79297'" fontIcon="square" (click)="setSymbol('square','#d79297')"></mat-icon>
+            <mat-icon [style.color]="'#9ad5ec'" fontIcon="square" (click)="setSymbol('square','#9ad5ec')"></mat-icon>
+            <mat-icon [style.color]="'#e9ec54'" fontIcon="square" (click)="setSymbol('square','#e9ec54')"></mat-icon>
+            <mat-icon [style.color]="'#f5cee3'" fontIcon="square" (click)="setSymbol('square','#f5cee3')"></mat-icon>
+            <mat-icon [style.color]="'#d3d2d2'" fontIcon="square" (click)="setSymbol('square','#d3d2d2')"></mat-icon>
+            <mat-icon [style.color]="'#9ad5ec'" fontIcon="square" (click)="setSymbol('square','#9ad5ec')"></mat-icon>
+            <mat-icon [style.color]="'#b6cc87'" fontIcon="square" (click)="setSymbol('square','#b6cc87')"></mat-icon>
+            <mat-icon [style.color]="'#d0bbdb'" fontIcon="square" (click)="setSymbol('square','#d0bbdb')"></mat-icon>
+            <mat-icon [style.color]="'#8b7e64'" fontIcon="square" (click)="setSymbol('square','#8b7e64')"></mat-icon>
+        </div>
+
+    </div>
+
     <div class="piece-form">
         <div class="piece-form-top">
             <input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/>
             <div class="piece-form-top-title">Tâche</div>
-            <div class="piece-form-top-symbol"></div>
+            <div class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()">
+                <mat-icon *ngIf="symbol" [style.color]="symbolColor" [fontIcon]="symbol"></mat-icon>
+            </div>    
         </div>
         <textarea class="piece-form-content" placeholder="Acheter des citrons"></textarea>
         <div class="piece-form-bottom">

src/app/pieces/task/task.component.scss

@@ -12,9 +12,8 @@
         width: 150px;
         height: 50px;
         background-color: #f7f7f7;
-        opacity: 0.75;
         z-index: -1;
-        top: -51px;
+        top: -50px;
         left: 50%;
         transform: translateX(-50%);
         transition: transform 0.5s ease;
@@ -39,6 +38,42 @@
         transform: translateX(-50%) translateY(100%);
     }
 
+    &-symbolchoice {
+        position: absolute;
+        background-color: #f7f7f7;
+        width: 300px;
+        height: 100px;
+        border-top-right-radius: 10px;
+        border-bottom-right-radius: 10px;
+        border: solid black 1px;
+        padding: 10px;
+        right: 0;
+        top: 5px;
+        z-index: -1;
+        transition: transform 0.5s ease;
+        
+        label {
+            font-size: 14px;
+        }
+        mat-icon {
+            cursor: pointer;
+            transform: scale(1.2);
+        }
+        mat-icon:hover {
+            opacity: 0.75;
+        }
+
+        &-symbols {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
+            margin-top: 10px;
+        }
+    }
+    &-symbolchoice.show {
+        transform: translateX(100%);
+    }
+
     &-attach {
         z-index: 1;
         &-left {
@@ -113,6 +148,17 @@
                 background-color: white;
                 border-radius: 10px;
                 padding: 5px 10px 5px 10px;
+                cursor: pointer;
+                mat-icon {
+                    position: relative;
+                    left: 50%;
+                    height: 50%;
+                    transform: translateX(-50%) translateY(50%) scale(1.3);
+                    overflow: visible;
+                }
+            }
+            &-symbol:hover{
+                opacity: 0.75;
             }
         }
         &-content {

src/app/pieces/task/task.component.ts

@@ -12,11 +12,15 @@ export class TaskComponent implements OnInit {
   ngOnInit(): void {
   }
 
-  displayMenu: String = 'hide';
+  displayMenu: string = 'hide';
+  displaySymbolChoice: string = 'hide';
 
-  durationUnit: String = 'UT';
+  durationUnit: string = 'UT';
   duration: number = 1;
-  pieceWidth: String = '400px';
+  pieceWidth: string = '400px';
+
+  symbol: string = ''; // A changer quand implémentation des données
+  symbolColor: string = ''; //A changer quand implémentation des données
   
   durationChange(): void {
     if(this.durationUnit === 'UT') {
@@ -48,6 +52,20 @@ export class TaskComponent implements OnInit {
     
   }
 
+  changeDisplaySymbolChoice(): void {
+    if(this.displaySymbolChoice == 'show') {
+      this.displaySymbolChoice = 'hide';
+    } else {
+      this.displaySymbolChoice = 'show';
+    }
+  }
+
+  setSymbol(symbol: string, symbolColor: string): void {
+    this.symbol = symbol;
+    this.symbolColor = symbolColor;
+    this.displaySymbolChoice = 'hide';
+  }
+
 }