Enhance poll dialog layout

declutters the the poll dialogs

client/src/app/shared/components/icon-container/icon-container.component.html

@@ -3,6 +3,7 @@
     [matTooltip]="iconTooltip"
     [class]="iconAction ? 'pointer' : ''"
     (click)="iconClick()"
+    [color]="color"
     >{{ icon }}</mat-icon
 >
 <span class="content-node" [ngClass]="noWrap ? 'single-line' : 'break-lines'">
@@ -13,5 +14,6 @@
     [matTooltip]="iconTooltip"
     [class]="iconAction ? 'pointer' : ''"
     (click)="iconClick()"
+    [color]="color"
     >{{ icon }}</mat-icon
 >

client/src/app/shared/components/icon-container/icon-container.component.ts

@@ -51,6 +51,9 @@ export class IconContainerComponent {
     @Input()
     public noWrap = false;
 
+    @Input()
+    public color: string;
+
     /**
      * Optional action for clicking on the icon.
      */

client/src/app/site/assignments/modules/assignment-poll/components/assignment-poll-dialog/assignment-poll-dialog.component.scss

@@ -1,24 +1,3 @@
-.submit-buttons {
-    display: flex;
-    justify-content: flex-end;
-}
-
-.meta-text {
-    font-style: italic;
-    margin-left: 10px;
-    margin-right: 10px;
-    mat-chip {
-        margin-left: 5px;
-        margin-right: 2px;
-    }
-}
-
-.candidate-name {
-    word-wrap: break-word;
-    width: 100%;
-    border-bottom: 1px solid grey;
-}
-
 .votes-grid {
     display: grid;
     grid-gap: 5px;
@@ -29,12 +8,3 @@
         width: 100%;
     }
 }
-
-.sum-value {
-    display: flex;
-    justify-content: flex-end;
-}
-
-.width-600 {
-    max-width: 600px;
-}

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

@@ -9,13 +9,22 @@
             </mat-card-title>
 
             <!-- Type and State -->
-            <div class="italic spacer-bottom-20">
+            <div class="type-and-state italic spacer-bottom-20">
-                <span *osPerms="'assignments.can_manage'; and: poll.type === 'pseudoanonymous'">
+                <span *osPerms="'assignments.can_manage'; and: poll.isEVoting">
-                    <button mat-icon-button color="warn" (click)="openVotingWarning()">
+                    <os-icon-container
-                        <mat-icon> warning </mat-icon>
+                        class="poll-type"
-                    </button>
+                        icon="info"
+                        size="large"
+                        color="primary"
+                        [swap]="true"
+                        [showIcon]="poll.isAnon"
+                        (iconAction)="openVotingWarning()"
+                    >
+                        {{ poll.typeVerbose | translate }}
+                    </os-icon-container>
+                    <span *ngIf="poll.isAnon">&nbsp;</span>
+                    &middot;&nbsp;
                 </span>
-                <span *ngIf="poll.type !== 'analog'"> {{ poll.typeVerbose | translate }} &middot; </span>
                 <span>
                     {{ poll.stateVerbose | translate }}
                 </span>

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

@@ -19,4 +19,14 @@
         display: flex;
         margin: auto 0;
     }
+
+    .type-and-state {
+        display: flex;
+        span {
+            display: flex;
+        }
+        .poll-type {
+            width: fit-content;
+        }
+    }
 }

client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.html

@@ -21,22 +21,29 @@
 
     <!-- Subtitle -->
     <div class="italic spacer-bottom-20">
-        <span *osPerms="'motions.can_manage_polls'; and: poll.type === 'pseudoanonymous'">
+        <!-- Type and State -->
-            <button mat-icon-button color="warn" (click)="openVotingWarning()">
+        <div class="type-and-state italic spacer-bottom-20">
-                <mat-icon>warning</mat-icon>
+            <span *osPerms="permission.motionsCanManagePolls; and: poll.isEVoting">
-            </button>
+                <os-icon-container
+                    class="poll-type"
+                    icon="info"
+                    color="primary"
+                    [swap]="true"
+                    [showIcon]="poll.isAnon"
+                    (iconAction)="openVotingWarning()"
+                >
+                    {{ poll.typeVerbose | translate }}
+                </os-icon-container>
+                <span *ngIf="poll.isAnon">&nbsp;</span>
+                &middot;&nbsp;
             </span>
 
-        <!-- Subtitle -->
+            <!-- State -->
-        <span *ngIf="pollService.isElectronicVotingEnabled && poll.type !== 'analog'">
-            {{ poll.typeVerbose | translate }} &middot;
-        </span>
-
-        <!-- State chip -->
             <span>
                 {{ poll.stateVerbose | translate }}
             </span>
         </div>
+    </div>
 
     <!-- Change state button -->
     <div *osPerms="'motions.can_manage_polls'; and: !hideChangeState">

client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.scss

@@ -28,6 +28,16 @@
         }
     }
 
