Align Multiselect Text centered (#2976)

OpenSlides · Dec 1, 2023 · 9f8522c · 9f8522c
1 parent 068bf13
commit 9f8522c
Show file tree

Hide file tree

Showing 16 changed files with 72 additions and 90 deletions.
diff --git a/...agenda/pages/agenda-item-list/components/agenda-item-list/agenda-item-list.component.html b/...agenda/pages/agenda-item-list/components/agenda-item-list/agenda-item-list.component.html
@@ -9,16 +9,15 @@
         <h2>{{ 'Agenda' | translate }}</h2>
     </div>
     <!-- Menu -->
-    <div class="menu-slot">
+    <ng-container class="menu-slot">
         <button type="button" mat-icon-button [matMenuTriggerFor]="agendaMenu"><mat-icon>more_vert</mat-icon></button>
-    </div>
+    </ng-container>
 
     <!-- Multiselect info -->
-    <div class="central-info-slot">
+    <ng-container class="central-info-slot">
         <button mat-icon-button (click)="toggleMultiSelect()"><mat-icon>arrow_back</mat-icon></button>
-        <span>{{ selectedRows.length }}&nbsp;</span>
-        <span>{{ 'selected' | translate }}</span>
-    </div>
+        <span>{{ selectedRows.length }}&nbsp;{{ 'selected' | translate }}</span>
+    </ng-container>
 </os-head-bar>
 
 <os-projectable-list

diff --git a/...signments/pages/assignment-list/components/assignment-list/assignment-list.component.html b/...signments/pages/assignment-list/components/assignment-list/assignment-list.component.html
@@ -4,18 +4,17 @@
         <h2>{{ 'Elections' | translate }}</h2>
     </div>
     <!-- Menu -->
-    <div class="menu-slot">
+    <ng-container class="menu-slot">
         <button type="button" mat-icon-button [matMenuTriggerFor]="assignmentMenu">
             <mat-icon>more_vert</mat-icon>
         </button>
-    </div>
+    </ng-container>
 
     <!-- Multiselect info -->
-    <div class="central-info-slot">
+    <ng-container class="central-info-slot">
         <button mat-icon-button (click)="toggleMultiSelect()"><mat-icon>arrow_back</mat-icon></button>
-        <span>{{ selectedRows.length }}&nbsp;</span>
-        <span>{{ 'selected' | translate }}</span>
-    </div>
+        <span>{{ selectedRows.length }}&nbsp;{{ 'selected' | translate }}</span>
+    </ng-container>
 </os-head-bar>
 
 <os-projectable-list

diff --git a/...mediafiles/modules/mediafile-list/components/mediafile-list/mediafile-list.component.html b/...mediafiles/modules/mediafile-list/components/mediafile-list/mediafile-list.component.html
@@ -10,7 +10,7 @@ <h2>{{ 'Files' | translate }}</h2>
     </div>
 
     <!-- Menu -->
-    <div class="menu-slot">
+    <ng-container class="menu-slot">
         <button
             type="button"
             mat-icon-button
@@ -23,14 +23,13 @@ <h2>{{ 'Files' | translate }}</h2>
         <button type="button" mat-icon-button [matMenuTriggerFor]="mediafilesMenu">
             <mat-icon>more_vert</mat-icon>
         </button>
-    </div>
+    </ng-container>
 
     <!-- Multiselect info -->
-    <div *ngIf="isMultiSelect" class="central-info-slot">
+    <ng-container class="central-info-slot">
         <button mat-icon-button (click)="toggleMultiSelect()"><mat-icon>arrow_back</mat-icon></button>
-        <span>{{ selectedRows.length }}&nbsp;</span>
-        <span>{{ 'selected' | translate }}</span>
-    </div>
+        <span>{{ selectedRows.length }}&nbsp;{{ 'selected' | translate }}</span>
+    </ng-container>
 </os-head-bar>
 
 <!-- the actual file manager -->

diff --git a/...gs/pages/motions/pages/amendments/components/amendment-list/amendment-list.component.html b/...gs/pages/motions/pages/amendments/components/amendment-list/amendment-list.component.html
@@ -13,18 +13,17 @@ <h2>
     </div>
 
     <!-- Menu -->
-    <div class="menu-slot">
+    <ng-container class="menu-slot">
         <button type="button" mat-icon-button [matMenuTriggerFor]="amendmentListMenu">
             <mat-icon>more_vert</mat-icon>
         </button>
-    </div>
+    </ng-container>
 
     <!-- Multiselect info -->
-    <div class="central-info-slot">
+    <ng-container class="central-info-slot">
         <button mat-icon-button (click)="toggleMultiSelect()"><mat-icon>arrow_back</mat-icon></button>
-        <span>{{ selectedRows.length }}&nbsp;</span>
-        <span>{{ 'selected' | translate }}</span>
-    </div>
+        <span>{{ selectedRows.length }}&nbsp;{{ 'selected' | translate }}</span>
+    </ng-container>
 </os-head-bar>
 
 <os-projectable-list

diff --git a/...eetings/pages/motions/pages/motion-list/components/motion-list/motion-list.component.html b/...eetings/pages/motions/pages/motion-list/components/motion-list/motion-list.component.html
@@ -10,18 +10,17 @@ <h2>{{ 'Motions' | translate }}</h2>
     </div>
 
     <!-- Menu -->
-    <div class="menu-slot">
+    <ng-container class="menu-slot">
         <button type="button" mat-icon-button [matMenuTriggerFor]="motionListMenu">
             <mat-icon>more_vert</mat-icon>
         </button>
-    </div>
+    </ng-container>
 
     <!-- Multiselect info -->
-    <div class="central-info-slot">
+    <ng-container class="central-info-slot">
         <button mat-icon-button (click)="toggleMultiSelect()"><mat-icon>arrow_back</mat-icon></button>
-        <span>{{ selectedRows.length }}&nbsp;</span>
-        <span>{{ 'selected' | translate }}</span>
-    </div>
+        <span>{{ selectedRows.length }}&nbsp;{{ 'selected' | translate }}</span>
+    </ng-container>
 
     <div class="extra-controls-slot">
         <div *ngIf="hasCategories && !isMultiSelect">

diff --git a/...tings/pages/motions/pages/workflows/components/workflow-list/workflow-list.component.html b/...tings/pages/motions/pages/workflows/components/workflow-list/workflow-list.component.html
@@ -9,18 +9,17 @@
         <h2>{{ 'Workflows' | translate }}</h2>
     </div>
     <!-- Menu -->
-    <div class="menu-slot">
+    <ng-container class="menu-slot">
         <button type="button" mat-icon-button [matMenuTriggerFor]="workflowListMenu">
             <mat-icon>more_vert</mat-icon>
         </button>
-    </div>
+    </ng-container>
 
     <!-- Multiselect info -->
-    <div class="central-info-slot">
+    <ng-container class="central-info-slot">
         <button mat-icon-button (click)="toggleMultiSelect()"><mat-icon>arrow_back</mat-icon></button>
-        <span>{{ selectedRows.length }}&nbsp;</span>
-        <span>{{ 'selected' | translate }}</span>
-    </div>
+        <span>{{ selectedRows.length }}&nbsp;{{ 'selected' | translate }}</span>
+    </ng-container>
 </os-head-bar>
 
 <os-projectable-list

diff --git a/...ipants/pages/participant-list/components/participant-list/participant-list.component.html b/...ipants/pages/participant-list/components/participant-list/participant-list.component.html
@@ -5,16 +5,15 @@ <h2>{{ 'Participants' | translate }}</h2>
     </div>
 
     <!-- Menu -->
-    <div class="menu-slot">
+    <ng-container class="menu-slot">
         <button type="button" mat-icon-button [matMenuTriggerFor]="userMenu"><mat-icon>more_vert</mat-icon></button>
-    </div>
+    </ng-container>
 
     <!-- Multiselect info -->
-    <div class="central-info-slot">
+    <ng-container class="central-info-slot">
         <button mat-icon-button (click)="toggleMultiSelect()"><mat-icon>arrow_back</mat-icon></button>
-        <span>{{ selectedRows.length }}&nbsp;</span>
-        <span>{{ 'selected' | translate }}</span>
-    </div>
+        <span>{{ selectedRows.length }}&nbsp;{{ 'selected' | translate }}</span>
+    </ng-container>
 </os-head-bar>
 
 <os-list

diff --git a/...ion/pages/accounts/pages/account-list/components/account-list/account-list.component.html b/...ion/pages/accounts/pages/account-list/components/account-list/account-list.component.html
@@ -10,16 +10,15 @@ <h2>{{ 'Accounts' | translate }}</h2>
     </div>
 
     <!-- Menu -->
-    <div class="menu-slot">
+    <ng-container class="menu-slot">
         <button type="button" mat-icon-button [matMenuTriggerFor]="memberMenu"><mat-icon>more_vert</mat-icon></button>
-    </div>
+    </ng-container>
 
     <!-- Multiselect info -->
-    <div class="central-info-slot">
+    <ng-container class="central-info-slot">
         <button mat-icon-button (click)="toggleMultiSelect()"><mat-icon>arrow_back</mat-icon></button>
-        <span>{{ selectedRows.length }}&nbsp;</span>
-        <span>{{ 'selected' | translate }}</span>
-    </div>
+        <span>{{ selectedRows.length }}&nbsp;{{ 'selected' | translate }}</span>
+    </ng-container>
 </os-head-bar>
 
 <os-list

diff --git a/...s/committees/pages/committee-list/components/committee-list/committee-list.component.html b/...s/committees/pages/committee-list/components/committee-list/committee-list.component.html
@@ -11,18 +11,17 @@ <h2>{{ 'Committees' | translate }}</h2>
 
     <!-- Menu -->
     <!-- Only organization managers can do something -->
-    <div class="menu-slot" *osOmlPerms="OML.can_manage_organization">
+    <ng-container class="menu-slot" *osOmlPerms="OML.can_manage_organization">
         <button type="button" mat-icon-button [matMenuTriggerFor]="committeeMenu">
             <mat-icon>more_vert</mat-icon>
         </button>
-    </div>
+    </ng-container>
 
     <!-- Multiselect info -->
-    <div class="central-info-slot">
+    <ng-container class="central-info-slot">
         <button mat-icon-button (click)="toggleMultiSelect()"><mat-icon>arrow_back</mat-icon></button>
-        <span>{{ selectedRows.length }}&nbsp;</span>
-        <span>{{ 'selected' | translate }}</span>
-    </div>
+        <span>{{ selectedRows.length }}&nbsp;{{ 'selected' | translate }}</span>
+    </ng-container>
 </os-head-bar>
 
 <os-list

diff --git a/...le-list/components/organization-mediafile-list/organization-mediafile-list.component.html b/...le-list/components/organization-mediafile-list/organization-mediafile-list.component.html
@@ -10,7 +10,7 @@ <h2>{{ 'Files' | translate }}</h2>
     </div>
 
     <!-- Menu -->
-    <div class="menu-slot">
+    <ng-container class="menu-slot">
         <button
             type="button"
             mat-icon-button
@@ -23,14 +23,13 @@ <h2>{{ 'Files' | translate }}</h2>
         <button type="button" mat-icon-button [matMenuTriggerFor]="mediafilesMenu">
             <mat-icon>more_vert</mat-icon>
         </button>
-    </div>
+    </ng-container>
 
     <!-- Multiselect info -->
-    <div *ngIf="isMultiSelect" class="central-info-slot">
+    <ng-container class="central-info-slot">
         <button mat-icon-button (click)="toggleMultiSelect()"><mat-icon>arrow_back</mat-icon></button>
-        <span>{{ selectedRows.length }}&nbsp;</span>
-        <span>{{ 'selected' | translate }}</span>
-    </div>
+        <span>{{ selectedRows.length }}&nbsp;{{ 'selected' | translate }}</span>
+    </ng-container>
 </os-head-bar>
 
 <!-- the actual file manager -->

diff --git a/...ages/orga-meetings/pages/meeting-list/components/meeting-list/meeting-list.component.html b/...ages/orga-meetings/pages/meeting-list/components/meeting-list/meeting-list.component.html
@@ -6,18 +6,17 @@ <h2>{{ 'Meetings' | translate }}</h2>
 
     <!-- Menu -->
     <!-- Only organization managers can do something -->
-    <div class="menu-slot" *osOmlPerms="OML.superadmin">
+    <ng-container class="menu-slot" *osOmlPerms="OML.superadmin">
         <button type="button" mat-icon-button [matMenuTriggerFor]="meetingMenu">
             <mat-icon>more_vert</mat-icon>
         </button>
-    </div>
+    </ng-container>
 
     <!-- Multiselect info -->
-    <div class="central-info-slot">
+    <ng-container class="central-info-slot">
         <button mat-icon-button (click)="toggleMultiSelect()"><mat-icon>arrow_back</mat-icon></button>
-        <span>{{ selectedRows.length }}&nbsp;</span>
-        <span>{{ 'selected' | translate }}</span>
-    </div>
+        <span>{{ selectedRows.length }}&nbsp;{{ 'selected' | translate }}</span>
+    </ng-container>
 </os-head-bar>
 
 <os-list

diff --git a/...ganization-tag-list/components/organization-tag-list/organization-tag-list.component.html b/...ganization-tag-list/components/organization-tag-list/organization-tag-list.component.html
@@ -10,16 +10,15 @@ <h2>{{ 'Tags' | translate }}</h2>
     </div>
 
     <!-- Menu -->
-    <div class="menu-slot">
+    <ng-container class="menu-slot">
         <button type="button" mat-icon-button [matMenuTriggerFor]="orgaTagMenu"><mat-icon>more_vert</mat-icon></button>
-    </div>
+    </ng-container>
 
     <!-- Multiselect info -->
-    <div class="central-info-slot">
+    <ng-container class="central-info-slot">
         <button mat-icon-button (click)="toggleMultiSelect()"><mat-icon>arrow_back</mat-icon></button>
-        <span>{{ selectedRows.length }}&nbsp;</span>
-        <span>{{ 'selected' | translate }}</span>
-    </div>
+        <span>{{ selectedRows.length }}&nbsp;{{ 'selected' | translate }}</span>
+    </ng-container>
 </os-head-bar>
 
 <os-list

diff --git a/client/src/app/ui/modules/head-bar/components/head-bar/head-bar.component.html b/client/src/app/ui/modules/head-bar/components/head-bar/head-bar.component.html
@@ -38,9 +38,8 @@
 
         <!-- centered information slot -->
         <div *ngIf="!multiSelectMode" class="spacer"></div>
-        <div class="toolbar-centered" *ngIf="multiSelectMode">
-            <ng-content select=".central-info-slot"></ng-content>
-        </div>
+
+        <ng-content *ngIf="multiSelectMode" select=".central-info-slot"></ng-content>
         <div class="spacer"></div>
 
         <div class="toolbar-right">

diff --git a/client/src/app/ui/modules/head-bar/components/head-bar/head-bar.component.scss b/client/src/app/ui/modules/head-bar/components/head-bar/head-bar.component.scss
@@ -34,11 +34,6 @@
         }
     }
 
