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

Rework Assignment UI

Browse Source 
Reworks the Assignment UI to fit to the current MockUps
This commit is contained in:
Sean Engelhardt 2019-05-09 17:04:36 +02:00 committed by Emanuel Schütze
parent 0ed00ff603
commit 654c54e9ab
7 changed files with 238 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

214
client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.html
View File

@ -51,56 +51,50 @@
</os-head-bar>
<div class="content-container">
<ng-container *ngIf="vp.isMobile; then mobileView; else desktopView"></ng-container>
<div *ngIf="editAssignment">
<ng-container [ngTemplateOutlet]="assignmentFormTemplate"></ng-container>
</div>
<div *ngIf="!editAssignment">
<ng-container [ngTemplateOutlet]="metaInfoTemplate"></ng-container>
<ng-container [ngTemplateOutlet]="contentTemplate"></ng-container>
</div>
</div>
<ng-template #mobileView>
<div *ngIf="editAssignment">
<ng-container [ngTemplateOutlet]="assignmentFormTemplate"></ng-container>
</div>
<div *ngIf="!editAssignment">
<ng-container [ngTemplateOutlet]="metaInfoTemplate"></ng-container>
<ng-container [ngTemplateOutlet]="contentTemplate"></ng-container>
</div>
</ng-template>
<ng-template #desktopView>
<div *ngIf="editAssignment">
<ng-container [ngTemplateOutlet]="assignmentFormTemplate"></ng-container>
</div>
<div *ngIf="!editAssignment">
<ng-container [ngTemplateOutlet]="metaInfoTemplate"></ng-container>
<ng-container [ngTemplateOutlet]="contentTemplate"></ng-container>
</div>
</ng-template>
<ng-template #metaInfoTemplate>
<mat-card class="os-card" *ngIf="assignment">
<mat-card class="os-card " *ngIf="assignment">
<h1>{{ assignment.getTitle() }}</h1>
<div *ngIf="assignment">
<div *ngIf="assignment.assignment.description" [innerHTML]="assignment.assignment.description"></div>
</div>
<div>
<span translate>Number of persons to be elected</span>:&nbsp;
<span>{{ assignment.assignment.open_posts }}</span>
</div>
<div>
<span translate>Phase</span>:&nbsp;
<mat-basic-chip *ngIf="hasPerms('manage')" [matMenuTriggerFor]="phaseMenu" class="bluegrey" disableRipple>
{{ assignment.phaseString | translate }}
</mat-basic-chip>
<mat-basic-chip *ngIf="!hasPerms('manage')" class="bluegrey" disableRipple>
{{ assignment.phaseString | translate }}
</mat-basic-chip>
<mat-menu #phaseMenu="matMenu">
<button *ngFor="let option of phaseOptions" mat-menu-item (click)="onSetPhaseButton(option.value)">
{{ option.display_name | translate }}
</button>
</mat-menu>
<div class="meta-info-grid">
<div class="number-of-elected">
<h4 translate>Number of persons to be elected</h4>
<span>{{ assignment.assignment.open_posts }}</span>
</div>
<div class="current-phase">
<h4 translate>Phase</h4>
<mat-basic-chip
*ngIf="hasPerms('manage')"
[matMenuTriggerFor]="phaseMenu"
class="bluegrey"
disableRipple
>
{{ assignment.phaseString | translate }}
</mat-basic-chip>
<mat-basic-chip *ngIf="!hasPerms('manage')" class="bluegrey" disableRipple>
{{ assignment.phaseString | translate }}
</mat-basic-chip>
<mat-menu #phaseMenu="matMenu">
<button *ngFor="let option of phaseOptions" mat-menu-item (click)="onSetPhaseButton(option.value)">
{{ option.display_name | translate }}
</button>
</mat-menu>
</div>
</div>
<div *ngIf="assignment.attachments.length">
<span translate>Election documents</span>:
<mat-list dense>
<h4 translate>Election documents</h4>
<mat-list dense class="election-document-list">
<mat-list-item *ngFor="let file of assignment.attachments">
<a [routerLink]="file.downloadUrl" target="_blank">{{ file.getTitle() }}</a>
</mat-list-item>
@ -120,7 +114,20 @@
</ng-template>
<!-- poll template -->
<ng-template #pollTemplate>
<ng-template #pollTemplate
>
<div class="ballot-controls-grid">
<div class="ballot-title" *ngIf="assignment && assignment.polls && assignment.polls.length">
<h3 translate>Election result</h3>
</div>
<div class="ballot-button" *ngIf="assignment && hasPerms('createPoll')">
<button mat-button (click)="createPoll()">
<mat-icon color="primary">poll</mat-icon>
<span translate>New ballot</span>
</button>
</div>
</div>
<mat-tab-group
(selectedTabChange)="onTabChange()"
*ngIf="assignment && assignment.polls && assignment.polls.length"
@ -136,72 +143,75 @@
</ng-template>
<ng-template #candidatesTemplate>
<!-- candidates -->
<div
class="candidates-list"
*ngIf="assignment && assignment.assignmentRelatedUsers && assignment.assignmentRelatedUsers.length > 0"
>
<os-sorting-list
[input]="assignment.assignmentRelatedUsers"
[live]="true"
[count]="true"
[enable]="hasPerms('addOthers')"
(sortEvent)="onSortingChange($event)"
<!-- Candidates -->
<h3 translate>Candidates</h3>
<!-- Candidate List -->
<div>
<div
class="candidates-list"
*ngIf="assignment && assignment.assignmentRelatedUsers && assignment.assignmentRelatedUsers.length > 0"
>
<!-- implicit item references into the component using ng-template slot -->
<ng-template let-item>
<span *ngIf="hasPerms('addOthers')">
<button
mat-icon-button
matTooltip="{{ 'Remove candidate' | translate }}"
(click)="removeUser(item)"
>
<mat-icon>clear</mat-icon>
<os-sorting-list
[input]="assignment.assignmentRelatedUsers"
[live]="true"
[count]="true"
[enable]="hasPerms('addOthers')"
(sortEvent)="onSortingChange($event)"
>
<!-- implicit item references into the component using ng-template slot -->
<ng-template let-item>
<span *ngIf="hasPerms('addOthers')">
<button
mat-icon-button
matTooltip="{{ 'Remove candidate' | translate }}"
(click)="removeUser(item)"
>
<mat-icon>clear</mat-icon>
</button>
</span>
</ng-template>
</os-sorting-list>
</div>
<div class="add-candidates">
<!-- Search for candidates -->
<div class="search-field" *ngIf="hasPerms('addOthers')">
<form
*ngIf="hasPerms('addOthers') && filteredCandidates && filteredCandidates.value.length > 0"
[formGroup]="candidatesForm"
>
<os-search-value-selector
class="search-bar"
ngDefaultControl
[form]="candidatesForm"
[formControl]="candidatesForm.get('userId')"
[multiple]="false"
listname="{{ 'Select a new candidate' | translate }}"
[InputListValues]="filteredCandidates"
></os-search-value-selector>
</form>
</div>
<!-- Add me and remove me if OP has correct permission -->
<div *ngIf="assignment && hasPerms('addSelf') && assignment.candidates">
<div>
<button mat-button color="accent" (click)="addSelf()" *ngIf="!isSelfCandidate">
<mat-icon>add</mat-icon>
<span translate>Add me</span>
</button>
</span>
</ng-template>
</os-sorting-list>
</div>
<!-- Search for candidates -->
<div class="search-field" *ngIf="hasPerms('addOthers')">
<form
*ngIf="hasPerms('addOthers') && filteredCandidates && filteredCandidates.value.length > 0"
[formGroup]="candidatesForm"
>
<os-search-value-selector
class="search-bar"
ngDefaultControl
[form]="candidatesForm"
[formControl]="candidatesForm.get('userId')"
[multiple]="false"
listname="{{ 'Select a new candidate' | translate }}"
[InputListValues]="filteredCandidates"
></os-search-value-selector>
</form>
</div>
<!-- Add me and remove me if OP has correct permission -->
<div *ngIf="assignment && hasPerms('addSelf') && assignment.candidates" class="add-self-buttons">
<div>
<button mat-stroked-button (click)="addSelf()" *ngIf="!isSelfCandidate">
<mat-icon>add</mat-icon>
<span translate>Add me</span>
</button>
<button mat-stroked-button (click)="removeSelf()" *ngIf="isSelfCandidate">
<mat-icon>remove</mat-icon>
<span translate>Remove me</span>
</button>
<button mat-button color="accent" (click)="removeSelf()" *ngIf="isSelfCandidate">
<mat-icon>remove</mat-icon>
<span translate>Remove me</span>
</button>
</div>
</div>
</div>
</div>
<div *ngIf="assignment && hasPerms('createPoll')">
<button mat-button (click)="createPoll()">
<mat-icon color="primary">poll</mat-icon>
<span translate>New ballot</span>
</button>
</div>
<mat-divider *ngIf="assignment && assignment.polls && assignment.polls.length" class="candidate-list-separator"></mat-divider>
</ng-template>
<!-- Form -->
<ng-template #assignmentFormTemplate>
<mat-card class="os-form-card">
<form