+    .type-and-state {
+        display: flex;
+        span {
+            display: flex;
+        }
+        .poll-type {
+            width: fit-content;
+        }
+    }
+
     .poll-chart-wrapper {
         cursor: pointer;
         display: grid;

client/src/app/site/polls/components/poll-form/poll-form.component.html

@@ -10,21 +10,26 @@
 
     <form [formGroup]="contentForm" class="poll-preview-meta-info-form">
         <ng-container *ngIf="!data || !data.state || data.isCreated">
+            <div class="info-grid">
                 <!-- Poll Type -->
-            <mat-form-field class="pollType" *ngIf="isEVotingEnabled">
+                <mat-form-field *ngIf="isEVotingEnabled">
                     <mat-select [placeholder]="PollPropertyVerbose.type | translate" formControlName="type" required>
                         <mat-option *ngFor="let option of pollTypes | keyvalue" [value]="option.key">
                             {{ option.value | translate }}
                         </mat-option>
                     </mat-select>
-                <mat-error>{{ 'This field is required.' | translate }}</mat-error>
+                    <mat-icon
-                <mat-hint (click)="openVotingWarning()" *ngIf="showNonNominalWarning">
+                        color="primary"
-                    {{ 'Not suitable for formal secret voting!' | translate }}</mat-hint
+                        matSuffix
+                        *ngIf="showNonNominalWarning"
+                        (click)="openVotingWarning($event)"
                     >
+                        info
+                    </mat-icon>
+                    <mat-error>{{ 'This field is required.' | translate }}</mat-error>
                 </mat-form-field>
 
                 <!-- Groups entitled to Vote -->
-            <div class="suboption">
                 <mat-form-field *ngIf="contentForm.get('type').value && contentForm.get('type').value !== 'analog'">
                     <os-search-value-selector
                         formControlName="groups_id"
@@ -37,6 +42,7 @@
                 </mat-form-field>
             </div>
 
+            <div class="info-grid">
                 <!-- Poll Methods -->
                 <mat-form-field *ngIf="pollMethods">
                     <mat-select
@@ -50,11 +56,9 @@
                     </mat-select>
                     <mat-error>{{ 'This field is required.' | translate }}</mat-error>
                 </mat-form-field>
-        </ng-container>
 
-        <!-- Amount of Votes and global options -->
+                <!-- Amount of Votes -->
-        <div class="suboption" *ngIf="showAmountAndGlobal(data)">
+                <mat-form-field *ngIf="showAmountAndGlobal(data)">
-            <mat-form-field>
                     <input
                         type="number"
                         matInput
@@ -64,7 +68,10 @@
                         required
                     />
                 </mat-form-field>
-            <div class="global-options">
+            </div>
+
+            <!-- Amount of Votes and global options -->
+            <div class="global-options" *ngIf="showAmountAndGlobal(data)">
                 <mat-checkbox formControlName="global_yes">
                     {{ PollPropertyVerbose.global_yes | translate }}
                 </mat-checkbox>
@@ -73,7 +80,7 @@
                     {{ PollPropertyVerbose.global_abstain | translate }}
                 </mat-checkbox>
             </div>
-        </div>
+        </ng-container>
 
         <!-- 100 Percent Base -->
         <mat-form-field>

client/src/app/site/polls/components/poll-form/poll-form.component.scss

@@ -2,16 +2,11 @@
     margin: 0;
 }
 
-.pollType {
-    .mat-hint {
-        color: red;
-        cursor: pointer;
-    }
-}
-
 .poll-preview-meta-info-form {
-    .suboption {
+    .info-grid {
-        margin-left: 1.5em;
+        display: grid;
+        column-gap: 1em;
+        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
     }
 
     .mat-checkbox {

client/src/app/site/polls/components/poll-form/poll-form.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -29,7 +29,8 @@ import { PollService } from '../../services/poll.service';
 @Component({
     selector: 'os-poll-form',
     templateUrl: './poll-form.component.html',
-    styleUrls: ['./poll-form.component.scss']
+    styleUrls: ['./poll-form.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class PollFormComponent<T extends ViewBasePoll, S extends PollService>
     extends BaseViewComponentDirective
@@ -160,14 +161,16 @@ export class PollFormComponent<T extends ViewBasePoll, S extends PollService>
             this.contentForm.get('pollmethod').valueChanges.subscribe(method => {
                 if (method) {
                     this.updatePercentBases(method);
-                    this.setVotesAmountCtrl();
+                    this.setWarning();
                 }
             }),
             // poll type changes
             this.contentForm.get('type').valueChanges.subscribe(() => {
-                this.setVotesAmountCtrl();
+                this.setWarning();
             })
         );
+
+        this.setWarning();
     }
 
     private disablePollType(): void {
@@ -232,7 +235,7 @@ export class PollFormComponent<T extends ViewBasePoll, S extends PollService>
      * Disable votes_amount form control if the poll type is anonymous
      * and the poll method is votes.
      */
-    private setVotesAmountCtrl(): void {
+    private setWarning(): void {
         if (this.contentForm.get('type').value === PollType.Pseudoanonymous) {
             this.showNonNominalWarning = true;
         } else {
@@ -297,7 +300,8 @@ export class PollFormComponent<T extends ViewBasePoll, S extends PollService>
         });
     }
 
-    public openVotingWarning(): void {
+    public openVotingWarning(event: MouseEvent): void {
+        event.stopPropagation();
         this.dialog.open(VotingPrivacyWarningComponent, infoDialogSettings);
     }