fix message disabled issue & refactor button shape

ls1intum · Oct 11, 2024 · 468c4e8 · 468c4e8
1 parent b908c5a
commit 468c4e8
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 37 deletions.
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
@@ -305,6 +305,7 @@ export class CourseConversationsComponent implements OnInit, OnDestroy {
             groupedData: this.accordionConversationGroups,
             ungroupedData: this.sidebarConversations,
             showAccordionLeadingIcon: true,
+            messagingEnabled: isMessagingEnabled(this.course),
         };
     }
 

diff --git a/src/main/webapp/app/shared/sidebar/sidebar.component.html b/src/main/webapp/app/shared/sidebar/sidebar.component.html
@@ -3,49 +3,40 @@
         <div class="w-100 bg-module">
             <div class="sidebar-content" [ngClass]="{ collapsed: isCollapsed }">
                 @if (searchFieldEnabled) {
-                    <div class="mt-2 mb-2">
-                        <jhi-search-filter (newSearchEvent)="setSearchValue($event)" class="mb-2" />
-                        @if (showFilter) {
-                            <div class="ms-2 mt-1 text-primary">
-                                <a (click)="openFilterExercisesDialog()">
-                                    @if (isFilterActive) {
-                                        <fa-icon [icon]="faFilterCurrentlyApplied" />
-                                    } @else {
-                                        <fa-icon [icon]="faFilter" />
+                    <div class="mt-2 mb-1 d-flex align-items-center">
+                        <jhi-search-filter (newSearchEvent)="setSearchValue($event)" class="mb-1 flex-grow-1 search-filter" />
+
+                        @if (inCommunication()) {
+                            <div class="ms-2 mb-1" ngbDropdown>
+                                <button type="button" class="btn btn-primary btn-sm square-button" ngbDropdownToggle>
+                                    <fa-icon [icon]="faPlusCircle" class="item-icon"></fa-icon>
+                                </button>
+
+                                <div ngbDropdownMenu>
+                                    @if (sidebarData.messagingEnabled) {
+                                        <button (click)="createDirectChat()" class="p-2" ngbDropdownItem>
+                                            <fa-icon [icon]="faUser" class="item-icon" [fixedWidth]="true"></fa-icon>
+                                            <span jhiTranslate="artemisApp.courseOverview.sidebar.createDirectChat"></span>
+                                        </button>
+                                        <button (click)="createGroupChat()" class="p-2" ngbDropdownItem>
+                                            <fa-icon [icon]="faUsers" class="item-icon" [fixedWidth]="true"></fa-icon>
+                                            <span jhiTranslate="artemisApp.courseOverview.sidebar.createGroupChat"></span>
+                                        </button>
                                     }
-                                    <span jhiTranslate="artemisApp.courseOverview.exerciseFilter.filter"></span>
-                                </a>
+                                    <button (click)="createNewChannel()" class="p-2" ngbDropdownItem>
+                                        <fa-icon [icon]="faHashtag" class="item-icon"></fa-icon>
+                                        <span jhiTranslate="artemisApp.courseOverview.sidebar.createChannel"></span>
+                                    </button>
+                                    <button (click)="browseChannels()" class="p-2" ngbDropdownItem>
+                                        <fa-icon [icon]="faSearch" class="item-icon"></fa-icon>
+                                        <span jhiTranslate="artemisApp.courseOverview.sidebar.browseChannels"></span>
+                                    </button>
+                                </div>
                             </div>
                         }
                     </div>
                 }
-                @if (inCommunication()) {
-                    <div class="row g-1 col-12" ngbDropdown>
-                        <button type="button" class="btn btn-primary w-100" ngbDropdownToggle>
-                            <fa-icon [icon]="faPlusCircle" class="item-icon"></fa-icon>
-                            <span jhiTranslate="artemisApp.courseOverview.sidebar.addChannelChat"></span>
-                        </button>
 
-                        <div ngbDropdownMenu>
-                            <button (click)="createDirectChat()" class="p-2" ngbDropdownItem>
-                                <fa-icon [icon]="faUser" class="item-icon" [fixedWidth]="true"></fa-icon>
-                                <span jhiTranslate="artemisApp.courseOverview.sidebar.createDirectChat"></span>
-                            </button>
-                            <button (click)="createGroupChat()" class="p-2" ngbDropdownItem>
-                                <fa-icon [icon]="faUsers" class="item-icon" [fixedWidth]="true"></fa-icon>
-                                <span jhiTranslate="artemisApp.courseOverview.sidebar.createGroupChat"></span>
-                            </button>
-                            <button (click)="createNewChannel()" class="p-2" ngbDropdownItem>
-                                <fa-icon [icon]="faHashtag" class="item-icon"></fa-icon>
-                                <span jhiTranslate="artemisApp.courseOverview.sidebar.createChannel"></span>
-                            </button>
-                            <button (click)="browseChannels()" class="p-2" ngbDropdownItem>
-                                <fa-icon [icon]="faSearch" class="item-icon"></fa-icon>
-                                <span jhiTranslate="artemisApp.courseOverview.sidebar.browseChannels"></span>
-                            </button>
-                        </div>
-                    </div>
-                }
                 @if (!sidebarData?.ungroupedData || !(sidebarData?.ungroupedData | searchFilter: ['title', 'type'] : searchValue)?.length) {
                     <div
                         [ngClass]="{ 'content-height-dev': !isProduction || isTestServer }"

diff --git a/src/main/webapp/app/shared/sidebar/sidebar.component.scss b/src/main/webapp/app/shared/sidebar/sidebar.component.scss
@@ -52,3 +52,17 @@
     display: flex;
     margin-left: 0.2rem;
 }
+
+.square-button {
+    width: 45px;
+    height: 35px;
+    padding: 0.2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.2rem;
+}
+
+.search-filter {
+    height: 35px;
+}
diff --git a/src/main/webapp/app/types/sidebar.ts b/src/main/webapp/app/types/sidebar.ts
@@ -33,6 +33,7 @@ export interface SidebarData {
     ungroupedData?: SidebarCardElement[];
     storageId?: string;
     showAccordionLeadingIcon?: boolean;
+    messagingEnabled?: boolean;
 }
 
 export interface SidebarCardElement {