ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

User detail template fixes

Browse Source 
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
This commit is contained in:
Sean Engelhardt 2019-03-08 14:51:47 +01:00
parent 83ff758977
commit 62e3256c54
4 changed files with 120 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 {

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

@ -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>

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

@ -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>

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

@ -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 {