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

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

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

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

@@ -1,6 +1,8 @@
-<div class="scrollmenu-outer">
+<!-- Title -->
-    <h2 mat-dialog-title>{{ data.title | translate }}</h2>
+<h2 mat-dialog-title>{{ data.title | translate }}</h2>
-    <div class="scrollmenu">
+
+<!-- Content -->
+<mat-dialog-content>
     <mat-radio-group
         #radio
         name="choice"
@@ -26,8 +28,10 @@
             </mat-checkbox>
         </mat-list-item>
     </mat-list>
-    </div>
+</mat-dialog-content>
-    <mat-dialog-actions>
+
+<!-- Actions -->
+<mat-dialog-actions>
     <div *ngIf="data.actionButtons">
         <button
             *ngFor="let button of data.actionButtons"
@@ -49,5 +53,4 @@
         </button>
     </div>
     <button mat-button (click)="closeDialog(false)"><span translate>Cancel</span></button>
-    </mat-dialog-actions>
+</mat-dialog-actions>
-</div>

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

@@ -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 {
+.mat-divider {
-    padding: 5px;
-    display: block;
-}
-
-.scrollmenu-outer {
-    max-height: inherit;
-}
-mat-divider {
     margin-top: 10px;
     margin-bottom: 10px;
 }

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

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