Merge pull request #1753 from bcgov/feature/ALCS-1958

ALCS board, comment, staff journal UI tweaks
bcgov · Jun 11, 2024 · a16ca37 · a16ca37
2 parents 6f92c1a + 94b8fac
commit a16ca37
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 14 deletions.
diff --git a/alcs-frontend/src/app/features/board/board.component.scss b/alcs-frontend/src/app/features/board/board.component.scss
@@ -9,11 +9,14 @@
 
 .board-header {
   display: flex;
+  background-color: white;
   justify-content: space-between;
   align-items: center;
   padding: 24px 80px 12px 76px;
   position: sticky;
   left: 0;
+  top: 0;
+  z-index: 1000;
 }
 
 .board-content {

diff --git a/alcs-frontend/src/app/shared/commenting/comments.component.html b/alcs-frontend/src/app/shared/commenting/comments.component.html
@@ -4,17 +4,18 @@
     <mat-form-field *ngIf="!isEditing" class="placeholder-input" appearance="outline" (click)="onEdit()">
       <input matInput placeholder="Add a comment..." />
     </mat-form-field>
+
+    <app-mention-textarea
+      *ngIf="isEditing"
+      (create)="onSave($event)"
+      [comment]="comment"
+      (cancel)="onCancel()"
+      [isNewComment]="true"
+      [notificationTitle]="notificationTitle"
+      labelText="Add a comment"
+    >
+    </app-mention-textarea>
   </div>
-  <app-mention-textarea
-    *ngIf="isEditing"
-    (create)="onSave($event)"
-    [comment]="comment"
-    (cancel)="onCancel()"
-    [isNewComment]="true"
-    [notificationTitle]='notificationTitle'
-    labelText="Add a comment"
-  >
-  </app-mention-textarea>
   <app-comment
     *ngFor="let comment of comments"
     [comment]="comment"

diff --git a/alcs-frontend/src/app/shared/drag-drop-board/drag-drop-board.component.scss b/alcs-frontend/src/app/shared/drag-drop-board/drag-drop-board.component.scss
@@ -21,7 +21,7 @@
   justify-content: center;
   margin: 0 -2px 8px;
   position: sticky;
-  top: 0;
+  top: 84px;
   text-align: center;
   z-index: 1000;
 }

diff --git a/alcs-frontend/src/app/shared/mention-textarea/mention-textarea.component.html b/alcs-frontend/src/app/shared/mention-textarea/mention-textarea.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-  <mat-form-field class="comment-input" appearance="fill">
+  <mat-form-field class="comment-input" appearance="outline">
     <mat-label [hidden]="!labelText">{{ labelText }}</mat-label>
     <textarea
       #textarea

diff --git a/alcs-frontend/src/app/shared/mention-textarea/mention-textarea.component.scss b/alcs-frontend/src/app/shared/mention-textarea/mention-textarea.component.scss
@@ -1,5 +1,7 @@
 .container {
-  margin-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
 .comment-input {
@@ -9,3 +11,7 @@
 ::ng-deep .mdc-text-field {
   overflow: visible;
 }
+
+::ng-deep .mention-item {
+  text-decoration: none;
+}
diff --git a/...app/shared/staff-journal/staff-journal-note-input/staff-journal-note-input.component.html b/...app/shared/staff-journal/staff-journal-note-input/staff-journal-note-input.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-  <mat-form-field class="note-input" appearance="fill">
+  <mat-form-field class="note-input" appearance="outline">
     <mat-label [hidden]="!labelText">{{ labelText }}</mat-label>
     <textarea #textarea cdkTextareaAutosize [(ngModel)]="note.body" [disabled]="isSaving" matInput></textarea>
   </mat-form-field>