Communication: Fix element height in announcement channel (#9664)

ls1intum · Nov 7, 2024 · a140b11 · a140b11
1 parent a8ec277
commit a140b11
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 1 deletion.
diff --git a/...ew/course-conversations/layout/conversation-messages/conversation-messages.component.html b/...ew/course-conversations/layout/conversation-messages/conversation-messages.component.html
@@ -67,7 +67,13 @@
                 <div
                     id="scrollableDiv"
                     #container
-                    [ngClass]="{ 'posting-infinite-scroll-container': posts.length !== 0, 'content-height-dev': contentHeightDev, 'is-fetching-posts': isFetchingPosts }"
+                    [ngClass]="{
+                        'posting-infinite-scroll-container': posts.length !== 0,
+                        'content-height-dev': contentHeightDev,
+                        'is-fetching-posts': isFetchingPosts,
+                        'hide-input-full': isHiddenInputFull,
+                        'hide-input': isHiddenInputWithCallToAction,
+                    }"
                     infinite-scroll
                     class="conversation-messages-message-list"
                     [scrollWindow]="false"

diff --git a/...ew/course-conversations/layout/conversation-messages/conversation-messages.component.scss b/...ew/course-conversations/layout/conversation-messages/conversation-messages.component.scss
@@ -47,6 +47,14 @@
         max-height: calc(75vh - var(--message-input-height-prod) - var(--search-height) - var(--channel-header-height));
         overflow-y: auto;
 
+        &.hide-input-full {
+            max-height: calc(94vh - var(--message-input-height-prod) - var(--search-height) - var(--channel-header-height));
+        }
+
+        &.hide-input {
+            max-height: calc(87vh - var(--message-input-height-prod) - var(--search-height) - var(--channel-header-height));
+        }
+
         &.content-height-dev {
             max-height: calc(75vh - var(--message-input-height-dev) - var(--search-height) - var(--channel-header-height));
 
@@ -56,6 +64,14 @@
             }
         }
 
+        &.hide-input-full.content-height-dev {
+            max-height: calc(94vh - var(--message-input-height-dev) - var(--search-height) - var(--channel-header-height));
+        }
+
+        &.hide-input.content-height-dev {
+            max-height: calc(87vh - var(--message-input-height-dev) - var(--search-height) - var(--channel-header-height));
+        }
+
         @include media-breakpoint-down(sm) {
             max-height: calc(90vh - var(--message-input-height-prod) - var(--search-height) - var(--channel-header-height));
             max-height: calc(90dvh - var(--message-input-height-prod) - var(--search-height) - var(--channel-header-height));

diff --git a/...view/course-conversations/layout/conversation-messages/conversation-messages.component.ts b/...view/course-conversations/layout/conversation-messages/conversation-messages.component.ts
@@ -81,6 +81,8 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD
     faEnvelope = faEnvelope;
     faCircleNotch = faCircleNotch;
     isMobile = false;
+    isHiddenInputWithCallToAction = false;
+    isHiddenInputFull = false;
 
     private layoutService: LayoutService = inject(LayoutService);
 
@@ -145,6 +147,14 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD
     }
 
     private onActiveConversationChange() {
+        if (this._activeConversation !== undefined && this.getAsChannel(this._activeConversation)?.isAnnouncementChannel) {
+            this.isHiddenInputFull = !canCreateNewMessageInConversation(this._activeConversation);
+            this.isHiddenInputWithCallToAction = canCreateNewMessageInConversation(this._activeConversation);
+        } else {
+            this.isHiddenInputFull = false;
+            this.isHiddenInputWithCallToAction = false;
+        }
+
         if (this.course && this._activeConversation) {
             if (this.searchInput) {
                 this.searchInput.nativeElement.value = '';

diff --git a/...course-conversations/layout/conversation-messages/conversation-messages.component.spec.ts b/...course-conversations/layout/conversation-messages/conversation-messages.component.spec.ts
@@ -144,6 +144,8 @@ examples.forEach((activeConversation) => {
             it('should display the "new announcement" button when the conversation is an announcement channel', fakeAsync(() => {
                 const announcementButton = fixture.debugElement.query(By.css('.btn.btn-md.btn-primary'));
                 expect(announcementButton).toBeTruthy(); // Check if the button is present
+                expect(component.isHiddenInputFull).toBeFalsy();
+                expect(component.isHiddenInputWithCallToAction).toBeTruthy();
 
                 const modal = fixture.debugElement.query(By.directive(PostCreateEditModalComponent));
                 expect(modal).toBeTruthy(); // Check if the modal is present