From 8d860997a568395fe24a6cd91891a7d3cdb169bc Mon Sep 17 00:00:00 2001
From: Elblinator <69210919+Elblinator@users.noreply.github.com>
Date: Wed, 22 May 2024 13:52:50 +0200
Subject: [PATCH] Hide empty space if three dot menu is not shown (#3590)

---
 .../participant-list.component.html           | 11 ++++++--
 .../participant-list.component.ts             | 10 +++----
 .../scrolling-table-cell.directive.ts         | 26 ++++++++++++++++---
 3 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.html b/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.html
index c4d0927eb5..61f344a4c5 100644
--- a/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.html
+++ b/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.html
@@ -156,14 +156,21 @@ <h2>{{ 'Participants' | translate }}</h2>
     </div>
 
     <!-- Menu -->
-    <div *osScrollingTableCell="'menu'; row as user; config: { width: 40 }" class="cell-slot fill">
+    <div
+        *osScrollingTableCell="
+            'menu';
+            row as user;
+            config: { width: 40 };
+            isHidden: !canSeeItemMenu() && viewport.isMobileSubject
+        "
+        class="cell-slot"
+    >
         <button
             mat-icon-button
             [disabled]="isMultiSelect"
             [matMenuTriggerFor]="singleItemMenu"
             (click)="$event.stopPropagation()"
             [matMenuTriggerData]="{ user: user }"
-            *ngIf="canSeeSingleItemMenu(user) || (viewport.isMobileSubject | async)"
         >
             <mat-icon>more_vert</mat-icon>
         </button>
diff --git a/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.ts b/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.ts
index 03cb70978a..be1472e0e7 100644
--- a/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.ts
+++ b/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.ts
@@ -200,11 +200,7 @@ export class ParticipantListComponent extends BaseMeetingListViewComponent<ViewU
     public canChangePassword(user: ViewUser): boolean {
         const userOML = user?.organization_management_level;
         const sufficientOML = userOML ? this.operator.hasOrganizationPermissions(userOML as OML) : true;
-        return (
-            !user?.saml_id &&
-            this.userService.isAllowed(`changePassword`, user.id === this.operator.user.id) &&
-            sufficientOML
-        );
+        return !user?.saml_id && this.userService.isAllowed(`changePassword`, false) && sufficientOML;
     }
 
     public isUserPresent(user: ViewUser): boolean {
@@ -458,8 +454,8 @@ export class ParticipantListComponent extends BaseMeetingListViewComponent<ViewU
         await this.repo.removeUsersFromMeeting([user]);
     }
 
-    public canSeeSingleItemMenu(user: ViewUser): boolean {
-        return this.operator.hasPerms(Permission.userCanUpdate) || this.canChangePassword(user);
+    public canSeeItemMenu(): boolean {
+        return this.operator.hasPerms(Permission.userCanUpdate);
     }
 
     /**
diff --git a/client/src/app/ui/modules/scrolling-table/directives/scrolling-table-cell.directive.ts b/client/src/app/ui/modules/scrolling-table/directives/scrolling-table-cell.directive.ts
index 1cb147185c..aa5ab1c3ac 100644
--- a/client/src/app/ui/modules/scrolling-table/directives/scrolling-table-cell.directive.ts
+++ b/client/src/app/ui/modules/scrolling-table/directives/scrolling-table-cell.directive.ts
@@ -1,5 +1,6 @@
 import { TemplatePortal } from '@angular/cdk/portal';
-import { Directive, Input, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import { Directive, Input, OnDestroy, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
 
 import { ScrollingTableManageService } from '../services';
 import { ScrollingTableCellDefConfig } from './scrolling-table-cell-config';
@@ -9,7 +10,7 @@ import { ScrollingTableCellPosition } from './scrolling-table-cell-position';
 @Directive({
     selector: `[osScrollingTableCell]`
 })
-export class ScrollingTableCellDirective implements OnInit, ScrollingTableCellDefinition {
+export class ScrollingTableCellDirective implements OnInit, OnDestroy, ScrollingTableCellDefinition {
     @Input()
     public set osScrollingTableCell(property: string) {
         this._property = property;
@@ -22,8 +23,18 @@ export class ScrollingTableCellDirective implements OnInit, ScrollingTableCellDe
     }
 
     @Input()
-    public set osScrollingTableCellIsHidden(isHidden: boolean) {
-        this._isHidden = isHidden;
+    public set osScrollingTableCellIsHidden(isHidden: boolean | Observable<boolean>) {
+        if (this.isHiddenSubscription) {
+            this.isHiddenSubscription.unsubscribe();
+        }
+        if (typeof isHidden == `boolean`) {
+            this.isHiddenSubscription = null;
+            this._isHidden = isHidden;
+        } else {
+            isHidden.subscribe(isMobileView => {
+                this._isHidden = !isMobileView;
+            });
+        }
     }
 
     @Input()
@@ -81,6 +92,7 @@ export class ScrollingTableCellDirective implements OnInit, ScrollingTableCellDe
     private _property = ``;
     private _labelString = ``;
     private _isDefault = false;
+    private isHiddenSubscription: Subscription | null = null;
 
     public constructor(
         public readonly template: TemplateRef<any>,
@@ -96,6 +108,12 @@ export class ScrollingTableCellDirective implements OnInit, ScrollingTableCellDe
         }
     }
 
+    public ngOnDestroy(): void {
+        if (this.isHiddenSubscription) {
+            this.isHiddenSubscription.unsubscribe();
+        }
+    }
+
     private render(): void {
         const { width, minWidth, maxWidth } = this._config;
         if (width) {