Communication: Improve design of hover area on messages (#9963)

src/main/webapp/app/shared/metis/answer-post/answer-post.component.html

@@ -1,12 +1,21 @@
-<div [id]="'item-' + posting.id" class="answer-post" [ngClass]="{ 'module-bg mt-2 rounded-2': isCommunicationPage, 'is-saved': !isConsecutive() && posting.isSaved }">
+<div
+    [id]="'item-' + posting.id"
+    class="answer-post hover-container"
+    [ngClass]="{ 'module-bg rounded-2': isCommunicationPage, 'is-saved': !isConsecutive() && posting.isSaved, 'non-consecutive': !isConsecutive() }"
+>
     @if (posting.isSaved) {
-        <div class="post-is-saved-message answer-post-content-margin fs-xx-small py-1" [ngClass]="{ 'is-saved': isConsecutive() && posting.isSaved }">
+        <div class="post-is-saved-message post-content-padding fs-xx-small py-1" [ngClass]="{ 'is-saved': isConsecutive() && posting.isSaved }">
             <div class="post-is-saved-message-content">
                 <fa-icon [icon]="faBookmark"></fa-icon>
                 <span class="text-secondary" jhiTranslate="artemisApp.metis.post.saved"></span>
             </div>
         </div>
     }
+    @if (isConsecutive()) {
+        <span class="post-time fs-small" ngbTooltip="{{ posting.creationDate | artemisDate: 'time' }}">
+            {{ posting.creationDate | artemisDate: 'time' }}
+        </span>
+    }
     @if (!isConsecutive()) {
         <div class="ps-3">
             <jhi-answer-post-header
@@ -19,7 +28,7 @@
         </div>
     }
     @if (!createAnswerPostModal.isInputOpen) {
-        <div class="answer-post-content-margin message-container" [ngClass]="{ 'is-saved': isConsecutive() && posting.isSaved }" (contextmenu)="onRightClick($event)">
+        <div class="message-container post-content-padding" [ngClass]="{ 'is-saved': isConsecutive() && posting.isSaved }" (contextmenu)="onRightClick($event)">
             <div class="message-content" [class.force-hover]="showDropdown">
                 <jhi-posting-content
                     [content]="posting.content"
@@ -33,7 +42,7 @@
                     (userReferenceClicked)="userReferenceClicked.emit($event)"
                     (channelReferenceClicked)="channelReferenceClicked.emit($event)"
                 />
-                <div class="answer-post-content-margin hover-actions">
+                <div class="post-content-padding hover-actions">
                     <jhi-answer-post-reactions-bar
                         [isReadOnlyMode]="isReadOnlyMode"
                         [posting]="posting"
@@ -50,11 +59,11 @@
             </div>
         </div>
     }
-    <div class="answer-post-content-margin">
+    <div class="post-content-padding">
         <ng-container #createEditAnswerPostContainer />
     </div>
     @if (!isDeleted) {
-        <div class="answer-post-content-margin post-reactions-bar" [ngClass]="{ 'is-saved': posting.isSaved && isConsecutive() }" @fade>
+        <div class="post-content-padding post-reactions-bar" [ngClass]="{ 'is-saved': posting.isSaved && isConsecutive() }" @fade>
             <jhi-answer-post-reactions-bar
                 [isReadOnlyMode]="isReadOnlyMode"
                 [posting]="posting"

src/main/webapp/app/shared/metis/answer-post/answer-post.component.scss

@@ -8,10 +8,6 @@
     border-radius: 7px;
 }
 
-.answer-post-content-margin {
-    padding-left: 3.42rem;
-}
-
 @include media-breakpoint-down(sm) {
     .answer-post-content-margin {
         padding-left: 0.5rem;
@@ -25,6 +21,7 @@
     display: flex;
     gap: 10px;
     visibility: hidden;
+    max-height: 2.2rem;
     transition:
         opacity 0.2s ease-in-out,
         visibility 0.2s ease-in-out;
@@ -56,15 +53,22 @@
     padding-left: 0.25rem;
 }
 
-.message-content {
-    &.force-hover {
-        background: var(--metis-selection-option-hover-background);
+.non-consecutive .hover-actions {
+    top: -2rem;
+}
 
-        .hover-actions {
-            opacity: 1;
-            visibility: visible;
-        }
-    }
+.hover-container {
+    position: relative;
+}
+
+.hover-container:hover {
+    background: var(--metis-selection-option-hover-background);
+    transition: background-color 0.2s ease-in-out;
+}
+
+.hover-container:hover .hover-actions {
+    visibility: visible;
+    opacity: 1;
 }
 
 .message-content:hover {
@@ -85,3 +89,22 @@
     height: 20px;
     margin-right: 0.2rem;
 }
+
+.post-time {
+    position: absolute;
+    top: 5%;
+    left: 0.5rem;
+    margin-left: 0.7rem;
+    visibility: hidden;
+    opacity: 0;
+    transition:
+        visibility 0.2s ease-in-out,
+        opacity 0.2s ease-in-out;
+    font-size: 0.75rem;
+    color: var(--metis-gray-dark);
+}
+
+.hover-container:hover .post-time {
+    visibility: visible;
+    opacity: 1;
+}

src/main/webapp/app/shared/metis/post/post.component.html

@@ -1,4 +1,7 @@
-<div class="post" [ngClass]="{ 'mx-0': !isThreadSidebar, 'pinned-message': isPinned(), 'is-saved': !isConsecutive() && posting.isSaved }">
+<div
+    class="post hover-container"
+    [ngClass]="{ 'mx-0': !isThreadSidebar, 'pinned-message': isPinned(), 'is-saved': !isConsecutive() && posting.isSaved, 'non-consecutive': !isConsecutive() }"
+>
     @if (posting.isSaved) {
         <div class="post-is-saved-message post-content-padding fs-xx-small py-1" [ngClass]="{ 'is-saved': isConsecutive() && posting.isSaved }">
             <div class="post-is-saved-message-content">
@@ -7,6 +10,11 @@
             </div>
         </div>
     }
+    @if (isConsecutive()) {
+        <span class="post-time fs-small" ngbTooltip="{{ posting.creationDate | artemisDate: 'time' }}">
+            {{ posting.creationDate | artemisDate: 'time' }}
+        </span>
+    }
     @if (!isConsecutive()) {
         <div class="ps-3">
             <jhi-post-header

src/main/webapp/app/shared/metis/post/post.component.scss

@@ -32,17 +32,26 @@
     border: 0.01rem solid var(--metis-gray);
 }
 
-.message-container {
+.hover-container {
     position: relative;
+}
 
-    &.force-hover {
-        background: var(--metis-selection-option-hover-background);
+.non-consecutive .hover-actions {
+    top: -2rem;
+}
 
-        .hover-actions {
-            opacity: 1;
-            visibility: visible;
-        }
-    }
+.hover-container:hover {
+    background: var(--metis-selection-option-hover-background);
+    transition: background-color 0.2s ease-in-out;
+}
+
+.hover-container:hover .hover-actions {
+    visibility: visible;
+    opacity: 1;
+}
+
+.message-container {
+    position: relative;
 }
 
 .post-is-saved-message,
@@ -64,15 +73,6 @@
     padding-left: 0.25rem;
 }
 
-.message-content:hover {
-    background: var(--metis-selection-option-hover-background);
-}
-
-.message-container:hover .hover-actions {
-    opacity: 1;
-    visibility: visible;
-}
-
 .clickable {
     cursor: pointer;
 }
@@ -86,3 +86,22 @@
 .pinned-message {
     background-color: var(--artemis-alert-warning-background);
 }
+
+.post-time {
+    position: absolute;
+    top: 5%;
+    left: 0.5rem;
+    margin-left: 0.7rem;
+    visibility: hidden;
+    opacity: 0;
+    transition:
+        visibility 0.2s ease-in-out,
+        opacity 0.2s ease-in-out;
+    font-size: 0.75rem;
+    color: var(--metis-gray-dark);
+}
+
+.hover-container:hover .post-time {
+    visibility: visible;
+    opacity: 1;
+}

src/main/webapp/app/shared/metis/posting-footer/post-footer/post-footer.component.ts

@@ -137,7 +137,7 @@ export class PostFooterComponent extends PostingFooterDirective<Post> implements
                 timeDiff = currentDate.diff(lastDate, 'minute');
             }
 
-            if (currentPost.author?.id === currentGroup.author?.id && timeDiff < 1 && timeDiff >= 0) {
+            if (currentPost.author?.id === currentGroup.author?.id && timeDiff < 5 && timeDiff >= 0) {
                 currentGroup.posts.push({ ...currentPost, isConsecutive: true }); // consecutive post
             } else {
                 groups.push(currentGroup);

src/main/webapp/app/shared/metis/posting-header/answer-post-header/answer-post-header.component.html

@@ -31,7 +31,11 @@
                 <span [jhiTranslate]="todayFlag ?? ''" id="today-flag" class="fs-small"></span>,
             }
             <span class="post-header-date fs-small" [disableTooltip]="postingIsOfToday" ngbTooltip="{{ posting.creationDate | artemisDate: 'time' }}">
-                {{ postingIsOfToday ? (posting.creationDate | artemisDate: 'time') : (posting.creationDate | artemisDate: 'short-date') }}
+                {{
+                    postingIsOfToday
+                        ? (posting.creationDate | artemisDate: 'time')
+                        : (posting.creationDate | artemisDate: 'short-date') + ' - ' + (posting.creationDate | artemisDate: 'time')
+                }}
             </span>
         </span>
         @if (!!isCommunicationPage && (!lastReadDate || (lastReadDate && posting.creationDate && posting.creationDate.isAfter(lastReadDate))) && !isAuthorOfPosting) {

src/main/webapp/app/shared/metis/posting-header/post-header/post-header.component.html

@@ -31,7 +31,11 @@
                 <span [jhiTranslate]="todayFlag ?? ''" id="today-flag" class="fs-small"></span>,
             }
             <span class="fs-small" [disableTooltip]="postingIsOfToday" ngbTooltip="{{ posting.creationDate | artemisDate: 'time' }}">
-                {{ postingIsOfToday ? (posting.creationDate | artemisDate: 'time') : (posting.creationDate | artemisDate: 'short-date') }}
+                {{
+                    postingIsOfToday
+                        ? (posting.creationDate | artemisDate: 'time')
+                        : (posting.creationDate | artemisDate: 'short-date') + ' - ' + (posting.creationDate | artemisDate: 'time')
+                }}
             </span>
         </span>
         @if (posting.resolved) {

src/test/javascript/spec/component/shared/metis/answer-post/answer-post.component.spec.ts

@@ -1,13 +1,13 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AnswerPostComponent } from 'app/shared/metis/answer-post/answer-post.component';
 import { DebugElement, input, runInInjectionContext } from '@angular/core';
-import { MockComponent, MockModule, MockPipe, ngMocks } from 'ng-mocks';
+import { MockComponent, MockDirective, MockModule, MockPipe, ngMocks } from 'ng-mocks';
 import { HtmlForMarkdownPipe } from 'app/shared/pipes/html-for-markdown.pipe';
 import { By } from '@angular/platform-browser';
 import { AnswerPostHeaderComponent } from 'app/shared/metis/posting-header/answer-post-header/answer-post-header.component';
 import { AnswerPostReactionsBarComponent } from 'app/shared/metis/posting-reactions-bar/answer-post-reactions-bar/answer-post-reactions-bar.component';
 import { PostingContentComponent } from 'app/shared/metis/posting-content/posting-content.components';
-import { metisResolvingAnswerPostUser1 } from '../../../../helpers/sample/metis-sample-data';
+import { metisPostExerciseUser1, metisResolvingAnswerPostUser1 } from '../../../../helpers/sample/metis-sample-data';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { AnswerPostCreateEditModalComponent } from 'app/shared/metis/posting-create-edit-modal/answer-post-create-edit-modal/answer-post-create-edit-modal.component';
 import { DOCUMENT } from '@angular/common';
@@ -17,6 +17,13 @@ import { MetisService } from 'app/shared/metis/metis.service';
 import { MockMetisService } from '../../../../helpers/mocks/service/mock-metis-service.service';
 import { Posting, PostingType } from 'app/entities/metis/posting.model';
 import { AnswerPost } from 'app/entities/metis/answer-post.model';
+import dayjs from 'dayjs/esm';
+import { ArtemisDatePipe } from '../../../../../../../main/webapp/app/shared/pipes/artemis-date.pipe';
+import { ArtemisTranslatePipe } from '../../../../../../../main/webapp/app/shared/pipes/artemis-translate.pipe';
+import { TranslateDirective } from '../../../../../../../main/webapp/app/shared/language/translate.directive';
+import { MockTranslateService } from '../../../../helpers/mocks/service/mock-translate.service';
+import { TranslateService } from '@ngx-translate/core';
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 
 describe('AnswerPostComponent', () => {
     let component: AnswerPostComponent;
@@ -30,18 +37,22 @@ describe('AnswerPostComponent', () => {
         document.body.appendChild(mainContainer);
 
         return TestBed.configureTestingModule({
-            imports: [OverlayModule, MockModule(BrowserAnimationsModule)],
+            imports: [OverlayModule, MockModule(BrowserAnimationsModule), MockDirective(NgbTooltip)],
             declarations: [
                 AnswerPostComponent,
                 MockPipe(HtmlForMarkdownPipe),
                 MockComponent(AnswerPostHeaderComponent),
                 MockComponent(PostingContentComponent),
                 MockComponent(AnswerPostCreateEditModalComponent),
                 MockComponent(AnswerPostReactionsBarComponent),
+                ArtemisDatePipe,
+                ArtemisTranslatePipe,
+                MockDirective(TranslateDirective),
             ],
             providers: [
                 { provide: DOCUMENT, useValue: document },
                 { provide: MetisService, useClass: MockMetisService },
+                { provide: TranslateService, useClass: MockTranslateService },
             ],
         })
             .compileComponents()
@@ -237,4 +248,31 @@ describe('AnswerPostComponent', () => {
         expect(component.posting).toBeInstanceOf(AnswerPost);
         expect(spy).toHaveBeenCalled();
     });
+
+    it('should display post-time span when isConsecutive() returns true', () => {
+        const fixedDate = dayjs('2024-12-06T23:39:27.080Z');
+        component.posting = { ...metisPostExerciseUser1, creationDate: fixedDate };
+
+        jest.spyOn(component, 'isConsecutive').mockReturnValue(true);
+        fixture.detectChanges();
+
+        const postTimeDebugElement = debugElement.query(By.css('span.post-time'));
+        const postTimeElement = postTimeDebugElement.nativeElement as HTMLElement;
+
+        expect(postTimeDebugElement).toBeTruthy();
+
+        const expectedTime = dayjs(fixedDate).format('HH:mm');
+        expect(postTimeElement.textContent?.trim()).toBe(expectedTime);
+    });
+
+    it('should not display post-time span when isConsecutive() returns false', () => {
+        const fixedDate = dayjs('2024-12-06T23:39:27.080Z');
+        component.posting = { ...metisPostExerciseUser1, creationDate: fixedDate };
+
+        jest.spyOn(component, 'isConsecutive').mockReturnValue(false);
+        fixture.detectChanges();
+
+        const postTimeElement = debugElement.query(By.css('span.post-time'));
+        expect(postTimeElement).toBeFalsy();
+    });
 });