Feedback answer post indexes and code cleanliness

ls1intum · Oct 31, 2024 · 82a3563 · 82a3563
1 parent 03f5ded
commit 82a3563
Show file tree

Hide file tree

Showing 14 changed files with 88 additions and 62 deletions.
diff --git a/src/main/webapp/app/shared/metis/answer-post/answer-post.component.html b/src/main/webapp/app/shared/metis/answer-post/answer-post.component.html
@@ -9,26 +9,21 @@
         [isDeleted]="isDeleted"
         (isDeleteEvent)="onDeleteEvent(true)"
     />
-    @if (!isDeleted && !createAnswerPostModal.isInputOpen) {
+    @if (!createAnswerPostModal.isInputOpen) {
         <div class="answer-post-content-margin">
             <jhi-posting-content
                 [content]="posting.content"
                 [isEdited]="!!posting.updatedDate"
                 [author]="posting.author"
                 [posting]="posting"
                 [isReply]="true"
+                [isDeleted]="isDeleted"
+                [deleteTimerInSeconds]="deleteTimerInSeconds"
+                (onUndoDeleteEvent)="onDeleteEvent(false)"
                 (userReferenceClicked)="userReferenceClicked.emit($event)"
                 (channelReferenceClicked)="channelReferenceClicked.emit($event)"
             />
         </div>
-    } @else if (isDeleted) {
-        <span class="d-inline-flex align-items-center">
-            <span class="text-secondary" jhiTranslate="artemisApp.metis.post.deletedContent" [translateValues]="{ progress: deleteTimerInSeconds }"></span>
-            <button class="btn btn-outline-primary btn-sm ms-2 position-relative">
-                <span class="post-delete-button-label" jhiTranslate="artemisApp.metis.post.undoDelete" (click)="onDeleteEvent(false)"></span>
-                <span class="post-delete-button-background"></span>
-            </button>
-        </span>
     }
     <div class="answer-post-content-margin">
         <ng-container #createEditAnswerPostContainer />

diff --git a/src/main/webapp/app/shared/metis/answer-post/answer-post.component.scss b/src/main/webapp/app/shared/metis/answer-post/answer-post.component.scss
@@ -2,6 +2,8 @@
 @import 'bootstrap/scss/variables';
 @import 'bootstrap/scss/mixins';
 
+@import 'src/main/webapp/app/shared/metis/metis.component';
+
 .answer-post {
     background-color: var(--metis-answer-post-background-color);
     border-radius: 7px;

diff --git a/src/main/webapp/app/shared/metis/metis.component.scss b/src/main/webapp/app/shared/metis/metis.component.scss
@@ -2,6 +2,8 @@
 @import 'bootstrap/scss/variables';
 @import 'bootstrap/scss/mixins';
 
+$delete-delay-duration: 6s;
+
 .post-result-information {
     font-size: small;
     font-style: italic;
@@ -98,3 +100,31 @@
         font-size: 0.75rem !important;
     }
 }
+
+.post-delete-button-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 0;
+    background-color: rgba($primary, 0.3);
+    animation: increaseWidth $delete-delay-duration forwards linear;
+
+    @media (prefers-reduced-motion) {
+        animation: none;
+    }
+}
+
+.post-delete-button-label {
+    position: relative;
+    z-index: 1;
+}
+
+@keyframes increaseWidth {
+    from {
+        width: 0;
+    }
+    to {
+        width: 100%;
+    }
+}
diff --git a/src/main/webapp/app/shared/metis/post/post.component.html b/src/main/webapp/app/shared/metis/post/post.component.html
@@ -51,25 +51,20 @@
                     </span>
                 }
             </div>
