Enhance Choice service.
- 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
parent
b71e73fe7f
commit
1e7a5b33d7
@ -42,7 +42,7 @@ export class ChoiceService {
|
||||
clearChoice?: string
|
||||
): Promise<ChoiceAnswer> {
|
||||
const dialogRef = this.dialog.open(ChoiceDialogComponent, {
|
||||
minWidth: '250px',
|
||||
maxWidth: '90vw',
|
||||
maxHeight: '90vh',
|
||||
disableClose: true,
|
||||
data: {
|
||||
|
||||
@ -1,53 +1,56 @@
|
||||
<div class="scrollmenu-outer">
|
||||
<h2 mat-dialog-title>{{ data.title | translate }}</h2>
|
||||
<div class="scrollmenu">
|
||||
<mat-radio-group
|
||||
#radio
|
||||
name="choice"
|
||||
*ngIf="!data.multiSelect && data.choices"
|
||||
class="choice-radio-group"
|
||||
[(ngModel)]="selectedChoice"
|
||||
>
|
||||
<mat-radio-button class="choice-button" *ngFor="let choice of data.choices" [value]="choice.id">
|
||||
<!-- Title -->
|
||||
<h2 mat-dialog-title>{{ data.title | translate }}</h2>
|
||||
|
||||
<!-- Content -->
|
||||
<mat-dialog-content>
|
||||
<mat-radio-group
|
||||
#radio
|
||||
name="choice"
|
||||
*ngIf="!data.multiSelect && data.choices"
|
||||
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>
|
||||
|
||||
<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 }}
|
||||
</mat-radio-button>
|
||||
</mat-checkbox>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-dialog-content>
|
||||
|
||||
<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 }}
|
||||
</mat-checkbox>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
<!-- Actions -->
|
||||
<mat-dialog-actions>
|
||||
<div *ngIf="data.actionButtons">
|
||||
<button
|
||||
*ngFor="let button of data.actionButtons"
|
||||
mat-button
|
||||
(click)="closeDialog(true, button)"
|
||||
[disabled]="isSelectionEmpty"
|
||||
>
|
||||
<span>{{ button | translate }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<mat-dialog-actions>
|
||||
<div *ngIf="data.actionButtons">
|
||||
<button
|
||||
*ngFor="let button of data.actionButtons"
|
||||
mat-button
|
||||
(click)="closeDialog(true, button)"
|
||||
[disabled]="isSelectionEmpty"
|
||||
>
|
||||
<span>{{ button | translate }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div *ngIf="!data.actionButtons">
|
||||
<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>
|
||||
<div *ngIf="!data.actionButtons">
|
||||
<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>
|
||||
|
||||
@ -1,21 +1,17 @@
|
||||
mat-radio-group {
|
||||
.mat-dialog-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mat-radio-group {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
|
||||
mat-radio-button {
|
||||
.mat-radio-button {
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.scrollmenu {
|
||||
padding: 5px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.scrollmenu-outer {
|
||||
max-height: inherit;
|
||||
}
|
||||
mat-divider {
|
||||
.mat-divider {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@ -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 { Displayable } from 'app/site/base/displayable';
|
||||
@ -61,11 +61,13 @@ export type ChoiceAnswer = undefined | { action?: string; items: number | number
|
||||
@Component({
|
||||
selector: 'os-choice-dialog',
|
||||
templateUrl: './choice-dialog.component.html',
|
||||
styleUrls: ['./choice-dialog.component.scss']
|
||||
styleUrls: ['./choice-dialog.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class ChoiceDialogComponent {
|
||||
/**
|
||||
* One number selected, if this is a single select choice
|
||||
* User over template
|
||||
*/
|
||||
public selectedChoice: number;
|
||||
|
||||
@ -78,6 +80,8 @@ export class ChoiceDialogComponent {
|
||||
public get isSelectionEmpty(): boolean {
|
||||
if (this.data.multiSelect) {
|
||||
return this.selectedMultiChoices.length === 0;
|
||||
} else if (!this.data.choices) {
|
||||
return false;
|
||||
} else {
|
||||
return this.selectedChoice === undefined;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user