From 84a39ccb621fe966373ae09928c0fd1e9e4abf2b Mon Sep 17 00:00:00 2001
From: Sean Engelhardt <sean.f.t.engelhardt@gmail.com>
Date: Wed, 22 Jan 2020 17:39:10 +0100
Subject: [PATCH] More voting UI improvements

For Motion poll:
- Overworked how motion poll chart displays the legend
- Added the vote counter to the motion detail
- Added a progress bar to the vote counter
- Fixed some perm errors with the chart
- Show a "Singe Votes" link as button for published named polls
- Replace the edit-button with a dot-menu
  - Having project, Edit, PDF and Delete

For Motion Poll detail:
- enhance search panel
- Remove the breadcrumbs
- Remove the vote counter
- Enhanced the single-vote grid, table and filter bar
- Enhance how the poll state enum was checkend

For the Motion Poll Create/Update Form:
- Remove the selection of poll-methode (whenever possible)
- only show "publish imediately" during creation
---
 client/src/app/app.component.ts               | 14 ++-
 .../pdf-services/base-poll-pdf-service.ts     |  1 +
 .../src/app/shared/models/poll/base-poll.ts   | 16 ++++
 .../src/app/shared/models/poll/base-vote.ts   |  6 +-
 .../pipes/parse-poll-number.pipe.spec.ts      | 20 +++++
 .../shared/pipes/parse-poll-number.pipe.ts    | 22 +++++
 .../src/app/shared/pipes/reverse.pipe.spec.ts |  8 ++
 client/src/app/shared/pipes/reverse.pipe.ts   | 20 +++++
 client/src/app/shared/shared.module.ts        | 14 ++-
 .../assignment-detail.component.html          | 22 ++---
 .../assignment-poll-detail.component.html     | 10 ++-
 .../assignment-poll-dialog.component.html     |  6 +-
 .../assignment-poll.component.html            | 60 ++++++-------
 .../assignment-poll.component.scss            | 60 +------------
 .../services/assignment-poll.service.ts       |  2 +-
 .../config-overview.component.html            |  1 +
 .../motion-detail.component.html              |  2 +-
 .../motion-poll-detail.component.html         | 46 +++++-----
 .../motion-poll-detail.component.scss         |  4 +
 .../motion-poll-dialog.component.html         | 16 ++--
 .../motion-poll-dialog.component.ts           |  7 +-
 .../motion-poll-vote.component.html           |  4 +-
 .../motion-poll-vote.component.scss           | 11 ++-
 .../motion-poll/motion-poll.component.html    | 85 +++++++++++++------
 .../motion-poll/motion-poll.component.scss    | 40 +++++++--
 .../motion-poll/motion-poll.component.ts      | 76 +++++++++++------
 .../site/motions/motions-routing.module.ts    |  2 +-
 .../services/motion-poll-pdf.service.ts       |  2 +-
 .../components/base-poll-detail.component.ts  | 12 +--
 .../poll-form/poll-form.component.html        |  4 +-
 .../poll-progress.component.html              |  4 +-
 .../poll-progress/poll-progress.component.ts  |  4 +
 .../app/site/polls/models/view-base-poll.ts   | 15 ++--
 client/src/assets/styles/poll-colors.scss     |  6 ++
 openslides/assignments/config_variables.py    |  9 +-
 .../assignments/migrations/0009_voting_2.py   |  2 +-
 ...tor_size_1.py => 0026_projector_size_1.py} |  2 +-
 ...tor_size_2.py => 0027_projector_size_2.py} |  2 +-
 ...tor_size_3.py => 0028_projector_size_3.py} |  2 +-
 ...d.py => 0029_remove_history_restricted.py} |  2 +-
 openslides/motions/config_variables.py        | 11 +--
 41 files changed, 400 insertions(+), 252 deletions(-)
 create mode 100644 client/src/app/shared/pipes/parse-poll-number.pipe.spec.ts
 create mode 100644 client/src/app/shared/pipes/parse-poll-number.pipe.ts
 create mode 100644 client/src/app/shared/pipes/reverse.pipe.spec.ts
 create mode 100644 client/src/app/shared/pipes/reverse.pipe.ts
 create mode 100644 client/src/assets/styles/poll-colors.scss
 rename openslides/core/migrations/{0027_projector_size_1.py => 0026_projector_size_1.py} (91%)
 rename openslides/core/migrations/{0028_projector_size_2.py => 0027_projector_size_2.py} (96%)
 rename openslides/core/migrations/{0029_projector_size_3.py => 0028_projector_size_3.py} (85%)
 rename openslides/core/migrations/{0026_remove_history_restricted.py => 0029_remove_history_restricted.py} (79%)

diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index e24171a4f..2730ea888 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -95,7 +95,6 @@ export class AppComponent {
         translate.use(translate.getLangs().includes(browserLang) ? browserLang : 'en');
 
         // change default JS functions
-        this.overloadArrayToString();
         this.overloadArrayFunctions();
         this.overloadModulo();
 
@@ -118,7 +117,7 @@ export class AppComponent {
      *
      * TODO: Should be renamed
      */
-    private overloadArrayToString(): void {
+    private overloadArrayFunctions(): void {
         Object.defineProperty(Array.prototype, 'toString', {
             value: function(): string {
                 let string = '';
@@ -139,12 +138,7 @@ export class AppComponent {
             },
             enumerable: false
         });
-    }
 
-    /**
-     * Adds an implementation of flatMap and intersect.
-     */
-    private overloadFlatMap(): void {
         Object.defineProperty(Array.prototype, 'flatMap', {
             value: function(o: any): any[] {
                 const concatFunction = (x: any, y: any[]) => x.concat(y);
@@ -154,10 +148,11 @@ export class AppComponent {
             enumerable: false
         });
 
+        // intersect
         Object.defineProperty(Array.prototype, 'intersect', {
             value: function<T>(other: T[]): T[] {
-                let a = this,
-                    b = other;
+                let a = this;
+                let b = other;
                 // indexOf to loop over shorter
                 if (b.length > a.length) {
                     [a, b] = [b, a];
@@ -167,6 +162,7 @@ export class AppComponent {
             enumerable: false
         });
 
+        // mapToObject
         Object.defineProperty(Array.prototype, 'mapToObject', {
             value: function<T>(f: (item: T) => { [key: string]: any }): { [key: string]: any } {
                 return this.reduce((aggr, item) => {
diff --git a/client/src/app/core/pdf-services/base-poll-pdf-service.ts b/client/src/app/core/pdf-services/base-poll-pdf-service.ts
index 5e2e5de9e..d59a8c7e2 100644
--- a/client/src/app/core/pdf-services/base-poll-pdf-service.ts
+++ b/client/src/app/core/pdf-services/base-poll-pdf-service.ts
@@ -71,6 +71,7 @@ export abstract class PollPdfService {
      * @returns the amount of ballots, depending on the config settings
      */
     protected getBallotCount(): number {
+        // TODO: seems to be broken
         switch (this.ballotCountSelection) {
             case 'NUMBER_OF_ALL_PARTICIPANTS':
                 return this.userRepo.getViewModelList().length;
diff --git a/client/src/app/shared/models/poll/base-poll.ts b/client/src/app/shared/models/poll/base-poll.ts
index be98afe08..9aec1d218 100644
--- a/client/src/app/shared/models/poll/base-poll.ts
+++ b/client/src/app/shared/models/poll/base-poll.ts
@@ -52,6 +52,22 @@ export abstract class BasePoll<T = any, O extends BaseOption<any> = any> extends
     public onehundred_percent_base: PercentBase;
     public user_has_voted: boolean;
 
+    public get isStateCreated(): boolean {
+        return this.state === PollState.Created;
+    }
+
+    public get isStateStarted(): boolean {
+        return this.state === PollState.Started;
+    }
+
+    public get isStateFinished(): boolean {
+        return this.state === PollState.Finished;
+    }
+
+    public get isStatePublished(): boolean {
+        return this.state === PollState.Published;
+    }
+
     /**
      * Determine if the state is finished or published
      */
diff --git a/client/src/app/shared/models/poll/base-vote.ts b/client/src/app/shared/models/poll/base-vote.ts
index 91325f4bc..f1aee007b 100644
--- a/client/src/app/shared/models/poll/base-vote.ts
+++ b/client/src/app/shared/models/poll/base-vote.ts
@@ -9,9 +9,9 @@ export const VoteValueVerbose = {
 };
 
 export const GeneralValueVerbose = {
-    votesvalid: 'Votes valid',
-    votesinvalid: 'Votes invalid',
-    votescast: 'Votes cast',
+    votesvalid: 'Valid votes',
+    votesinvalid: 'Invalid votes',
+    votescast: 'Total votes cast',
     votesno: 'Votes No',
     votesabstain: 'Votes abstain'
 };
diff --git a/client/src/app/shared/pipes/parse-poll-number.pipe.spec.ts b/client/src/app/shared/pipes/parse-poll-number.pipe.spec.ts
new file mode 100644
index 000000000..5e2523140
--- /dev/null
+++ b/client/src/app/shared/pipes/parse-poll-number.pipe.spec.ts
@@ -0,0 +1,20 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+
+import { ParsePollNumberPipe } from './parse-poll-number.pipe';
+
+describe('ParsePollNumberPipe', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [TranslateModule.forRoot()],
+            declarations: [ParsePollNumberPipe]
+        });
+        TestBed.compileComponents();
+    });
+
+    it('create an instance', inject([TranslateService], (translate: TranslateService) => {
+        const pipe = new ParsePollNumberPipe(translate);
+        expect(pipe).toBeTruthy();
+    }));
+});
diff --git a/client/src/app/shared/pipes/parse-poll-number.pipe.ts b/client/src/app/shared/pipes/parse-poll-number.pipe.ts
new file mode 100644
index 000000000..c8c558a7d
--- /dev/null
+++ b/client/src/app/shared/pipes/parse-poll-number.pipe.ts
@@ -0,0 +1,22 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+import { TranslateService } from '@ngx-translate/core';
+
+@Pipe({
+    name: 'parsePollNumber'
+})
+export class ParsePollNumberPipe implements PipeTransform {
+    public constructor(private translate: TranslateService) {}
+
+    public transform(value: number): number | string {
+        const input = Math.trunc(value);
+        switch (input) {
+            case -1:
+                return this.translate.instant('majority');
+            case -2:
+                return this.translate.instant('undocumented');
+            default:
+                return input;
+        }
+    }
+}
diff --git a/client/src/app/shared/pipes/reverse.pipe.spec.ts b/client/src/app/shared/pipes/reverse.pipe.spec.ts
new file mode 100644
index 000000000..fc22c38d6
--- /dev/null
+++ b/client/src/app/shared/pipes/reverse.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { ReversePipe } from './reverse.pipe';
+
+describe('ReversePipe', () => {
+    it('create an instance', () => {
+        const pipe = new ReversePipe();
+        expect(pipe).toBeTruthy();
+    });
+});
diff --git a/client/src/app/shared/pipes/reverse.pipe.ts b/client/src/app/shared/pipes/reverse.pipe.ts
new file mode 100644
index 000000000..9e52edc6c
--- /dev/null
+++ b/client/src/app/shared/pipes/reverse.pipe.ts
@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+/**
+ * Invert the order of arrays in templates
+ *
+ * @example
+ * ```html
+ * <li *ngFor="let user of users | reverse">
+ *     {{ user.name }} has the id: {{ user.id }}
+ * </li>
+ * ```
+ */
+@Pipe({
+    name: 'reverse'
+})
+export class ReversePipe implements PipeTransform {
+    public transform(value: any[]): any[] {
+        return value.slice().reverse();
+    }
+}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 696293c3c..319640470 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -119,6 +119,8 @@ import { BasePollDialogComponent } from 'app/site/polls/components/base-poll-dia
 import { PollFormComponent } from 'app/site/polls/components/poll-form/poll-form.component';
 import { MotionPollDialogComponent } from 'app/site/motions/modules/motion-poll/motion-poll-dialog/motion-poll-dialog.component';
 import { AssignmentPollDialogComponent } from 'app/site/assignments/components/assignment-poll-dialog/assignment-poll-dialog.component';
+import { ParsePollNumberPipe } from './pipes/parse-poll-number.pipe';
+import { ReversePipe } from './pipes/reverse.pipe';
 
 /**
  * Share Module for all "dumb" components and pipes.
@@ -279,7 +281,9 @@ import { AssignmentPollDialogComponent } from 'app/site/assignments/components/a
         BannerComponent,
         PollFormComponent,
         MotionPollDialogComponent,
-        AssignmentPollDialogComponent
+        AssignmentPollDialogComponent,
+        ParsePollNumberPipe,
+        ReversePipe
     ],
     declarations: [
         PermsDirective,
@@ -333,7 +337,9 @@ import { AssignmentPollDialogComponent } from 'app/site/assignments/components/a
         BannerComponent,
         PollFormComponent,
         MotionPollDialogComponent,
-        AssignmentPollDialogComponent
+        AssignmentPollDialogComponent,
+        ParsePollNumberPipe,
+        ReversePipe
     ],
     providers: [
         {
@@ -349,7 +355,9 @@ import { AssignmentPollDialogComponent } from 'app/site/assignments/components/a
         DecimalPipe,
         ProgressSnackBarComponent,
         TrustPipe,
-        LocalizedDatePipe
+        LocalizedDatePipe,
+        ParsePollNumberPipe,
+        ReversePipe
     ],
     entryComponents: [
         SortBottomSheetComponent,
diff --git 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
index 96cb6589c..eb82c8f25 100644
--- 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
@@ -65,20 +65,12 @@
     <div *ngIf="!editAssignment">
         <!-- assignment meta infos-->
         <ng-container [ngTemplateOutlet]="metaInfoTemplate"></ng-container>
-        <!-- votable polls -->
-        <ng-container *ngIf="assignment">
-            <ng-container *ngFor="let poll of assignment.polls; trackBy: trackByIndex">
-                <mat-card class="os-card" *ngIf="poll.canBeVotedFor">
-                    <os-assignment-poll [poll]="poll"> </os-assignment-poll>
-                </mat-card>
-            </ng-container>
-        </ng-container>
         <!-- candidates list -->
         <ng-container [ngTemplateOutlet]="candidatesTemplate"></ng-container>
         <!-- closed polls -->
         <ng-container *ngIf="assignment">
-            <ng-container *ngFor="let poll of assignment.polls; trackBy: trackByIndex">
-                <mat-card class="os-card" *ngIf="!poll.canBeVotedFor">
+            <ng-container *ngFor="let poll of assignment.polls | reverse; trackBy: trackByIndex">
+                <mat-card class="os-card">
                     <os-assignment-poll [poll]="poll"> </os-assignment-poll>
                 </mat-card>
             </ng-container>
@@ -135,13 +127,17 @@
 </ng-template>
 
 <ng-template #candidatesTemplate>
-    <mat-card class="os-card">
-        <ng-container *ngIf="assignment && !assignment.isFinished">
+    <mat-card class="os-card" *ngIf="assignment && !assignment.isFinished">
+        <ng-container>
             <h3 translate>Candidates</h3>
             <div>
                 <div
                     class="candidates-list"
-                    *ngIf="assignment && assignment.assignment_related_users && assignment.assignment_related_users.length > 0"
+                    *ngIf="
+                        assignment &&
+                        assignment.assignment_related_users &&
+                        assignment.assignment_related_users.length > 0
+                    "
                 >
                     <os-sorting-list
                         [input]="assignment.assignment_related_users"
diff --git a/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.html b/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.html
index 33f00ac45..fdd283213 100644
--- a/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.html
+++ b/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.html
@@ -33,16 +33,18 @@
                 {{ 'Groups' | translate }}:
                 <span *ngFor="let group of poll.groups">{{ group.getTitle() | translate }}</span>
             </div>
-            <div>{{ 'Poll type' | translate }}: {{ poll.typeVerbose | translate }}</div>
-            <div>{{ 'Poll method' | translate }}: {{ poll.pollmethodVerbose | translate }}</div>
-            <div>{{ 'Majority method' | translate }}: {{ poll.majorityMethodVerbose | translate }}</div>
+            <div>{{ 'Voting type' | translate }}: {{ poll.typeVerbose | translate }}</div>
+            <div>{{ 'Election method' | translate }}: {{ poll.pollmethodVerbose | translate }}</div>
+            <div>{{ 'Required majority' | translate }}: {{ poll.majorityMethodVerbose | translate }}</div>
             <div>{{ '100% base' | translate }}: {{ poll.percentBaseVerbose | translate }}</div>
         </div>
+
+        <!-- TODO Enum -->
         <div *ngIf="poll.state === 2">
             <os-poll-progress [poll]="poll"></os-poll-progress>
         </div>
 
-        <div *ngIf="poll.state === 3 || poll.state === 4">
+        <div *ngIf="poll.stateHasVotes">
             <h2 translate>Result</h2>
 
             <div class="chart-wrapper"></div>
diff --git a/client/src/app/site/assignments/components/assignment-poll-dialog/assignment-poll-dialog.component.html b/client/src/app/site/assignments/components/assignment-poll-dialog/assignment-poll-dialog.component.html
index e984aca1f..f67ea8518 100644
--- a/client/src/app/site/assignments/components/assignment-poll-dialog/assignment-poll-dialog.component.html
+++ b/client/src/app/site/assignments/components/assignment-poll-dialog/assignment-poll-dialog.component.html
@@ -8,14 +8,14 @@
                     <span *ngIf="option.user">{{ option.user.getFullName() }}</span>
                     <span *ngIf="!option.user">No user {{ option.candidate_id }}</span>
                 </div>
-                
+
                 <div>
                     <div *ngFor="let value of analogPollValues" [formGroupName]="option.user_id">
                         <os-check-input
                             [placeholder]="voteValueVerbose[value] | translate"
                             [checkboxValue]="-1"
                             inputType="number"
-                            [checkboxLabel]="'Majority' | translate"
+                            [checkboxLabel]="'majority' | translate"
                             [formControlName]="value"
                         ></os-check-input>
                     </div>
@@ -28,7 +28,7 @@
                 [placeholder]="generalValueVerbose[value] | translate"
                 [checkboxValue]="-1"
                 inputType="number"
-                [checkboxLabel]="'Majority' | translate"
+                [checkboxLabel]="'majority' | translate"
                 [formControlName]="value"
             ></os-check-input>
         </div>
diff --git 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
index f1543a869..db66adf8f 100644
--- 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,4 +1,10 @@
 <div class="assignment-poll-wrapper" *ngIf="poll">
+
+    <div class="">
+
+    </div>
+
+
     <div class="poll-menu">
         <!-- Buttons -->
         <button
@@ -9,30 +15,16 @@
         >
             <mat-icon>more_horiz</mat-icon>
         </button>
-        <mat-menu #pollItemMenu="matMenu">
-            <div *osPerms="'assignments.can_manage'">
-                <button mat-menu-item (click)="openDialog()">
-                    <mat-icon>edit</mat-icon>
-                    <span translate>Edit</span>
-                </button>
-            </div>
-            <div *osPerms="'core.can_manage_projector'">
-                <os-projector-button menuItem="true" [object]="poll"></os-projector-button>
-            </div>
-            <div *osPerms="'assignments.can_manage'">
-                <mat-divider></mat-divider>
-                <button mat-menu-item class="red-warning-text" (click)="onDeletePoll()">
-                    <mat-icon>delete</mat-icon>
-                    <span translate>Delete</span>
-                </button>
-            </div>
-        </mat-menu>
     </div>
 
     <div>
         <div>
+            <h3>
+                <a routerLink="/assignments/polls/{{ poll.id }}">
+                    {{ poll.title }}
+                </a>
+            </h3>
             <div class="poll-properties">
-                <!-- <mat-chip *ngIf="pollService.isElectronicVotingEnabled">{{ poll.typeVerbose }}</mat-chip> -->
                 <mat-chip
                     class="poll-state active"
                     [matMenuTriggerFor]="triggerMenu"
@@ -41,23 +33,14 @@
                     {{ poll.stateVerbose }}
                 </mat-chip>
             </div>
-
-            <h3>
-                <a routerLink="/assignments/polls/{{ poll.id }}">
-                    {{ poll.title }}
-                </a>
-            </h3>
         </div>
-        <div>
+        <div *ngIf="poll.stateHasVotes">
             <os-charts [type]="chartType" [labels]="candidatesLabels" [data]="chartDataSubject"></os-charts>
         </div>
     </div>
     <os-assignment-poll-vote *ngIf="poll.canBeVotedFor" [poll]="poll"></os-assignment-poll-vote>
-    <!-- <ng-container *ngIf="poll.state === pollStates.STATE_PUBLISHED" [ngTemplateOutlet]="resultsTemplate"></ng-container> -->
 </div>
 
-<ng-template #resultsTemplate> </ng-template>
-
 <mat-menu #triggerMenu="matMenu">
     <ng-container *ngIf="poll">
         <button mat-menu-item (click)="changeState(state.value)" *ngFor="let state of poll.nextStates | keyvalue">
@@ -65,3 +48,22 @@
         </button>
     </ng-container>
 </mat-menu>
+
+<mat-menu #pollItemMenu="matMenu">
+    <div *osPerms="'assignments.can_manage'">
+        <button mat-menu-item (click)="openDialog()">
+            <mat-icon>edit</mat-icon>
+            <span translate>Edit</span>
+        </button>
+    </div>
+    <div *osPerms="'core.can_manage_projector'">
+        <os-projector-button menuItem="true" [object]="poll"></os-projector-button>
+    </div>
+    <div *osPerms="'assignments.can_manage'">
+        <mat-divider></mat-divider>
+        <button mat-menu-item class="red-warning-text" (click)="onDeletePoll()">
+            <mat-icon>delete</mat-icon>
+            <span translate>Delete</span>
+        </button>
+    </div>
+</mat-menu>
diff --git 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
index 7c8b40b80..bcc96c384 100644
--- 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
@@ -3,33 +3,10 @@
     position: relative;
     padding: 0 15px;
 
-    .poll-main-content {
-        padding-top: 10px;
-    }
-
-    .poll-grid {
-        display: grid;
-        grid-gap: 5px;
-        padding: 5px;
-        grid-template-columns: 30px auto 250px 150px;
-        .candidate-name {
-            word-wrap: break-word;
-        }
-    }
-
-    .right-align {
-        text-align: right;
-    }
-
-    .vote-input {
-        .mat-form-field-wrapper {
-            // padding-bottom: 0;
-
-            .mat-form-field-infix {
-                width: 60px;
-                border-top: 0;
-            }
-        }
+    .poll-menu {
+        position: absolute;
+        top: 0;
+        right: 0;
     }
 
     .poll-properties {
@@ -62,33 +39,4 @@
             }
         }
     }
-
-    .poll-menu {
-        position: absolute;
-        top: 0;
-        right: 0;
-    }
-
-    .poll-quorum {
-        text-align: right;
-        margin-right: 10px;
-        mat-icon {
-            vertical-align: middle;
-            font-size: 100%;
-        }
-    }
-
-    .top-aligned {
-        position: absolute;
-        top: 0;
-        left: 0;
-    }
-
-    .wide {
-        width: 90%;
-    }
-
-    .hint-form {
-        margin-top: 20px;
-    }
 }
diff --git a/client/src/app/site/assignments/services/assignment-poll.service.ts b/client/src/app/site/assignments/services/assignment-poll.service.ts
index d3ad17b52..13d315b1a 100644
--- a/client/src/app/site/assignments/services/assignment-poll.service.ts
+++ b/client/src/app/site/assignments/services/assignment-poll.service.ts
@@ -49,7 +49,7 @@ export class AssignmentPollService extends PollService {
         const length = this.pollRepo.getViewModelList().filter(item => item.assignment_id === poll.assignment_id)
             .length;
 
-        poll.title = !length ? this.translate.instant('Vote') : `${this.translate.instant('Vote')} (${length + 1})`;
+        poll.title = !length ? this.translate.instant('Ballot') : `${this.translate.instant('Ballot')} (${length + 1})`;
         poll.pollmethod = AssignmentPollMethods.YN;
         poll.assignment_id = poll.assignment_id;
     }
diff --git a/client/src/app/site/config/components/config-overview/config-overview.component.html b/client/src/app/site/config/components/config-overview/config-overview.component.html
index 140deffee..30b0f6261 100644
--- a/client/src/app/site/config/components/config-overview/config-overview.component.html
+++ b/client/src/app/site/config/components/config-overview/config-overview.component.html
@@ -25,6 +25,7 @@
                             <mat-icon *ngSwitchCase="'General'">home</mat-icon>
                             <mat-icon *ngSwitchCase="'Agenda'">today</mat-icon>
                             <mat-icon *ngSwitchCase="'Motions'">assignment</mat-icon>
+                            <mat-icon *ngSwitchCase="'Voting'">pie_chart</mat-icon>
                             <mat-icon *ngSwitchCase="'Elections'">how_to_vote</mat-icon>
                             <mat-icon *ngSwitchCase="'Participants'">groups</mat-icon>
                             <mat-icon *ngSwitchCase="'Custom translations'">language</mat-icon>
diff --git a/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html b/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html
index 433dcee23..41cf9a52b 100644
--- a/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html
+++ b/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html
@@ -463,7 +463,7 @@
             <div class="mat-card create-poll-button" *ngIf="perms.isAllowed('createpoll', motion)">
                 <button mat-button (click)="openDialog()">
                     <mat-icon class="main-nav-color">poll</mat-icon>
-                    <span translate>New poll</span>
+                    <span translate>New vote</span>
                 </button>
             </div>
         </div>
diff --git a/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.html b/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.html
index de621c05b..fb4b65c77 100644
--- a/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.html
+++ b/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.html
@@ -1,9 +1,9 @@
 <os-head-bar [goBack]="true" [nav]="false">
     <div class="title-slot">
-        <h2 *ngIf="poll">{{ 'Motion' | translate }} {{ poll.motion.id }}</h2>
+        <h2 *ngIf="poll">{{ 'Motion' | translate }} {{ poll.motion.identifierOrTitle }}</h2>
     </div>
 
-    <div class="menu-slot" *osPerms="'agenda.can_manage'; or: 'agenda.can_see_list_of_speakers'">
+    <div class="menu-slot" *osPerms="'motions.can_manage_polls'">
         <button type="button" mat-icon-button [matMenuTriggerFor]="pollDetailMenu">
             <mat-icon>more_vert</mat-icon>
         </button>
@@ -18,14 +18,13 @@
 <ng-template #viewTemplate>
     <ng-container *ngIf="poll">
         <h1>{{ poll.title }}</h1>
-        <span *ngIf="poll.type !== 'analog'">{{ 'Polly type' | translate }}: {{ poll.type | translate }}</span>
-        <os-breadcrumb [breadcrumbs]="breadcrumbs"></os-breadcrumb>
+        <span *ngIf="poll.type !== 'analog'">{{ poll.typeVerbose | translate }}</span>
+
+        <div *ngIf="!poll.hasVotes || !poll.stateHasVotes">{{ 'No results to show' | translate }}</div>
 
         <div *ngIf="poll.stateHasVotes">
             <h2 translate>Result</h2>
 
-            <div *ngIf="!poll.hasVotes">{{ 'No results to show' | translate }}</div>
-
             <div class="result-wrapper" *ngIf="poll.hasVotes">
                 <!-- Chart -->
                 <os-charts
@@ -52,25 +51,28 @@
                 </mat-table>
 
                 <!-- Named table: only show if votes are present -->
-                <ng-container *ngIf="poll.type === 'named' && votesDataSource.data">
-                    <input matInput [(ngModel)]="votesDataSource.filter" placeholder="Filter"/>
+                <div class="named-result-table" *ngIf="poll.type === 'named' && votesDataSource.data">
+                    <h3>{{ 'Single votes' | translate }}</h3>
+                    <mat-form-field>
+                        <input matInput [(ngModel)]="votesDataSource.filter" placeholder="Filter" />
+                    </mat-form-field>
                     <mat-table [dataSource]="votesDataSource">
                         <ng-container matColumnDef="key" sticky>
-                            <mat-header-cell *matHeaderCellDef>{{ "User" | translate }}</mat-header-cell>
+                            <mat-header-cell *matHeaderCellDef>{{ 'User' | translate }}</mat-header-cell>
                             <mat-cell *matCellDef="let vote">
                                 <div *ngIf="vote.user">{{ vote.user.getFullName() }}</div>
                                 <div *ngIf="!vote.user">{{ 'Unknown user' | translate }}</div>
                             </mat-cell>
                         </ng-container>
                         <ng-container matColumnDef="value" sticky>
-                            <mat-header-cell *matHeaderCellDef>{{ "Vote" | translate }}</mat-header-cell>
+                            <mat-header-cell *matHeaderCellDef>{{ 'Vote' | translate }}</mat-header-cell>
                             <mat-cell *matCellDef="let vote">{{ vote.valueVerbose }}</mat-cell>
                         </ng-container>
-            
+
                         <mat-header-row *matHeaderRowDef="columnDefinition"></mat-header-row>
                         <mat-row *matRowDef="let vote; columns: columnDefinition"></mat-row>
                     </mat-table>
-                </ng-container>
+                </div>
             </div>
         </div>
 
@@ -82,29 +84,29 @@
                     {{ group.getTitle() | translate }}<span *ngIf="i < poll.groups.length - 1">, </span>
                 </span>
             </div>
-            <div>{{ 'Majority method' | translate }}: {{ poll.majorityMethodVerbose | translate }}</div>
+            <div>{{ 'Required majority' | translate }}: {{ poll.majorityMethodVerbose | translate }}</div>
             <div>{{ '100% base' | translate }}: {{ poll.percentBaseVerbose | translate }}</div>
         </div>
-
-        <div *ngIf="poll.state === 2">
-            <os-poll-progress [poll]="poll"></os-poll-progress>
-        </div>
     </ng-container>
 </ng-template>
 
 <!-- More Menu -->
 <mat-menu #pollDetailMenu="matMenu">
     <os-projector-button [menuItem]="true" [object]="poll" *osPerms="'core.can_manage_projector'"></os-projector-button>
-    <button mat-menu-item (click)="openDialog()">
+    <button *osPerms="'motions.can_manage_polls'" mat-menu-item (click)="openDialog()">
         <mat-icon>edit</mat-icon>
         <span translate>Edit</span>
     </button>
-    <button mat-menu-item *ngIf="poll && poll.type === 'named'" (click)="pseudoanonymizePoll()">
-        <mat-icon>polymer</mat-icon>
-        <span translate>Pseudoanonymize</span>
+    <button
+        mat-menu-item
+        *osPerms="'motions.can_manage_polls'; and: poll && poll.type === 'named'"
+        (click)="pseudoanonymizePoll()"
+    >
+        <mat-icon>warning</mat-icon>
+        <span translate>Anonymize votes</span>
     </button>
     <mat-divider></mat-divider>
-    <button mat-menu-item (click)="deletePoll()">
+    <button *osPerms="'motions.can_manage_polls'" mat-menu-item (click)="deletePoll()">
         <mat-icon color="warn">delete</mat-icon>
         <span translate>Delete</span>
     </button>
diff --git a/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.scss b/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.scss
index f09ea5838..355c9138a 100644
--- a/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.scss
+++ b/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.scss
@@ -35,4 +35,8 @@
 
 .named-result-table {
     grid-area: names;
+    .mat-form-field {
+        font-size: 14px;
+        width: 100%;
+    }
 }
diff --git a/client/src/app/site/motions/modules/motion-poll/motion-poll-dialog/motion-poll-dialog.component.html b/client/src/app/site/motions/modules/motion-poll/motion-poll-dialog/motion-poll-dialog.component.html
index 0c04fa638..dbf278737 100644
--- a/client/src/app/site/motions/modules/motion-poll/motion-poll-dialog/motion-poll-dialog.component.html
+++ b/client/src/app/site/motions/modules/motion-poll/motion-poll-dialog/motion-poll-dialog.component.html
@@ -6,41 +6,43 @@
                 [placeholder]="'Yes' | translate"
                 [checkboxValue]="-1"
                 inputType="number"
-                [checkboxLabel]="'Majority' | translate"
+                [checkboxLabel]="'majority' | translate"
                 formControlName="Y"
             ></os-check-input>
             <os-check-input
                 [placeholder]="'No' | translate"
                 [checkboxValue]="-1"
                 inputType="number"
-                [checkboxLabel]="'Majority' | translate"
+                [checkboxLabel]="'majority' | translate"
                 formControlName="N"
             ></os-check-input>
             <os-check-input
                 [placeholder]="'Abstain' | translate"
                 [checkboxValue]="-1"
                 inputType="number"
-                [checkboxLabel]="'Majority' | translate"
+                [checkboxLabel]="'majority' | translate"
                 formControlName="A"
             ></os-check-input>
             <os-check-input
-                [placeholder]="'Votes valid' | translate"
+                [placeholder]="'Valid votes' | translate"
                 inputType="number"
                 formControlName="votesvalid"
             ></os-check-input>
             <os-check-input
-                [placeholder]="'Votes invalid' | translate"
+                [placeholder]="'Invalid votes' | translate"
                 inputType="number"
                 formControlName="votesinvalid"
             ></os-check-input>
             <os-check-input
-                [placeholder]="'Votes cast' | translate"
+                [placeholder]="'Total votes cast' | translate"
                 inputType="number"
                 formControlName="votescast"
             ></os-check-input>
         </form>
     </div>
-    <div>
+
+    <!-- Publish immediately button. Only show for new polls -->
+    <div *ngIf="!pollData.state">
         <mat-checkbox [(ngModel)]="publishImmediately" (change)="publishStateChanged($event.checked)">
             <span translate>Publish immediately</span>
         </mat-checkbox>
diff --git a/client/src/app/site/motions/modules/motion-poll/motion-poll-dialog/motion-poll-dialog.component.ts b/client/src/app/site/motions/modules/motion-poll/motion-poll-dialog/motion-poll-dialog.component.ts
index 17954a2c5..652450db5 100644
--- a/client/src/app/site/motions/modules/motion-poll/motion-poll-dialog/motion-poll-dialog.component.ts
+++ b/client/src/app/site/motions/modules/motion-poll/motion-poll-dialog/motion-poll-dialog.component.ts
@@ -42,9 +42,6 @@ export class MotionPollDialogComponent extends BasePollDialogComponent {
             votesinvalid: data.votesinvalid,
             votescast: data.votescast
         };
-        // if (data.pollmethod === 'YNA') {
-        //     update.A = data.options[0].abstain;
-        // }
 
         if (this.dialogVoteForm) {
             const result = this.undoReplaceEmptyValues(update);
@@ -64,9 +61,7 @@ export class MotionPollDialogComponent extends BasePollDialogComponent {
             votesinvalid: ['', [Validators.min(-2)]],
             votescast: ['', [Validators.min(-2)]]
         });
-        // if (this.pollData.pollmethod === MotionPollMethods.YNA) {
-        //     this.dialogVoteForm.addControl('A', this.fb.control('', [Validators.min(-2)]));
-        // }
+
         if (this.pollData.poll) {
             this.updateDialogVoteForm(this.pollData);
         }
diff --git a/client/src/app/site/motions/modules/motion-poll/motion-poll-vote/motion-poll-vote.component.html b/client/src/app/site/motions/modules/motion-poll/motion-poll-vote/motion-poll-vote.component.html
index e3c602ec4..e0efc88ab 100644
--- a/client/src/app/site/motions/modules/motion-poll/motion-poll-vote/motion-poll-vote.component.html
+++ b/client/src/app/site/motions/modules/motion-poll/motion-poll-vote/motion-poll-vote.component.html
@@ -1,6 +1,8 @@
 <ng-container *ngIf="poll">
+    <div *osPerms="'motions.can_manage_polls';and:poll.isStateStarted">
+        <os-poll-progress [poll]="poll"></os-poll-progress>
+    </div>
     <ng-container *ngIf="vmanager.canVote(poll)">
-
         <!-- Voting -->
         <p *ngFor="let option of voteOptions">
             <button
diff --git a/client/src/app/site/motions/modules/motion-poll/motion-poll-vote/motion-poll-vote.component.scss b/client/src/app/site/motions/modules/motion-poll/motion-poll-vote/motion-poll-vote.component.scss
index 14828d583..1a7dfce5c 100644
--- a/client/src/app/site/motions/modules/motion-poll/motion-poll-vote/motion-poll-vote.component.scss
+++ b/client/src/app/site/motions/modules/motion-poll/motion-poll-vote/motion-poll-vote.component.scss
@@ -1,16 +1,15 @@
-/**
- * These colors should be extracted from some global CSS Constants file
- */
+@import '~assets/styles/poll-colors.scss';
+
 .voted-yes {
-    background-color: #9fd773;
+    background-color: $votes-yes-color;
 }
 
 .voted-no {
-    background-color: #cc6c5b;
+    background-color: $votes-no-color;
 }
 
 .voted-abstain {
-    background-color: #a6a6a6;
+    background-color: $votes-abstain-color;
 }
 
 .vote-label {
diff --git a/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.html b/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.html
index ad93fb953..bfbec91b3 100644
--- a/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.html
+++ b/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.html
@@ -1,23 +1,23 @@
-<div class="poll-preview-wrapper">
+<div class="poll-preview-wrapper" *ngIf="poll && showPoll()">
     <!-- Poll Infos -->
-    <div class="poll-title-wrapper" *ngIf="poll">
+    <div class="poll-title-wrapper">
         <!-- Title -->
-        <a class="poll-title" routerLink="/motions/polls/{{ poll.id }}">
+        <a class="poll-title" [routerLink]="pollLink">
             {{ poll.title }}
         </a>
 
-        <!-- Edit button -->
+        <!-- Dot Menu -->
         <span class="poll-title-actions" *osPerms="'motions.can_manage_polls'">
-            <button mat-icon-button (click)="openDialog()">
-                <mat-icon class="small-icon">edit</mat-icon>
+            <button mat-icon-button [matMenuTriggerFor]="pollDetailMenu">
+                <mat-icon class="small-icon">more_horiz</mat-icon>
             </button>
         </span>
 
         <!-- State chip -->
         <div class="poll-properties" *osPerms="'motions.can_manage_polls'">
-            <span *ngIf="pollService.isElectronicVotingEnabled && poll.typeVerbose !== 'Analog'">
-                {{ 'Poll type' | translate }}: {{ poll.typeVerbose | translate }}
-            </span>
+            <div *ngIf="pollService.isElectronicVotingEnabled && poll.type !== 'analog'">
+                {{ poll.typeVerbose | translate }}
+            </div>
 
             <mat-chip
                 disableRipple
@@ -37,35 +37,72 @@
 </div>
 
 <ng-template #votingResult>
-    <div (click)="openPoll()">
-        <ng-container [ngTemplateOutlet]="poll.hasVotes && poll.stateHasVotes ? viewTemplate : emptyTemplate"></ng-container>
+    <div [routerLink]="pollLink">
+        <ng-container
+            [ngTemplateOutlet]="poll.hasVotes && poll.stateHasVotes ? viewTemplate : emptyTemplate"
+        ></ng-container>
     </div>
 </ng-template>
 
 <ng-template #viewTemplate>
     <div class="poll-chart-wrapper">
-        <div class="votes-yes">
-            <os-icon-container icon="check" size="large">
-                {{ voteYes }}
-            </os-icon-container>
+        <!-- empty helper div to center the grid wrapper -->
+        <div></div>
+        <div class="doughnut-chart">
+            <os-charts *ngIf="showChart" [type]="'doughnut'" [data]="chartDataSubject" [showLegend]="false"> </os-charts>
         </div>
-        <div *ngIf="showChart" class="doughnut-chart">
-            <os-charts [type]="'doughnut'" [data]="chartDataSubject" [showLegend]="false"> </os-charts>
-        </div>
-        <div class="votes-no">
-            <os-icon-container icon="close" size="large">
-                {{ voteNo }}
-            </os-icon-container>
+        <div class="vote-legend">
+            <div class="votes-yes" *ngIf="isVoteDocumented(voteYes)">
+                <os-icon-container icon="thumb_up" size="large">
+                    {{ voteYes | parsePollNumber }}
+                </os-icon-container>
+            </div>
+            <div class="votes-no" *ngIf="isVoteDocumented(voteNo)">
+                <os-icon-container icon="thumb_down" size="large">
+                    {{ voteNo | parsePollNumber }}
+                </os-icon-container>
+            </div>
+            <div class="votes-abstain" *ngIf="isVoteDocumented(voteAbstain)">
+                <os-icon-container icon="trip_origin" size="large">
+                    {{ voteAbstain | parsePollNumber }}
+                </os-icon-container>
+            </div>
         </div>
     </div>
+    <div class="poll-detail-button-wrapper" *ngIf="poll.type !== 'analog'">
+        <button mat-button [routerLink]="pollLink">
+            {{ 'Single Votes' | translate }}
+        </button>
+    </div>
 </ng-template>
 
 <ng-template #emptyTemplate>
-    <div>
-        An empty poll - you have to enter votes.
+    <div *osPerms="'motions.can_manage_polls'">
+        {{ 'An empty poll - you have to enter votes.' | translate }}
     </div>
 </ng-template>
 
+<!-- More Menu -->
+<mat-menu #pollDetailMenu="matMenu">
+    <os-projector-button [menuItem]="true" [object]="poll" *osPerms="'core.can_manage_projector'"></os-projector-button>
+    <button *osPerms="'motions.can_manage_polls'" mat-menu-item (click)="openDialog()">
+        <mat-icon>edit</mat-icon>
+        <span translate>Edit</span>
+    </button>
+    <button mat-menu-item (click)="downloadPdf()">
+        <mat-icon>picture_as_pdf</mat-icon>
+        <span translate>PDF</span>
+    </button>
+    <div *osPerms="'motions.can_manage_polls'">
+        <mat-divider></mat-divider>
+        <button mat-menu-item (click)="deletePoll()">
+            <mat-icon color="warn">delete</mat-icon>
+            <span translate>Delete</span>
+        </button>
+    </div>
+</mat-menu>
+
+<!-- Select state menu -->
 <mat-menu #triggerMenu="matMenu">
     <ng-container *ngIf="poll">
         <button mat-menu-item (click)="changeState(state.value)" *ngFor="let state of poll.nextStates | keyvalue">
diff --git a/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.scss b/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.scss
index 85cf2d3d0..118a9c40f 100644
--- a/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.scss
+++ b/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.scss
@@ -1,3 +1,5 @@
+@import '~assets/styles/poll-colors.scss';
+
 .poll-preview-wrapper {
     padding: 8px;
     background: white;
@@ -6,6 +8,7 @@
     .poll-title {
         color: black;
         text-decoration: none;
+        font-weight: 500;
     }
 
     .poll-title-actions {
@@ -48,20 +51,41 @@
         display: grid;
         grid-template-columns: auto minmax(50px, 20%) auto;
 
-        .votes-no {
-            color: #cc6c5b;
-            margin: auto 0;
-            width: fit-content;
+        .doughnut-chart {
+            margin-top: auto;
+            margin-bottom: auto;
         }
 
-        .votes-yes {
-            color: #9fc773;
-            margin: auto 0 auto auto;
-            width: fit-content;
+        .vote-legend {
+            margin: auto 10px;
+
+            div + div {
+                margin-top: 10px;
+            }
+
+            .votes-yes {
+                color: $votes-yes-color;
+            }
+
+            .votes-no {
+                color: $votes-no-color;
+            }
+
+            .votes-abstain {
+                color: $votes-abstain-color;
+            }
         }
     }
 }
 
+.poll-detail-button-wrapper {
+    display: flex;
+    margin: auto 0;
+    > button {
+        margin-left: auto;
+    }
+}
+
 .poll-preview-meta-info {
     span {
         padding: 0 5px;
diff --git a/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.ts b/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.ts
index b72ec4b29..53ce4def2 100644
--- a/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.ts
+++ b/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.ts
@@ -1,7 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { MatDialog, MatSnackBar } from '@angular/material';
 import { Title } from '@angular/platform-browser';
-import { Router } from '@angular/router';
 
 import { TranslateService } from '@ngx-translate/core';
 import { BehaviorSubject } from 'rxjs';
@@ -12,6 +11,7 @@ import { PromptService } from 'app/core/ui-services/prompt.service';
 import { ChartData } from 'app/shared/components/charts/charts.component';
 import { ViewMotionPoll } from 'app/site/motions/models/view-motion-poll';
 import { MotionPollDialogService } from 'app/site/motions/services/motion-poll-dialog.service';
+import { MotionPollPdfService } from 'app/site/motions/services/motion-poll-pdf.service';
 import { BasePollComponent } from 'app/site/polls/components/base-poll.component';
 import { PollService } from 'app/site/polls/services/poll.service';
 
@@ -40,6 +40,9 @@ export class MotionPollComponent extends BasePollComponent<ViewMotionPoll> {
             if (data.label === 'NO') {
                 this.voteNo = data.data[0];
             }
+            if (data.label === 'ABSTAIN') {
+                this.voteAbstain = data.data[0];
+            }
         }
         this.chartDataSubject.next(chartData);
     }
@@ -48,6 +51,10 @@ export class MotionPollComponent extends BasePollComponent<ViewMotionPoll> {
         return this._poll;
     }
 
+    public get pollLink(): string {
+        return `/motions/polls/${this.poll.id}`;
+    }
+
     /**
      * Subject to holding the data needed for the chart.
      */
@@ -56,32 +63,45 @@ export class MotionPollComponent extends BasePollComponent<ViewMotionPoll> {
     /**
      * Number of votes for `Yes`.
      */
-    public set voteYes(n: number | string) {
+    public set voteYes(n: number) {
         this._voteYes = n;
     }
 
-    public get voteYes(): number | string {
-        return this.verboseForNumber(this._voteYes as number);
+    public get voteYes(): number {
+        return this._voteYes;
     }
 
     /**
      * Number of votes for `No`.
      */
-    public set voteNo(n: number | string) {
+    public set voteNo(n: number) {
         this._voteNo = n;
     }
 
-    public get voteNo(): number | string {
-        return this.verboseForNumber(this._voteNo as number);
+    public get voteNo(): number {
+        return this._voteNo;
+    }
+
+    /**
+     * Number of votes for `Abstain`.
+     */
+    public set voteAbstain(n: number) {
+        this._voteAbstain = n;
+    }
+
+    public get voteAbstain(): number {
+        return this._voteAbstain;
     }
 
     public get showChart(): boolean {
         return this._voteYes >= 0 && this._voteNo >= 0;
     }
 
-    private _voteNo: number | string = 0;
+    private _voteNo: number;
 
-    private _voteYes: number | string = 0;
+    private _voteYes: number;
+
+    private _voteAbstain: number;
 
     /**
      * Constructor.
@@ -101,27 +121,35 @@ export class MotionPollComponent extends BasePollComponent<ViewMotionPoll> {
         public pollRepo: MotionPollRepositoryService,
         pollDialog: MotionPollDialogService,
         public pollService: PollService,
-        private router: Router,
-        private operator: OperatorService
+        private operator: OperatorService,
+        private pdfService: MotionPollPdfService
     ) {
         super(titleService, matSnackBar, translate, dialog, promptService, pollRepo, pollDialog);
     }
 
-    public openPoll(): void {
-        if (this.operator.hasPerms('motions.can_manage_polls')) {
-            this.router.navigate(['motions', 'polls', this.poll.id]);
+    public showPoll(): boolean {
+        return (
+            this.operator.hasPerms('motions.can_manage_polls') ||
+            this.poll.isStatePublished ||
+            (this.poll.type !== 'analog' && this.poll.isStateStarted)
+        );
+    }
+
+    public downloadPdf(): void {
+        console.log('picture_as_pdf');
+        this.pdfService.printBallots(this.poll);
+    }
+
+    public async deletePoll(): Promise<void> {
+        const title = 'Delete poll';
+        const text = 'Do you really want to delete the selected poll?';
+
+        if (await this.promptService.open(title, text)) {
+            this.repo.delete(this.poll).catch(this.raiseError);
         }
     }
 
-    private verboseForNumber(input: number): number | string {
-        input = Math.trunc(input);
-        switch (input) {
-            case -1:
-                return 'Majority';
-            case -2:
-                return 'Not documented';
-            default:
-                return input;
-        }
+    public isVoteDocumented(vote: number): boolean {
+        return vote !== null && vote !== undefined && vote !== -2;
     }
 }
diff --git a/client/src/app/site/motions/motions-routing.module.ts b/client/src/app/site/motions/motions-routing.module.ts
index a58a3f0f5..ba62335c2 100644
--- a/client/src/app/site/motions/motions-routing.module.ts
+++ b/client/src/app/site/motions/motions-routing.module.ts
@@ -65,7 +65,7 @@ const routes: Routes = [
     {
         path: 'polls',
         loadChildren: () => import('./modules/motion-poll/motion-poll.module').then(m => m.MotionPollModule),
-        data: { basePerm: 'motions.can_manage_polls' }
+        data: { basePerm: 'motions.can_see' }
     },
     {
         path: ':id',
diff --git a/client/src/app/site/motions/services/motion-poll-pdf.service.ts b/client/src/app/site/motions/services/motion-poll-pdf.service.ts
index 168ed88f4..228f3ecad 100644
--- a/client/src/app/site/motions/services/motion-poll-pdf.service.ts
+++ b/client/src/app/site/motions/services/motion-poll-pdf.service.ts
@@ -17,7 +17,7 @@ type BallotCountChoices = 'NUMBER_OF_DELEGATES' | 'NUMBER_OF_ALL_PARTICIPANTS' |
  *
  * @example
  * ```ts
- * this.MotionPollPdfService.printBallos(this.poll);
+ * this.MotionPollPdfService.printBallots(this.poll);
  * ```
  */
 @Injectable({
diff --git a/client/src/app/site/polls/components/base-poll-detail.component.ts b/client/src/app/site/polls/components/base-poll-detail.component.ts
index 4e3b88136..7cbdbe976 100644
--- a/client/src/app/site/polls/components/base-poll-detail.component.ts
+++ b/client/src/app/site/polls/components/base-poll-detail.component.ts
@@ -75,7 +75,7 @@ export abstract class BasePollDetailComponent<V extends ViewBasePoll> extends Ba
      * @param fb
      * @param groupRepo
      * @param location
-     * @param promptDialog
+     * @param promptService
      * @param dialog
      */
     public constructor(
@@ -85,7 +85,7 @@ export abstract class BasePollDetailComponent<V extends ViewBasePoll> extends Ba
         protected repo: BasePollRepositoryService,
         protected route: ActivatedRoute,
         protected groupRepo: GroupRepositoryService,
-        protected promptDialog: PromptService,
+        protected promptService: PromptService,
         protected pollDialog: BasePollDialogService<V>
     ) {
         super(title, translate, matSnackbar);
@@ -108,16 +108,16 @@ export abstract class BasePollDetailComponent<V extends ViewBasePoll> extends Ba
         const title = 'Delete poll';
         const text = 'Do you really want to delete the selected poll?';
 
-        if (await this.promptDialog.open(title, text)) {
+        if (await this.promptService.open(title, text)) {
             this.repo.delete(this.poll).then(() => this.onDeleted(), this.raiseError);
         }
     }
 
     public async pseudoanonymizePoll(): Promise<void> {
-        const title = 'Pseudoanonymize poll';
-        const text = 'Do you really want to pseudoanonymize the selected poll?';
+        const title = 'Anonymize single votes';
+        const text = 'Do you really want to anonymize all votes? This cannot be undone.';
 
-        if (await this.promptDialog.open(title, text)) {
+        if (await this.promptService.open(title, text)) {
             this.repo.pseudoanonymize(this.poll).then(() => this.onPollLoaded(), this.raiseError); // votes have changed, but not the poll, so the components have to be informed about the update
         }
     }
diff --git a/client/src/app/site/polls/components/poll-form/poll-form.component.html b/client/src/app/site/polls/components/poll-form/poll-form.component.html
index 7f4953dd5..3f8213039 100644
--- a/client/src/app/site/polls/components/poll-form/poll-form.component.html
+++ b/client/src/app/site/polls/components/poll-form/poll-form.component.html
@@ -19,7 +19,7 @@
     <form [formGroup]="contentForm" class="poll-preview--meta-info-form">
         <ng-container *ngIf="!data || !data.state || data.state === 1">
             <mat-form-field *ngIf="pollService.isElectronicVotingEnabled">
-                <mat-select [placeholder]="'Poll type' | translate" formControlName="type" required>
+                <mat-select [placeholder]="'Voting type' | translate" formControlName="type" required>
                     <mat-option *ngFor="let option of pollTypes | keyvalue" [value]="option.key">
                         {{ option.value | translate }}
                     </mat-option>
@@ -56,7 +56,7 @@
             </mat-select>
         </mat-form-field>
         <mat-form-field>
-            <mat-select placeholder="{{ 'Majority' | translate }}" formControlName="majority_method" required>
+            <mat-select placeholder="{{ 'Required majority' | translate }}" formControlName="majority_method" required>
                 <mat-option *ngFor="let option of majorityMethods | keyvalue" [value]="option.key">
                     {{ option.value | translate }}
                 </mat-option>
diff --git a/client/src/app/site/polls/components/poll-progress/poll-progress.component.html b/client/src/app/site/polls/components/poll-progress/poll-progress.component.html
index e76187923..13089e6f5 100644
--- a/client/src/app/site/polls/components/poll-progress/poll-progress.component.html
+++ b/client/src/app/site/polls/components/poll-progress/poll-progress.component.html
@@ -1 +1,3 @@
-<span>{{ this.poll.voted_id.length }} von {{ this.max }} haben abgestimmt.</span>
\ No newline at end of file
+<span>{{ poll.voted_id.length }} von {{ max }} haben abgestimmt.</span>
+
+<mat-progress-bar class="voting-progress-bar" [value]="valueInPercent"></mat-progress-bar>
diff --git a/client/src/app/site/polls/components/poll-progress/poll-progress.component.ts b/client/src/app/site/polls/components/poll-progress/poll-progress.component.ts
index 7ef288aa0..fdfb7f221 100644
--- a/client/src/app/site/polls/components/poll-progress/poll-progress.component.ts
+++ b/client/src/app/site/polls/components/poll-progress/poll-progress.component.ts
@@ -29,6 +29,10 @@ export class PollProgressComponent extends BaseViewComponent implements OnInit {
         super(title, translate, snackbar);
     }
 
+    public get valueInPercent(): number {
+        return (this.poll.voted_id.length / this.max) * 100;
+    }
+
     /**
      * OnInit.
      * Sets the observable for groups.
diff --git a/client/src/app/site/polls/models/view-base-poll.ts b/client/src/app/site/polls/models/view-base-poll.ts
index ec10da991..0b850f89e 100644
--- a/client/src/app/site/polls/models/view-base-poll.ts
+++ b/client/src/app/site/polls/models/view-base-poll.ts
@@ -22,9 +22,9 @@ export const PollStateVerbose = {
 };
 
 export const PollTypeVerbose = {
-    analog: 'Analog',
-    named: 'Named',
-    pseudoanonymous: 'Pseudoanonymous'
+    analog: 'Analog voting',
+    named: 'Named voting',
+    pseudoanonymous: 'Pseudoanonymous voting'
 };
 
 export const PollPropertyVerbose = {
@@ -37,9 +37,9 @@ export const PollPropertyVerbose = {
 };
 
 export const MajorityMethodVerbose = {
-    simple: 'Simple',
-    two_thirds: 'Two Thirds',
-    three_quarters: 'Three Quarters',
+    simple: 'Simple majority',
+    two_thirds: 'Two-thirds majority',
+    three_quarters: 'Three-quarters majority',
     disabled: 'Disabled'
 };
 
@@ -48,7 +48,7 @@ export const PercentBaseVerbose = {
     YNA: 'Yes/No/Abstain',
     votes: 'All votes',
     valid: 'Valid votes',
-    cast: 'Cast votes',
+    cast: 'Total votes cast',
     disabled: 'Disabled'
 };
 
@@ -104,6 +104,7 @@ export abstract class ViewBasePoll<M extends BasePoll<M, any> = any> extends Bas
         }
         return states;
     }
+
     public abstract readonly pollClassType: 'motion' | 'assignment';
 
     public canBeVotedFor: () => boolean;
diff --git a/client/src/assets/styles/poll-colors.scss b/client/src/assets/styles/poll-colors.scss
new file mode 100644
index 000000000..e5a64c828
--- /dev/null
+++ b/client/src/assets/styles/poll-colors.scss
@@ -0,0 +1,6 @@
+/**
+ * Define the colors used for yes, no and abstain
+ */
+$votes-yes-color: #9fd773;
+$votes-no-color: #cc6c5b;
+$votes-abstain-color: #a6a6a6;
diff --git a/openslides/assignments/config_variables.py b/openslides/assignments/config_variables.py
index f63cbbdf1..5412b47c9 100644
--- a/openslides/assignments/config_variables.py
+++ b/openslides/assignments/config_variables.py
@@ -9,7 +9,7 @@ def get_config_variables():
     They are grouped in 'Ballot and ballot papers' and 'PDF'. The generator has
     to be evaluated during app loading (see apps.py).
     """
-    # Polls
+    # Voting
     yield ConfigVariable(
         name="assignment_poll_default_100_percent_base",
         default_value="YNA",
@@ -20,7 +20,7 @@ def get_config_variables():
             for base in AssignmentPoll.PERCENT_BASES
         ),
         weight=400,
-        group="Polls",
+        group="Voting",
         subgroup="Elections",
     )
 
@@ -35,7 +35,8 @@ def get_config_variables():
         label="Required majority",
         help_text="Default method to check whether a candidate has reached the required majority.",
         weight=405,
-        group="Polls",
+        hidden=True,
+        group="Voting",
         subgroup="Elections",
     )
 
@@ -45,7 +46,7 @@ def get_config_variables():
         input_type="boolean",
         label="Put all candidates on the list of speakers",
         weight=410,
-        group="Polls",
+        group="Voting",
         subgroup="Elections",
     )
 
diff --git a/openslides/assignments/migrations/0009_voting_2.py b/openslides/assignments/migrations/0009_voting_2.py
index da3437572..fc5d1501c 100644
--- a/openslides/assignments/migrations/0009_voting_2.py
+++ b/openslides/assignments/migrations/0009_voting_2.py
@@ -117,7 +117,7 @@ def set_correct_state(apps, schema_editor):
     AssignmentPoll = apps.get_model("assignments", "AssignmentPoll")
     AssignmentVote = apps.get_model("assignments", "AssignmentVote")
     for poll in AssignmentPoll.objects.all():
-        # Polls, that are published (old field) but have no votes, will be
+        # Voting, that are published (old field) but have no votes, will be
         # left at the created state...
         if AssignmentVote.objects.filter(option__poll__pk=poll.pk).exists():
             if poll.published:
diff --git a/openslides/core/migrations/0027_projector_size_1.py b/openslides/core/migrations/0026_projector_size_1.py
similarity index 91%
rename from openslides/core/migrations/0027_projector_size_1.py
rename to openslides/core/migrations/0026_projector_size_1.py
index 24eebbb4a..07d1cec47 100644
--- a/openslides/core/migrations/0027_projector_size_1.py
+++ b/openslides/core/migrations/0026_projector_size_1.py
@@ -6,7 +6,7 @@ from django.db import migrations, models
 class Migration(migrations.Migration):
 
     dependencies = [
-        ("core", "0026_remove_history_restricted"),
+        ("core", "0025_projector_color"),
     ]
 
     operations = [
diff --git a/openslides/core/migrations/0028_projector_size_2.py b/openslides/core/migrations/0027_projector_size_2.py
similarity index 96%
rename from openslides/core/migrations/0028_projector_size_2.py
rename to openslides/core/migrations/0027_projector_size_2.py
index b201296cd..7186e39c9 100644
--- a/openslides/core/migrations/0028_projector_size_2.py
+++ b/openslides/core/migrations/0027_projector_size_2.py
@@ -37,7 +37,7 @@ def calculate_aspect_ratios(apps, schema_editor):
 class Migration(migrations.Migration):
 
     dependencies = [
-        ("core", "0027_projector_size_1"),
+        ("core", "0026_projector_size_1"),
     ]
 
     operations = [
diff --git a/openslides/core/migrations/0029_projector_size_3.py b/openslides/core/migrations/0028_projector_size_3.py
similarity index 85%
rename from openslides/core/migrations/0029_projector_size_3.py
rename to openslides/core/migrations/0028_projector_size_3.py
index 570d34696..81b623232 100644
--- a/openslides/core/migrations/0029_projector_size_3.py
+++ b/openslides/core/migrations/0028_projector_size_3.py
@@ -6,7 +6,7 @@ from django.db import migrations
 class Migration(migrations.Migration):
 
     dependencies = [
-        ("core", "0028_projector_size_2"),
+        ("core", "0027_projector_size_2"),
     ]
 
     operations = [
diff --git a/openslides/core/migrations/0026_remove_history_restricted.py b/openslides/core/migrations/0029_remove_history_restricted.py
similarity index 79%
rename from openslides/core/migrations/0026_remove_history_restricted.py
rename to openslides/core/migrations/0029_remove_history_restricted.py
index 94368becd..dc555d992 100644
--- a/openslides/core/migrations/0026_remove_history_restricted.py
+++ b/openslides/core/migrations/0029_remove_history_restricted.py
@@ -5,6 +5,6 @@ from django.db import migrations
 
 class Migration(migrations.Migration):
 
-    dependencies = [("core", "0025_projector_color")]
+    dependencies = [("core", "0028_projector_size_3")]
 
     operations = [migrations.RemoveField(model_name="history", name="restricted")]
diff --git a/openslides/motions/config_variables.py b/openslides/motions/config_variables.py
index c9251e71d..abb875625 100644
--- a/openslides/motions/config_variables.py
+++ b/openslides/motions/config_variables.py
@@ -388,18 +388,18 @@ def get_config_variables():
         subgroup="PDF export",
     )
 
-    # Polls
+    # Voting
     yield ConfigVariable(
         name="motion_poll_default_100_percent_base",
         default_value="YNA",
         input_type="choice",
-        label="The 100-%-base of an election result consists of",
+        label="The 100 % base of a voting result consists of",
         choices=tuple(
             {"value": base[0], "display_name": base[1]}
             for base in MotionPoll.PERCENT_BASES
         ),
         weight=420,
-        group="Polls",
+        group="Voting",
         subgroup="Motions",
     )
 
@@ -412,8 +412,9 @@ def get_config_variables():
             for method in MotionPoll.MAJORITY_METHODS
         ),
         label="Required majority",
-        help_text="Default method to check whether a candidate has reached the required majority.",
+        help_text="Default method to check whether a motion has reached the required majority.",
         weight=425,
-        group="Polls",
+        hidden=True,
+        group="Voting",
         subgroup="Motions",
     )