-            @if (!isDeleted && !displayInlineInput) {
+            @if (!displayInlineInput) {
                 <jhi-posting-content
                     [previewMode]="previewMode"
                     [content]="posting.content"
                     [author]="posting.author"
                     [isEdited]="!!posting.updatedDate"
                     [posting]="posting"
                     [isReply]="false"
+                    [isDeleted]="isDeleted"
+                    [deleteTimerInSeconds]="deleteTimerInSeconds"
+                    (onUndoDeleteEvent)="onDeleteEvent(false)"
                     (userReferenceClicked)="onUserReferenceClicked($event)"
                     (channelReferenceClicked)="onChannelReferenceClicked($event)"
                 />
-            } @else if (isDeleted) {
-                <span class="d-inline-flex align-items-center">
-                    <span class="text-secondary" jhiTranslate="artemisApp.metis.post.deletedContent" [translateValues]="{ progress: deleteTimerInSeconds }"></span>
-                    <button class="btn btn-outline-primary btn-sm ms-2 position-relative">
-                        <span class="post-delete-button-label" jhiTranslate="artemisApp.metis.post.undoDelete" (click)="onDeleteEvent(false)"></span>
-                        <span class="post-delete-button-background"></span>
-                    </button>
-                </span>
             }
         </div>
     </div>

diff --git a/src/main/webapp/app/shared/metis/post/post.component.scss b/src/main/webapp/app/shared/metis/post/post.component.scss
@@ -1,7 +1,5 @@
 @import 'src/main/webapp/app/shared/metis/metis.component';
 
-$delete-delay-duration: 6s;
-
 .linked-context-information,
 .context-information,
 .post-title {
@@ -16,29 +14,3 @@ $delete-delay-duration: 6s;
 .reference-hash {
     color: inherit;
 }
-
-@import 'src/main/webapp/content/scss/artemis-variables';
-
-.post-delete-button-background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    z-index: 0;
-    background-color: rgba($primary, 0.3);
-    animation: increaseWidth $delete-delay-duration forwards linear;
-}
-
-.post-delete-button-label {
-    position: relative;
-    z-index: 1;
-}
-
-@keyframes increaseWidth {
-    from {
-        width: 0;
-    }
-    to {
-        width: 100%;
-    }
-}
diff --git a/src/main/webapp/app/shared/metis/posting-content/posting-content.component.html b/src/main/webapp/app/shared/metis/posting-content/posting-content.component.html
@@ -1,4 +1,12 @@
-@if (currentlyLoadedPosts) {
+@if (isDeleted()) {
+    <span class="posting-content-undo-delete d-inline-flex align-items-center">
+        <span class="text-secondary" jhiTranslate="artemisApp.metis.post.deletedContent" [translateValues]="{ progress: deleteTimerInSeconds() }"></span>
+        <button class="btn btn-outline-primary btn-sm ms-2 position-relative" (click)="onUndoDeleteEvent.emit()">
+            <span class="post-delete-button-label" jhiTranslate="artemisApp.metis.post.undoDelete"></span>
+            <span class="post-delete-button-background"></span>
+        </button>
+    </span>
+} @else if (currentlyLoadedPosts) {
     <!-- in preview mode (showing similar posts during creation): content can be expanded and collapsed shown -->
     @if (previewMode) {
         <div class="pb-1">

diff --git a/src/main/webapp/app/shared/metis/posting-content/posting-content.components.ts b/src/main/webapp/app/shared/metis/posting-content/posting-content.components.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, input, output, signal } from '@angular/core';
 import { Params } from '@angular/router';
 import { faAngleDown, faAngleUp } from '@fortawesome/free-solid-svg-icons';
 import { Post } from 'app/entities/metis/post.model';
@@ -24,6 +24,9 @@ export class PostingContentComponent implements OnInit, OnChanges, OnDestroy {
     @Input() isReply?: boolean;
     @Output() userReferenceClicked = new EventEmitter<string>();
     @Output() channelReferenceClicked = new EventEmitter<number>();
+    isDeleted = input<boolean>(false);
+    deleteTimerInSeconds = input<number>(0);
+    onUndoDeleteEvent = output<void>();
 
     showContent = false;
     currentlyLoadedPosts: Post[];

diff --git a/src/main/webapp/app/shared/metis/posting-footer/post-footer/post-footer.component.html b/src/main/webapp/app/shared/metis/posting-footer/post-footer/post-footer.component.html
@@ -12,7 +12,7 @@
         </div>
     </div>
     <ng-container class="list-answer-post">
-        @for (answerPost of sortedAnswerPosts; track $index; let isLastAnswer = $last) {
+        @for (answerPost of sortedAnswerPosts; track postsTrackByFn($index, answerPost); let isLastAnswer = $last) {
             <jhi-answer-post
                 [lastReadDate]="lastReadDate"
                 [isReadOnlyMode]="readOnlyMode"

diff --git a/src/main/webapp/app/shared/metis/posting-footer/post-footer/post-footer.component.ts b/src/main/webapp/app/shared/metis/posting-footer/post-footer/post-footer.component.ts
@@ -88,4 +88,8 @@ export class PostFooterComponent extends PostingFooterDirective<Post> implements
     openCreateAnswerPostModal() {
         this.createAnswerPostModalComponent.open();
     }
+
+    protected postsTrackByFn(index: number, post: Post): number {
+        return post.id!;
+    }
 }
diff --git a/...bapp/app/shared/metis/posting-header/answer-post-header/answer-post-header.component.html b/...bapp/app/shared/metis/posting-header/answer-post-header/answer-post-header.component.html
@@ -72,12 +72,10 @@
                                 "
                             />
                         </div>
-                    } @else {
-                        @if (isAtLeastTutorInCourse || isAuthorOfOriginalPost) {
-                            <div>
-                                <fa-icon class="icon notResolved" [icon]="faCheck" [ngbTooltip]="'artemisApp.metis.markAsResolvingAnswerTooltip' | artemisTranslate" />
-                            </div>
-                        }
+                    } @else if (isAtLeastTutorInCourse || isAuthorOfOriginalPost) {
+                        <div>
+                            <fa-icon class="icon notResolved" [icon]="faCheck" [ngbTooltip]="'artemisApp.metis.markAsResolvingAnswerTooltip' | artemisTranslate" />
+                        </div>
                     }
                 </div>
             }

diff --git a/src/main/webapp/app/shared/metis/posting.directive.ts b/src/main/webapp/app/shared/metis/posting.directive.ts
@@ -59,6 +59,7 @@ export abstract class PostingDirective<T extends Posting> implements OnInit, OnD
                         this.metisService.deletePost(this.posting);
                     }
                 },
+                // We add a tiny buffer to make it possible for the user to react a bit longer than the ui displays (+1000)
                 this.deleteTimerInSeconds * 1000 + 1000,
             );
 

