Merge pull request #4519 from tsiegleauq/list-z-levels

Fix some z-level related issues

client/src/app/site/agenda/components/agenda-list/agenda-list.component.html

@@ -53,18 +53,20 @@
         <ng-container matColumnDef="info">
             <mat-header-cell *matHeaderCellDef mat-sort-header>Info</mat-header-cell>
             <mat-cell (click)="openEditInfo(item, $event)" *matCellDef="let item">
-                <div class="info-col-items">
-                    <div *osPerms="'agenda.can_manage';and:item.verboseType">
-                        <mat-icon>visibility</mat-icon>
-                        {{ item.verboseType | translate }}
-                    </div>
-                    <div *ngIf="item.duration">
-                        <mat-icon>access_time</mat-icon>
-                        {{ durationService.durationToString(item.duration, 'h') }}
-                    </div>
-                    <div *ngIf="item.comment">
-                        <mat-icon>comment</mat-icon>
-                        {{ item.comment }}
+                <div class="fill">
+                    <div class="info-col-items">
+                        <div *osPerms="'agenda.can_manage'; and: item.verboseType">
+                            <mat-icon>visibility</mat-icon>
+                            {{ item.verboseType | translate }}
+                        </div>
+                        <div *ngIf="item.duration">
+                            <mat-icon>access_time</mat-icon>
+                            {{ durationService.durationToString(item.duration, 'h') }}
+                        </div>
+                        <div *ngIf="item.comment">
+                            <mat-icon>comment</mat-icon>
+                            {{ item.comment }}
+                        </div>
                     </div>
                 </div>
             </mat-cell>
@@ -74,8 +76,7 @@
         <ng-container matColumnDef="speakers">
             <mat-header-cell *matHeaderCellDef mat-sort-header>Speakers</mat-header-cell>
             <mat-cell *matCellDef="let item">
-                <button mat-icon-button (click)="onSpeakerIcon(item, $event)"
-                [disabled]="isMultiSelect">
+                <button mat-icon-button (click)="onSpeakerIcon(item, $event)" [disabled]="isMultiSelect">
                     <mat-icon
                         [matBadge]="item.waitingSpeakerAmount > 0 ? item.waitingSpeakerAmount : null"
                         matBadgeColor="accent"

client/src/app/site/agenda/components/agenda-list/agenda-list.component.scss

@@ -1,3 +1,5 @@
+@import '~assets/styles/tables.scss';
+
 .os-listview-table {
     /** Title */
     .mat-column-title {

client/src/app/site/base/list-view-base.ts

@@ -165,6 +165,18 @@ export abstract class ListViewBaseComponent<V extends BaseViewModel, M extends B
         }
     }
 
