add comments sider-piece / resize repeat sider-piece textarea / add mat-button...

add comments sider-piece / resize repeat sider-piece textarea / add mat-button / replace symbolchoix and prerequires buttons by mat-buttons

src/app/app.module.ts

 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-
 import { AppRoutingModule } from './app-routing.module';
+import { FormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+
 import { AppComponent } from './app.component';
 import { EducationalObjectiveComponent } from './pieces/educational-objective/educational-objective.component';
 import { RoleComponent } from './pieces/role/role.component';
@@ -10,14 +14,12 @@ import { GameEducationnalObjectiveComponent } from './pieces/game-educationnal-o
 import { GameContextComponent } from './pieces/game-context/game-context.component';
 import { TaskComponent } from './pieces/task/task.component';
 import { AnnexeTaskComponent } from './pieces/annexe-task/annexe-task.component';
+import { CommentsComponent } from './sider-pieces/comments/comments.component';
+import { RepeatComponent } from './sider-pieces/repeat/repeat.component'; 
+import { CommentComponent } from './components/comment/comment.component';
 
-import { FormsModule } from '@angular/forms';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatIconModule } from '@angular/material/icon';
 import { DragScrollDirective } from './directives/drag-scroll.directive';
 import { MouseWheelZoomDirective } from './directives/mouse-wheel-zoom.directive';
-import { CommentsComponent } from './sider-pieces/comments/comments.component';
-import { RepeatComponent } from './sider-pieces/repeat/repeat.component'; 
 
 @NgModule({
   declarations: [
@@ -32,7 +34,8 @@ import { RepeatComponent } from './sider-pieces/repeat/repeat.component';
     DragScrollDirective,
     MouseWheelZoomDirective,
     CommentsComponent,
-    RepeatComponent
+    RepeatComponent,
+    CommentComponent
   ],
   imports: [
     BrowserModule,
@@ -40,6 +43,7 @@ import { RepeatComponent } from './sider-pieces/repeat/repeat.component';
     FormsModule,
     BrowserAnimationsModule,
     MatIconModule,
+    MatButtonModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/comment/comment.component.html

+<div class="form">
+    <div class="form-comment">
+        <textarea [disabled]="true">Mon commentaire</textarea>
+        <div class="form-comment-buttons">
+            <button mat-button>Modifier</button>
+            <button mat-button>Supprimer</button>
+        </div>  
+    </div>
+
+    <div class="form-answers">
+        <textarea [disabled]="true">Une réponse</textarea>
+        <div class="form-comment-buttons">
+            <button mat-button>Modifier</button>
+            <button mat-button>Supprimer</button>
+        </div>  
+    </div>
+    
+    <div class="form-newanswer">
+        <textarea></textarea>
+        <div class="form-newanswer-buttons">
+           <button mat-button>Répondre</button> 
+        </div>
+        
+    </div>
+</div>
\ No newline at end of file

src/app/components/comment/comment.component.scss

+textarea {
+    resize: vertical;
+    border-radius: 10px;
+    border: none;
+    min-height: 50px;
+    max-height: 200px;
+    padding: 5px 5px 5px 5px;
+}
+
+button {
+    background-color: white;
+    border-radius: 10px;                
+    margin-left: 5px;
+}
+
+.form {
+    margin-bottom: 10px;
+    border-bottom: solid black 1px;
+    padding-bottom: 10px;
+
+    &-comment {
+        margin-bottom: 10px;
+        display: flex;
+        flex-direction: column;
+
+        textarea {
+            height: 100px;
+            resize: none;
+        }
+
+        &-buttons {
+            margin-top: 5px;
+            display: flex;
+            flex-direction: row;
+            position: relative;
+            justify-content: flex-end;
+        }
+    }
+    
+    &-answers {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 10px;
+
+        textarea {
+            resize: none;
+        }
+    }
+
+    &-newanswer {
+        display: flex;
+        flex-direction: column;
+
+        &-buttons {
+            margin-top: 5px;
+            display: flex;
+            flex-direction: row;
+            position: relative;
+            justify-content: flex-end;
+        }
+    }
+}

src/app/components/comment/comment.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommentComponent } from './comment.component';
+
+describe('CommentComponent', () => {
+  let component: CommentComponent;
+  let fixture: ComponentFixture<CommentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CommentComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CommentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/comment/comment.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-comment',
+  templateUrl: './comment.component.html',
+  styleUrls: ['./comment.component.scss']
+})
+export class CommentComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pieces/role/role.component.html

@@ -53,7 +53,7 @@
                     <input name="quantity" type="text">
                 </div>    
             </div>
-            <button><mat-icon fontIcon="add"></mat-icon></button>
+            <button mat-button><mat-icon fontIcon="add"></mat-icon></button>
         </div>
     </div>
 </div>

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

@@ -2,7 +2,6 @@
     --piece-background-color: #9ad5ec;
 
     width: 400px;
-    min-height: 1600px;
     position: relative;
     background-color: var(--piece-background-color);
 
@@ -196,7 +195,7 @@
                 left: 100%;
                 transform: translateX(-100%);
                 margin-top: 5px;
-
+                border-radius: 10px;
                 mat-icon {
                     transform: scale(1.3);
                 }

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

@@ -96,15 +96,15 @@
         <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" (click)="changeDisplaySymbolChoice()">
+            <button mat-button class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()">
                 <mat-icon *ngIf="symbol" [style.color]="symbolColor" [fontIcon]="symbol"></mat-icon>
-            </div>    
+            </button>    
         </div>
         <textarea class="piece-form-content" placeholder="Positionner dans l'ordre les balises HTML principales"></textarea>
         <div class="piece-form-bottom">
-            <div class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
-                <label>Prérequis</label>
-            </div>
+            <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
+                Prérequis
+            </button>
             <div class="piece-form-bottom-duration">
                 <input name="value" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
                 <select name="unite" [(ngModel)]="durationUnit" (change)="durationChange()">

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

@@ -243,27 +243,19 @@
             }
             &-title {
                 font-size: 25px;
-                //font-weight: bold;
                 font-family: 'Glacial Indifference Bold';
             }
             &-symbol {
                 width: 50px;
-                height: 40px;
+                height: 50px;
                 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);
+                    transform: scale(1.3);
                     overflow: visible;
                 }
             }
