From 3c9f6ed278d3fbca489c80cd737c7ba3872b1bb8 Mon Sep 17 00:00:00 2001
From: Sean <sean.f.t.engelhardt@gmail.com>
Date: Mon, 16 Mar 2020 18:40:31 +0100
Subject: [PATCH] Some overall improvements

Common:
	delete unused motion poll list

Poll Create form:
	Fix ugly multi line mat hints
	(workaround, see https://github.com/angular/components/issues/5227 )

Poll List:
	Fix too tiny column size
	user_has_voted_valid (ceck icon) was not shown

Motion Poll Card:
	Enhance subtitle layout (type + state)

Assignment Poll Card:
	Open warning after clicking the hint icon

Assignment Poll Chart:
	Show Absolute values and percents in chart label

Assignment Detail:
	Add new ballot button with plus icon instead of chart icon
---
 .../shared/pipes/poll-percent-base.pipe.ts    | 18 +++--
 .../assignment-detail.component.html          |  2 +-
 .../assignment-poll-detail.component.ts       | 15 ++---
 .../assignment-poll.component.ts              | 10 ++-
 .../services/assignment-poll.service.ts       |  8 ++-
 .../motion-poll-detail.component.ts           |  8 +--
 .../motion-poll-list.component.html           | 36 ----------
 .../motion-poll-list.component.scss           |  0
 .../motion-poll-list.component.spec.ts        | 27 --------
 .../motion-poll-list.component.ts             | 45 -------------
 .../motion-poll/motion-poll-routing.module.ts |  2 -
 .../modules/motion-poll/motion-poll.module.ts |  3 +-
 .../motion-poll/motion-poll.component.html    | 43 ++++++------
 .../motions/services/motion-poll.service.ts   |  8 ++-
 .../components/base-poll-detail.component.ts  |  5 +-
 .../poll-list/poll-list.component.html        | 27 ++++++--
 .../poll-list/poll-list.component.ts          |  2 +-
 .../app/site/polls/services/poll.service.ts   | 66 +++++++++++++++----
 client/src/styles.scss                        | 26 ++++++++
 19 files changed, 168 insertions(+), 183 deletions(-)
 delete mode 100644 client/src/app/site/motions/modules/motion-poll/motion-poll-list/motion-poll-list.component.html
 delete mode 100644 client/src/app/site/motions/modules/motion-poll/motion-poll-list/motion-poll-list.component.scss
 delete mode 100644 client/src/app/site/motions/modules/motion-poll/motion-poll-list/motion-poll-list.component.spec.ts
 delete mode 100644 client/src/app/site/motions/modules/motion-poll/motion-poll-list/motion-poll-list.component.ts

diff --git a/client/src/app/shared/pipes/poll-percent-base.pipe.ts b/client/src/app/shared/pipes/poll-percent-base.pipe.ts
index cfec9d13c..2c15d8f0f 100644
--- a/client/src/app/shared/pipes/poll-percent-base.pipe.ts
+++ b/client/src/app/shared/pipes/poll-percent-base.pipe.ts
@@ -21,26 +21,24 @@ import { PollData } from 'app/site/polls/services/poll.service';
     name: 'pollPercentBase'
 })
 export class PollPercentBasePipe implements PipeTransform {
-    private decimalPlaces = 3;
-
     public constructor(
         private assignmentPollService: AssignmentPollService,
         private motionPollService: MotionPollService
     ) {}
 
     public transform(value: number, poll: PollData): string | null {
-        let totalByBase: number;
+        // logic handles over the pollService to avoid circular dependencies
+        let voteValueInPercent: string;
         if ((<any>poll).assignment) {
-            totalByBase = this.assignmentPollService.getPercentBase(poll);
+            voteValueInPercent = this.assignmentPollService.getVoteValueInPercent(value, poll);
         } else {
-            totalByBase = this.motionPollService.getPercentBase(poll);
+            voteValueInPercent = this.motionPollService.getVoteValueInPercent(value, poll);
         }
 
-        if (totalByBase && totalByBase > 0) {
-            const percentNumber = (value / totalByBase) * 100;
-            const result = percentNumber % 1 === 0 ? percentNumber : percentNumber.toFixed(this.decimalPlaces);
-            return `(${result} %)`;
+        if (voteValueInPercent) {
+            return `(${voteValueInPercent})`;
+        } else {
+            return null;
         }
-        return null;
     }
 }
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 eae31d2ec..74bf74784 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
@@ -75,7 +75,7 @@
         <!-- New Ballot button -->
         <div class="new-ballot-button" *ngIf="assignment && hasPerms('createPoll')">
             <button mat-stroked-button (click)="openDialog()">
-                <mat-icon color="primary">poll</mat-icon>
+                <mat-icon>add</mat-icon>
                 <span translate>New ballot</span>
             </button>
         </div>
diff --git a/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.ts b/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.ts
index 93fd8a2d4..57549902b 100644
--- a/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.ts
+++ b/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.ts
@@ -14,7 +14,7 @@ import { PromptService } from 'app/core/ui-services/prompt.service';
 import { ChartType } from 'app/shared/components/charts/charts.component';
 import { VoteValue } from 'app/shared/models/poll/base-vote';
 import { BasePollDetailComponent } from 'app/site/polls/components/base-poll-detail.component';
-import { PollService, PollTableData, VotingResult } from 'app/site/polls/services/poll.service';
+import { PollTableData, VotingResult } from 'app/site/polls/services/poll.service';
 import { AssignmentPollDialogService } from '../../services/assignment-poll-dialog.service';
 import { AssignmentPollService } from '../../services/assignment-poll.service';
 import { ViewAssignmentPoll } from '../../models/view-assignment-poll';
@@ -25,7 +25,7 @@ import { ViewAssignmentPoll } from '../../models/view-assignment-poll';
     styleUrls: ['./assignment-poll-detail.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class AssignmentPollDetailComponent extends BasePollDetailComponent<ViewAssignmentPoll> {
+export class AssignmentPollDetailComponent extends BasePollDetailComponent<ViewAssignmentPoll, AssignmentPollService> {
     public columnDefinitionSingleVotes: PblColumnDefinition[];
 
     public filterProps = ['user.getFullName'];
@@ -47,10 +47,9 @@ export class AssignmentPollDetailComponent extends BasePollDetailComponent<ViewA
         groupRepo: GroupRepositoryService,
         prompt: PromptService,
         pollDialog: AssignmentPollDialogService,
-        pollService: PollService,
+        protected pollService: AssignmentPollService,
         votesRepo: AssignmentVoteRepositoryService,
         private operator: OperatorService,
-        private assignmentPollService: AssignmentPollService,
         private router: Router
     ) {
         super(title, translate, matSnackbar, repo, route, groupRepo, prompt, pollDialog, pollService, votesRepo);
@@ -144,11 +143,11 @@ export class AssignmentPollDetailComponent extends BasePollDetailComponent<ViewA
         return true;
     }
 
+    public getTableData(): PollTableData[] {
+        return this.pollService.generateTableData(this.poll);
+    }
+
     protected onDeleted(): void {
         this.router.navigate(['assignments', this.poll.assignment_id]);
     }
-
-    public getTableData(): PollTableData[] {
-        return this.assignmentPollService.generateTableData(this.poll);
-    }
 }
diff --git 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
index 26f1b0ae0..67ececee1 100644
--- 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
@@ -9,10 +9,12 @@ import { TranslateService } from '@ngx-translate/core';
 import { AssignmentPollRepositoryService } from 'app/core/repositories/assignments/assignment-poll-repository.service';
 import { PromptService } from 'app/core/ui-services/prompt.service';
 import { ChartType } from 'app/shared/components/charts/charts.component';
+import { VotingPrivacyWarningComponent } from 'app/shared/components/voting-privacy-warning/voting-privacy-warning.component';
+import { infoDialogSettings } from 'app/shared/utils/dialog-settings';
 import { BasePollComponent } from 'app/site/polls/components/base-poll.component';
-import { PollService } from 'app/site/polls/services/poll.service';
 import { AssignmentPollDialogService } from '../../services/assignment-poll-dialog.service';
 import { AssignmentPollPdfService } from '../../services/assignment-poll-pdf.service';
+import { AssignmentPollService } from '../../services/assignment-poll.service';
 import { ViewAssignmentPoll } from '../../models/view-assignment-poll';
 
 /**
@@ -62,7 +64,7 @@ export class AssignmentPollComponent extends BasePollComponent<ViewAssignmentPol
         promptService: PromptService,
         repo: AssignmentPollRepositoryService,
         pollDialog: AssignmentPollDialogService,
-        public pollService: PollService,
+        private pollService: AssignmentPollService,
         private formBuilder: FormBuilder,
         private pdfService: AssignmentPollPdfService
     ) {
@@ -81,4 +83,8 @@ export class AssignmentPollComponent extends BasePollComponent<ViewAssignmentPol
     public printBallot(): void {
         this.pdfService.printBallots(this.poll);
     }
+
+    public openVotingWarning(): void {
+        this.dialog.open(VotingPrivacyWarningComponent, infoDialogSettings);
+    }
 }
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 645ca9f77..85cc98f64 100644
--- a/client/src/app/site/assignments/services/assignment-poll.service.ts
+++ b/client/src/app/site/assignments/services/assignment-poll.service.ts
@@ -11,6 +11,8 @@ import {
     AssignmentPollPercentBase
 } from 'app/shared/models/assignments/assignment-poll';
 import { MajorityMethod, VOTE_UNDOCUMENTED } from 'app/shared/models/poll/base-poll';
+import { ParsePollNumberPipe } from 'app/shared/pipes/parse-poll-number.pipe';
+import { PollKeyVerbosePipe } from 'app/shared/pipes/poll-key-verbose.pipe';
 import { PollData, PollService, PollTableData, VotingResult } from 'app/site/polls/services/poll.service';
 import { ViewAssignmentPoll } from '../models/view-assignment-poll';
 
@@ -41,10 +43,12 @@ export class AssignmentPollService extends PollService {
     public constructor(
         config: ConfigService,
         constants: ConstantsService,
-        private translate: TranslateService,
+        pollKeyVerbose: PollKeyVerbosePipe,
+        parsePollNumber: ParsePollNumberPipe,
+        protected translate: TranslateService,
         private pollRepo: AssignmentPollRepositoryService
     ) {
-        super(constants);
+        super(constants, translate, pollKeyVerbose, parsePollNumber);
         config
             .get<AssignmentPollPercentBase>('assignment_poll_default_100_percent_base')
             .subscribe(base => (this.defaultPercentBase = base));
diff --git a/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.ts b/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.ts
index bab3e1408..408347d86 100644
--- a/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.ts
+++ b/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { MatSnackBar } from '@angular/material';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -14,8 +14,8 @@ import { PromptService } from 'app/core/ui-services/prompt.service';
 import { ViewMotion } from 'app/site/motions/models/view-motion';
 import { ViewMotionPoll } from 'app/site/motions/models/view-motion-poll';
 import { MotionPollDialogService } from 'app/site/motions/services/motion-poll-dialog.service';
+import { MotionPollService } from 'app/site/motions/services/motion-poll.service';
 import { BasePollDetailComponent } from 'app/site/polls/components/base-poll-detail.component';
-import { PollService } from 'app/site/polls/services/poll.service';
 
 @Component({
     selector: 'os-motion-poll-detail',
@@ -23,7 +23,7 @@ import { PollService } from 'app/site/polls/services/poll.service';
     styleUrls: ['./motion-poll-detail.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class MotionPollDetailComponent extends BasePollDetailComponent<ViewMotionPoll> implements OnInit {
+export class MotionPollDetailComponent extends BasePollDetailComponent<ViewMotionPoll, MotionPollService> {
     public motion: ViewMotion;
     public columnDefinition: PblColumnDefinition[] = [
         {
@@ -49,7 +49,7 @@ export class MotionPollDetailComponent extends BasePollDetailComponent<ViewMotio
         groupRepo: GroupRepositoryService,
         prompt: PromptService,
         pollDialog: MotionPollDialogService,
-        pollService: PollService,
+        pollService: MotionPollService,
         votesRepo: MotionVoteRepositoryService,
         private operator: OperatorService,
         private router: Router
diff --git a/client/src/app/site/motions/modules/motion-poll/motion-poll-list/motion-poll-list.component.html b/client/src/app/site/motions/modules/motion-poll/motion-poll-list/motion-poll-list.component.html
deleted file mode 100644
index 90dbd44d5..000000000
--- a/client/src/app/site/motions/modules/motion-poll/motion-poll-list/motion-poll-list.component.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<os-head-bar>
-    <div class="title-slot">Motions poll list</div>
-
-    <!-- Menu -->
-    <div class="menu-slot">
-        <button type="button" mat-icon-button [matMenuTriggerFor]="pollMenu"><mat-icon>more_vert</mat-icon></button>
-    </div>
-</os-head-bar>
-
-<os-list-view-table
-    [listObservableProvider]="repo"
-    [vScrollFixed]="64"
-    [columns]="tableColumnDefinition"
-    [listStorageKey]="'motion-polls'"
->
-    <div *pblNgridCellDef="'title'; row as poll; rowContext as context" class="cell-slot fill">
-        <a
-            class="detail-link"
-            (click)="saveScrollIndex('motion-polls', rowContext.identity)"
-            [routerLink]="poll.id"
-            *ngIf="!isMultiSelect"
-        ></a>
-        <span>{{ poll.title }}</span>
-    </div>
-    <div *pblNgridCellDef="'state'; row as poll; rowContext as context" class="cell-slot fill">
-        <span>{{ poll.stateVerbose }}</span>
-    </div>
-</os-list-view-table>
-
-<mat-menu #pollMenu="matMenu">
-    <!-- Settings -->
-    <button mat-menu-item *osPerms="'core.can_manage_config'" routerLink="/settings/polls">
-        <mat-icon>settings</mat-icon>
-        <span translate>Settings</span>
-    </button>
-</mat-menu>
diff --git a/client/src/app/site/motions/modules/motion-poll/motion-poll-list/motion-poll-list.component.scss b/client/src/app/site/motions/modules/motion-poll/motion-poll-list/motion-poll-list.component.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/client/src/app/site/motions/modules/motion-poll/motion-poll-list/motion-poll-list.component.spec.ts b/client/src/app/site/motions/modules/motion-poll/motion-poll-list/motion-poll-list.component.spec.ts
deleted file mode 100644
index 819250015..000000000
--- a/client/src/app/site/motions/modules/motion-poll/motion-poll-list/motion-poll-list.component.spec.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { E2EImportsModule } from 'e2e-imports.module';
-
-import { MotionPollListComponent } from './motion-poll-list.component';
-
-describe('MotionPollListComponent', () => {
-    let component: MotionPollListComponent;
-    let fixture: ComponentFixture<MotionPollListComponent>;
-
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            imports: [E2EImportsModule],
-            declarations: [MotionPollListComponent]
-        }).compileComponents();
-    }));
-
-    beforeEach(() => {
-        fixture = TestBed.createComponent(MotionPollListComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
-});
diff --git a/client/src/app/site/motions/modules/motion-poll/motion-poll-list/motion-poll-list.component.ts b/client/src/app/site/motions/modules/motion-poll/motion-poll-list/motion-poll-list.component.ts
deleted file mode 100644
index 0f6cbefd8..000000000
--- a/client/src/app/site/motions/modules/motion-poll/motion-poll-list/motion-poll-list.component.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { MatSnackBar } from '@angular/material';
-import { Title } from '@angular/platform-browser';
-
-import { TranslateService } from '@ngx-translate/core';
-import { PblColumnDefinition } from '@pebula/ngrid';
-
-import { StorageService } from 'app/core/core-services/storage.service';
-import { MotionPollRepositoryService } from 'app/core/repositories/motions/motion-poll-repository.service';
-import { BaseListViewComponent } from 'app/site/base/base-list-view';
-import { ViewMotionPoll } from 'app/site/motions/models/view-motion-poll';
-
-@Component({
-    selector: 'os-motion-poll-list',
-    templateUrl: './motion-poll-list.component.html',
-    styleUrls: ['./motion-poll-list.component.scss']
-})
-export class MotionPollListComponent extends BaseListViewComponent<ViewMotionPoll> implements OnInit {
-    public tableColumnDefinition: PblColumnDefinition[] = [
-        {
-            prop: 'title',
-            width: 'auto'
-        },
-        {
-            prop: 'state',
-            width: 'auto'
-        }
-    ];
-
-    public polls: ViewMotionPoll[] = [];
-
-    public constructor(
-        title: Title,
-        protected translate: TranslateService,
-        matSnackbar: MatSnackBar,
-        storage: StorageService,
-        public repo: MotionPollRepositoryService
-    ) {
-        super(title, translate, matSnackbar, storage);
-    }
-
-    public ngOnInit(): void {
-        this.subscriptions.push(this.repo.getViewModelListObservable().subscribe(polls => (this.polls = polls)));
-    }
-}
diff --git a/client/src/app/site/motions/modules/motion-poll/motion-poll-routing.module.ts b/client/src/app/site/motions/modules/motion-poll/motion-poll-routing.module.ts
index 120eac726..95a4197db 100644
--- a/client/src/app/site/motions/modules/motion-poll/motion-poll-routing.module.ts
+++ b/client/src/app/site/motions/modules/motion-poll/motion-poll-routing.module.ts
@@ -2,10 +2,8 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { MotionPollDetailComponent } from './motion-poll-detail/motion-poll-detail.component';
-import { MotionPollListComponent } from './motion-poll-list/motion-poll-list.component';
 
 const routes: Routes = [
-    { path: '', component: MotionPollListComponent, pathMatch: 'full' },
     { path: 'new', component: MotionPollDetailComponent },
     { path: ':id', component: MotionPollDetailComponent }
 ];
diff --git a/client/src/app/site/motions/modules/motion-poll/motion-poll.module.ts b/client/src/app/site/motions/modules/motion-poll/motion-poll.module.ts
index 170b4b8d3..1c781d657 100644
--- a/client/src/app/site/motions/modules/motion-poll/motion-poll.module.ts
+++ b/client/src/app/site/motions/modules/motion-poll/motion-poll.module.ts
@@ -4,7 +4,6 @@ import { NgModule } from '@angular/core';
 import { SharedModule } from 'app/shared/shared.module';
 import { PollsModule } from 'app/site/polls/polls.module';
 import { MotionPollDetailComponent } from './motion-poll-detail/motion-poll-detail.component';
-import { MotionPollListComponent } from './motion-poll-list/motion-poll-list.component';
 import { MotionPollRoutingModule } from './motion-poll-routing.module';
 import { MotionPollVoteComponent } from './motion-poll-vote/motion-poll-vote.component';
 import { MotionPollComponent } from './motion-poll/motion-poll.component';
@@ -12,6 +11,6 @@ import { MotionPollComponent } from './motion-poll/motion-poll.component';
 @NgModule({
     imports: [CommonModule, SharedModule, MotionPollRoutingModule, PollsModule],
     exports: [MotionPollComponent],
-    declarations: [MotionPollComponent, MotionPollDetailComponent, MotionPollListComponent, MotionPollVoteComponent]
+    declarations: [MotionPollComponent, MotionPollDetailComponent, MotionPollVoteComponent]
 })
 export class MotionPollModule {}
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 08b1af24f..ffe9db2b6 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
@@ -2,33 +2,13 @@
     <!-- Poll Infos -->
     <div class="poll-title-wrapper">
         <!-- Title Area -->
-        <div class="poll-title-area spacer-bottom-20">
+        <div class="poll-title-area">
             <!-- Title -->
             <span class="poll-title">
                 <a [routerLink]="pollLink">
                     {{ poll.title | translate }}
                 </a>
             </span>
-
-            <div class="italic">
-                <span *osPerms="'motions.can_manage_polls'; and: poll.type === 'pseudoanonymous'">
-                    <button mat-icon-button color="warn" (click)="openVotingWarning()">
-                        <mat-icon>
-                            warning
-                        </mat-icon>
-                    </button>
-                </span>
-
-                <!-- Subtitle -->
-                <span *ngIf="pollService.isElectronicVotingEnabled && poll.type !== 'analog'">
-                    {{ poll.typeVerbose | translate }} &middot;
-                </span>
-
-                <!-- State chip -->
-                <span>
-                    {{ poll.stateVerbose | translate }}
-                </span>
-            </div>
         </div>
 
         <!-- Dot Menu -->
@@ -39,6 +19,27 @@
         </span>
     </div>
 
+    <!-- Subtitle -->
+    <div class="italic spacer-bottom-20">
+        <span *osPerms="'motions.can_manage_polls'; and: poll.type === 'pseudoanonymous'">
+            <button mat-icon-button color="warn" (click)="openVotingWarning()">
+                <mat-icon>
+                    warning
+                </mat-icon>
+            </button>
+        </span>
+
+        <!-- Subtitle -->
+        <span *ngIf="pollService.isElectronicVotingEnabled && poll.type !== 'analog'">
+            {{ poll.typeVerbose | translate }} &middot;
+        </span>
+
+        <!-- State chip -->
+        <span>
+            {{ poll.stateVerbose | translate }}
+        </span>
+    </div>
+
     <!-- Change state button -->
     <div *osPerms="'motions.can_manage_polls'; and: !hideChangeState">
         <button mat-stroked-button [ngClass]="pollStateActions[poll.state].css" (click)="changeState(poll.nextState)">
diff --git a/client/src/app/site/motions/services/motion-poll.service.ts b/client/src/app/site/motions/services/motion-poll.service.ts
index f8098efe8..f96f0acc1 100644
--- a/client/src/app/site/motions/services/motion-poll.service.ts
+++ b/client/src/app/site/motions/services/motion-poll.service.ts
@@ -7,6 +7,8 @@ import { MotionPollRepositoryService } from 'app/core/repositories/motions/motio
 import { ConfigService } from 'app/core/ui-services/config.service';
 import { MotionPoll, MotionPollMethod } from 'app/shared/models/motions/motion-poll';
 import { MajorityMethod, PercentBase } from 'app/shared/models/poll/base-poll';
+import { ParsePollNumberPipe } from 'app/shared/pipes/parse-poll-number.pipe';
+import { PollKeyVerbosePipe } from 'app/shared/pipes/poll-key-verbose.pipe';
 import { PollData, PollService, PollTableData, VotingResult } from 'app/site/polls/services/poll.service';
 import { ViewMotionOption } from '../models/view-motion-option';
 import { ViewMotionPoll } from '../models/view-motion-poll';
@@ -43,10 +45,12 @@ export class MotionPollService extends PollService {
     public constructor(
         config: ConfigService,
         constants: ConstantsService,
-        private translate: TranslateService,
+        pollKeyVerbose: PollKeyVerbosePipe,
+        parsePollNumber: ParsePollNumberPipe,
+        protected translate: TranslateService,
         private pollRepo: MotionPollRepositoryService
     ) {
-        super(constants);
+        super(constants, translate, pollKeyVerbose, parsePollNumber);
         config
             .get<PercentBase>('motion_poll_default_100_percent_base')
             .subscribe(base => (this.defaultPercentBase = base));
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 942d7b009..ed4400d34 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
@@ -27,7 +27,8 @@ export interface BaseVoteData {
     user?: ViewUser;
 }
 
-export abstract class BasePollDetailComponent<V extends ViewBasePoll> extends BaseViewComponent implements OnInit {
+export abstract class BasePollDetailComponent<V extends ViewBasePoll, S extends PollService> extends BaseViewComponent
+    implements OnInit {
     /**
      * All the groups of users.
      */
@@ -100,7 +101,7 @@ export abstract class BasePollDetailComponent<V extends ViewBasePoll> extends Ba
         protected groupRepo: GroupRepositoryService,
         protected promptService: PromptService,
         protected pollDialog: BasePollDialogService<V>,
-        protected pollService: PollService,
+        protected pollService: S,
         protected votesRepo: BaseRepository<ViewBaseVote, BaseVote, object>
     ) {
         super(title, translate, matSnackbar);
diff --git a/client/src/app/site/polls/components/poll-list/poll-list.component.html b/client/src/app/site/polls/components/poll-list/poll-list.component.html
index eb17ba912..ba6a5a482 100644
--- a/client/src/app/site/polls/components/poll-list/poll-list.component.html
+++ b/client/src/app/site/polls/components/poll-list/poll-list.component.html
@@ -10,20 +10,35 @@
     [filterProps]="filterProps"
     [filterService]="filterService"
 >
-    <div *pblNgridCellDef="'title'; row as poll; rowContext as context;" class="cell-slot fill">
+    <!-- Poll Title -->
+    <div *pblNgridCellDef="'title'; row as poll; rowContext as context" class="cell-slot fill">
         <a class="detail-link" [routerLink]="poll.parentLink" *ngIf="!isMultiSelect"></a>
         <span>{{ poll.title }}</span>
     </div>
-    <div *pblNgridCellDef="'classType'; row as poll;" class="cell-slot fill">
+
+    <!-- Motion Or Assigmnent Title Title -->
+    <div *pblNgridCellDef="'classType'; row as poll" class="cell-slot fill">
         <a class="detail-link" [routerLink]="poll.parentLink" *ngIf="!isMultiSelect"></a>
         <span>{{ poll.getContentObject().getListTitle() }}</span>
     </div>
-    <div *pblNgridCellDef="'state'; row as poll;" class="cell-slot fill">
+
+    <!-- State -->
+    <div *pblNgridCellDef="'state'; row as poll" class="cell-slot fill">
         <a class="detail-link" [routerLink]="poll.parentLink" *ngIf="!isMultiSelect"></a>
         <span>{{ poll.stateVerbose | translate }}</span>
     </div>
-    <div *pblNgridCellDef="'votability'; row as poll;" class="cell-slot fill">
-        <mat-icon *ngIf="poll.user_has_voted_valid" color="accent" matTooltip="{{ 'You have already voted.' | translate }}">check_circle</mat-icon>
-        <mat-icon *ngIf="!poll.user_has_voted_valid && poll.canBeVotedFor" color="warn" matTooltip="{{ 'Voting is currently in progress.' | translate }}">warning</mat-icon>
+
+    <!-- Voted Indicator -->
+    <div *pblNgridCellDef="'votability'; row as poll" class="cell-slot fill">
+        <mat-icon *ngIf="poll.user_has_voted" color="accent" matTooltip="{{ 'You have already voted.' | translate }}">
+            check_circle
+        </mat-icon>
+        <mat-icon
+            *ngIf="!poll.user_has_voted && poll.canBeVotedFor"
+            color="warn"
+            matTooltip="{{ 'Voting is currently in progress.' | translate }}"
+        >
+            warning
+        </mat-icon>
     </div>
 </os-list-view-table>
diff --git a/client/src/app/site/polls/components/poll-list/poll-list.component.ts b/client/src/app/site/polls/components/poll-list/poll-list.component.ts
index 13a03a99a..2d26a79bf 100644
--- a/client/src/app/site/polls/components/poll-list/poll-list.component.ts
+++ b/client/src/app/site/polls/components/poll-list/poll-list.component.ts
@@ -29,7 +29,7 @@ export class PollListComponent extends BaseListViewComponent<ViewBasePoll> {
         },
         {
             prop: 'state',
-            width: '70px'
+            width: 'auto'
         },
         {
             prop: 'votability',
diff --git a/client/src/app/site/polls/services/poll.service.ts b/client/src/app/site/polls/services/poll.service.ts
index 13a3a0669..6652a9214 100644
--- a/client/src/app/site/polls/services/poll.service.ts
+++ b/client/src/app/site/polls/services/poll.service.ts
@@ -1,5 +1,7 @@
 import { Injectable } from '@angular/core';
 
+import { TranslateService } from '@ngx-translate/core';
+
 import { _ } from 'app/core/translate/translation-marker';
 import { ChartData, ChartDate } from 'app/shared/components/charts/charts.component';
 import { AssignmentPollMethod } from 'app/shared/models/assignments/assignment-poll';
@@ -11,6 +13,8 @@ import {
     PollType,
     VOTE_UNDOCUMENTED
 } from 'app/shared/models/poll/base-poll';
+import { ParsePollNumberPipe } from 'app/shared/pipes/parse-poll-number.pipe';
+import { PollKeyVerbosePipe } from 'app/shared/pipes/poll-key-verbose.pipe';
 import { AssignmentPollMethodVerbose } from 'app/site/assignments/models/view-assignment-poll';
 import {
     MajorityMethodVerbose,
@@ -21,6 +25,7 @@ import {
 } from 'app/site/polls/models/view-base-poll';
 import { ConstantsService } from '../../../core/core-services/constants.service';
 
+const PERCENT_DECIMAL_PLACES = 3;
 /**
  * The possible keys of a poll object that represent numbers.
  * TODO Should be 'key of MotionPoll|AssinmentPoll if type of key is number'
@@ -178,12 +183,32 @@ export abstract class PollService {
      */
     public pollValues: CalculablePollKey[] = ['yes', 'no', 'abstain', 'votesvalid', 'votesinvalid', 'votescast'];
 
-    public constructor(constants: ConstantsService) {
+    public constructor(
+        constants: ConstantsService,
+        protected translate: TranslateService,
+        private pollKeyVerbose: PollKeyVerbosePipe,
+        private parsePollNumber: ParsePollNumberPipe
+    ) {
         constants
             .get<OpenSlidesSettings>('Settings')
             .subscribe(settings => (this.isElectronicVotingEnabled = settings.ENABLE_ELECTRONIC_VOTING));
     }
 
+    /**
+     * return the total number of votes depending on the selected percent base
+     */
+    public abstract getPercentBase(poll: PollData): number;
+
+    public getVoteValueInPercent(value: number, poll: PollData): string | null {
+        const totalByBase = this.getPercentBase(poll);
+        if (totalByBase && totalByBase > 0) {
+            const percentNumber = (value / totalByBase) * 100;
+            const result = percentNumber % 1 === 0 ? percentNumber : percentNumber.toFixed(PERCENT_DECIMAL_PLACES);
+            return `${result} %`;
+        }
+        return null;
+    }
+
     /**
      * Assigns the default poll data to the object. To be extended in subclasses
      * @param poll the poll/object to fill
@@ -268,8 +293,24 @@ export abstract class PollService {
     }
 
     public generateChartData(poll: PollData | ViewBasePoll): ChartData {
+        const fields = this.getPollDataFields(poll);
+
+        const data: ChartData = fields.map(key => {
+            return {
+                data: this.getResultFromPoll(poll, key),
+                label: key.toUpperCase(),
+                backgroundColor: PollColor[key],
+                hoverBackgroundColor: PollColor[key]
+            } as ChartDate;
+        });
+
+        return data;
+    }
+
+    private getPollDataFields(poll: PollData | ViewBasePoll): CalculablePollKey[] {
         let fields: CalculablePollKey[];
         let isAssignment: boolean;
+
         if (poll instanceof ViewBasePoll) {
             isAssignment = poll.pollClassType === 'assignment';
         } else {
@@ -294,16 +335,7 @@ export abstract class PollService {
             }
         }
 
-        const data: ChartData = fields.map(key => {
-            return {
-                data: this.getResultFromPoll(poll, key),
-                label: key.toUpperCase(),
-                backgroundColor: PollColor[key],
-                hoverBackgroundColor: PollColor[key]
-            } as ChartDate;
-        });
-
-        return data;
+        return fields;
     }
 
     /**
@@ -314,7 +346,17 @@ export abstract class PollService {
     }
 
     public getChartLabels(poll: PollData): string[] {
-        return poll.options.map(candidate => candidate.user.short_name);
+        const fields = this.getPollDataFields(poll);
+        return poll.options.map(option => {
+            const votingResults = fields.map(field => {
+                const votingKey = this.translate.instant(this.pollKeyVerbose.transform(field));
+                const resultValue = this.parsePollNumber.transform(option[field]);
+                const resultInPercent = this.getVoteValueInPercent(option[field], poll);
+                return `${votingKey} ${resultValue} (${resultInPercent})`;
+            });
+
+            return `${option.user.short_name} · ${votingResults.join(' · ')}`;
+        });
     }
 
     public isVoteDocumented(vote: number): boolean {
diff --git a/client/src/styles.scss b/client/src/styles.scss
index 11b8983b0..5c2b2570b 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -864,6 +864,32 @@ button.mat-menu-item.selected {
     }
 }
 
+/**
+ * Fix to enable multi line mat hints. See:
+ * https://github.com/angular/components/issues/5227
+ */
+.mat-form-field {
+    .mat-form-field-wrapper {
+        padding-bottom: 0;
+
+        .mat-form-field-underline {
+            position: initial !important;
+            display: block;
+            margin-top: -1px;
+        }
+
+        .mat-form-field-subscript-wrapper,
+        .mat-form-field-ripple {
+            position: initial !important;
+            display: table;
+        }
+
+        .mat-form-field-subscript-wrapper {
+            min-height: calc(1em + 1px);
+        }
+    }
+}
+
 /**
  * Use to disable events on (i.e) matMenuTriggerFor
  */