Communication: Improve the user interface

src/main/webapp/app/overview/course-conversations/course-conversations.component.html

@@ -1,5 +1,5 @@
 <jhi-loading-indicator-container [isLoading]="isLoading">
-    <div class="input-group mb-1 rounded-2 p-2 me-2 module-bg" [hidden]="!isCodeOfConductAccepted">
+    <div class="input-group mb-2 rounded-3 p-2 me-2 module-bg" [hidden]="!isCodeOfConductAccepted">
         <!-- search bar -->
         <input
             #courseWideSearchInput
@@ -42,15 +42,24 @@
                     <jhi-course-conversations-code-of-conduct [course]="course!" />
                 </div>
             }
-            <div class="col pe-0 flex-grow-1 module-bg" [ngClass]="{ 'card-border': true }" style="min-width: 200px">
+            <div class="col flex-grow-1 module-bg rounded-3 scrollable-content" [ngClass]="{ 'content-height-dev': !isProduction || isTestServer }" style="min-width: 200px">
                 @if (activeConversation) {
                     <jhi-conversation-header (collapseSearch)="toggleChannelSearch()" />
-                    <jhi-conversation-messages (openThread)="postInThread = $event" [course]="course" [searchbarCollapsed]="channelSearchCollapsed" />
+                    <jhi-conversation-messages
+                        [contentHeightDev]="!isProduction || isTestServer"
+                        (openThread)="postInThread = $event"
+                        [course]="course"
+                        [searchbarCollapsed]="channelSearchCollapsed"
+                    />
                 } @else {
                     <jhi-course-wide-search (openThread)="postInThread = $event" [courseWideSearchConfig]="courseWideSearchConfig" />
                 }
             </div>
-            <div class="col d-flex flex-grow-1 justify-end px-0 card-border" style="max-width: min-content">
+            <div
+                class="col d-flex flex-grow-1 justify-end px-0 scrollable-content"
+                [ngClass]="{ 'content-height-dev': !isProduction || isTestServer }"
+                style="max-width: min-content"
+            >
                 @if (!!postInThread) {
                     <jhi-conversation-thread-sidebar
                         [activeConversation]="activeConversation ?? postInThread.conversation!"

src/main/webapp/app/overview/course-conversations/course-conversations.component.scss

@@ -15,15 +15,18 @@
     max-height: calc(100vh - var(--header-height) - var(--communications-header-height));
 }
 
