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>