-            &-symbol:hover{
-                opacity: 0.75;
-            }
         }
         &-content {
             margin-top: 10px;
@@ -299,13 +291,6 @@
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                label {
-                    cursor: pointer;
-                }
-
-            }
-            &-prerequires:hover {
-                opacity: 0.75;
             }
         }
     }

src/app/sider-pieces/comments/comments.component.html

 <div class="piece">
+    <div class="piece-form">
+        <div class="piece-form-title">Commentaires</div>
 
+        <div class="piece-form-comments">
+            <app-comment></app-comment>
+        </div>
+
+        <div class="piece-form-newcomment">
+            <div class="piece-form-newcomment-form">
+                <label>Nouveau commentaire</label>
+                <textarea></textarea>
+            </div>
+            <button mat-button>Ajouter un commentaire</button>
+        </div>
+
+    </div>
 </div>
\ No newline at end of file

src/app/sider-pieces/comments/comments.component.scss

@@ -2,9 +2,52 @@
     --piece-background-color: #f3ed97;
 
     width: 300px;
-    height: 400px;
     position: relative;
     background-color: var(--piece-background-color);
     border: solid black 1px;
     border-radius: 10px;
+
+    label {
+        margin-bottom: 10px;
+    }
+
+    textarea {
+        resize: vertical;
+        border-radius: 10px;
+        border: none;
+        min-height: 50px;
+        max-height: 200px;
+        padding: 5px 5px 5px 5px;
+    }
+
+    button {
+        border-radius: 10px;
+        background-color: white;
+        margin-top: 5px;
+    }
+
+    &-form {
+        margin: 10px 5px 10px 5px;
+        display: flex;
+        flex-direction: column;
+
+        &-title {
+            font-family: "Glacial Indifference Bold";
+            margin-bottom: 10px;
+        }
+        
+        &-newcomment {
+
+            &-form {
+                display: flex;
+                flex-direction: column;
+            }
+
+            button {
+                position: relative;
+                left: 100%;
+                transform: translateX(-100%);
+            }
+        }
+    }
 }
\ No newline at end of file

src/app/sider-pieces/repeat/repeat.component.scss

@@ -2,7 +2,6 @@
     --piece-background-color: #a6c9ec;
 
     width: 300px;
-    height: 200px;
     position: relative;
     background-color: var(--piece-background-color);
     border: solid black 1px;
@@ -12,8 +11,7 @@
         position: relative;
         text-align: center;
         margin: 10px 5px 10px 5px;
-        height: 100%;
-        
+
         &-header {
             display: flex;
             flex-direction: row;
@@ -25,13 +23,12 @@
             }
 
             &-for {
-                //width: 100%;
                 display: flex;
                 flex-direction: row;
                 position: relative;
                 left: 50%;
                 transform: translateX(-50%);
-            
+
 
                 input {
                     width: 25px;
@@ -48,16 +45,16 @@
         &-while {
             display: flex;
             flex-direction: column;
-            height: 80%;
-            
 
             textarea {
                 padding: 10px;
                 margin-top: 10px;
-                resize: none;
+                resize: vertical;
                 border: none;
                 border-radius: 10px;
                 flex-grow: 1;
+                min-height: 50px;
+                max-height: 100px;
             }
         }
     }