From 346962adf5f5faa80db002007f0de258c5c7901f Mon Sep 17 00:00:00 2001 From: Paul Rangger Date: Sat, 12 Oct 2024 08:51:19 +0200 Subject: [PATCH] Fix Clipping Issues --- .../course-conversations.component.html | 14 +- .../course-conversations.component.scss | 69 ++++++ .../course-conversations.component.ts | 68 +++++- .../course-wide-search.component.html | 214 +++++++++--------- .../course-wide-search.component.scss | 35 +++ .../course-wide-search.component.ts | 6 + .../conversation-header.component.html | 11 +- .../conversation-header.component.ts | 9 +- ...conversation-thread-sidebar.component.scss | 13 ++ .../overview/course-overview.component.html | 2 +- .../overview/course-overview.component.scss | 14 ++ .../app/overview/course-overview.component.ts | 19 ++ .../app/overview/course-sidebar.service.ts | 24 ++ src/main/webapp/content/scss/global.scss | 2 +- src/main/webapp/i18n/de/metis.json | 4 +- src/main/webapp/i18n/en/metis.json | 4 +- .../course/course-overview.component.spec.ts | 15 +- .../course-conversations.component.spec.ts | 22 ++ .../overview/course-sidebar.service.spec.ts | 52 +++++ 19 files changed, 472 insertions(+), 125 deletions(-) create mode 100644 src/main/webapp/app/overview/course-sidebar.service.ts create mode 100644 src/test/javascript/spec/service/overview/course-sidebar.service.spec.ts 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 index 90b2559fa81a..095b68596c58 100644 --- 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 }}" /> - + @@ -22,7 +22,7 @@ } @if (isCodeOfConductAccepted && isServiceSetUp && course) {
-
+
} -
+
@if (activeConversation) {
@if (!!postInThread) { (); + 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(); diff --git a/src/main/webapp/app/overview/course-conversations/course-wide-search/course-wide-search.component.html b/src/main/webapp/app/overview/course-conversations/course-wide-search/course-wide-search.component.html index f4a255b49422..d64b1adce5cb 100644 --- a/src/main/webapp/app/overview/course-conversations/course-wide-search/course-wide-search.component.html +++ b/src/main/webapp/app/overview/course-conversations/course-wide-search/course-wide-search.component.html @@ -1,114 +1,120 @@ -
-
-
-

- @if (!courseWideSearchConfig.searchTerm) { - All Messages - } @else { - Search Results for "{{ courseWideSearchConfig.searchTerm }}" - } -

+
+ + +
+
+
+
+
+

+ @if (!courseWideSearchConfig.searchTerm) { + All Messages + } @else { + Search Results for "{{ courseWideSearchConfig.searchTerm }}" + } +

+
-
- @if (formGroup) { -
-
- -
- -
-
- -
-
- - + @if (formGroup) { +
+ + +
+ +
+
+ +
+
+ + +
+
+ + +
+
+ + +
-
- - -
-
- - + +
+
+
+ +
- -
-
-
- -
+ +
+ } +
+
+
+
+
+ + @if (isFetchingPosts) { +
+
-
- -
- } -
-
-
-
-
- - @if (isFetchingPosts) { -
- -
- } - - @if (!isFetchingPosts && posts.length === 0) { -
- -
- } - -
- - - @for (post of posts; track postsTrackByFn($index, post)) { -
- + } + + @if (!isFetchingPosts && posts.length === 0) { +
+
} + +
+ + + @for (post of posts; track postsTrackByFn($index, post)) { +
+ +
+ } +
diff --git a/src/main/webapp/app/overview/course-conversations/course-wide-search/course-wide-search.component.scss b/src/main/webapp/app/overview/course-conversations/course-wide-search/course-wide-search.component.scss index d4913cca2254..eaddd11f37f8 100644 --- a/src/main/webapp/app/overview/course-conversations/course-wide-search/course-wide-search.component.scss +++ b/src/main/webapp/app/overview/course-conversations/course-wide-search/course-wide-search.component.scss @@ -1,3 +1,7 @@ +@import 'bootstrap/scss/functions'; +@import 'bootstrap/scss/variables'; +@import 'bootstrap/scss/mixins'; + .coursewide-search { .bold-line { height: 1px; @@ -28,3 +32,34 @@ padding-bottom: 100px; } } + +.course-wide-search-mobile-disclaimer { + display: none; +} + +@include media-breakpoint-down(sm) { + .is-not-in-active-search { + display: none; + } + + .course-wide-search-mobile-disclaimer { + pointer-events: none; + position: absolute; + top: 10%; + left: 0; + height: 90%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + opacity: 0; + + transition: opacity 0.2s ease-in-out; + } + + .course-wide-search-mobile-disclaimer.is-not-in-active-search { + opacity: 1; + pointer-events: all; + } +} diff --git a/src/main/webapp/app/overview/course-conversations/course-wide-search/course-wide-search.component.ts b/src/main/webapp/app/overview/course-conversations/course-wide-search/course-wide-search.component.ts index 9e07517c3f8a..0378920dbea2 100644 --- a/src/main/webapp/app/overview/course-conversations/course-wide-search/course-wide-search.component.ts +++ b/src/main/webapp/app/overview/course-conversations/course-wide-search/course-wide-search.component.ts @@ -23,6 +23,7 @@ import { MetisService } from 'app/shared/metis/metis.service'; import { MetisConversationService } from 'app/shared/metis/metis-conversation.service'; import { PostContextFilter, PostSortCriterion, SortDirection } from 'app/shared/metis/metis.util'; import { ConversationDTO } from 'app/entities/metis/conversation/conversation.model'; +import { CourseSidebarService } from 'app/overview/course-sidebar.service'; @Component({ selector: 'jhi-course-wide-search', @@ -74,6 +75,7 @@ export class CourseWideSearchComponent implements OnInit, AfterViewInit, OnDestr public metisConversationService: MetisConversationService, // instance from course-conversations.component private formBuilder: FormBuilder, public cdr: ChangeDetectorRef, + private courseSidebarService: CourseSidebarService, ) {} ngOnInit() { @@ -92,6 +94,10 @@ export class CourseWideSearchComponent implements OnInit, AfterViewInit, OnDestr this.ngUnsubscribe.complete(); } + openSidebar() { + this.courseSidebarService.openSidebar(); + } + private subscribeToMetis() { this.metisService.posts.pipe(takeUntil(this.ngUnsubscribe)).subscribe((posts: Post[]) => { this.setPosts(posts); diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html b/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html index 77c54a91e20f..1db98b09814d 100644 --- a/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html +++ b/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html @@ -1,8 +1,11 @@ @if (activeConversation && course) {
-
-

+
+ +

@if (activeConversationAsChannel) { +