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

Enhance Choice service.

Browse Source 
- Enhance the behavior on small screens and resolutions
- Only scroll content
- fixes an issue where choices could not be made if no content option where available
This commit is contained in:
Sean Engelhardt 2019-06-28 11:44:16 +02:00
parent b71e73fe7f
commit 1e7a5b33d7
4 changed files with 67 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/core/ui-services/choice.service.ts
View File

@ -42,7 +42,7 @@ export class ChoiceService {
clearChoice?: string clearChoice?: string
): Promise<ChoiceAnswer> { ): Promise<ChoiceAnswer> {
const dialogRef = this.dialog.open(ChoiceDialogComponent, { const dialogRef = this.dialog.open(ChoiceDialogComponent, {
minWidth: '250px', maxWidth: '90vw',
maxHeight: '90vh', maxHeight: '90vh',
disableClose: true, disableClose: true,
data: { data: {

103
client/src/app/shared/components/choice-dialog/choice-dialog.component.html
View File

@ -1,53 +1,56 @@
<div class="scrollmenu-outer"> <!-- Title -->
<h2 mat-dialog-title>{{ data.title | translate }}</h2> <h2 mat-dialog-title>{{ data.title | translate }}</h2>
<div class="scrollmenu">
<mat-radio-group <!-- Content -->
#radio <mat-dialog-content>
name="choice" <mat-radio-group
*ngIf="!data.multiSelect && data.choices" #radio
class="choice-radio-group" name="choice"
[(ngModel)]="selectedChoice" *ngIf="!data.multiSelect && data.choices"
> class="choice-radio-group"
<mat-radio-button class="choice-button" *ngFor="let choice of data.choices" [value]="choice.id"> [(ngModel)]="selectedChoice"
>
<mat-radio-button class="choice-button" *ngFor="let choice of data.choices" [value]="choice.id">
{{ getChoiceTitle(choice) | translate }}
</mat-radio-button>
<mat-divider *ngIf="data.clearChoice"></mat-divider>
<mat-radio-button *ngIf="data.clearChoice" [value]="null">
{{ data.clearChoice | translate }}
</mat-radio-button>
</mat-radio-group>
<mat-list *ngIf="data.multiSelect && data.choices">
<mat-list-item *ngFor="let choice of data.choices">
<mat-checkbox [checked]="isChosen(choice)" (change)="toggleChoice(choice)">
{{ getChoiceTitle(choice) | translate }} {{ getChoiceTitle(choice) | translate }}
</mat-radio-button> </mat-checkbox>
</mat-list-item>
</mat-list>
</mat-dialog-content>
<mat-divider *ngIf="data.clearChoice"></mat-divider> <!-- Actions -->
<mat-dialog-actions>
<mat-radio-button *ngIf="data.clearChoice" [value]="null"> <div *ngIf="data.actionButtons">
{{ data.clearChoice | translate }} <button
</mat-radio-button> *ngFor="let button of data.actionButtons"
</mat-radio-group> mat-button
(click)="closeDialog(true, button)"
<mat-list *ngIf="data.multiSelect && data.choices"> [disabled]="isSelectionEmpty"
<mat-list-item *ngFor="let choice of data.choices"> >
<mat-checkbox [checked]="isChosen(choice)" (change)="toggleChoice(choice)"> <span>{{ button | translate }}</span>
{{ getChoiceTitle(choice) | translate }} </button>
</mat-checkbox>
</mat-list-item>
</mat-list>
</div> </div>
<mat-dialog-actions> <div *ngIf="!data.actionButtons">
<div *ngIf="data.actionButtons"> <button
<button *ngIf="!data.multiSelect || data.choices.length"
*ngFor="let button of data.actionButtons" mat-button
mat-button (click)="closeDialog(true)"
(click)="closeDialog(true, button)" [disabled]="isSelectionEmpty"
[disabled]="isSelectionEmpty" >
> <span>OK</span>
<span>{{ button | translate }}</span> </button>
</button> </div>
</div> <button mat-button (click)="closeDialog(false)"><span translate>Cancel</span></button>
<div *ngIf="!data.actionButtons"> </mat-dialog-actions>
<button
*ngIf="!data.multiSelect || data.choices.length"
mat-button
(click)="closeDialog(true)"
[disabled]="isSelectionEmpty"
>
<span>OK</span>
</button>
</div>
<button mat-button (click)="closeDialog(false)"><span translate>Cancel</span></button>
</mat-dialog-actions>
</div>

18
client/src/app/shared/components/choice-dialog/choice-dialog.component.scss
View File

@ -1,21 +1,17 @@
mat-radio-group { .mat-dialog-content {
display: block;
}
.mat-radio-group {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
mat-radio-button { .mat-radio-button {
margin: 5px; margin: 5px;
} }
} }
.scrollmenu { .mat-divider {
padding: 5px;
display: block;
}
.scrollmenu-outer {
max-height: inherit;
}
mat-divider {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }

8
client/src/app/shared/components/choice-dialog/choice-dialog.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Inject } from '@angular/core'; import { Component, Inject, ViewEncapsulation } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { Displayable } from 'app/site/base/displayable'; import { Displayable } from 'app/site/base/displayable';
@ -61,11 +61,13 @@ export type ChoiceAnswer = undefined | { action?: string; items: number | number
@Component({ @Component({
selector: 'os-choice-dialog', selector: 'os-choice-dialog',
templateUrl: './choice-dialog.component.html', templateUrl: './choice-dialog.component.html',
styleUrls: ['./choice-dialog.component.scss'] styleUrls: ['./choice-dialog.component.scss'],
encapsulation: ViewEncapsulation.None
}) })
export class ChoiceDialogComponent { export class ChoiceDialogComponent {
/** /**
* One number selected, if this is a single select choice * One number selected, if this is a single select choice
* User over template
*/ */
public selectedChoice: number; public selectedChoice: number;
@ -78,6 +80,8 @@ export class ChoiceDialogComponent {
public get isSelectionEmpty(): boolean { public get isSelectionEmpty(): boolean {
if (this.data.multiSelect) { if (this.data.multiSelect) {
return this.selectedMultiChoices.length === 0; return this.selectedMultiChoices.length === 0;
} else if (!this.data.choices) {
return false;
} else { } else {
return this.selectedChoice === undefined; return this.selectedChoice === undefined;
} }