User detail template fixes

Adds a new template to user detail, to show user information in multiple
lines

Also adds a new feature to the headbar. Long titles (over title slot) will
break using ellipsis

client/src/app/shared/components/head-bar/head-bar.component.scss

@@ -14,8 +14,18 @@
 .toolbar-left {
     display: contents;
     .toolbar-left-text {
-        display: initial;
         margin-left: 10px;
+        width: 100%;
+        overflow: hidden;
+
+        ::ng-deep .title-slot {
+            h2 {
+                display: block;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
     }
 }
 .toolbar-centered {

client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html

@@ -73,7 +73,11 @@
                 <span translate>List of speakers</span>
             </button>
             <!-- Project -->
-            <os-projector-button [object]="motion" [menuItem]="true" *osPerms="'core.can_manage_projector'"></os-projector-button>
+            <os-projector-button
+                [object]="motion"
+                [menuItem]="true"
+                *osPerms="'core.can_manage_projector'"
+            ></os-projector-button>
             <!-- New amendment -->
             <button mat-menu-item (click)="createAmendment()" *ngIf="perms.isAllowed('can_create_amendments', motion)">
                 <mat-icon>add</mat-icon>
@@ -360,7 +364,9 @@
                 <!-- Make the whole container a trigger to prevent unexpected menu behavior -->
                 <div [matMenuTriggerFor]="tagMenu">
                     <!-- No selected tags -->
-                    <mat-basic-chip *ngIf="!motion.hasTags()" class="grey" disabled disableRipple> {{ '–' }} </mat-basic-chip>
+                    <mat-basic-chip *ngIf="!motion.hasTags()" class="grey" disabled disableRipple>
+                        {{ '–' }}
+                    </mat-basic-chip>
 
                     <!-- Display a chip list of tags -->
                     <mat-chip-list class="mat-chip-list-stacked">
@@ -374,7 +380,9 @@
             <!-- For non privileged users -->
             <div *ngIf="!perms.isAllowed('change_metadata', motion)">
                 <mat-chip-list class="mat-chip-list-stacked">
-                    <mat-basic-chip *ngFor="let tag of motion.tags" class="grey" disableRipple> {{ tag }} </mat-basic-chip>
+                    <mat-basic-chip *ngFor="let tag of motion.tags" class="grey" disableRipple>
+                        {{ tag }}
+                    </mat-basic-chip>
                 </mat-chip-list>
             </div>
         </div>

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

@@ -42,12 +42,11 @@
 </os-head-bar>
 
 <mat-card [ngClass]="editUser ? 'os-form-card' : 'os-card'" *ngIf="isAllowed('seeName')">
-    <form
-        [ngClass]="{ 'mat-form-field-enabled': editUser }"
-        [formGroup]="personalInfoForm"
-        *ngIf="user"
-        (keydown)="onKeyDown($event)"
-    >
+    <ng-container *ngIf="editUser; then editView; else showView"></ng-container>
+</mat-card>
+
+<ng-template #editView>
+    <form [formGroup]="personalInfoForm" *ngIf="user" (keydown)="onKeyDown($event)">
         <div *ngIf="isAllowed('seeName')">
             <!-- Title -->
             <mat-form-field
@@ -177,7 +176,6 @@
             <!-- The HTML Editor -->
             <h4 translate *ngIf="user.about_me || editUser">About me</h4>
             <editor formControlName="about_me" [init]="tinyMceSettings" *ngIf="editUser"></editor>
-            <div *ngIf="user.about_me && !editUser" [innerHTML]="sanitizedText(user.about_me)"></div>
         </div>
 
         <div *ngIf="isAllowed('seePersonal')">
@@ -239,4 +237,77 @@
             </mat-checkbox>
         </div>
     </form>
-</mat-card>
+</ng-template>
+
+<ng-template #showView>
+    <!-- User name -->
+    <div *ngIf="isAllowed('seeName')">
+        <h4 translate>Name</h4>
+        <span>{{ user.short_name }}</span>
+    </div>
+
+    <div *ngIf="isAllowed('seePersonal')">
+        <!-- Mail -->
+        <div *ngIf="user.email">
+            <h4 translate>Email</h4>
+            <span>{{ user.email }}</span>
+        </div>
+
+        <!-- Gender -->
+        <div *ngIf="user.gender">
+            <h4 translate>Gender</h4>
+            <span>{{ user.gender | translate }}</span>
+        </div>
+    </div>
+
+    <!-- Structure Level -->
+    <div *ngIf="user.structure_level">
+        <h4 translate>Structure level</h4>
+        <span>{{ user.structure_level }}</span>
+    </div>
+
+    <!-- Participant number -->
+    <div *ngIf="user.number">
+        <h4 translate>Participant number</h4>
+        <span>{{ user.number }}</span>
+    </div>
+
+    <!-- Groups -->
+    <div *ngIf="user.groups && user.groups.length > 0">
+        <h4 translate>Groups</h4>
+        <span *ngFor="let group of user.groups; let last = last">
+            {{ group.getTitle() | translate }}
+            <span *ngIf="!last">,&nbsp;</span>
+        </span>
+    </div>
+
+    <div *ngIf="isAllowed('manage')">
+        <!-- Initial Password -->
+        <div *ngIf="user.default_password">
+            <h4 translate>Initial password</h4>
+            <span>{{ user.default_password }}</span>
+        </div>
+    </div>
+
+    <div *ngIf="isAllowed('seePersonal')">
+        <!-- About me -->
+        <div *ngIf="user.about_me">
+            <h4 translate>About me</h4>
+            <div [innerHTML]="sanitizedText(user.about_me)"></div>
+        </div>
+
+        <!-- Username -->
+        <div *ngIf="user.username">
+            <h4 translate>Username</h4>
+            <span>{{ user.username }}</span>
+        </div>
+    </div>
+
+    <div *ngIf="isAllowed('seeExtra')">
+        <!-- Comment -->
+        <div *ngIf="user.comment">
+            <h4 translate>Comment</h4>
+            <span>{{ user.comment }}</span>
+        </div>
+    </div>
+</ng-template>

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

@@ -1,65 +1,33 @@
-// hide certain stuff whem editing is disabled
-.mat-form-field-disabled {
+.form70 {
     ::ng-deep {
-        .mat-input-element {
-            color: currentColor;
-        }
-
-        .mat-select-value {
-            color: currentColor;
-        }
-
-        .mat-form-field-underline {
-            display: none;
-        }
-
-        .mat-hint {
-            display: none;
-        }
-
-        .mat-select-value {
-            display: table-cell;
-        }
-
-        button {
-            display: none;
-        }
+        width: 70%;
     }
 }
 
-// angular material does not have this class. This is virtually set using ngClass
-.mat-form-field-enabled {
-    .form70 {
-        ::ng-deep {
-            width: 70%;
-        }
+.form37 {
+    ::ng-deep {
+        width: 37%;
     }
+}
 
-    .form37 {
-        ::ng-deep {
-            width: 37%;
-        }
+.form25 {
+    ::ng-deep {
+        width: 25%;
     }
+}
 
-    .form25 {
-        ::ng-deep {
-            width: 25%;
-        }
+.form16 {
+    ::ng-deep {
+        width: 16%;
     }
+}
 
-    .form16 {
-        ::ng-deep {
-            width: 16%;
-        }
-    }
+.force-min-with {
+    min-width: 110px;
+}
 
-    .force-min-with {
-        min-width: 110px;
-    }
-
-    .distance {
-        padding-right: 5%;
-    }
+.distance {
+    padding-right: 5%;
 }
 
 mat-checkbox {