Communication: Improve the user interface design on mobile devices

src/main/webapp/app/core/core.module.ts

@@ -20,6 +20,7 @@ import { NgbDateDayjsAdapter } from 'app/core/config/datepicker-adapter';
 import { JhiLanguageHelper } from 'app/core/language/language.helper';
 import { TraceService } from '@sentry/angular';
 import { Router } from '@angular/router';
+import isMobile from 'ismobilejs-es5';
 
 @NgModule({
     imports: [
@@ -109,5 +110,8 @@ export class ArtemisCoreModule {
         const languageKey = sessionStorageService.retrieve('locale') || languageHelper.determinePreferredLanguage();
         translateService.use(languageKey);
         tooltipConfig.container = 'body';
+        if (isMobile(window.navigator.userAgent).any ?? false) {
+            tooltipConfig.disableTooltip = true;
+        }
     }
 }

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

@@ -10,7 +10,7 @@
             (keyup.enter)="onSearch()"
             placeholder="{{ 'artemisApp.metis.overview.searchBarDefault' | artemisTranslate }}"
         />
-        <jhi-button [btnType]="ButtonType.SECONDARY" [icon]="faTimes" (onClick)="courseWideSearchTerm = ''" />
+        <jhi-button [btnType]="ButtonType.SECONDARY" [icon]="faTimes" (onClick)="hideSearchTerm()" />
         <jhi-button id="search-submit" class="ms-1" [icon]="faSearch" (onClick)="onSearch()" />
     </div>
     <!-- only display after isCodeOfConductAccepted is loaded and set to false -->
@@ -22,7 +22,7 @@
     }
     @if (isCodeOfConductAccepted && isServiceSetUp && course) {
         <div class="d-flex justify-content-between">
-            <div [ngClass]="{ 'sidebar-collapsed': isCollapsed }">
+            <div class="communication-content-sidebar" [ngClass]="{ 'sidebar-collapsed': isCollapsed, 'is-not-in-active-conversation': !activeConversation }">
                 <jhi-sidebar
                     (onSelectConversation)="onConversationSelected($event)"
                     (onUpdateSidebar)="prepareSidebarData()"
@@ -38,14 +38,18 @@
                     [sidebarItemAlwaysShow]="DEFAULT_SHOW_ALWAYS"
                     [collapseState]="DEFAULT_COLLAPSE_STATE"
                     [inCommunication]="true"
+                    [reEmitNonDistinctSidebarEvents]="isMobile"
                 />
             </div>
             @if (course && !activeConversation && isCodeOfConductPresented) {
                 <div class="col pe-0 flex-grow-1">
                     <jhi-course-conversations-code-of-conduct [course]="course!" />
                 </div>
             }
-            <div class="col flex-grow-1 module-bg rounded-3 scrollable-content" [ngClass]="{ 'content-height-dev': !isProduction || isTestServer }" style="min-width: 200px">
+            <div
+                class="communication-message-wrap col flex-grow-1 module-bg rounded-3 scrollable-content"
+                [ngClass]="{ 'content-height-dev': !isProduction || isTestServer, 'is-answer-thread-open': !!postInThread }"
+            >
                 @if (activeConversation) {
                     <jhi-conversation-header (collapseSearch)="toggleChannelSearch()" (onUpdateSidebar)="prepareSidebarData()" />
                     <jhi-conversation-messages
@@ -59,9 +63,8 @@
                 }
             </div>
             <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"
+                class="communication-answer-message-wrap col flex-grow-1 justify-end px-0 scrollable-content"
+                [ngClass]="{ 'content-height-dev': !isProduction || isTestServer, 'is-answer-thread-open': !!postInThread }"
             >
                 @if (!!postInThread) {
                     <jhi-conversation-thread-sidebar

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

@@ -1,3 +1,7 @@
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
+
 .second-layer-modal-bg {
     background-color: var(--secondary);
 }
@@ -28,10 +32,76 @@
 
     @media (max-width: 768px) {
         max-height: calc(100vh - var(--header-height) - var(--message-input-height-prod)) !important;
+        max-height: calc(100dvh - var(--header-height) - var(--message-input-height-prod)) !important;
     }
 }
 
 .message-input {
     border-top: 1px solid;
     border-color: var(--bs-card-border-color);
 }
+
+.communication-message-wrap {
+    min-width: 200px;
+}
+
+.communication-answer-message-wrap {
+    max-width: min-content;
+    display: flex;
+}
+
+@include media-breakpoint-down(sm) {
+    .communication-content-sidebar {
+        position: absolute;
+        width: 100%;
+        z-index: 2;
+        pointer-events: none;
+
+        & .sidebar-wrap,
+        .communication-content-sidebar .sidebar-width {
+            max-width: 0;
+        }
+
+        &.sidebar-collapsed {
+            pointer-events: all;
+        }
+
+        &.sidebar-collapsed .sidebar-wrap,
+        &.sidebar-collapsed .sidebar-width {
+            max-width: 100%;
+        }
+
+        &.sidebar-collapsed .sidebar-width {
+            width: 100%;
+        }
+
+        .sidebar-content {
+            opacity: 0;
+        }
+
+        &.sidebar-collapsed .sidebar-content {
+            opacity: 1;
+        }
+
+        .sidebar-wrap {
+            margin-right: 0;
+        }
+    }
+
+    .communication-message-wrap.is-answer-thread-open {
+        display: none;
+    }
+
+    .communication-answer-message-wrap {
+        max-width: 100%;
+        display: none;
+    }
+
+    .communication-answer-message-wrap.is-answer-thread-open {
+        display: flex;
+    }
+
+    .communication-message-wrap {
+        max-width: 100%;
+    }
+}

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, HostListener, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Component, ElementRef, EventEmitter, HostListener, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject } from '@angular/core';
 import { ConversationDTO } from 'app/entities/metis/conversation/conversation.model';
 import { Post } from 'app/entities/metis/post.model';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -22,6 +22,9 @@ import { OneToOneChatCreateDialogComponent } from 'app/overview/course-conversat
 import { ChannelAction, ChannelsOverviewDialogComponent } from 'app/overview/course-conversations/dialogs/channels-overview-dialog/channels-overview-dialog.component';
 import { ProfileService } from 'app/shared/layouts/profiles/profile.service';
 import { ChannelsCreateDialogComponent } from 'app/overview/course-conversations/dialogs/channels-create-dialog/channels-create-dialog.component';
+import { CourseSidebarService } from 'app/overview/course-sidebar.service';
+import { LayoutService } from 'app/shared/breakpoints/layout.service';
+import { CustomBreakpointNames } from 'app/shared/breakpoints/breakpoints.service';
 
 const DEFAULT_CHANNEL_GROUPS: AccordionGroups = {
     favoriteChannels: { entityData: [] },
@@ -85,6 +88,10 @@ const DEFAULT_SHOW_ALWAYS: SidebarItemShowAlways = {
 })
 export class CourseConversationsComponent implements OnInit, OnDestroy {
     private ngUnsubscribe = new Subject<void>();
+    private closeSidebarEventSubscription: Subscription;
+    private openSidebarEventSubscription: Subscription;
+    private toggleSidebarEventSubscription: Subscription;
+    private breakpointSubscription: Subscription;
     course?: Course;
     isLoading = false;
     isServiceSetUp = false;
@@ -102,6 +109,7 @@ export class CourseConversationsComponent implements OnInit, OnDestroy {
     isCollapsed = false;
     isProduction = true;
     isTestServer = false;
+    isMobile = false;
 
     readonly CHANNEL_TYPE_SHOW_ADD_OPTION = CHANNEL_TYPE_SHOW_ADD_OPTION;
     readonly CHANNEL_TYPE_ICON = CHANNEL_TYPE_ICON;
@@ -130,6 +138,9 @@ export class CourseConversationsComponent implements OnInit, OnDestroy {
     createChannelFn?: (channel: ChannelDTO) => Observable<never>;
     channelActions$ = new EventEmitter<ChannelAction>();
 
+    private courseSidebarService: CourseSidebarService = inject(CourseSidebarService);
+    private layoutService: LayoutService = inject(LayoutService);
+
     constructor(
         private router: Router,
         private activatedRoute: ActivatedRoute,
@@ -156,8 +167,35 @@ export class CourseConversationsComponent implements OnInit, OnDestroy {
     }
 
     ngOnInit(): void {
+        this.isMobile = this.layoutService.isBreakpointActive(CustomBreakpointNames.extraSmall);
+
+        this.breakpointSubscription = this.layoutService.subscribeToLayoutChanges().subscribe(() => {
+            this.isMobile = this.layoutService.isBreakpointActive(CustomBreakpointNames.extraSmall);
+        });
+
+        this.openSidebarEventSubscription = this.courseSidebarService.openSidebar$.subscribe(() => {
+            this.setIsCollapsed(true);
+        });
+
+        this.closeSidebarEventSubscription = this.courseSidebarService.closeSidebar$.subscribe(() => {
+            this.setIsCollapsed(false);
+        });
+
+        this.toggleSidebarEventSubscription = this.courseSidebarService.toggleSidebar$.subscribe(() => {
+            this.toggleSidebar();
+        });
+
+        if (!this.isMobile) {
+            if (this.courseOverviewService.getSidebarCollapseStateFromStorage('conversation')) {
+                this.courseSidebarService.openSidebar();
+            } else {
+                this.courseSidebarService.closeSidebar();
+            }
+        } else {
+            this.courseSidebarService.openSidebar();
+        }
+
         this.isLoading = true;
-        this.isCollapsed = this.courseOverviewService.getSidebarCollapseStateFromStorage('conversation');
         this.metisConversationService.isServiceSetup$.pipe(takeUntil(this.ngUnsubscribe)).subscribe((isServiceSetUp: boolean) => {
             if (isServiceSetUp) {
                 this.course = this.metisConversationService.course;
@@ -214,9 +252,13 @@ export class CourseConversationsComponent implements OnInit, OnDestroy {
         this.activatedRoute.queryParams.pipe(take(1), takeUntil(this.ngUnsubscribe)).subscribe((queryParams) => {
             if (queryParams.conversationId) {
                 this.metisConversationService.setActiveConversation(Number(queryParams.conversationId));
+
+                this.closeSidebarOnMobile();
             }
             if (queryParams.messageId) {
                 this.postInThread = { id: Number(queryParams.messageId) } as Post;
+
+                this.closeSidebarOnMobile();
             } else {
                 this.postInThread = undefined;
             }
@@ -236,12 +278,20 @@ export class CourseConversationsComponent implements OnInit, OnDestroy {
     ngOnDestroy() {
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();
+        this.openSidebarEventSubscription?.unsubscribe();
+        this.closeSidebarEventSubscription?.unsubscribe();
+        this.toggleSidebarEventSubscription?.unsubscribe();
         this.profileSubscription?.unsubscribe();
+        this.breakpointSubscription?.unsubscribe();
     }
 
     private subscribeToActiveConversation() {
         this.metisConversationService.activeConversation$.pipe(takeUntil(this.ngUnsubscribe)).subscribe((conversation: ConversationDTO) => {
+            const previousConversation = this.activeConversation;
             this.activeConversation = conversation;
+            if (this.isMobile && conversation && previousConversation?.id !== conversation.id) {
+                this.courseSidebarService.closeSidebar();
+            }
             this.updateQueryParameters();
         });
     }
@@ -286,8 +336,20 @@ export class CourseConversationsComponent implements OnInit, OnDestroy {
             : DEFAULT_CHANNEL_GROUPS;
     }
 
+    hideSearchTerm() {
+        this.courseWideSearchTerm = '';
+    }
+
     onSearch() {
+        if (this.isMobile) {
+            if (this.courseWideSearchTerm) {
+                this.courseSidebarService.closeSidebar();
+            } else {
+                this.courseSidebarService.openSidebar();
+            }
+        }
         this.metisConversationService.setActiveConversation(undefined);
+        this.activeConversation = undefined;
         this.updateQueryParameters();
         this.courseWideSearchConfig.searchTerm = this.courseWideSearchTerm;
         this.courseWideSearch?.onSearch();
@@ -316,11 +378,22 @@ export class CourseConversationsComponent implements OnInit, OnDestroy {
     }
 
     onConversationSelected(conversationId: number) {
+        this.closeSidebarOnMobile();
         this.metisConversationService.setActiveConversation(conversationId);
     }
 
     toggleSidebar() {
-        this.isCollapsed = !this.isCollapsed;
+        this.setIsCollapsed(!this.isCollapsed);
+    }
+
+    closeSidebarOnMobile() {
+        if (this.isMobile) {
+            this.courseSidebarService.closeSidebar();
+        }
+    }
+
+    setIsCollapsed(value: boolean) {
+        this.isCollapsed = value;
         this.courseOverviewService.setSidebarCollapseState('conversation', this.isCollapsed);
     }
 
@@ -395,12 +468,14 @@ export class CourseConversationsComponent implements OnInit, OnDestroy {
                         complete: () => {
                             if (newActiveConversation) {
                                 this.metisConversationService.setActiveConversation(newActiveConversation);
+                                this.closeSidebarOnMobile();
                             }
                         },
                     });
                 } else {
                     if (newActiveConversation) {
                         this.metisConversationService.setActiveConversation(newActiveConversation);
+                        this.closeSidebarOnMobile();
                     }
                 }
                 this.prepareSidebarData();