From d1548e52e1e5525c41fc625752888b541c7c89cd Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Thu, 11 Nov 2021 19:03:10 +0100
Subject: [PATCH] [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 | 18 ++----------------
projects/editor/src/styles.css | 10 ++++++++++
2 files changed, 12 insertions(+), 16 deletions(-)
diff --git a/projects/editor/src/app/dialog.service.ts b/projects/editor/src/app/dialog.service.ts
index 96a319bf3..c92fa5fb6 100644
--- a/projects/editor/src/app/dialog.service.ts
+++ b/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;
diff --git a/projects/editor/src/styles.css b/projects/editor/src/styles.css
index 1bf248483..a8f5e3f2d 100644
--- a/projects/editor/src/styles.css
+++ b/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;
+}
--
GitLab