-.card-border {
-    --message-input-height: 175px;
-
-    border: 1px solid;
-    border-color: var(--bs-card-border-color);
-    border-radius: 0.25rem;
+.scrollable-content {
+    --message-input-height-dev: 193px;
+    --message-input-height-prod: 177px;
     overflow-y: auto;
     overflow-x: hidden;
-    max-height: calc(100vh - var(--header-height) - var(--message-input-height));
+    max-height: calc(100vh - var(--header-height) - var(--message-input-height-prod));
+    &.content-height-dev {
+        max-height: calc(100vh - var(--header-height) - var(--message-input-height-dev));
+    }
+    @media (max-width: 768px) {
+        max-height: calc(100vh - var(--header-height) - var(--message-input-height-prod)) !important;
+    }
 }
 
 .message-input {

src/main/webapp/app/overview/course-conversations/course-conversations.component.ts

@@ -3,7 +3,7 @@ import { ConversationDTO } from 'app/entities/metis/conversation/conversation.mo
 import { Post } from 'app/entities/metis/post.model';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
-import { EMPTY, Subject, from, take, takeUntil } from 'rxjs';
+import { EMPTY, Subject, Subscription, from, take, takeUntil } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 import { MetisConversationService } from 'app/shared/metis/metis-conversation.service';
 import { ChannelSubType, getAsChannelDTO } from 'app/entities/metis/conversation/channel.model';
@@ -21,6 +21,7 @@ import { defaultFirstLayerDialogOptions } from 'app/overview/course-conversation
 import { UserPublicInfoDTO } from 'app/core/user/user.model';
 import { OneToOneChatCreateDialogComponent } from 'app/overview/course-conversations/dialogs/one-to-one-chat-create-dialog/one-to-one-chat-create-dialog.component';
 import { ChannelsOverviewDialogComponent } from 'app/overview/course-conversations/dialogs/channels-overview-dialog/channels-overview-dialog.component';
+import { ProfileService } from 'app/shared/layouts/profiles/profile.service';
 
 const DEFAULT_CHANNEL_GROUPS: AccordionGroups = {
     favoriteChannels: { entityData: [] },
@@ -80,13 +81,16 @@ export class CourseConversationsComponent implements OnInit, OnDestroy {
     postInThread?: Post;
     activeConversation?: ConversationDTO = undefined;
     conversationsOfUser: ConversationDTO[] = [];
-    channelSearchCollapsed = false;
+    channelSearchCollapsed = true;
 
     conversationSelected = true;
     sidebarData: SidebarData;
     accordionConversationGroups: AccordionGroups;
     sidebarConversations: SidebarCardElement[] = [];
+    profileSubscription?: Subscription;
     isCollapsed = false;
+    isProduction = true;
+    isTestServer = false;
 
     readonly CHANNEL_TYPE_SHOW_ADD_OPTION = CHANNEL_TYPE_SHOW_ADD_OPTION;
     readonly CHANNEL_TYPE_ICON = CHANNEL_TYPE_ICON;
@@ -119,6 +123,7 @@ export class CourseConversationsComponent implements OnInit, OnDestroy {
         private metisService: MetisService,
         private courseOverviewService: CourseOverviewService,
         private modalService: NgbModal,
+        private profileService: ProfileService,
     ) {}
 
     getAsChannel = getAsChannelDTO;
@@ -159,6 +164,11 @@ export class CourseConversationsComponent implements OnInit, OnDestroy {
                 this.isServiceSetUp = true;
             }
         });
+
+        this.profileSubscription = this.profileService.getProfileInfo()?.subscribe((profileInfo) => {
+            this.isProduction = profileInfo?.inProduction;
+            this.isTestServer = profileInfo.testServer ?? false;
+        });
     }
 
     subscribeToQueryParameter() {
@@ -187,6 +197,7 @@ export class CourseConversationsComponent implements OnInit, OnDestroy {
     ngOnDestroy() {
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();
+        this.profileSubscription?.unsubscribe();
     }
 
     private subscribeToActiveConversation() {

src/main/webapp/app/overview/course-conversations/course-wide-search/course-wide-search.component.html

@@ -1,13 +1,13 @@
 <div class="mt-2 ms-2">
-    <div class="conversation-header">
-        <div class="d-flex justify-content-between">
-            <div>
+    <div class="d-flex justify-content-between">
+        <div>
+            <h4 class="d-inline-block rounded p-1 info">
                 @if (!courseWideSearchConfig.searchTerm) {
-                    <h3 class="conversation-name d-inline-block rounded p-1 info">All Messages</h3>
+                    All Messages
                 } @else {
-                    <h3 class="conversation-name d-inline-block rounded p-1 info">Search Results for "{{ courseWideSearchConfig.searchTerm }}"</h3>
+                    Search Results for "{{ courseWideSearchConfig.searchTerm }}"
                 }
-            </div>
+            </h4>
         </div>
     </div>
     @if (formGroup) {
@@ -86,7 +86,6 @@ <h3 class="conversation-name d-inline-block rounded p-1 info">Search Results for
             <div
                 id="scrollableDiv"
                 #container
-                class="body-bg"
                 [ngClass]="{ 'posting-infinite-scroll-container': posts.length !== 0 }"
                 infinite-scroll
                 [scrollWindow]="false"

src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html

@@ -1,8 +1,8 @@
 @if (activeConversation && course) {
-    <div class="conversation-header">
+    <div>
         <div class="d-flex justify-content-between flex-wrap">
             <div>
-                <h3 class="conversation-name d-inline-block rounded p-2 info" (click)="openConversationDetailDialog($event, INFO)">
+                <h4 class="pointer d-inline-block rounded px-3 py-2 info" (click)="openConversationDetailDialog($event, INFO)">
                     @if (activeConversationAsChannel) {
                         <jhi-channel-icon
                             [isPublic]="activeConversationAsChannel.isPublic!"
@@ -14,7 +14,7 @@ <h3 class="conversation-name d-inline-block rounded p-2 info" (click)="openConve
                         <jhi-group-chat-icon />
                     }
                     {{ conversationService.getConversationName(activeConversation, true) }}
-                </h3>
+                </h4>
             </div>
             @if (activeConversationAsChannel) {
                 @if (activeConversationAsChannel.tutorialGroupId && activeConversationAsChannel.tutorialGroupTitle) {
@@ -25,26 +25,26 @@ <h3 class="conversation-name d-inline-block rounded p-2 info" (click)="openConve
                     </div>
                 }
             }
-            <div class="d-flex flex-wrap">
-                <div class="btn-toolbar p-2" role="toolbar">
+            <div class="d-flex flex-wrap gap-2 p-2">
+                <div class="btn-toolbar" role="toolbar">
                     <div class="btn-group me-1" role="group">
-                        <button type="button" class="btn btn-outline-secondary search" (click)="toggleSearchBar()">
+                        <button type="button" class="btn btn-outline-secondary btn-sm search" (click)="toggleSearchBar()">
                             <fa-icon [icon]="faSearch" />
                         </button>
                     </div>
                 </div>
-                <div class="btn-toolbar p-2" role="toolbar">
+                <div class="btn-toolbar" role="toolbar">
                     <div class="btn-group me-1" role="group">
                         @if (activeConversationAsChannel?.subTypeReferenceId) {
-                            <a class="btn btn-outline-secondary sub-type-reference" [routerLink]="channelSubTypeReferenceRouterLink">
+                            <a class="btn btn-sm btn-outline-secondary sub-type-reference" [routerLink]="channelSubTypeReferenceRouterLink">
                                 {{ channelSubTypeReferenceTranslationKey | artemisTranslate }}
                             </a>
                         }
-                        <button type="button" class="btn btn-outline-secondary members" (click)="openConversationDetailDialog($event, MEMBERS)">
+                        <button type="button" class="btn btn-sm btn-outline-secondary members" (click)="openConversationDetailDialog($event, MEMBERS)">
                             <fa-icon [icon]="faUserGroup" /> {{ activeConversation.numberOfMembers || 0 }}
                         </button>
                         @if (canAddUsers(activeConversation)) {
-                            <button type="button" class="btn btn-outline-secondary addUsers" (click)="openAddUsersDialog($event)">
+                            <button type="button" class="btn btn-sm btn-outline-secondary addUsers" (click)="openAddUsersDialog($event)">
                                 <fa-icon [icon]="faUserPlus" />
                             </button>
                         }
@@ -55,7 +55,7 @@ <h3 class="conversation-name d-inline-block rounded p-2 info" (click)="openConve
         @if (activeConversationAsChannel) {
             @if (activeConversationAsChannel.topic && activeConversationAsChannel.topic.length > 0) {
                 <div class="text-body-secondary d-flex justify-content-between px-2">
-                    <span class="d-inline-block conversation-topic">{{ activeConversationAsChannel.topic }}</span>
+                    <span class="d-inline-block mw-100">{{ activeConversationAsChannel.topic }}</span>
                 </div>
             }
         }

src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.scss

@@ -1,20 +1,4 @@
-@import 'node_modules/bootstrap/scss/functions';
-@import 'node_modules/bootstrap/scss/variables';
-@import 'node_modules/bootstrap/scss/mixins';
-@import 'src/main/webapp/content/scss/artemis-variables';
-
-.conversation-header {
-    .conversation-name {
-        margin: 0.1rem;
-        border-radius: 0.25rem;
-
-        &:hover {
-            background-color: var(--slightly-darker-body-bg);
-            cursor: pointer;
-        }
-    }
-
-    .conversation-topic {
-        max-width: 100%;
-    }
-}
+// @import 'node_modules/bootstrap/scss/functions';
+// @import 'node_modules/bootstrap/scss/variables';
+// @import 'node_modules/bootstrap/scss/mixins';
+// @import 'src/main/webapp/content/scss/artemis-variables';

src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html

@@ -1,5 +1,5 @@
 @if (course) {
-    <div class="row p-3 justify-content-center conversation-messages">
+    <div class="row p-3 pt-0 justify-content-center conversation-messages">
         <div class="justify-content-center">
             <div class="row justify-content-center p-0">
                 <!-- search bar -->
@@ -47,7 +47,7 @@
                     </div>
                 }
             </div>
-            <div class="row mt-3">
+            <div class="mt-3">
                 <!-- loading messages -->
                 @if (isFetchingPosts) {
                     <div class="envelope">
@@ -64,16 +64,15 @@
                 <div
                     id="scrollableDiv"
                     #container
-                    class="body-bg"
-                    [ngClass]="{ 'posting-infinite-scroll-container': posts.length !== 0 }"
+                    [ngClass]="{ 'posting-infinite-scroll-container': posts.length !== 0, 'content-height-dev': contentHeightDev }"
                     infinite-scroll
                     [scrollWindow]="false"
                     (scrolledUp)="fetchNextPage()"
                 >
                     <!-- list of all top level posts -->
                     <!-- answers are opened in the thread sidebar -->
                     @for (post of posts; track postsTrackByFn($index, post)) {
-                        <div class="pt-2">
+                        <div class="">
                             <jhi-posting-thread
                                 #postingThread
                                 [lastReadDate]="_activeConversation?.lastReadDate"
@@ -87,7 +86,6 @@
                             />
                         </div>
                     }
-                    <div class="mb-3"></div>
                 </div>
                 @if (_activeConversation && newPost && canCreateNewMessageInConversation(_activeConversation)) {
                     <div>

src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.scss

@@ -34,13 +34,20 @@
         padding-top: 0.375rem !important;
     }
 
-    --message-input-height: 165px;
+    --message-input-height-prod: 171px;
+    --message-input-height-dev: 187px;
     --search-height: 52px;
     --channel-header-height: 52px;
 
     .posting-infinite-scroll-container {
-        max-height: calc(75vh - var(--message-input-height) - var(--search-height) - var(--channel-header-height));
+        max-height: calc(75vh - var(--message-input-height-prod) - var(--search-height) - var(--channel-header-height));
         overflow-y: auto;
+        &.content-height-dev {
+            max-height: calc(75vh - var(--message-input-height-dev) - var(--search-height) - var(--channel-header-height));
+        }
+        @media (max-width: 768px) {
+            max-height: calc(75vh - var(--message-input-height-prod) - var(--search-height) - var(--channel-header-height)) !important;
+        }
     }
 
     .envelope {

src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts

@@ -52,6 +52,8 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD
     course?: Course;
     @Input()
     searchbarCollapsed = false;
+    @Input()
+    contentHeightDev: boolean = false;
 
     getAsChannel = getAsChannelDTO;
 

src/main/webapp/app/overview/course-conversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.html

@@ -6,21 +6,26 @@
         </div>
         <div class="card">
             <!-- header -->
-            <div class="card-header d-flex" [ngbTooltip]="'artemisApp.conversationsLayout.threadSideBar.close' | artemisTranslate" (click)="closePostThread.emit()">
+            <div class="card-header cursor-default d-flex">
                 <div class="row flex-grow-1">
                     <div class="col">
                         <h5 class="mb-0 fw-medium" jhiTranslate="artemisApp.conversationsLayout.threadSideBar.label"></h5>
                     </div>
                     <div class="col-auto">
-                        <fa-icon [icon]="faXmark" />
+                        <fa-icon
+                            class="pointer"
+                            [ngbTooltip]="'artemisApp.conversationsLayout.threadSideBar.close' | artemisTranslate"
+                            [icon]="faXmark"
+                            (click)="closePostThread.emit()"
+                        />
                     </div>
                 </div>
             </div>
             <!-- body -->
             <div class="pt-0 scrollbar wrapper-scroll-y mx-1">
                 @if (post !== undefined) {
                     <div class="my-2">
-                        <div class="card-body body-bg">
+                        <div class="card-body">
                             <jhi-post
                                 [readOnlyMode]="readOnlyMode"
                                 [posting]="post"
@@ -31,7 +36,7 @@ <h5 class="mb-0 fw-medium" jhiTranslate="artemisApp.conversationsLayout.threadSi
                                 [hasChannelModerationRights]="hasChannelModerationRights"
                             />
                         </div>
-                        <div class="message-input">
+                        <div class="message-input mx-3">
                             @if (!readOnlyMode) {
                                 <jhi-message-reply-inline-input [posting]="createdAnswerPost" (onCreate)="createdAnswerPost = createEmptyAnswerPost()" />
                             }

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

@@ -47,10 +47,6 @@
     animation: cssAnimation 5s forwards;
 }
 
-.highlight-pinned {
-    background-color: var(--metis-pinned-post-highlight-color);
-}
-
 @keyframes cssAnimation {
     0% {
         opacity: 1;