[editor] Replace Flex layout module with classes in RichTextEditorComp.

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

projects/editor/src/app/text-editor/rich-text-editor.component.html

-<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>