-    .toolbar-centered {
-        margin: auto;
-        vertical-align: baseline;
-    }
-
     .toolbar-right {
         display: flex;
         .extra-controls-slot {

diff --git a/client/src/app/ui/modules/head-bar/components/head-bar/head-bar.component.ts b/client/src/app/ui/modules/head-bar/components/head-bar/head-bar.component.ts
@@ -51,18 +51,18 @@ export const HEAD_BAR_HEIGHT = 50; // height of the head-bar in px.
  *     </div>
  *
  *     <!-- Menu -->
- *     <div class="menu-slot">
+ *     <ng-container class="menu-slot">
  *         <button type="button" mat-icon-button [matMenuTriggerFor]="myComponentMenu">
  *             <mat-icon>more_vert</mat-icon>
  *         </button>
- *     </div>
- *     <!-- MultiSelect info -->
- *     <div class="central-info-slot">
- *     <button mat-icon-button (click)="toggleMultiSelect()">
- *         <mat-icon>arrow_back</mat-icon>
- *     </button>
- *         <span>{{ selectedRows.length }}&nbsp;</span><span>selected</span>
- * </div>
+ *     </ng-container>
+ *     <!-- Multiselect info -->
+ *     <ng-container class="central-info-slot">
+ *          <button mat-icon-button (click)="toggleMultiSelect()">
+ *              <mat-icon>arrow_back</mat-icon>
+ *          </button>
+ *         <span>{{ selectedRows.length }}&nbsp;{{ 'selected' | translate }}</span>
+ *      </ng-container>
  * </os-head-bar>
  * ```
  */

diff --git a/client/src/styles.scss b/client/src/styles.scss
@@ -383,4 +383,4 @@ button.mat-menu-item.selected {
 .error {
     font-size: 75%;
     display: block;
-}
+}