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

make choice dialog proper scrollable

Browse Source
This commit is contained in:
Maximilian Krambach 2018-11-29 18:20:21 +01:00 committed by FinnStutzenstein
parent d49b796b29
commit 1de2161ded
3 changed files with 35 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/app/core/services/choice.service.ts
View File

@ -36,6 +36,7 @@ export class ChoiceService extends OpenSlidesComponent {
): Promise<ChoiceAnswer> { ): Promise<ChoiceAnswer> {
const dialogRef = this.dialog.open(ChoiceDialogComponent, { const dialogRef = this.dialog.open(ChoiceDialogComponent, {
minWidth: '250px', minWidth: '250px',
maxHeight:'90vh',
data: { title: title, choices: choices, multiSelect: multiSelect } data: { title: title, choices: choices, multiSelect: multiSelect }
}); });
return dialogRef.afterClosed().toPromise(); return dialogRef.afterClosed().toPromise();

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

@ -1,30 +1,32 @@
<h2 mat-dialog-title>{{ data.title | translate }}</h2> <div class="scrollmenu-outer">
<div class="scrollmenu"> <h2 mat-dialog-title>{{ data.title | translate }}</h2>
<mat-radio-group <div class="scrollmenu">
#radio <mat-radio-group
name="choice" #radio
*ngIf="!data.multiSelect" name="choice"
class="choice-radio-group" *ngIf="!data.multiSelect"
[(ngModel)]="selectedChoice" class="choice-radio-group"
> [(ngModel)]="selectedChoice"
<mat-radio-button class="choice-button" *ngFor="let choice of data.choices" [value]="choice.id"> >
{{ getChoiceTitle(choice) | translate }} <mat-radio-button class="choice-button" *ngFor="let choice of data.choices" [value]="choice.id">
</mat-radio-button>
</mat-radio-group>
<mat-list *ngIf="data.multiSelect">
<mat-list-item *ngFor="let choice of data.choices">
<mat-checkbox [checked]="isChosen(choice)" (change)="toggleChoice(choice)">
{{ getChoiceTitle(choice) | translate }} {{ getChoiceTitle(choice) | translate }}
</mat-checkbox> </mat-radio-button>
</mat-list-item> </mat-radio-group>
</mat-list>
<span *ngIf="!data.choices.length" translate>No choices available</span> <mat-list *ngIf="data.multiSelect">
</div> <mat-list-item *ngFor="let choice of data.choices">
<mat-dialog-actions> <mat-checkbox [checked]="isChosen(choice)" (change)="toggleChoice(choice)">
<button *ngIf="!data.multiSelect || data.choices.length" mat-button (click)="closeDialog(true)"> {{ getChoiceTitle(choice) | translate }}
<span translate>Ok</span> </mat-checkbox>
</button> </mat-list-item>
<button mat-button (click)="closeDialog(false)"><span translate>Cancel</span></button> </mat-list>
<span *ngIf="!data.choices.length" translate>No choices available</span>
</div>
<mat-dialog-actions>
<button *ngIf="!data.multiSelect || data.choices.length" mat-button (click)="closeDialog(true)">
<span translate>Ok</span>
</button>
<button mat-button (click)="closeDialog(false)"><span translate>Cancel</span></button>
</mat-dialog-actions> </mat-dialog-actions>
</div>

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

@ -8,8 +8,10 @@ mat-radio-group {
} }
.scrollmenu { .scrollmenu {
padding: 4px; padding: 5px;
overflow-y: auto;
display: block; display: block;
overflow-y: auto;
} }
.scrollmenu-outer {
max-height:inherit;
}