diff --git a/package-lock.json b/package-lock.json
index 58ff055967e7fde6099ebb9e733da735e02cf994..b96d008b96b0932c48f7b2b08469ddaabdcabdf1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,6 @@
"@angular/compiler": "~13.3.0",
"@angular/core": "~13.3.0",
"@angular/elements": "^13.2.7",
- "@angular/flex-layout": "^12.0.0-beta.35",
"@angular/forms": "~13.3.0",
"@angular/material": "^12.2.13",
"@angular/platform-browser": "~13.3.0",
@@ -586,21 +585,6 @@
"rxjs": "^6.5.3 || ^7.4.0"
}
},
- "node_modules/@angular/flex-layout": {
- "version": "12.0.0-beta.35",
- "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-12.0.0-beta.35.tgz",
- "integrity": "sha512-nPi2MGDFuCacwWHqxF/G7lUJd2X99HbLjjUvKXnyLwyCIVgH1sfS52su2wYbVYWJRqAVAB2/VMlrtW8Khr8hDA==",
- "dependencies": {
- "tslib": "^2.1.0"
- },
- "peerDependencies": {
- "@angular/cdk": "^12.0.0",
- "@angular/common": ">=12.0.0",
- "@angular/core": ">=12.0.0",
- "@angular/platform-browser": ">=12.0.0",
- "rxjs": "^6.0.0 || ^7.0.0"
- }
- },
"node_modules/@angular/forms": {
"version": "13.3.8",
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-13.3.8.tgz",
@@ -16258,14 +16242,6 @@
"tslib": "^2.3.0"
}
},
- "@angular/flex-layout": {
- "version": "12.0.0-beta.35",
- "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-12.0.0-beta.35.tgz",
- "integrity": "sha512-nPi2MGDFuCacwWHqxF/G7lUJd2X99HbLjjUvKXnyLwyCIVgH1sfS52su2wYbVYWJRqAVAB2/VMlrtW8Khr8hDA==",
- "requires": {
- "tslib": "^2.1.0"
- }
- },
"@angular/forms": {
"version": "13.3.8",
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-13.3.8.tgz",
diff --git a/package.json b/package.json
index 29b4d008f5d0a7fcbb2b505c0dcf914bfa13f1c1..f0508567c6309c2e960b6fc789d8bcfd64eb6bc2 100644
--- a/package.json
+++ b/package.json
@@ -62,7 +62,6 @@
"@angular/compiler": "~13.3.0",
"@angular/core": "~13.3.0",
"@angular/elements": "^13.2.7",
- "@angular/flex-layout": "^12.0.0-beta.35",
"@angular/forms": "~13.3.0",
"@angular/material": "^12.2.13",
"@angular/platform-browser": "~13.3.0",
diff --git a/projects/common/components/compound-elements/likert/likert-radio-button-group.component.ts b/projects/common/components/compound-elements/likert/likert-radio-button-group.component.ts
index dabed44d605b694e82df2df6f6ebce5326e505a2..a73d30e4f01f87dae638c928edb3e78693e4064d 100644
--- a/projects/common/components/compound-elements/likert/likert-radio-button-group.component.ts
+++ b/projects/common/components/compound-elements/likert/likert-radio-button-group.component.ts
@@ -48,14 +48,14 @@ import { LikertRowElement } from 'common/models/elements/compound-elements/liker
box-sizing: border-box;
display: flex;
flex-direction: row;
- justify-content: start;
+ justify-content: flex-start;
align-items: stretch;
}
.fx-column-start-stretch {
box-sizing: border-box;
display: flex;
flex-direction: column;
- justify-content: start;
+ justify-content: flex-start;
align-items: stretch;
}
`]
diff --git a/projects/common/components/input-elements/drop-list.component.ts b/projects/common/components/input-elements/drop-list.component.ts
index 0b0e1702a6af134c9653fa94805fdcdd0911f5bd..709e44afbb22468a861cabf69311b7a1872de544 100644
--- a/projects/common/components/input-elements/drop-list.component.ts
+++ b/projects/common/components/input-elements/drop-list.component.ts
@@ -118,7 +118,7 @@ import { FormElementComponent } from '../../directives/form-element-component.di
':not(.cloze-context) .list-item.text-list-item {padding: 10px;}',
'.cloze-context .list-item.text-list-item {padding: 0 5px;}',
'.cloze-context.only-one-item .list-item {height: 100%; display: flex; align-items: center; justify-content: center;}',
- '.image-list-item {align-self: start;}',
+ '.image-list-item {align-self: flex-start;}',
'.hide-list-item {display: none !important; transform: unset !important;}',
'.cdk-drag-preview {border-radius: 5px; box-shadow: 2px 2px 5px black;}',
'.cdk-drag-preview.text-preview {padding: 10px; box-sizing: border-box;}',
diff --git a/projects/common/components/input-elements/radio-button-group.component.ts b/projects/common/components/input-elements/radio-button-group.component.ts
index e141cf346c790de401048a9368240f7ce50469ea..6215d6da2517f9cf4f54c4ca918e33886840070a 100644
--- a/projects/common/components/input-elements/radio-button-group.component.ts
+++ b/projects/common/components/input-elements/radio-button-group.component.ts
@@ -69,14 +69,14 @@ import { FormElementComponent } from '../../directives/form-element-component.di
box-sizing: border-box;
display: flex;
flex-direction: row;
- justify-content: start;
+ justify-content: flex-start;
align-items: stretch;
}
.fx-column-start-stretch {
box-sizing: border-box;
display: flex;
flex-direction: column;
- justify-content: start;
+ justify-content: flex-start;
align-items: stretch;
}
`]
diff --git a/projects/common/components/input-elements/spell-correct.component.ts b/projects/common/components/input-elements/spell-correct.component.ts
index c2352618c1e5ce8d75556902e37032c2713b6b67..12d08d58bc9bdd78a7c5ce93bc9d55605e59edc9 100644
--- a/projects/common/components/input-elements/spell-correct.component.ts
+++ b/projects/common/components/input-elements/spell-correct.component.ts
@@ -74,7 +74,7 @@ import { TextInputComponent } from 'common/directives/text-input-component.direc
box-sizing: border-box;
display: flex;
flex-direction: column;
- justify-content: start;
+ justify-content: flex-start;
align-items: stretch;
}
`]
diff --git a/projects/common/shared.module.ts b/projects/common/shared.module.ts
index 4100364162a2de18a330245a3dfce9c84a0360b3..c3403814a8c18e5cb8cd0593adf97f15f1b2f5e7 100644
--- a/projects/common/shared.module.ts
+++ b/projects/common/shared.module.ts
@@ -3,7 +3,6 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
-import { FlexLayoutModule } from '@angular/flex-layout';
import { MatSelectModule } from '@angular/material/select';
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
@@ -80,7 +79,6 @@ import { GetValuePipe, MathFieldComponent } from './components/input-elements/ma
imports: [
CommonModule,
HttpClientModule,
- FlexLayoutModule,
DragDropModule,
MatSelectModule,
MatRadioModule,
@@ -146,7 +144,6 @@ import { GetValuePipe, MathFieldComponent } from './components/input-elements/ma
],
exports: [
CommonModule,
- FlexLayoutModule,
MatIconModule,
MatTabsModule,
MatButtonModule,
diff --git a/projects/editor/src/app/app.component.ts b/projects/editor/src/app/app.component.ts
index 09a99e46fa02d5fec443e64208374ba84fbf8423..f13f6f6eab7bf2ecfaf2d55982bdd8f2a3353c6c 100644
--- a/projects/editor/src/app/app.component.ts
+++ b/projects/editor/src/app/app.component.ts
@@ -8,14 +8,27 @@ import { UnitService } from './services/unit.service';
@Component({
selector: 'aspect-editor',
template: `
- <div fxLayout="column" class="mainView">
+ <div class="mainView fx-column-start-stretch">
<aspect-toolbar *ngIf="isStandalone"></aspect-toolbar>
- <aspect-unit-view fxFlex></aspect-unit-view>
+ <aspect-unit-view class="fx-flex"></aspect-unit-view>
</div>
`,
- styles: [
- '.mainView {height: 100%;}'
- ]
+ styles: [`
+ .mainView {
+ height: 100%;
+ }
+ .fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: start;
+ align-items: stretch;
+ }
+ .fx-flex {
+ flex: 1 1 0;
+ box-sizing: border-box;
+ }
+ `]
})
export class AppComponent implements OnInit {
isStandalone = window === window.parent;
diff --git a/projects/editor/src/app/components/canvas/canvas.component.html b/projects/editor/src/app/components/canvas/canvas.component.html
index 8f130d24db7e979cbbdf3673e53e1141b395668f..496d8322ed8ebf76a349de7799840320e3c54549 100644
--- a/projects/editor/src/app/components/canvas/canvas.component.html
+++ b/projects/editor/src/app/components/canvas/canvas.component.html
@@ -1,4 +1,4 @@
-<div class="canvasBackground" fxFlex
+<div class="canvasBackground fx-flex"
(click)="selectionService.clearElementSelection()">
<div [style.width.px]="page.hasMaxWidth ? page.maxWidth : null"
[style.padding.px]="page.margin"
@@ -6,7 +6,7 @@
<div cdkDropListGroup>
<div *ngFor="let section of page.sections; let i = index" [style.position]="'relative'">
<aspect-section-menu [class.hidden]="selectionService.selectedPageSectionIndex !== i"
- class="section-menu" fxLayout="column"
+ class="section-menu fx-column-start-stretch"
[style.left.px]="-45" [style.z-index]="1" [style.position]="'absolute'"
[section]="section" [sectionIndex]="i"
[allowMoveUp]="i != 0"
diff --git a/projects/editor/src/app/components/canvas/canvas.component.ts b/projects/editor/src/app/components/canvas/canvas.component.ts
index ff640c329afa5b5068e0d9c279038fe0d7fcef39..dd3ac25804f1a433b9ecdd53f5ea363390cfc63d 100644
--- a/projects/editor/src/app/components/canvas/canvas.component.ts
+++ b/projects/editor/src/app/components/canvas/canvas.component.ts
@@ -14,13 +14,41 @@ import { SectionDynamicComponent } from './section-dynamic.component';
@Component({
selector: 'aspect-page-canvas',
templateUrl: './canvas.component.html',
- styles: [
- '.canvasBackground {background-color: lightgrey; padding: 20px 50px; height: 100%; overflow: auto;}',
- '.add-section-button {width: 100%; height: 25px; background-color: #BABABA; margin-top: 10px; border-radius: 10%}',
- '::ng-deep .add-section-button span.mat-button-wrapper {padding: 0}',
- '::ng-deep .add-section-button span.mat-button-wrapper mat-icon {vertical-align: unset}',
- '.hidden {display: none !important;}'
- ]
+ styles: [`
+ .canvasBackground {
+ background-color: lightgrey;
+ padding: 20px 50px;
+ height: 100%;
+ overflow: auto;
+ }
+ .add-section-button {
+ width: 100%;
+ height: 25px;
+ background-color: #BABABA;
+ margin-top: 10px;
+ border-radius: 10%;
+ }
+ ::ng-deep .add-section-button span.mat-button-wrapper {
+ padding: 0;
+ }
+ ::ng-deep .add-section-button span.mat-button-wrapper mat-icon {
+ vertical-align: unset;
+ }
+ .hidden {
+ display: none !important;
+ }
+ .fx-flex {
+ flex: 1 1 0;
+ box-sizing: border-box;
+ }
+ .fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: stretch;
+ }
+ `]
})
export class CanvasComponent {
@Input() page!: Page;
diff --git a/projects/editor/src/app/components/canvas/section-menu.component.ts b/projects/editor/src/app/components/canvas/section-menu.component.ts
index d225afa0bf2001750b145559ef680410bcd65da4..08627ba8fef596ddf5ce918dd02d176203f2c03e 100644
--- a/projects/editor/src/app/components/canvas/section-menu.component.ts
+++ b/projects/editor/src/app/components/canvas/section-menu.component.ts
@@ -145,7 +145,7 @@ import { SelectionService } from '../../services/selection.service';
(click)="$any($event).stopPropagation()"
(change)="modifySizeArray('gridRowSizes', $any($event).target.value)">
</mat-form-field>
- <div *ngFor="let size of rowSizes ; let i = index" class="size-inputs" fxLayout="row">
+ <div *ngFor="let size of rowSizes ; let i = index" class="size-inputs fx-row-start-stretch">
<mat-form-field class="size-item">
<mat-label>{{'section-menu.height' | translate }} {{i + 1}}</mat-label>
<input matInput type="number"
@@ -197,15 +197,36 @@ import { SelectionService } from '../../services/selection.service';
<mat-icon>clear</mat-icon>
</button>
`,
- styles: [
- '::ng-deep .layoutMenu {padding: 0 15px; width: 250px;}',
- '::ng-deep .layoutMenu fieldset {margin: 10px 0; display: flex; flex-direction: column; align-items: start;}',
- '::ng-deep .layoutMenu .section-height-input {margin-top: 10px;}',
- '::ng-deep .layoutMenu .size-inputs .mat-form-field {width: 100px;}',
- '::ng-deep .layoutMenu .size-inputs {display: flex; flex-direction: row; gap: 15px;}',
- '.menuItem {margin-bottom: 5px;}',
- '::ng-deep .activeAfterID-menu .mat-form-field {width:90%; margin-left: 10px;}'
- ]
+ styles: [`
+ ::ng-deep .layoutMenu {
+ padding: 0 15px; width: 250px;
+ }
+ ::ng-deep .layoutMenu fieldset {
+ margin: 10px 0; display: flex; flex-direction: column; align-items: flex-start;
+ }
+ ::ng-deep .layoutMenu .section-height-input {
+ margin-top: 10px;
+ }
+ ::ng-deep .layoutMenu .size-inputs .mat-form-field {
+ width: 100px;
+ }
+ ::ng-deep .layoutMenu .size-inputs {
+ display: flex; flex-direction: row; gap: 15px;
+ }
+ .menuItem {
+ margin-bottom: 5px;
+ }
+ ::ng-deep .activeAfterID-menu .mat-form-field {
+ width:90%; margin-left: 10px;
+ }
+ .fx-row-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: stretch;
+ }
+ `]
})
export class SectionMenuComponent implements OnInit, OnDestroy {
@Input() section!: Section;
diff --git a/projects/editor/src/app/components/dialogs/drop-list-option-edit-dialog.component.ts b/projects/editor/src/app/components/dialogs/drop-list-option-edit-dialog.component.ts
index 368a21084eecceb171a3cb18f6c88548ff51765f..84809fce3fc446b7d2fb9c3b5b1f374a1a02e2ad 100644
--- a/projects/editor/src/app/components/dialogs/drop-list-option-edit-dialog.component.ts
+++ b/projects/editor/src/app/components/dialogs/drop-list-option-edit-dialog.component.ts
@@ -6,7 +6,7 @@ import { DragNDropValueObject } from 'common/models/elements/element';
@Component({
selector: 'aspect-drop-list-option-edit-dialog',
template: `
- <mat-dialog-content fxLayout="column">
+ <mat-dialog-content class="fx-column-start-stretch">
<mat-form-field>
<mat-label>{{'text' | translate }}</mat-label>
<input #textField matInput type="text" [value]="data.value.text">
@@ -31,7 +31,16 @@ import { DragNDropValueObject } from 'common/models/elements/element';
</button>
<button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
</mat-dialog-actions>
- `
+ `,
+ styles: [`
+ .fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: stretch;
+ }
+ `]
})
export class DropListOptionEditDialogComponent {
constructor(@Inject(MAT_DIALOG_DATA) public data: { value: DragNDropValueObject }) { }
diff --git a/projects/editor/src/app/components/dialogs/geogebra-app-definition-dialog.component.ts b/projects/editor/src/app/components/dialogs/geogebra-app-definition-dialog.component.ts
index efd9b106e3a4cc39d9365e449c67d1ac4c98ca58..2d0b7bb9faaf7332c60e0eeccb7dc72798947e09 100644
--- a/projects/editor/src/app/components/dialogs/geogebra-app-definition-dialog.component.ts
+++ b/projects/editor/src/app/components/dialogs/geogebra-app-definition-dialog.component.ts
@@ -5,7 +5,7 @@ import { MatDialogRef } from '@angular/material/dialog';
@Component({
selector: 'app-geogebra-app-definition-dialog',
template: `
- <mat-dialog-content fxLayout="column">
+ <mat-dialog-content class="fx-column-start-stretch">
<div class="paste-area" contenteditable="true"
(paste)="validateBase64($event.clipboardData?.getData('Text'))">
<span>Base64 Repräsentation einfügen</span>
@@ -22,12 +22,31 @@ import { MatDialogRef } from '@angular/material/dialog';
<button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
</mat-dialog-actions>
`,
- styles: [
- '.paste-area {width: 400px; height: 100px; border: 1px solid; overflow: hidden; white-space: pre-wrap;}',
- '.paste-area:focus span {display: none}',
- 'button {margin-top: 10px;}',
- '.status-area {margin-top: 10px;}'
- ]
+ styles: [`
+ .paste-area {
+ width: 400px;
+ height: 100px;
+ border: 1px solid;
+ overflow: hidden;
+ white-space: pre-wrap;
+ }
+ .paste-area:focus span {
+ display: none;
+ }
+ button {
+ margin-top: 10px;
+ }
+ .status-area {
+ margin-top: 10px;
+ }
+ .fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: stretch;
+ }
+ `]
})
export class GeogebraAppDefinitionDialogComponent {
statusMessage: { text: string; color: string } | undefined;
diff --git a/projects/editor/src/app/components/dialogs/hotspot-edit-dialog.component.ts b/projects/editor/src/app/components/dialogs/hotspot-edit-dialog.component.ts
index 52698c56748f5b919c5c0eb35039dc17d658d0b2..fbe3e5245594c9f6df45f815c1ec7225d2cb8d4e 100644
--- a/projects/editor/src/app/components/dialogs/hotspot-edit-dialog.component.ts
+++ b/projects/editor/src/app/components/dialogs/hotspot-edit-dialog.component.ts
@@ -5,39 +5,39 @@ import { Hotspot } from 'common/models/elements/element';
@Component({
selector: 'aspect-hotspot-edit-dialog',
template: `
- <mat-dialog-content fxLayout="column" fxLayoutGap="10px">
- <div fxLayout="row" fxLayoutGap="10px">
- <mat-form-field appearance="fill" fxFlex="50">
+ <mat-dialog-content class="fx-column-start-stretch fx-fix-gap-10">
+ <div class="fx-row-start-stretch fx-fix-gap-10">
+ <mat-form-field class="fx-flex-50" appearance="fill">
<mat-label>{{ 'hotspot.top' | translate }}</mat-label>
<input matInput type="number" min="0"
[(ngModel)]="newHotspot.top">
</mat-form-field>
- <mat-form-field appearance="fill" fxFlex="50">
+ <mat-form-field class="fx-flex-50" appearance="fill">
<mat-label>{{ 'hotspot.left' | translate }}</mat-label>
<input matInput type="number" min="0"
[(ngModel)]="newHotspot.left">
</mat-form-field>
</div>
- <div fxLayout="row" fxLayoutGap="10px">
- <mat-form-field appearance="fill" fxFlex="50">
+ <div class="fx-row-start-stretch fx-fix-gap-10">
+ <mat-form-field class="fx-flex-50" appearance="fill">
<mat-label>{{ 'hotspot.width' | translate }}</mat-label>
<input matInput type="number" min="0"
[(ngModel)]="newHotspot.width">
</mat-form-field>
- <mat-form-field appearance="fill" fxFlex="50">
+ <mat-form-field class="fx-flex-50" appearance="fill">
<mat-label>{{ 'hotspot.height' | translate }}</mat-label>
<input matInput type="number" min="0"
[(ngModel)]="newHotspot.height">
</mat-form-field>
</div>
- <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="space-between center">
- <mat-radio-group [(ngModel)]="newHotspot.shape" fxFlex="50" fxLayout='column' fxLayoutGap="5px">
+ <div class="fx-row-space-between-center fx-fix-gap-10">
+ <mat-radio-group [(ngModel)]="newHotspot.shape" class="fx-column-start-stretch fx-flex-50 fx-fix-gap-5">
<label>{{'hotspot.shape' | translate}}</label>
<mat-radio-button value='ellipse'>{{'hotspot.ellipse' | translate}}</mat-radio-button>
<mat-radio-button value='rectangle'>{{'hotspot.rectangle' | translate}}</mat-radio-button>
<mat-radio-button value='triangle'>{{'hotspot.triangle' | translate}}</mat-radio-button>
</mat-radio-group>
- <mat-form-field appearance="fill" fxFlex="50">
+ <mat-form-field class="fx-flex-50" appearance="fill">
<mat-label>{{ 'hotspot.borderWidth' | translate }}</mat-label>
<input matInput type="number" min="0"
[(ngModel)]="newHotspot.borderWidth">
@@ -45,8 +45,8 @@ import { Hotspot } from 'common/models/elements/element';
</div>
- <div fxLayout="row" fxLayoutGap="10px">
- <mat-form-field appearance="fill" class="mdInput textsingleline">
+ <div class="fx-row-start-stretch fx-fix-gap-10">
+ <mat-form-field appearance="fill" class="mdInput textsingleline fx-flex-50">
<mat-label>{{'hotspot.backgroundColor' | translate }}</mat-label>
<input matInput type="text" [(ngModel)]="newHotspot.backgroundColor">
<button mat-icon-button matSuffix (click)="backgroundColorInput.click()">
@@ -55,7 +55,7 @@ import { Hotspot } from 'common/models/elements/element';
</mat-form-field>
<input matInput type="color" hidden #backgroundColorInput [(ngModel)]="newHotspot.backgroundColor">
- <mat-form-field appearance="fill" class="mdInput textsingleline">
+ <mat-form-field appearance="fill" class="mdInput textsingleline fx-flex-50">
<mat-label>{{'hotspot.borderColor' | translate }}</mat-label>
<input matInput type="text" [(ngModel)]="newHotspot.borderColor">
<button mat-icon-button matSuffix (click)="borderColorInput.click()">
@@ -65,13 +65,13 @@ import { Hotspot } from 'common/models/elements/element';
<input matInput type="color" hidden #borderColorInput [(ngModel)]="newHotspot.borderColor">
</div>
- <div fxLayout="row" fxLayoutGap="10px">
- <mat-form-field appearance="fill" fxFlex="50">
+ <div class="fx-row-start-stretch fx-fix-gap-10">
+ <mat-form-field class="fx-flex-50" appearance="fill">
<mat-label>{{ 'hotspot.rotation' | translate }}</mat-label>
<input matInput type="number" min="0"
[(ngModel)]="newHotspot.rotation">
</mat-form-field>
- <div fxFlex="50">
+ <div class="fx-flex-50">
<mat-checkbox [checked]="newHotspot.value"
(change)="newHotspot.value = $event.checked">
{{ 'hotspot.value' | translate }}
@@ -87,7 +87,46 @@ import { Hotspot } from 'common/models/elements/element';
<button mat-button [mat-dialog-close]="newHotspot">{{'save' | translate }}</button>
<button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
</mat-dialog-actions>
- `
+ `,
+ styles: [`
+ .fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: stretch;
+ }
+
+ .fx-row-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: stretch;
+ }
+
+ .fx-row-space-between-center {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .fx-fix-gap-10 {
+ gap: 10px;
+ }
+
+ .fx-fix-gap-5 {
+ gap: 5px;
+ }
+
+ .fx-flex-50 {
+ flex: 1 1 100%;
+ box-sizing: border-box;
+ max-width: 50%;
+ }
+ `]
})
export class HotspotEditDialogComponent {
constructor(@Inject(MAT_DIALOG_DATA) public data: { hotspot: Hotspot }) { }
diff --git a/projects/editor/src/app/components/dialogs/label-edit-dialog.component.ts b/projects/editor/src/app/components/dialogs/label-edit-dialog.component.ts
index 7aec0d6e220ba1230c9e9409d556e9244c08831b..54add7f690c4ab11b59596b909d810b589b175e0 100644
--- a/projects/editor/src/app/components/dialogs/label-edit-dialog.component.ts
+++ b/projects/editor/src/app/components/dialogs/label-edit-dialog.component.ts
@@ -6,12 +6,12 @@ import { FileService } from 'common/services/file.service';
@Component({
selector: 'aspect-label-edit-dialog',
template: `
- <mat-dialog-content fxLayout="column" fxLayoutGap="20px">
+ <mat-dialog-content class="fx-column-start-stretch fx-fix-gap-20">
<aspect-rich-text-editor-simple [(content)]="newLabel.text">
</aspect-rich-text-editor-simple>
- <div *ngIf="newLabel.imgSrc !== undefined" fxLayout="row" fxLayoutAlign="space-between center">
- <div fxLayout="column" fxLayoutGap="10px">
+ <div *ngIf="newLabel.imgSrc !== undefined" class="fx-row-space-between-center">
+ <div class="fx-column-start-stretch fx-fix-gap-10">
<button mat-raised-button (click)="loadImage()">{{ 'loadImage' | translate }}</button>
<button mat-raised-button (click)="newLabel.imgSrc = null">{{ 'removeImage' | translate }}</button>
<mat-form-field>
@@ -36,9 +36,34 @@ import { FileService } from 'common/services/file.service';
<button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
</mat-dialog-actions>
`,
- styles: [
- 'aspect-rich-text-editor-simple {margin-bottom: 20px;}'
- ]
+ styles: [`
+ aspect-rich-text-editor-simple {
+ margin-bottom: 20px;
+ }
+ .fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: stretch;
+ }
+
+ .fx-row-space-between-center {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .fx-fix-gap-20 {
+ gap: 20px;
+ }
+
+ .fx-fix-gap-10 {
+ gap: 10px;
+ }
+ `]
})
export class LabelEditDialogComponent {
newLabel = { ...this.data.label };
diff --git a/projects/editor/src/app/components/dialogs/likert-row-edit-dialog.component.ts b/projects/editor/src/app/components/dialogs/likert-row-edit-dialog.component.ts
index 6d0cd6eabb070148cbf7f179ec7d4ddf1b6e6cc0..7bfa0cd8c7996548e3de5dde435e680f4be03cb4 100644
--- a/projects/editor/src/app/components/dialogs/likert-row-edit-dialog.component.ts
+++ b/projects/editor/src/app/components/dialogs/likert-row-edit-dialog.component.ts
@@ -7,7 +7,7 @@ import { TextLabel } from 'common/models/elements/element';
@Component({
selector: 'aspect-likert-row-edit-dialog',
template: `
- <mat-dialog-content fxLayout="column">
+ <mat-dialog-content class="fx-column-start-stretch">
<aspect-rich-text-editor-simple [(content)]="newLikertRow.rowLabel.text">
</aspect-rich-text-editor-simple>
@@ -40,8 +40,8 @@ import { TextLabel } from 'common/models/elements/element';
</mat-select>
</mat-form-field>
- <div fxLayout="row" fxLayoutAlign="space-between center">
- <div fxLayout="column" fxLayoutGap="10px">
+ <div class="fx-row-space-between-center">
+ <div class="fx-column-start-stretch fx-fix-gap-10">
<button mat-raised-button (click)="loadImage()">
{{ 'loadImage' | translate }}</button>
<button mat-raised-button (click)="newLikertRow.rowLabel.imgSrc = null">
@@ -70,9 +70,31 @@ import { TextLabel } from 'common/models/elements/element';
<button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
</mat-dialog-actions>
`,
- styles: [
- 'mat-checkbox {margin-bottom: 15px;}'
- ]
+ styles: [`
+ mat-checkbox {
+ margin-bottom: 15px;
+ }
+
+ .fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: stretch;
+ }
+
+ .fx-row-space-between-center {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .fx-fix-gap-10 {
+ gap: 10px;
+ }
+ `]
})
export class LikertRowEditDialogComponent {
constructor(@Inject(MAT_DIALOG_DATA) public data: { row: LikertRowElement, options: TextLabel[] }) { }
diff --git a/projects/editor/src/app/components/dialogs/player-edit-dialog.component.ts b/projects/editor/src/app/components/dialogs/player-edit-dialog.component.ts
index 8c432aebd4fe005c3d5249a4fa60c78d484d7140..4357cfbc6f8dbdae21b397168a944e6f7024702a 100644
--- a/projects/editor/src/app/components/dialogs/player-edit-dialog.component.ts
+++ b/projects/editor/src/app/components/dialogs/player-edit-dialog.component.ts
@@ -5,10 +5,10 @@ import { PlayerProperties } from 'common/models/elements/element';
@Component({
selector: 'aspect-player-edit-dialog',
template: `
- <mat-dialog-content fxLayout="row">
+ <mat-dialog-content class="fx-row-start-stretch">
<mat-tab-group>
<mat-tab label="{{ 'player.appearance' | translate }}">
- <div fxLayout="column">
+ <div class="fx-column-start-stretch">
<mat-checkbox [checked]="newPlayerConfig.startControl || data.playerProps.startControl"
(change)="newPlayerConfig.startControl = $event.checked">
{{ 'player.startControl' | translate }}
@@ -68,7 +68,7 @@ import { PlayerProperties } from 'common/models/elements/element';
</div>
</mat-tab>
<mat-tab label="{{ 'player.behaviour' | translate }}">
- <div fxLayout="column">
+ <div class="fx-column-start-stretch">
<mat-checkbox [checked]="newPlayerConfig.autostart || data.playerProps.autostart"
(change)="newPlayerConfig.autostart = $event.checked">
{{ 'player.autoStart' | translate }}
@@ -112,7 +112,24 @@ import { PlayerProperties } from 'common/models/elements/element';
<button mat-button [mat-dialog-close]="newPlayerConfig">{{'save' | translate }}</button>
<button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
</mat-dialog-actions>
- `
+ `,
+ styles: [`
+ .fx-row-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: stretch;
+ }
+
+ .fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: stretch;
+ }
+ `]
})
export class PlayerEditDialogComponent {
newPlayerConfig: PlayerProperties = {} as PlayerProperties;
diff --git a/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.css b/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.css
index db7aed226711c21883eea28ec1d68c2544978d83..414b69eb50059a010e93cbcc388b103192cecd34 100644
--- a/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.css
+++ b/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.css
@@ -25,3 +25,11 @@
:host ::ng-deep .mat-expansion-panel-body {
padding: 0 10px 10px;
}
+
+.fx-row-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: stretch;
+}
diff --git a/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.html b/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.html
index d1c458b8f1db1884b995d965efd5190d9ffee033..580c8983a0a1c923609a9f377c7ad36e4ee5309a 100644
--- a/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.html
+++ b/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.html
@@ -64,7 +64,7 @@
Auswahl
</mat-panel-description>
</mat-expansion-panel-header>
- <div (mouseover)="hoverRadioButton = true" (mouseleave)="hoverRadioButton = false" fxLayout="row">
+ <div class="fx-row-start-stretch" (mouseover)="hoverRadioButton = true" (mouseleave)="hoverRadioButton = false">
<button *ngIf="!hoverRadioButton" class="radio-button-placeholder" mat-stroked-button>
<mat-icon>radio_button_checked</mat-icon>
{{'toolbox.radio' | translate }}
diff --git a/projects/editor/src/app/components/properties-panel/element-properties-panel.component.css b/projects/editor/src/app/components/properties-panel/element-properties-panel.component.css
index 80995439d4677bdd80a09d309a04a8230d61b221..87cdbcef815a01e8cf13f9b0202d07940f51ea2e 100644
--- a/projects/editor/src/app/components/properties-panel/element-properties-panel.component.css
+++ b/projects/editor/src/app/components/properties-panel/element-properties-panel.component.css
@@ -34,3 +34,29 @@ mat-tab-group {
:host ::ng-deep math-field {
margin: 0 3px 10px 3px;
}
+
+.fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: stretch;
+}
+
+.fill {
+ height: 100%;
+ min-height: 100%;
+ min-width: 100%;
+ width: 100%;
+ box-sizing: border-box;
+}
+
+.fx-flex {
+ flex: 1 1 0;
+ box-sizing: border-box;
+ display: flex;
+}
+
+.fx-align-self-center {
+ align-self: center;
+}
diff --git a/projects/editor/src/app/components/properties-panel/element-properties-panel.component.html b/projects/editor/src/app/components/properties-panel/element-properties-panel.component.html
index 7213705a881c87ad082ebc0dda8e5d01d0f0ca30..0cbbc8a500d562ba83dbd05e61c8c14deb2d27c5 100644
--- a/projects/editor/src/app/components/properties-panel/element-properties-panel.component.html
+++ b/projects/editor/src/app/components/properties-panel/element-properties-panel.component.html
@@ -1,7 +1,6 @@
<div *ngIf="selectedElements.length > 0 && combinedProperties"
- class="properties-panel" fxFlexFill
- fxLayout="column" fxLayoutAlign="start stretch">
- <div class="panel-title" fxLayout="column">
+ class="properties-panel fx-column-start-stretch fill">
+ <div class="panel-title fx-column-start-stretch">
<ng-container *ngIf="combinedProperties.type">
{{'toolbox.' + combinedProperties.type | translate}}
<span>{{combinedProperties.id}}</span>
@@ -11,7 +10,7 @@
</ng-container>
</div>
- <mat-tab-group mat-stretch-tabs fxFlex>
+ <mat-tab-group class="fx-flex" mat-stretch-tabs>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="example-tab-icon">build</mat-icon>
@@ -42,8 +41,8 @@
</mat-tab>
</mat-tab-group>
- <div fxLayout="column" class="button-group">
- <mat-checkbox fxFlexAlign="center"
+ <div class="button-group fx-column-start-stretch">
+ <mat-checkbox class="fx-align-self-center"
[indeterminate]="interactionIndeterminate"
[checked]="interactionEnabled"
(change)="setElementInteractionEnabled($event.checked)">
diff --git a/projects/editor/src/app/components/properties-panel/hotspot-list-panel.component.ts b/projects/editor/src/app/components/properties-panel/hotspot-list-panel.component.ts
index 3f7988c0cd2f98f5f0643bdea93e12e1590cabcc..ce6713ffe68f3f22fedf162b71a66fdcc0107a52 100644
--- a/projects/editor/src/app/components/properties-panel/hotspot-list-panel.component.ts
+++ b/projects/editor/src/app/components/properties-panel/hotspot-list-panel.component.ts
@@ -7,9 +7,9 @@ import { Hotspot } from 'common/models/elements/element';
@Component({
selector: 'aspect-hotspot-list-panel',
template: `
- <fieldset fxLayout="column">
+ <fieldset class="fx-column-start-stretch">
<legend>{{title | translate }}</legend>
- <button mat-mini-fab matSuffix color="primary" [style.bottom.px]="3" fxFlexAlign="end"
+ <button class="fx-align-self-end" mat-mini-fab matSuffix color="primary" [style.bottom.px]="3"
(click)="addListItem();">
<mat-icon>add</mat-icon>
</button>
@@ -17,8 +17,8 @@ import { Hotspot } from 'common/models/elements/element';
<div class="drop-list" cdkDropList [cdkDropListData]="itemList"
(cdkDropListDropped)="moveListValue($event)">
<div *ngFor="let item of itemList; let i = index" cdkDrag
- class="option-draggable" fxLayout="row">
- <div fxFlex fxFlexAlign="center">{{'hotspot.'+item.shape | translate}}({{i + 1}})</div>
+ class="option-draggable fx-row-start-stretch">
+ <div class="fx-flex fx-align-self-center">{{'hotspot.'+item.shape | translate}}({{i + 1}})</div>
<button mat-icon-button color="primary"
(click)="editItem.emit(i)">
<mat-icon>build</mat-icon>
@@ -30,7 +30,37 @@ import { Hotspot } from 'common/models/elements/element';
</div>
</div>
</fieldset>
- `
+ `,
+ styles: [`
+ .fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: stretch;
+ }
+
+ .fx-row-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: stretch;
+ }
+
+ .fx-align-self-end {
+ align-self: flex-end;
+ }
+
+ .fx-align-self-center {
+ align-self: center;
+ }
+
+ .fx-flex {
+ flex: 1 1 0;
+ box-sizing: border-box;
+ }
+ `]
})
export class HotspotListPanelComponent {
@Input() title!: string;
diff --git a/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.css b/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.css
index 7b3c282c87ba1cae9103c55f390efb423f915b10..912616050ac35ae8e9b4d8edc39c9a6e12771d91 100644
--- a/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.css
+++ b/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.css
@@ -32,3 +32,19 @@ button:not(.media-src-button):not(.mat-mini-fab):not(.mat-icon-button) {
:host ::ng-deep .option-draggable:last-child {
border: none;
}
+
+.fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: stretch;
+}
+
+.fx-align-self-center {
+ align-self: center;
+}
+
+.fx-align-self-start {
+ align-self: flex-start;
+}
diff --git a/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.html b/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.html
index e5ad7f6929a0942d8f0dc0125a95c381eec46593..d631783ed1343ed7eb45f9e4d4f7b1ba1213e70b 100644
--- a/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.html
+++ b/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.html
@@ -1,4 +1,4 @@
-<div fxLayout="column">
+<div class='fx-column-start-stretch'>
<mat-form-field appearance="fill">
<mat-label>{{'propertiesPanel.id' | translate }}</mat-label>
<input matInput type="text" *ngIf="selectedElements.length === 1" [value]="combinedProperties.id"
@@ -40,19 +40,22 @@
(updateModel)="updateModel.emit($event)"></aspect-border-properties>
<button *ngIf="combinedProperties.document"
- mat-raised-button fxFlexAlign="center"
+ class="fx-align-self-center"
+ mat-raised-button
(click)="unitService.showDefaultEditDialog(selectedElements[0])">
Text editieren
</button>
<button *ngIf="combinedProperties.src"
- mat-fab color="primary" fxFlexAlign="center" class="media-src-button"
+ class="media-src-button fx-align-self-center"
+ mat-fab color="primary"
[matTooltip]="'Medienquelle ändern'" [matTooltipPosition]="'right'"
(click)="changeMediaSrc(combinedProperties.type)">
<mat-icon>upload_file</mat-icon>
</button>
<button *ngIf="combinedProperties.player"
- mat-raised-button fxFlexAlign="center"
+ class="fx-align-self-center"
+ mat-raised-button
(click)="unitService.showDefaultEditDialog(selectedElements[0])">
Medienoptionen
</button>
@@ -112,7 +115,8 @@
<ng-container *ngIf="combinedProperties.type === 'checkbox'">
{{'preset' | translate }}
- <mat-button-toggle-group [value]="combinedProperties.value" fxFlexAlign="start"
+ <mat-button-toggle-group class="fx-align-self-start"
+ [value]="combinedProperties.value"
(change)="updateModel.emit({ property: 'value', value: $event.value })">
<mat-button-toggle [value]="true">{{'propertiesPanel.true' | translate }}</mat-button-toggle>
<mat-button-toggle [value]="false">{{'propertiesPanel.false' | translate }}</mat-button-toggle>
diff --git a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/border-properties.component.ts b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/border-properties.component.ts
index 19c59bc7d7d3b4f461944b19ed351e4c2eef4269..9ec559c9088a18fcea45a74e44838b76d4babb89 100644
--- a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/border-properties.component.ts
+++ b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/border-properties.component.ts
@@ -6,7 +6,7 @@ import { UIElement } from 'common/models/elements/element';
@Component({
selector: 'aspect-border-properties',
template: `
- <div fxLayout="column">
+ <div class="fx-column-start-stretch">
<mat-checkbox *ngIf="combinedProperties.hasBorderTop !== undefined"
[checked]="$any(combinedProperties).hasBorderTop"
(change)="updateModel.emit({ property: 'hasBorderTop', value: $event.checked })">
@@ -28,7 +28,16 @@ import { UIElement } from 'common/models/elements/element';
{{'propertiesPanel.hasBorderRight' | translate }}
</mat-checkbox>
</div>
- `
+ `,
+ styles: [`
+ .fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: stretch;
+ }
+ `]
})
export class BorderPropertiesComponent {
@Input() combinedProperties!: UIElement;
diff --git a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/drop-list-properties.component.ts b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/drop-list-properties.component.ts
index 44639ada7f66e1c67d554bd6460bb3dad2be430f..3be66c3872e63506b70b7127b8addeb184f907eb 100644
--- a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/drop-list-properties.component.ts
+++ b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/drop-list-properties.component.ts
@@ -1,3 +1,4 @@
+// eslint-disable-next-line max-classes-per-file
import {
Component, EventEmitter, Input, Output, Pipe, PipeTransform
} from '@angular/core';
@@ -15,7 +16,7 @@ import { DialogService } from '../../../../services/dialog.service';
selector: 'aspect-drop-list-properties',
template: `
<div *ngIf="combinedProperties.type === 'drop-list'"
- fxLayout="column">
+ class="fx-column-start-stretch">
<aspect-option-list-panel [title]="'preset'" [textFieldLabel]="'Neue Option'"
[itemList]="$any(combinedProperties.value)"
(addItem)="addOption($event)"
@@ -91,7 +92,16 @@ import { DialogService } from '../../../../services/dialog.service';
value: $any($event.target).value })">
</mat-form-field>
</div>
- `
+ `,
+ styles: [`
+ .fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: stretch;
+ }
+ `]
})
export class DropListPropertiesComponent {
@Input() combinedProperties!: CombinedProperties;
diff --git a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/input-element-properties.component.ts b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/input-element-properties.component.ts
index ad5edf1c3e334ff4bf0617595faad15ceeaa69fd..193919b9fdc3d4f71c2d0a8dc27828e5a8313dc9 100644
--- a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/input-element-properties.component.ts
+++ b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/input-element-properties.component.ts
@@ -6,7 +6,7 @@ import { UIElement } from 'common/models/elements/element';
@Component({
selector: 'aspect-input-element-properties',
template: `
- <fieldset *ngIf="combinedProperties.required !== undefined" fxLayout="column">
+ <fieldset *ngIf="combinedProperties.required !== undefined" class="fx-column-start-stretch">
<legend>Eingabeelement</legend>
<mat-form-field *ngIf="combinedProperties.label !== undefined" appearance="fill">
<mat-label>{{'propertiesPanel.label' | translate }}</mat-label>
@@ -33,7 +33,16 @@ import { UIElement } from 'common/models/elements/element';
(input)="updateModel.emit({ property: 'requiredWarnMessage', value: $any($event.target).value })">
</mat-form-field>
</fieldset>
- `
+ `,
+ styles: [`
+ .fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: stretch;
+ }
+ `]
})
export class InputElementPropertiesComponent {
@Input() combinedProperties!: UIElement;
diff --git a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/preset-value-properties.component.ts b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/preset-value-properties.component.ts
index c0be38406d93523a8521817fa0e3b86964c1eb0c..320b857e668172413989fdec35c621236d95d54d 100644
--- a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/preset-value-properties.component.ts
+++ b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/preset-value-properties.component.ts
@@ -29,7 +29,7 @@ import { CombinedProperties } from 'editor/src/app/components/properties-panel/e
(selectionChange)="updateModel.emit({ property: 'value', value: $event.value })">
<mat-option [value]="null">{{'propertiesPanel.undefined' | translate }}</mat-option>
<mat-option *ngFor="let option of $any(combinedProperties.options); let i = index" [value]="i">
- <div fxFlex fxFlexAlign="center" [innerHTML]="option.text + ' (Index: ' + i + ')' | safeResourceHTML"></div>
+ <div [innerHTML]="option.text + ' (Index: ' + i + ')' | safeResourceHTML"></div>
</mat-option>
</mat-select>
</mat-form-field>
diff --git a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/scale-and-zoom-properties.component.ts b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/scale-and-zoom-properties.component.ts
index 6d44b9535b8b60cba1ecb8efb4c1f3deee60c8c3..87042535cc59db1e3ac345666179e1fcab5be1d5 100644
--- a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/scale-and-zoom-properties.component.ts
+++ b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/scale-and-zoom-properties.component.ts
@@ -6,7 +6,7 @@ import { UIElement } from 'common/models/elements/element';
@Component({
selector: 'aspect-scale-and-zoom-properties',
template: `
- <div fxLayout="column" fxLayoutGap="5px">
+ <div class="fx-column-start-stretch fx-fix-gap-5">
<mat-checkbox *ngIf="combinedProperties.scale !== undefined"
[checked]="$any(combinedProperties.scale)"
(change)="updateModel.emit({ property: 'scale', value: $event.checked })">
@@ -44,9 +44,23 @@ import { UIElement } from 'common/models/elements/element';
</div>
</div>
`,
- styles: [
- '.disabled-label {color: rgba(0, 0, 0, 0.26)}'
- ]
+ styles: [`
+ .disabled-label {
+ color: rgba(0, 0, 0, 0.26);
+ }
+
+ .fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: stretch;
+ }
+
+ .fx-fix-gap-5 {
+ gap: 5px;
+ }
+ `]
})
export class ScaleAndZoomPropertiesComponent {
@Input() combinedProperties!: UIElement;
diff --git a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/text-properties-field-set.component.ts b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/text-properties-field-set.component.ts
index 8deb774262d627ee87b1262e9cc2f7b2feec1432..b02a969033d6800fecd922fc48715227617370b9 100644
--- a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/text-properties-field-set.component.ts
+++ b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/text-properties-field-set.component.ts
@@ -8,7 +8,7 @@ import { SelectionService } from '../../../../services/selection.service';
@Component({
selector: 'aspect-text-properties-field-set',
template: `
- <div *ngIf="combinedProperties.text" fxLayout="column">
+ <div *ngIf="combinedProperties.text" class="fx-column-start-stretch">
<ng-container>
<div class="text-text"
[innerHTML]="combinedProperties.text | safeResourceHTML"
@@ -48,13 +48,26 @@ import { SelectionService } from '../../../../services/selection.service';
(change)="updateModel.emit({ property: 'hasSelectionPopup', value: $event.checked })">
{{'propertiesPanel.hasSelectionPopup' | translate }}
</mat-checkbox>
-
</div>
`,
- styles: [
- '.text-text {min-height: 125px; max-height: 400px; overflow: auto;}',
- '.text-text {background-color: rgba(0,0,0,.04); cursor: pointer; margin-bottom: 10px;}'
- ]
+ styles: [`
+ .text-text {
+ min-height: 125px;
+ max-height: 400px;
+ overflow: auto;
+ background-color: rgba(0,0,0,.04);
+ cursor: pointer;
+ margin-bottom: 10px;
+ }
+
+ .fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: stretch;
+ }
+ `]
})
export class TextPropertiesFieldSetComponent {
@Input() combinedProperties!: any;
diff --git a/projects/editor/src/app/components/properties-panel/option-list-panel.component.ts b/projects/editor/src/app/components/properties-panel/option-list-panel.component.ts
index f483989c339d1aacd1b062ba745079f931521ef2..7ffdce4bfd093138c02931343faf8b32ae02dce5 100644
--- a/projects/editor/src/app/components/properties-panel/option-list-panel.component.ts
+++ b/projects/editor/src/app/components/properties-panel/option-list-panel.component.ts
@@ -7,7 +7,7 @@ import { Label } from 'common/models/elements/element';
@Component({
selector: 'aspect-option-list-panel',
template: `
- <fieldset fxLayout="column">
+ <fieldset class="fx-column-start-stretch">
<legend>{{title | translate }}</legend>
<mat-form-field appearance="outline">
<mat-label>{{textFieldLabel}}</mat-label>
@@ -22,8 +22,8 @@ import { Label } from 'common/models/elements/element';
<div class="drop-list" cdkDropList [cdkDropListData]="itemList"
(cdkDropListDropped)="moveListValue($event)">
<div *ngFor="let item of itemList; let i = index" cdkDrag
- class="option-draggable" fxLayout="row">
- <div fxFlex fxFlexAlign="center" [innerHTML]="item.text | safeResourceHTML"></div>
+ class="option-draggable fx-row-start-stretch">
+ <div class="fx-flex fx-align-self-center" [innerHTML]="item.text | safeResourceHTML"></div>
<img [src]="$any(item).imgSrc"
[style.object-fit]="'scale-down'" [style.height.px]="40">
<button mat-icon-button color="primary"
@@ -37,7 +37,33 @@ import { Label } from 'common/models/elements/element';
</div>
</div>
</fieldset>
- `
+ `,
+ styles: [`
+ .fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: stretch;
+ }
+
+ .fx-row-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: stretch;
+ }
+
+ .fx-align-self-center {
+ align-self: center;
+ }
+
+ .fx-flex {
+ flex: 1 1 0;
+ box-sizing: border-box;
+ }
+ `]
})
export class OptionListPanelComponent {
@Input() title!: string;
diff --git a/projects/editor/src/app/components/properties-panel/position-properties-tab/element-position-properties.component.ts b/projects/editor/src/app/components/properties-panel/position-properties-tab/element-position-properties.component.ts
index 045cbe78688b290e6e2c956c6fcfe74007f5c3ac..53c481864f310ea7ac7ce0c6f01226ace53e4fc9 100644
--- a/projects/editor/src/app/components/properties-panel/position-properties-tab/element-position-properties.component.ts
+++ b/projects/editor/src/app/components/properties-panel/position-properties-tab/element-position-properties.component.ts
@@ -8,7 +8,7 @@ import { SelectionService } from '../../../services/selection.service';
@Component({
selector: 'aspect-element-postion-properties',
template: `
- <div fxLayout="column">
+ <div class="fx-column-start-stretch">
<aspect-position-field-set
*ngIf="positionProperties"
[positionProperties]="positionProperties"
@@ -22,8 +22,8 @@ import { SelectionService } from '../../../services/selection.service';
<ng-container *ngIf="(selectionService.selectedElements | async)!.length > 1">
{{'propertiesPanel.alignment' | translate }}
- <div class="alignment-button-group" [style.margin]="'10px 0'"
- fxLayout="row" fxLayoutAlign="space-evenly center">
+ <div class="alignment-button-group fx-row-space-evenly-center"
+ [style.margin]="'10px 0'">
<button (click)="alignElements('left')">
<mat-icon>align_horizontal_left</mat-icon>
</button>
@@ -39,7 +39,24 @@ import { SelectionService } from '../../../services/selection.service';
</div>
</ng-container>
</div>
- `
+ `,
+ styles: [`
+ .fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: stretch;
+ }
+
+ .fx-row-space-evenly-center {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-evenly;
+ align-items: center;
+ }
+ `]
})
export class ElementPositionPropertiesComponent {
@Input() dimensions!: { width?: number; height?: number; dynamicWidth: boolean; };
diff --git a/projects/editor/src/app/components/properties-panel/position-properties-tab/input-groups/position-field-set.component.ts b/projects/editor/src/app/components/properties-panel/position-properties-tab/input-groups/position-field-set.component.ts
index 011de1f564fbcb882e3fadc6caa46b5b2bfa0495..21fee4273fb3eb2b9a1a01a14eb2ad36d91ad40b 100644
--- a/projects/editor/src/app/components/properties-panel/position-properties-tab/input-groups/position-field-set.component.ts
+++ b/projects/editor/src/app/components/properties-panel/position-properties-tab/input-groups/position-field-set.component.ts
@@ -9,10 +9,10 @@ import { PositionProperties } from 'common/models/elements/element';
<fieldset>
<legend>Position</legend>
<div *ngIf="!positionProperties.dynamicPositioning; else elseBlock"
- fxLayout="row" fxLayoutGap="10px">
+ class="fx-row-start-stretch fx-fix-gap-10">
<mat-form-field *ngIf="!positionProperties.dynamicPositioning &&
positionProperties.xPosition !== undefined"
- fxFlex>
+ class="fx-flex">
<mat-label>{{'propertiesPanel.xPosition' | translate }}</mat-label>
<input matInput type="number" #xPosition="ngModel" min="0"
[ngModel]="positionProperties.xPosition"
@@ -21,7 +21,7 @@ import { PositionProperties } from 'common/models/elements/element';
</mat-form-field>
<mat-form-field *ngIf="!positionProperties.dynamicPositioning &&
positionProperties.yPosition !== undefined"
- fxFlex>
+ class="fx-flex">
<mat-label>{{'propertiesPanel.yPosition' | translate }}</mat-label>
<input matInput type="number" #yPosition="ngModel" min="0"
[ngModel]="positionProperties.yPosition"
@@ -32,26 +32,26 @@ import { PositionProperties } from 'common/models/elements/element';
<ng-template #elseBlock>
{{'propertiesPanel.grid' | translate }}
- <div fxLayout="row" fxLayoutGap="10px">
- <mat-form-field fxFlex>
+ <div class="fx-row-start-stretch fx-fix-gap-10">
+ <mat-form-field class="fx-flex">
<mat-label>{{'column' | translate }}</mat-label>
<input matInput type="number" [ngModel]="positionProperties.gridColumn"
(ngModelChange)="updateModel.emit({ property: 'gridColumn', value: $event })">
</mat-form-field>
- <mat-form-field fxFlex="40">
+ <mat-form-field class="fx-flex-40">
<mat-label>{{'propertiesPanel.columnRange' | translate }}</mat-label>
<input matInput type="number"
[ngModel]="positionProperties.gridColumnRange"
(ngModelChange)="updateModel.emit({ property: 'gridColumnRange', value: $event })">
</mat-form-field>
</div>
- <div fxLayout="row" fxLayoutGap="10px">
- <mat-form-field fxFlex>
+ <div class="fx-row-start-stretch fx-fix-gap-10">
+ <mat-form-field class="fx-flex">
<mat-label>{{'row' | translate }}</mat-label>
<input matInput type="number" [ngModel]="positionProperties.gridRow"
(ngModelChange)="updateModel.emit({ property: 'gridRow', value: $event })">
</mat-form-field>
- <mat-form-field fxFlex="40">
+ <mat-form-field class="fx-flex-40">
<mat-label>{{'propertiesPanel.rowRange' | translate }}</mat-label>
<input matInput type="number"
[ngModel]="positionProperties.gridRowRange"
@@ -60,15 +60,15 @@ import { PositionProperties } from 'common/models/elements/element';
</div>
{{'propertiesPanel.margin' | translate }}
- <div fxLayout="column" class="margin-controls">
- <mat-form-field fxFlexAlign="center">
+ <div class="margin-controls fx-column-start-stretch">
+ <mat-form-field class="fx-align-self-center">
<mat-label>{{'propertiesPanel.top' | translate }}</mat-label>
<input matInput type="number" #marginTop="ngModel"
[ngModel]="positionProperties.marginTop"
(ngModelChange)="updateModel.emit(
{ property: 'marginTop', value: $event, isInputValid: marginTop.valid && $event !== null })">
</mat-form-field>
- <div fxLayout="row" fxLayoutAlign="space-around center">
+ <div class="fx-row-space-around-center">
<mat-form-field>
<mat-label>{{'propertiesPanel.left' | translate }}</mat-label>
<input matInput type="number" #marginLeft="ngModel"
@@ -89,7 +89,7 @@ import { PositionProperties } from 'common/models/elements/element';
isInputValid: marginRight .valid && $event !== null })">
</mat-form-field>
</div>
- <mat-form-field fxFlexAlign="center">
+ <mat-form-field class="fx-align-self-center">
<mat-label>{{'propertiesPanel.bottom' | translate }}</mat-label>
<input matInput type="number" #marginBottom="ngModel"
[ngModel]="positionProperties.marginBottom"
@@ -113,11 +113,60 @@ import { PositionProperties } from 'common/models/elements/element';
</mat-form-field>
</fieldset>
`,
- styles: [
- '.margin-controls mat-form-field {width: 100px;}',
- '.margin-controls {margin-bottom: 10px;}',
- 'mat-form-field {width: 110px;}'
- ]
+ styles: [`
+ .margin-controls mat-form-field {
+ width: 100px;
+ }
+ .margin-controls {
+ margin-bottom: 10px;
+ }
+ mat-form-field {
+ width: 110px;
+ }
+
+ .fx-row-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: stretch;
+ }
+
+ .fx-row-space-around-center {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+ }
+
+ .fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: stretch;
+ }
+
+ .fx-fix-gap-10 {
+ gap: 10px;
+ }
+
+ .fx-flex {
+ flex: 1 1 0;
+ box-sizing: border-box;
+ }
+
+ .fx-flex-40 {
+ flex: 1 1 100%;
+ box-sizing: border-box;
+ max-width: 40%;
+ }
+
+ .fx-align-self-center {
+ align-self: center;
+ }
+ `]
})
export class PositionFieldSetComponent {
@Input() positionProperties!: PositionProperties;
diff --git a/projects/editor/src/app/components/properties-panel/style-properties-tab/element-style-properties.component.ts b/projects/editor/src/app/components/properties-panel/style-properties-tab/element-style-properties.component.ts
index a88f7c86e04fb39011e64c528d17c2606dbfaccb..9e5f4bf0377cff6e0045c3fe66939d08379c59aa 100644
--- a/projects/editor/src/app/components/properties-panel/style-properties-tab/element-style-properties.component.ts
+++ b/projects/editor/src/app/components/properties-panel/style-properties-tab/element-style-properties.component.ts
@@ -5,7 +5,7 @@ import { UnitService } from 'editor/src/app/services/unit.service';
@Component({
selector: 'aspect-element-style-properties',
template: `
- <div fxLayout="column" *ngIf="styles">
+ <div class="fx-column-start-stretch" *ngIf="styles">
<mat-checkbox *ngIf="styles.lineColoring !== undefined"
[checked]="$any(styles.lineColoring)"
(change)="unitService.updateSelectedElementsStyleProperty('lineColoring', $event.checked)">
@@ -157,7 +157,16 @@ import { UnitService } from 'editor/src/app/services/unit.service';
(ngModelChange)="unitService.updateSelectedElementsStyleProperty('borderWidth', $event)">
</mat-form-field>
</fieldset>
- `
+ `,
+ styles: [`
+ .fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: stretch;
+ }
+ `]
})
export class ElementStylePropertiesComponent {
@Input() styles!: BasicStyles & ExtendedStyles | undefined;
diff --git a/projects/editor/src/app/components/unit-view/unit-view.component.css b/projects/editor/src/app/components/unit-view/unit-view.component.css
index 17204986130451a250244ebc9ed4bb88d923e6a0..50c3b9203276b6c124d289f58656c68e4f646cd3 100644
--- a/projects/editor/src/app/components/unit-view/unit-view.component.css
+++ b/projects/editor/src/app/components/unit-view/unit-view.component.css
@@ -23,6 +23,27 @@
display: inherit;
}
+.fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: stretch;
+}
+
+.fx-row-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: stretch;
+}
+
+.fx-flex {
+ flex: 1 1 0;
+ box-sizing: border-box;
+}
+
.show-properties-button {
padding-bottom: 140px;
}
diff --git a/projects/editor/src/app/components/unit-view/unit-view.component.html b/projects/editor/src/app/components/unit-view/unit-view.component.html
index df13bee133b4b3a88fdaf2e5fcea60ec7378110f..c100c53c60a95961fb412123980ab8eaf353f28d 100644
--- a/projects/editor/src/app/components/unit-view/unit-view.component.html
+++ b/projects/editor/src/app/components/unit-view/unit-view.component.html
@@ -1,11 +1,12 @@
-<div [style.height.%]="100">
+<div class="fx-row-start-stretch"
+ [style.height.%]="100">
<button class="drawer-button show-elements-button" (click)="toolbox_drawer.toggle()">
<span>
{{'elements' | translate | uppercase}}
</span>
</button>
- <mat-drawer-container fxFlex>
+ <mat-drawer-container class="fx-flex">
<mat-drawer #toolbox_drawer class="toolbox_drawer" mode="side" opened>
<aspect-ui-element-toolbox></aspect-ui-element-toolbox>
</mat-drawer>
@@ -105,7 +106,7 @@
</mat-menu>
</ng-template>
- <aspect-page-canvas *ngIf="pagesLoaded" [page]="page" fxLayout="column"></aspect-page-canvas>
+ <aspect-page-canvas *ngIf="pagesLoaded" class="fx-column-start-stretch" [page]="page"></aspect-page-canvas>
</mat-tab>
<mat-tab disabled>
<ng-template mat-tab-label>
diff --git a/projects/editor/src/app/text-editor-simple/rich-text-editor-simple.component.css b/projects/editor/src/app/text-editor-simple/rich-text-editor-simple.component.css
index 4790c9456292741f6bca04defdcf2cc69566a8f1..fc174fd95b200aabe7c84be26dd64d4fa10bdfe3 100644
--- a/projects/editor/src/app/text-editor-simple/rich-text-editor-simple.component.css
+++ b/projects/editor/src/app/text-editor-simple/rich-text-editor-simple.component.css
@@ -39,3 +39,11 @@
button.active {
background-color: lightgrey;
}
+
+.fx-row-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: start;
+ align-items: stretch;
+}
diff --git a/projects/editor/src/app/text-editor-simple/rich-text-editor-simple.component.html b/projects/editor/src/app/text-editor-simple/rich-text-editor-simple.component.html
index 163e3a2d3604b71f9d784df1ae6f8ce44fc23644..09baba6f135330e8b049ccba28d46f7b347e9ebd 100644
--- a/projects/editor/src/app/text-editor-simple/rich-text-editor-simple.component.html
+++ b/projects/editor/src/app/text-editor-simple/rich-text-editor-simple.component.html
@@ -1,6 +1,6 @@
-<div fxLayout="row" class="editor-control-panel">
- <div fxLayout="row">
- <fieldset fxLayout="row">
+<div class="editor-control-panel fx-row-start-stretch">
+ <div class="fx-row-start-stretch">
+ <fieldset class="fx-row-start-stretch">
<legend>Schriftauszeichnung</legend>
<button mat-icon-button matTooltip="Fett" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
[class.active]="editor.isActive('bold')"
@@ -35,9 +35,9 @@
</fieldset>
</div>
- <fieldset fxLayout="row">
+ <fieldset class="fx-row-start-stretch">
<legend>Schrift</legend>
- <div class="combo-button" fxLayout="row"
+ <div class="combo-button fx-row-start-stretch"
[style.background-color]="selectedFontColor">
<button mat-icon-button matTooltip="Textfarbe"
(click)="applyFontColor()">
@@ -47,7 +47,7 @@
<input matInput type="color" #textColorInput hidden
(input)="selectedFontColor = $any($event.target).value; applyFontColor()">
</div>
- <div class="combo-button" fxLayout="row"
+ <div class="combo-button fx-row-start-stretch"
[style.background-color]="selectedHighlightColor">
<button mat-icon-button matTooltip="Texthintergrund"
(click)="applyHighlightColor()">
diff --git a/projects/editor/src/app/text-editor/rich-text-editor.component.css b/projects/editor/src/app/text-editor/rich-text-editor.component.css
index 367db111611dd192418d09b18ccd0b4061916509..dabbf673cce3092961927524c9e4c9a8355e2d46 100644
--- a/projects/editor/src/app/text-editor/rich-text-editor.component.css
+++ b/projects/editor/src/app/text-editor/rich-text-editor.component.css
@@ -83,3 +83,35 @@ button.active {
border-radius: 3px;
padding-bottom: 7px;
}
+
+.fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: start;
+ align-items: stretch;
+}
+
+.fx-row-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: start;
+ align-items: stretch;
+}
+
+.fx-row-space-between-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: stretch;
+}
+
+.fx-row-space-around-center {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+}
diff --git a/projects/editor/src/app/text-editor/rich-text-editor.component.html b/projects/editor/src/app/text-editor/rich-text-editor.component.html
index e197a182c994eb9a3380078d115ecf9f61ef6237..0d1912647e4eb8e48a43fb8aa00f2fbd57bcc148 100644
--- a/projects/editor/src/app/text-editor/rich-text-editor.component.html
+++ b/projects/editor/src/app/text-editor/rich-text-editor.component.html
@@ -1,6 +1,6 @@
-<div fxLayout="column" class="editor-control-panel" mat-dialog-title>
- <div fxLayout="row" fxLayoutAlign="space-between">
- <fieldset fxLayout="row">
+<div class="editor-control-panel fx-column-start-stretch" mat-dialog-title>
+ <div class="fx-row-space-between-stretch">
+ <fieldset class="fx-row-start-stretch">
<legend>Schriftauszeichnung</legend>
<button mat-icon-button matTooltip="Fett" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
[class.active]="editor.isActive('bold')"
@@ -33,7 +33,7 @@
<mat-icon>strikethrough_s</mat-icon>
</button>
</fieldset>
- <fieldset fxLayout="row">
+ <fieldset class="fx-row-start-stretch">
<legend>Schrift</legend>
<mat-form-field class="small-dropdown">
<mat-label>Schriftgröße</mat-label>
@@ -53,7 +53,7 @@
<mat-option (click)="applyFontSize('36px')" value="36px">36px</mat-option>
</mat-select>
</mat-form-field>
- <div class="combo-button" fxLayout="row"
+ <div class="combo-button fx-row-start-stretch"
[style.background-color]="selectedFontColor">
<button mat-icon-button matTooltip="Textfarbe"
(click)="applyFontColor()">
@@ -63,7 +63,7 @@
<input matInput type="color" #textColorInput hidden
(input)="selectedFontColor = $any($event.target).value; applyFontColor()">
</div>
- <div class="combo-button" fxLayout="row"
+ <div class="combo-button fx-row-start-stretch"
[style.background-color]="selectedHighlightColor">
<button mat-icon-button matTooltip="Texthintergrund"
(click)="applyHighlightColor()">
@@ -74,7 +74,7 @@
(input)="selectedHighlightColor = $any($event.target).value; applyHighlightColor()">
</div>
</fieldset>
- <fieldset fxLayout="row">
+ <fieldset class="fx-row-start-stretch">
<legend>Absatz</legend>
<mat-form-field class="dropdown">
<mat-label>Absatztyp</mat-label>
@@ -99,9 +99,9 @@
</mat-form-field>
</fieldset>
- <fieldset fxLayout="row">
+ <fieldset class="fx-row-start-stretch">
<legend>Listen</legend>
- <div class="combo-button" fxLayout="row"
+ <div class="combo-button fx-row-start-stretch"
[style.background-color]="editor.isActive('bulletList') ? 'lightgrey' : ''">
<button mat-icon-button matTooltip="Aufzählung" [matTooltipShowDelay]="300"
[class.active]="editor.isActive('bulletList')"
@@ -115,7 +115,8 @@
<mat-option value="square">square</mat-option>
</mat-select>
</div>
- <div class="combo-button" fxLayout="row" [style.background-color]="editor.isActive('orderedList') ? 'lightgrey' : ''">
+ <div class="combo-button fx-row-start-stretch"
+ [style.background-color]="editor.isActive('orderedList') ? 'lightgrey' : ''">
<button mat-icon-button matTooltip="Aufzählung (nummeriert)" [matTooltipShowDelay]="300"
[class.active]="editor.isActive('orderedList')"
(click)="toggleOrderedList()">
@@ -154,8 +155,8 @@
</div>
- <div fxLayout="row" fxLayoutAlign="space-between">
- <fieldset fxLayout="row">
+ <div class="fx-row-space-between-stretch">
+ <fieldset class="fx-row-start-stretch">
<legend>Textausrichtung</legend>
<button mat-icon-button matTooltip="Linksbündig" [matTooltipShowDelay]="300"
[class.active]="editor.isActive({ textAlign: 'left' })"
@@ -178,7 +179,7 @@
<mat-icon>format_align_justify</mat-icon>
</button>
</fieldset>
- <fieldset fxLayout="row">
+ <fieldset class="fx-row-start-stretch">
<legend>Einrückung</legend>
<button mat-icon-button matTooltip="Einrücken" [matTooltipShowDelay]="300"
(click)="indent()">
@@ -202,7 +203,7 @@
</mat-form-field>
</fieldset>
- <fieldset fxLayout="row">
+ <fieldset class="fx-row-start-stretch">
<legend>Bild</legend>
<button mat-icon-button matTooltip="Bild in Zeile einfügen" [matTooltipShowDelay]="300"
(click)="insertImage()">
@@ -222,7 +223,7 @@
</button>
</fieldset>
- <fieldset fxLayout="row">
+ <fieldset class="fx-row-start-stretch">
<legend>Sonderelemente</legend>
<button mat-icon-button class="special-chars-button" matTooltip="Sonderzeichen" [matTooltipShowDelay]="300"
[matMenuTriggerFor]="specialCharsMenu">
@@ -281,7 +282,7 @@
(click)="toggleBlockquote()">
<mat-icon>format_quote</mat-icon>
</button>
- <div *ngIf="!clozeMode" class="combo-button" fxLayout="row"
+ <div *ngIf="!clozeMode" class="combo-button fx-row-start-stretch"
[style.background-color]="selectedAnchorColor">
<button mat-icon-button matTooltip="Bereich markieren"
(click)="applyAnchorId()">
@@ -296,7 +297,7 @@
</div>
</fieldset>
</div>
- <div *ngIf="clozeMode" fxLayout="row" fxLayoutAlign="space-around center" >
+ <div *ngIf="clozeMode" class="fx-row-space-around-center" >
<button mat-icon-button matTooltip="Eingabefeld" [matTooltipShowDelay]="300"
(click)="insertTextField()">
<mat-icon>edit</mat-icon>
diff --git a/projects/player/src/app/components/layouts/pages-layout/pages-layout.component.scss b/projects/player/src/app/components/layouts/pages-layout/pages-layout.component.scss
index 16518f1edf8b00bf32a1a877c574e97e9393e094..93534b59bd644c43a3c786a462001b8fc9a2236f 100644
--- a/projects/player/src/app/components/layouts/pages-layout/pages-layout.component.scss
+++ b/projects/player/src/app/components/layouts/pages-layout/pages-layout.component.scss
@@ -6,7 +6,7 @@
box-sizing: border-box;
display: flex;
flex-direction: column;
- justify-content: start;
+ justify-content: flex-start;
align-items: stretch;
}
@@ -14,7 +14,7 @@
box-sizing: border-box;
display: flex;
flex-direction: row;
- justify-content: start;
+ justify-content: flex-start;
align-items: stretch;
}