Rework Assignment UI

Reworks the Assignment UI to fit to the current MockUps

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

@@ -51,10 +51,6 @@
 </os-head-bar>
 
 <div class="content-container">
-    <ng-container *ngIf="vp.isMobile; then mobileView; else desktopView"></ng-container>
-</div>
-
-<ng-template #mobileView>
     <div *ngIf="editAssignment">
         <ng-container [ngTemplateOutlet]="assignmentFormTemplate"></ng-container>
     </div>
@@ -62,17 +58,7 @@
         <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">
@@ -80,13 +66,19 @@
         <div *ngIf="assignment">
             <div *ngIf="assignment.assignment.description" [innerHTML]="assignment.assignment.description"></div>
         </div>
-        <div>
+        <div class="meta-info-grid">
-            <span translate>Number of persons to be elected</span>:&nbsp;
+            <div class="number-of-elected">
+                <h4 translate>Number of persons to be elected</h4>
                 <span>{{ assignment.assignment.open_posts }}</span>
             </div>
-        <div>
+            <div class="current-phase">
-            <span translate>Phase</span>:&nbsp;
+                <h4 translate>Phase</h4>
-            <mat-basic-chip *ngIf="hasPerms('manage')" [matMenuTriggerFor]="phaseMenu" class="bluegrey" disableRipple>
+                <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>:
+            <h4 translate>Election documents</h4>
-            <mat-list dense>
+            <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

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

@@ -2,9 +2,85 @@
     width: 100%;
 }
 
-.candidates {
+.meta-info-grid {
-    width: 60%;
+    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%;
-        }
-    }
-}

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,

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="poll-wrapper" *ngIf="poll">
-    <div class="flex-spaced poll-menu">
+    <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>
+                        <mat-basic-chip [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>
                             {{ 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>
+    <!-- Poll paper hint -->
-            <span translate>Hint for ballot paper</span>
+    <div *ngIf="canManage" class="hint-form" [formGroup]="descriptionForm">
-        </h4>
-        <div [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
+        <button mat-icon-button [disabled]="!dirtyDescription" (click)="onEditDescriptionButton()">
-                mat-icon-button
-                [disabled]="!dirtyDescription"
-                *ngIf="canManage"
-                (click)="onEditDescriptionButton()"
-            >
             <mat-icon inline>check</mat-icon>
         </button>
     </div>
 </div>
-</mat-card>

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;
+}

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',
+            width: '600px',
-            maxWidth: '80vw',
+            maxWidth: '90vw',
             disableClose: true
         });
         dialogRef.afterClosed().subscribe(result => {

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;