Rework Assignment UI

Reworks the Assignment UI to fit to the current MockUps
2019-05-09 17:04:36 +02:00 · 2019-05-09 17:04:36 +02:00 · 654c54e9ab
commit 654c54e9ab
parent 0ed00ff603
7 changed files with 238 additions and 167 deletions
--- a/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.html
+++ b/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.html
@ -51,42 +51,34 @@
 </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;
+        <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>
-            <span translate>Phase</span>:&nbsp;
-            <mat-basic-chip *ngIf="hasPerms('manage')" [matMenuTriggerFor]="phaseMenu" class="bluegrey" disableRipple>
+            <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>
@ -98,9 +90,11 @@
                    </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,7 +143,11 @@
 </ng-template>

 <ng-template #candidatesTemplate>
-    <!-- candidates -->
+    <!-- Candidates -->
+    <h3 translate>Candidates</h3>
+
+    <!-- Candidate List -->
+    <div>
        <div
            class="candidates-list"
            *ngIf="assignment && assignment.assignmentRelatedUsers && assignment.assignmentRelatedUsers.length > 0"
@ -163,6 +174,7 @@
            </os-sorting-list>
        </div>

+        <div class="add-candidates">
            <!-- Search for candidates -->
            <div class="search-field" *ngIf="hasPerms('addOthers')">
                <form
@ -182,26 +194,24 @@
            </div>

            <!-- Add me and remove me if OP has correct permission -->
-    <div *ngIf="assignment && hasPerms('addSelf') && assignment.candidates" class="add-self-buttons">
+            <div *ngIf="assignment && hasPerms('addSelf') && assignment.candidates">
                <div>
-            <button mat-stroked-button (click)="addSelf()" *ngIf="!isSelfCandidate">
+                    <button mat-button color="accent" (click)="addSelf()" *ngIf="!isSelfCandidate">
                        <mat-icon>add</mat-icon>
                        <span translate>Add me</span>
                    </button>
-            <button mat-stroked-button (click)="removeSelf()" *ngIf="isSelfCandidate">
+                    <button mat-button color="accent" (click)="removeSelf()" *ngIf="isSelfCandidate">
                        <mat-icon>remove</mat-icon>
                        <span translate>Remove me</span>
                    </button>
                </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>
+    </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
--- a/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.scss
+++ b/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.scss
@ -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%;
-        }
-    }
-}
--- a/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.ts
+++ b/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.ts
@ -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,
--- a/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.html
+++ b/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.html
@ -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">
+
+    <!-- Poll paper hint -->
+    <div *ngIf="canManage" class="hint-form" [formGroup]="descriptionForm">
        <mat-form-field class="wide">
-                <input matInput formControlName="description" [disabled]="!canManage" />
+            <mat-label translate>Hint for ballot paper</mat-label>
+            <input matInput formControlName="description"/>
        </mat-form-field>
-            <button
-                mat-icon-button
-                [disabled]="!dirtyDescription"
-                *ngIf="canManage"
-                (click)="onEditDescriptionButton()"
-            >
+        <button mat-icon-button [disabled]="!dirtyDescription" (click)="onEditDescriptionButton()">
            <mat-icon inline>check</mat-icon>
        </button>
    </div>
-    </div>
-</mat-card>
+</div>
--- a/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.scss
+++ b/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.scss
@ -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;
+}
--- a/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.ts
+++ b/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.ts
@ -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 => {
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@ -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;