+    /**
+     * row clicks that should be ignored.
+     * Required for buttons or check boxes in tables
+     *
+     * @param event click event
+     */
+    public ignoreClick(event: MouseEvent): void {
+        if (!this.isMultiSelect) {
+            event.stopPropagation();
+        }
+    }
+
     /**
      * Method to perform an action on click on a row, if not in MultiSelect Modus.
      * Should be overridden by implementations. Currently there is no default action.

client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss

@@ -1,3 +1,5 @@
+@import '~assets/styles/tables.scss';
+
 .os-listview-table {
     /** Projector button **/
     .mat-column-projector {

client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.scss

@@ -1,3 +1,5 @@
+@import '~assets/styles/tables.scss';
+
 /** css hacks https://codepen.io/edge0703/pen/iHJuA */
 .innerTable {
     display: inline-block;

client/src/app/site/site.component.html

@@ -28,7 +28,7 @@
         <mat-expansion-panel class="user-menu mat-elevation-z0">
             <mat-expansion-panel-header class="username">
                 <!-- Get the username from operator -->
-                {{ username }}
+                <span *ngIf="username">{{ username }}</span>
             </mat-expansion-panel-header>
             <mat-nav-list>
                 <a mat-list-item [matMenuTriggerFor]="languageMenu">
@@ -36,7 +36,11 @@
                     <span>{{ getLangName() }}</span>
                 </a>
                 <div *ngIf="isLoggedIn">
-                    <a [routerLink]="operator.user ? ['/users/', operator.user.id] : []" (click)="mobileAutoCloseNav()" mat-list-item>
+                    <a
+                        [routerLink]="operator.user ? ['/users/', operator.user.id] : []"
+                        (click)="mobileAutoCloseNav()"
+                        mat-list-item
+                    >
                         <mat-icon>person</mat-icon>
                         <span translate>Show profile</span>
                     </a>

client/src/app/site/site.component.scss

@@ -32,6 +32,14 @@ mat-sidenav-container {
     }
 }
 
+.username {
+    span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
 .nav-toolbar {
     display: flex;
     margin: auto;

client/src/app/site/site.component.ts

@@ -15,6 +15,7 @@ import { MainMenuService } from '../core/core-services/main-menu.service';
 import { OpenSlidesStatusService } from '../core/core-services/openslides-status.service';
 import { TimeTravelService } from '../core/core-services/time-travel.service';
 import { langToLocale } from 'app/shared/utils/lang-to-locale';
+import { ConfigService } from 'app/core/ui-services/config.service';
 
 @Component({
     selector: 'os-site',
@@ -60,6 +61,7 @@ export class SiteComponent extends BaseComponent implements OnInit {
     public constructor(
         title: Title,
         translate: TranslateService,
+        configService: ConfigService,
         private authService: AuthService,
         private router: Router,
         public operator: OperatorService,
@@ -74,7 +76,7 @@ export class SiteComponent extends BaseComponent implements OnInit {
         this.operator.getViewUserObservable().subscribe(user => {
             if (user) {
                 this.username = user.short_name;
-            } else {
+            } else if (!user && configService.instant<boolean>('general_system_enable_anonymous')) {
                 this.username = translate.instant('Guest');
             }
             this.isLoggedIn = !!user;

client/src/app/site/users/components/user-list/user-list.component.html

@@ -43,25 +43,29 @@
         <!-- name column -->
         <ng-container matColumnDef="name">
             <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-            <mat-cell *matCellDef="let user">{{ user.full_name }}</mat-cell>
+            <mat-cell *matCellDef="let user">
+                {{ user.full_name }}
+            </mat-cell>
         </ng-container>
 
-        <!-- prefix column -->
+        <!-- group column -->
         <ng-container matColumnDef="group">
             <mat-header-cell *matHeaderCellDef mat-sort-header>Group</mat-header-cell>
             <mat-cell (click)="openEditInfo(user, $event)" *matCellDef="let user">
-                <div class="groupsCell">
-                    <span *ngIf="user.groups && user.groups.length">
-                        <mat-icon>people</mat-icon>
-                        <span *ngFor="let group of user.groups; let last = last"
-                            >{{ group.getTitle() | translate }}<span *ngIf="!last">,&nbsp;</span>
+                <div class="fill">
+                    <div class="groupsCell">
+                        <span *ngIf="user.groups && user.groups.length">
+                            <mat-icon>people</mat-icon>
+                            <span *ngFor="let group of user.groups; let last = last"
+                                >{{ group.getTitle() | translate }}<span *ngIf="!last">,&nbsp;</span>
+                            </span>
                         </span>
-                    </span>
-                    <br *ngIf="user.groups && user.structureLevel" />
-                    <span *ngIf="user.structureLevel">
-                        <mat-icon>flag</mat-icon>
-                        {{ user.structure_level }}
-                    </span>
+                        <br *ngIf="user.groups && user.structure_level" />
+                        <span *ngIf="user.structure_level">
+                            <mat-icon>flag</mat-icon>
+                            {{ user.structure_level }}
+                        </span>
+                    </div>
                 </div>
             </mat-cell>
         </ng-container>
@@ -77,11 +81,11 @@
         <!-- Presence column -->
         <ng-container matColumnDef="presence">
             <mat-header-cell *matHeaderCellDef mat-sort-header>Presence</mat-header-cell>
-            <mat-cell *matCellDef="let user" class="presentCell">
-                <div *ngIf="user.is_active">
+            <mat-cell (click)="ignoreClick($event)" *matCellDef="let user" class="presentCell">
+                <div class="fill" *ngIf="user.is_active">
                     <mat-checkbox
                         class="checkboxPresent"
-                        (click)="setPresent(user, $event)"
+                        (change)="setPresent(user)"
                         [checked]="user.is_present"
                         [disabled]="isMultiSelect"
                     >

client/src/app/site/users/components/user-list/user-list.component.scss

@@ -1,12 +1,4 @@
-.groupsCell {
-    display: inline-block;
-    vertical-align: middle;
-    line-height: normal;
-
-    mat-icon {
-        font-size: 80%;
-    }
-}
+@import '~assets/styles/tables.scss';
 
 .os-listview-table {
     .mat-column-projector {
@@ -18,8 +10,13 @@
     }
 
     .mat-column-group {
-        z-index: 3;
         flex: 2 0 60px;
+
+        .groupsCell {
+            mat-icon {
+                font-size: 80%;
+            }
+        }
     }
 
     .mat-column-presence {

client/src/app/site/users/components/user-list/user-list.component.ts

@@ -399,8 +399,7 @@ export class UserListComponent extends ListViewBaseComponent<ViewUser, User> imp
      * @param viewUser the viewUser Object
      * @param event the mouse event (to prevent propagaton to row triggers)
      */
-    public async setPresent(viewUser: ViewUser, event: MouseEvent): Promise<void> {
-        event.stopPropagation();
+    public async setPresent(viewUser: ViewUser): Promise<void> {
         viewUser.user.is_present = !viewUser.user.is_present;
         await this.repo.update(viewUser.user, viewUser);
     }

client/src/app/slides/motions/motion/motion-slide.component.scss

@@ -13,6 +13,7 @@
     padding: 3px 7px 10px 10px;
     position: fixed;
     z-index: 5;
+    word-break: break-word;
 
     h3 {
         margin-top: 10px;

client/src/assets/styles/tables.scss

@@ -2,6 +2,47 @@
 .mat-table {
     width: 100%;
 
+    /** Style for the anchor column */
+    .mat-column-anchor {
+        position: absolute !important;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        opacity: 0.1;
+        z-index: 1;
+
+        a {
+            display: block;
+            height: 100%;
+            width: 100%;
+        }
+    }
+
+    .mat-cell {
+        position: relative;
+
+        /** child element to overwrite the a tag. */
+        .fill {
+            position: absolute;
+            display: inherit;
+            height: 100%;
+            width: 100%;
+            line-height: 0;
+
+            // try to put all children in the in the vertical middle
+            * {
+                margin-top: auto;
+                margin-bottom: auto;
+            }
+        }
+    }
+
+    /** functional items should lay over the anchor column */
+    .mat-cell > * {
+        z-index: 2;
+    }
+
     // important is necessary, since the "sticky" attribute does not alter the real `.mat-table-sticky-class`
     // but rather "patches" the DOM tree.
     .mat-table-sticky {

client/src/styles.scss

@@ -50,7 +50,8 @@
 * {
     font-family: OSFont, Fira Sans, Roboto, Arial, Helvetica, sans-serif;
 }
-.mat-toolbar h2, .mat-dialog-title {
+.mat-toolbar h2,
+.mat-dialog-title {
     font-family: OSFont, Fira Sans, Roboto, Arial, Helvetica, sans-serif !important;
 }
 
@@ -627,28 +628,6 @@ button.mat-menu-item.selected {
     color: white;
 }
 
-/** Style for the anchor column */
-.mat-column-anchor {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    opacity: 0.1;
-    z-index: 1;
-
-    a {
-        display: block;
-        height: 100%;
-        width: 100%;
-    }
-}
-
-/** functional items should lay over the anchor column */
-.mat-cell > * {
-    z-index: 2;
-}
-
 .queue {
     .mat-expansion-panel-body {
         padding: 0 !important;