Fix Clipping Issues

ls1intum · Oct 12, 2024 · 346962a · 346962a
1 parent b6b47e7
commit 346962a
Show file tree

Hide file tree

Showing 19 changed files with 472 additions and 125 deletions.
diff --git a/src/main/webapp/app/overview/course-conversations/course-conversations.component.html b/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()"
@@ -40,7 +40,10 @@
                     <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
@@ -54,9 +57,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

diff --git a/src/main/webapp/app/overview/course-conversations/course-conversations.component.scss b/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);
 }
@@ -35,3 +39,68 @@
     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%;
+    }
+}
diff --git a/src/main/webapp/app/overview/course-conversations/course-conversations.component.ts b/src/main/webapp/app/overview/course-conversations/course-conversations.component.ts
@@ -21,6 +21,8 @@ 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';
+import { CourseSidebarService } from 'app/overview/course-sidebar.service';
+import isMobile from 'ismobilejs-es5';
 
 const DEFAULT_CHANNEL_GROUPS: AccordionGroups = {
     favoriteChannels: { entityData: [] },
@@ -73,6 +75,9 @@ const DEFAULT_COLLAPSE_STATE: CollapseState = {
 })
 export class CourseConversationsComponent implements OnInit, OnDestroy {
     private ngUnsubscribe = new Subject<void>();
+    private closeSidebarEventSubscription: Subscription;
+    private openSidebarEventSubscription: Subscription;
+    private toggleSidebarEventSubscription: Subscription;
     course?: Course;
     isLoading = false;
     isServiceSetUp = false;
@@ -90,6 +95,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;
@@ -123,6 +129,7 @@ export class CourseConversationsComponent implements OnInit, OnDestroy {
         private courseOverviewService: CourseOverviewService,
         private modalService: NgbModal,
         private profileService: ProfileService,
+        private courseSidebarService: CourseSidebarService,
     ) {}
 
     getAsChannel = getAsChannelDTO;
@@ -141,8 +148,31 @@ export class CourseConversationsComponent implements OnInit, OnDestroy {
     }
 
     ngOnInit(): void {
+        this.isMobile = isMobile(window.navigator.userAgent).any;
+
+        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;
@@ -174,9 +204,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;
             }
@@ -196,12 +230,18 @@ 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();
     }
 
     private subscribeToActiveConversation() {
         this.metisConversationService.activeConversation$.pipe(takeUntil(this.ngUnsubscribe)).subscribe((conversation: ConversationDTO) => {
             this.activeConversation = conversation;
+            if (this.isMobile && conversation) {
+                this.courseSidebarService.closeSidebar();
+            }
             this.updateQueryParameters();
         });
     }
@@ -252,7 +292,18 @@ 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.updateQueryParameters();
         this.courseWideSearchConfig.searchTerm = this.courseWideSearchTerm;
@@ -282,11 +333,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);
     }
 
@@ -357,12 +419,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();