101
client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.scss
View File

@ -2,9 +2,85 @@
width: 100%;
}
.candidates {
width: 60%;
.meta-info-grid {
display: grid;
grid-column-gap: 30px;
grid-template-columns: 1fr 2fr;
.number-of-elected {
grid-column: 1;
}
.current-phase {
grid-column: 2;
}
// will display the container under the one declared above on small screen
@media only screen and (max-width: 960px) {
grid-template-columns: 1fr;
.current-phase {
grid-column: 1;
}
}
}
.election-document-list mat-list-item {
height: 20px;
}
.candidates-list {
padding-top: 10px;
}
.add-candidates {
.search-field {
padding-top: 15px;
width: auto;
.search-bar {
display: grid;
.mat-form-field {
width: 100%;
}
}
}
}
@media only screen and (max-width: 960px) {
.candidates-list {
// TODO: same as .waiting-list in list-of-speakers
padding: 10px 25px 0 25px;
}
.add-candidates {
.search-field {
padding: 15px 25px 0 25px;
}
}
}
.ballot-controls-grid {
display: grid;
grid-column-gap: 10px;
grid-template-columns: auto min-content;
.ballot-title {
grid-column: 1;
h3 {
margin: 0;
}
}
.ballot-button {
grid-column: 2;
}
}
.candidate-list-separator {
position: initial !important;
margin: 20px 0;
}
.candidate {
display: flex;
width: 100%;
@ -21,24 +97,3 @@
top: 0;
left: 0;
}
// TODO: same as .waiting-list in list-of-speakers
.candidates-list {
padding: 10px 25px 0 25px;
}
// TODO: duplicate in list-of-speakers
.add-self-buttons {
padding: 15px 0 20px 25px;
}
.search-field {
margin: 20px 0;
.search-bar {
display: grid;
.mat-form-field {
width: 100%;
}
}
}

3
client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.ts
View File

@ -22,7 +22,6 @@ import { UserRepositoryService } from 'app/core/repositories/users/user-reposito
import { ViewAssignment, AssignmentPhases } from '../../models/view-assignment';
import { ViewAssignmentRelatedUser } from '../../models/view-assignment-related-user';
import { ViewItem } from 'app/site/agenda/models/view-item';
import { ViewportService } from 'app/core/ui-services/viewport.service';
import { ViewTag } from 'app/site/tags/models/view-tag';
import { ViewUser } from 'app/site/users/models/view-user';
import { ViewMediafile } from 'app/site/mediafiles/models/view-mediafile';
@ -159,7 +158,6 @@ export class AssignmentDetailComponent extends BaseViewComponent implements OnIn
* @param title
* @param translate
* @param matSnackBar
* @param vp
* @param operator
* @param perms
* @param router
@ -176,7 +174,6 @@ export class AssignmentDetailComponent extends BaseViewComponent implements OnIn
title: Title,
protected translate: TranslateService, // protected required for ng-translate-extract
matSnackBar: MatSnackBar,
public vp: ViewportService,
private operator: OperatorService,
public perms: LocalPermissionsService,
private router: Router,

53
client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.html
View File

@ -1,5 +1,5 @@
<mat-card class="os-card" *ngIf="poll">
<div class="flex-spaced poll-menu">
<div class="poll-wrapper" *ngIf="poll">
<div class="poll-menu">
<!-- Buttons -->
<button
mat-icon-button
@ -7,7 +7,7 @@
[matMenuTriggerFor]="pollItemMenu"
(click)="$event.stopPropagation()"
>
<mat-icon>more_vert</mat-icon>
<mat-icon>more_horiz</mat-icon>
</button>
<mat-menu #pollItemMenu="matMenu">
<div *osPerms="'assignments.can_manage'">
@ -39,23 +39,20 @@
</div>
</mat-menu>
</div>
<div class="on-transition-fade" *ngIf="poll.options">
<div class="on-transition-fade poll-main-content" *ngIf="poll.options">
<div *ngIf="pollData">
<div class="poll-grid">
<div></div>
<div><span class="table-view-list-title" translate>Candidates</span></div>
<div><span class="table-view-list-title" translate>Votes</span></div>
<div *ngIf="pollService.majorityMethods && majorityChoice">
<div *ngIf="pollService.majorityMethods && majorityChoice && canManage">
<div>
<span class="table-view-list-title" translate>Quorum</span>
</div>
<div>
<!-- manager majority chip (menu trigger) -->
<mat-basic-chip *ngIf="canManage" [matMenuTriggerFor]="majorityMenu" class="grey" disableRipple>
{{ majorityChoice.display_name | translate }}
</mat-basic-chip>
<!-- non-manager (menuless) majority chip -->
<mat-basic-chip *ngIf="!canManage" class="grey" disableRipple>
<mat-basic-chip [matMenuTriggerFor]="majorityMenu" class="grey" disableRipple>
{{ majorityChoice.display_name | translate }}
</mat-basic-chip>
<!-- menu for selecting quorum choices -->
@ -93,7 +90,7 @@
<mat-icon
*ngIf="!option.is_elected && canManage && !assignment.isFinished"
class="top-aligned primary"
matTooltip="{{ 'Not elected' | translate }}"
matTooltip="{{ 'Mark as elected' | translate }}"
>
check_box_outline_blank</mat-icon
>
@ -131,7 +128,7 @@
</div>
</div>
</div>
<div>
<div *ngIf="canManage">
<div
*ngIf="
poll.has_votes &&
@ -177,26 +174,20 @@
</div>
</div>
<div class="spacer-bottom-10">
<!-- Election Method -->
<div *ngIf="canManage" class="spacer-bottom-10">
<h4 translate>Election method</h4>
<span>{{ pollMethodName | translate }}</span>
</div>
<div>
<h4>
<span translate>Hint for ballot paper</span>
</h4>
<div [formGroup]="descriptionForm">
<mat-form-field class="wide">
<input matInput formControlName="description" [disabled]="!canManage" />
</mat-form-field>
<button
mat-icon-button
[disabled]="!dirtyDescription"
*ngIf="canManage"
(click)="onEditDescriptionButton()"
>
<mat-icon inline>check</mat-icon>
</button>
</div>
<!-- Poll paper hint -->
<div *ngIf="canManage" class="hint-form" [formGroup]="descriptionForm">
<mat-form-field class="wide">
<mat-label translate>Hint for ballot paper</mat-label>
<input matInput formControlName="description"/>
</mat-form-field>
<button mat-icon-button [disabled]="!dirtyDescription" (click)="onEditDescriptionButton()">
<mat-icon inline>check</mat-icon>
</button>
</div>
</mat-card>
</div>

23
client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.scss
View File

@ -25,6 +25,15 @@
}
}
.poll-wrapper {
position: relative;
padding: 0 15px;
}
.poll-main-content {
padding-top: 10px;
}
.poll-result {
.poll-progress-bar {
height: 5px;
@ -69,12 +78,13 @@
word-wrap: break-word;
}
}
.poll-border {
border: 1px solid lightgray;
}
.poll-menu {
justify-content: flex-end;
position: absolute;
top: 0;
right: 0;
}
.poll-quorum {
text-align: right;
margin-right: 10px;
@ -83,6 +93,7 @@
font-size: 100%;
}
}
.top-aligned {
position: absolute;
top: 0;
@ -92,3 +103,7 @@
.wide {
width: 90%;
}
.hint-form {
margin-top: 20px;
}

4
client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.ts
View File

@ -201,8 +201,8 @@ export class AssignmentPollComponent extends BaseViewComponent implements OnInit
// TODO deep copy of this.poll (JSON parse is ugly workaround) or sending just copy of the options
data: this.poll.copy(),
maxHeight: '90vh',
minWidth: '450px',
maxWidth: '80vw',
width: '600px',
maxWidth: '90vw',
disableClose: true
});
dialogRef.afterClosed().subscribe(result => {

7
client/src/styles.scss
View File

@ -57,7 +57,8 @@
}
}
.openslides-dark-theme, .openslides-developer-dark-theme {
.openslides-dark-theme,
.openslides-developer-dark-theme {
.logo-container {
img.dark {
display: inherit;
@ -88,7 +89,8 @@
}
os-site {
.active mat-icon, .active span {
.active mat-icon,
.active span {
color: mat-color(map-get($openslides-developer-theme, accent));
}
}
@ -249,6 +251,7 @@ mat-card {
.os-card {
max-width: 770px;
margin-top: 20px !important;
margin-bottom: 20px !important;
margin-left: auto !important;
margin-right: auto !important;
font-size: 16px;