diff --git a/src/main/webapp/app/shared/profile-picture/profile-picture.component.html b/src/main/webapp/app/shared/profile-picture/profile-picture.component.html
@@ -3,8 +3,8 @@
         <strong
             [id]="defaultPictureId()"
             class="profile-picture rounded-3"
-            [ngStyle]="{ 'background-color': isGray() ? '#888' : profilePictureBackgroundColor, 'font-size': fontSize }"
-            [ngClass]="defaultPictureClass()"
+            [ngStyle]="{ 'background-color': isGray() ? undefined : profilePictureBackgroundColor, 'font-size': fontSize }"
+            [ngClass]="defaultPictureClass() + (isGray() ? ' is-grayscale' : '')"
             >{{ userProfilePictureInitials }}</strong
         >
     } @else {
@@ -13,8 +13,8 @@
             [alt]="authorName()"
             class="profile-picture rounded-3"
             [src]="imageUrl()"
-            [ngStyle]="{ 'background-color': isGray() ? '#888' : profilePictureBackgroundColor }"
-            [ngClass]="imageClass()"
+            [ngStyle]="{ 'background-color': profilePictureBackgroundColor }"
+            [ngClass]="imageClass() + (isGray() ? ' is-grayscale' : '')"
         />
     }
     @if (isEditable()) {

diff --git a/src/main/webapp/app/shared/profile-picture/profile-picture.component.scss b/src/main/webapp/app/shared/profile-picture/profile-picture.component.scss
@@ -4,8 +4,12 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    background-color: var(--gray-400);
+    background-color: var(--gray-600);
     color: var(--white);
+
+    &.is-grayscale {
+        filter: grayscale(100%);
+    }
 }
 
 .profile-picture-wrap {

diff --git a/.../javascript/spec/component/shared/metis/posting-content/posting-content.component.spec.ts b/.../javascript/spec/component/shared/metis/posting-content/posting-content.component.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { PostingContentPartComponent } from 'app/shared/metis/posting-content/posting-content-part/posting-content-part.components';
-import { MockComponent, MockPipe } from 'ng-mocks';
+import { MockComponent, MockDirective, MockPipe } from 'ng-mocks';
 import { PostingContentComponent } from 'app/shared/metis/posting-content/posting-content.components';
 import { MetisService } from 'app/shared/metis/metis.service';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
@@ -13,6 +13,7 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { metisCourse, metisCoursePosts, metisExercisePosts, metisGeneralCourseWidePosts, metisLecturePosts } from '../../../../helpers/sample/metis-sample-data';
 import { Params } from '@angular/router';
 import { provideHttpClient } from '@angular/common/http';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 describe('PostingContentComponent', () => {
     let component: PostingContentComponent;
@@ -23,7 +24,13 @@ describe('PostingContentComponent', () => {
         return TestBed.configureTestingModule({
             imports: [],
             providers: [provideHttpClient(), provideHttpClientTesting(), { provide: MetisService, useClass: MockMetisService }],
-            declarations: [PostingContentComponent, MockComponent(PostingContentPartComponent), MockComponent(FaIconComponent), MockPipe(ArtemisTranslatePipe)],
+            declarations: [
+                PostingContentComponent,
+                MockComponent(PostingContentPartComponent),
+                MockComponent(FaIconComponent),
+                MockPipe(ArtemisTranslatePipe),
+                MockDirective(TranslateDirective),
+            ],
         })
             .compileComponents()
             .then(() => {
@@ -117,6 +124,13 @@ describe('PostingContentComponent', () => {
         expect(component.getPatternMatches()).toEqual([firstMatch]);
     });
 
+    it('should display undo delete prompt when isDeleted is set to true', () => {
+        fixture.componentRef.setInput('isDeleted', true);
+        fixture.detectChanges();
+        expect(fixture.nativeElement.querySelector('.posting-content-undo-delete')).not.toBeNull();
+        fixture.componentRef.setInput('isDeleted', false);
+    });
+
     it('should calculate correct pattern matches for content with post, multiple exercise, lecture and attachment references', () => {
         component.content =
             'I do want to reference #4, #10, ' +