ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #5765 from tsiegleauq/poll-create-layout-enhance

Browse Source 
Enhance poll dialog layout
This commit is contained in:
Emanuel Schütze 2020-12-13 21:37:08 +01:00 committed by GitHub
commit acd33b8207
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 124 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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
>

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

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

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

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

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

@ -9,13 +9,22 @@
</mat-card-title>
<!-- Type and State -->
<div class="italic spacer-bottom-20">
<span *osPerms="'assignments.can_manage'; and: poll.type === 'pseudoanonymous'">
<button mat-icon-button color="warn" (click)="openVotingWarning()">
<mat-icon> warning </mat-icon>
</button>
<div class="type-and-state italic spacer-bottom-20">
<span *osPerms="'assignments.can_manage'; and: poll.isEVoting">
<os-icon-container
class="poll-type"
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>

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

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

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

@ -21,22 +21,29 @@
<!-- 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>
<!-- Type and State -->
<div class="type-and-state italic spacer-bottom-20">
<span *osPerms="permission.motionsCanManagePolls; and: poll.isEVoting">
<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 -->
<span *ngIf="pollService.isElectronicVotingEnabled && poll.type !== 'analog'">
{{ poll.typeVerbose | translate }} &middot;
</span>
<!-- State chip -->
<!-- State -->
<span>
{{ poll.stateVerbose | translate }}
</span>
</div>
</div>
<!-- Change state button -->
<div *osPerms="'motions.can_manage_polls'; and: !hideChangeState">

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

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

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

@ -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-hint (click)="openVotingWarning()" *ngIf="showNonNominalWarning">
{{ 'Not suitable for formal secret voting!' | translate }}</mat-hint
<mat-icon
color="primary"
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 -->
<div class="suboption" *ngIf="showAmountAndGlobal(data)">
<mat-form-field>
<!-- Amount of Votes -->
<mat-form-field *ngIf="showAmountAndGlobal(data)">
<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>

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

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

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

@ -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);
}