[editor] Refactor dialog styling

Use global styles and remove unecessary styling commands. The dialog 
window will mostly size itself.

projects/editor/src/app/dialog.service.ts

@@ -32,7 +32,6 @@ export class DialogService {
 
   showMultilineTextEditDialog(text: string): Observable<string> {
     const dialogRef = this.dialog.open(MultilineTextEditDialog, {
-      width: '600px',
       data: {
         text: text
       }
@@ -42,8 +41,6 @@ export class DialogService {
 
   showRichTextEditDialog(text: string): Observable<string> {
     const dialogRef = this.dialog.open(RichTextEditDialog, {
-      width: '800px',
-      height: '700px',
       data: {
         text: text
       },
@@ -54,8 +51,6 @@ export class DialogService {
 
   showPlayerEditDialog(player: PlayerElement): Observable<PlayerElement> {
     const dialogRef = this.dialog.open(PlayerEditDialog, {
-      width: '370px',
-      height: '510px',
       data: {
         player: player
       },
@@ -66,8 +61,6 @@ export class DialogService {
 
   showLikertColumnEditDialog(column: LikertColumn): Observable<LikertColumn> {
     const dialogRef = this.dialog.open(LikertColumnEditDialog, {
-      width: '300px',
-      height: '550px',
       data: {
         column: column
       },
@@ -78,8 +71,6 @@ export class DialogService {
 
   showLikertRowEditDialog(row: LikertElementRow, columns: LikertColumn[]): Observable<LikertElementRow> {
     const dialogRef = this.dialog.open(LikertRowEditDialog, {
-      width: '300px',
-      height: '550px',
       data: {
         row: row,
         columns: columns
@@ -129,7 +120,7 @@ export class TextEditDialog {
   selector: 'app-multiline-text-edit-dialog',
   template: `
     <mat-dialog-content>
-      <mat-form-field [style.width.%]="100">
+      <mat-form-field>
         <mat-label>{{'text' | translate }}</mat-label>
         <textarea #inputElement matInput type="text" [value]="data.text">
         </textarea>
@@ -259,12 +250,7 @@ export class RichTextEditDialog {
       <button mat-button [mat-dialog-close]="newPlayerConfig">{{'save' | translate }}</button>
       <button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
     </mat-dialog-actions>
-    `,
-  styles: [
-    'mat-dialog-content {min-height: 410px}',
-    '::ng-deep app-player-edit-dialog .mat-tab-body-content {overflow: hidden}',
-    '.property-column {margin-right: 20px}'
-  ]
+    `
 })
 export class PlayerEditDialog {
   newPlayerConfig: PlayerElement = {} as PlayerElement;

projects/editor/src/styles.css

@@ -14,3 +14,13 @@ body {
 
 .drop-list {cursor: grab}
 .drop-list.cdk-drop-list-dragging {cursor: grabbing}
+
+.mat-dialog-content {
+  border: 1px solid lightgray;
+  margin: -13px !important;
+  padding: 15px !important;
+}
+
+.mat-dialog-actions {
+  margin-top: 20px !important;
+}