From 34fe24ed318f6729a0aab9a800a3ea74c018f5a8 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Tue, 9 Jul 2024 19:14:02 +0200
Subject: [PATCH] [editor] Revert TextEditor panel back to original style
---
.../rich-text-editor.component.html | 120 ++++++++++--------
.../rich-text-editor.component.scss | 47 ++++++-
2 files changed, 114 insertions(+), 53 deletions(-)
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 042e5fb23..d14e66fe7 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,7 @@
<div class="editor-control-panel">
- <div class="input-group">
+ <fieldset class="input-group">
+ <legend>Schriftauszeichnung</legend>
<button mat-icon-button matTooltip="Fett" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
[class.active]="editor.isActive('bold')"
(click)="toggleBold()">
@@ -31,25 +32,29 @@
(click)="toggleStrike()">
<mat-icon>strikethrough_s</mat-icon>
</button>
- </div>
+ </fieldset>
- <div class="input-group">
- <mat-select *ngIf="!showReducedControls" matTooltip="Schriftgröße"
- [value]="editor.getAttributes('textStyle').fontSize?.toString() || selectedFontSize" >
- <mat-option (click)="applyFontSize('8px')" value="8px">8px</mat-option>
- <mat-option (click)="applyFontSize('10px')" value="10px">10px</mat-option>
- <mat-option (click)="applyFontSize('12px')" value="12px">12px</mat-option>
- <mat-option (click)="applyFontSize('14px')" value="14px">14px</mat-option>
- <mat-option (click)="applyFontSize('16px')" value="16px">16px</mat-option>
- <mat-option (click)="applyFontSize('18px')" value="18px">18px</mat-option>
- <mat-option (click)="applyFontSize('20px')" value="20px">20px</mat-option>
- <mat-option (click)="applyFontSize('22px')" value="22px">22px</mat-option>
- <mat-option (click)="applyFontSize('24px')" value="24px">24px</mat-option>
- <mat-option (click)="applyFontSize('26px')" value="26px">26px</mat-option>
- <mat-option (click)="applyFontSize('28px')" value="28px">28px</mat-option>
- <mat-option (click)="applyFontSize('30px')" value="30px">30px</mat-option>
- <mat-option (click)="applyFontSize('36px')" value="36px">36px</mat-option>
- </mat-select>
+ <fieldset class="input-group">
+ <legend>Schrift</legend>
+ <mat-form-field *ngIf="!showReducedControls" appearance="outline" class="dropdown">
+ <mat-label>Größe</mat-label>
+ <mat-select panelClass="select-overlay"
+ [value]="editor.getAttributes('textStyle').fontSize?.toString() || selectedFontSize" >
+ <mat-option (click)="applyFontSize('8px')" value="8px">8px</mat-option>
+ <mat-option (click)="applyFontSize('10px')" value="10px">10px</mat-option>
+ <mat-option (click)="applyFontSize('12px')" value="12px">12px</mat-option>
+ <mat-option (click)="applyFontSize('14px')" value="14px">14px</mat-option>
+ <mat-option (click)="applyFontSize('16px')" value="16px">16px</mat-option>
+ <mat-option (click)="applyFontSize('18px')" value="18px">18px</mat-option>
+ <mat-option (click)="applyFontSize('20px')" value="20px">20px</mat-option>
+ <mat-option (click)="applyFontSize('22px')" value="22px">22px</mat-option>
+ <mat-option (click)="applyFontSize('24px')" value="24px">24px</mat-option>
+ <mat-option (click)="applyFontSize('26px')" value="26px">26px</mat-option>
+ <mat-option (click)="applyFontSize('28px')" value="28px">28px</mat-option>
+ <mat-option (click)="applyFontSize('30px')" value="30px">30px</mat-option>
+ <mat-option (click)="applyFontSize('36px')" value="36px">36px</mat-option>
+ </mat-select>
+ </mat-form-field>
<aspect-combo-button [inputType]="'color'" [selectedValue]="selectedFontColor"
[tooltip]="'Textfarbe'" [icon]="'format_color_text'"
(applySelection)="applyFontColor()"
@@ -60,28 +65,37 @@
(applySelection)="applyHighlightColor()"
(selectionChanged)="selectedHighlightColor = $event">
</aspect-combo-button>
- </div>
+ </fieldset>
- <div *ngIf="!showReducedControls" class="input-group" >
- <mat-select [value]="editor.getAttributes('heading').level?.toString() || ''"
- (valueChange)="toggleHeading($event)">
- <mat-option value="1">H1</mat-option>
- <mat-option value="2">H2</mat-option>
- <mat-option value="3">H3</mat-option>
- <mat-option value="4">H4</mat-option>
- <mat-option value="">Paragraph</mat-option>
- </mat-select>
- <mat-select matTooltip="Absatzabstand (gilt nur für neue Absätze)" [matTooltipShowDelay]="300"
- [value]="editor.getAttributes('paragraph').margin?.toString() || '0'"
- (click)="$any($event).stopPropagation()" (valueChange)="applyParagraphStyle($event)">
- <mat-option value="0">0px</mat-option>
- <mat-option value="10">10px</mat-option>
- <mat-option value="20">20px</mat-option>
- </mat-select>
+ <fieldset *ngIf="!showReducedControls" class="input-group" >
+ <legend>Absatz</legend>
+ <mat-form-field appearance="outline" class="dropdown" [style.width.px]="130">
+ <mat-label>Typ</mat-label>
+ <mat-select panelClass="select-overlay"
+ [value]="editor.getAttributes('heading').level?.toString() || ''"
+ (valueChange)="toggleHeading($event)">
+ <mat-option value="1">H1</mat-option>
+ <mat-option value="2">H2</mat-option>
+ <mat-option value="3">H3</mat-option>
+ <mat-option value="4">H4</mat-option>
+ <mat-option value="">Paragraph</mat-option>
+ </mat-select>
+ </mat-form-field>
+ <mat-form-field appearance="outline" class="dropdown" [style.width.px]="80">
+ <mat-label>Abstand</mat-label>
+ <mat-select panelClass="select-overlay"
+ matTooltip="Absatzabstand (gilt nur für neue Absätze)" [matTooltipShowDelay]="300"
+ [value]="editor.getAttributes('paragraph').margin?.toString() || '0'"
+ (click)="$any($event).stopPropagation()" (valueChange)="applyParagraphStyle($event)">
+ <mat-option value="0">0px</mat-option>
+ <mat-option value="10">10px</mat-option>
+ <mat-option value="20">20px</mat-option>
+ </mat-select>
+ </mat-form-field>
+ </fieldset>
- </div>
-
- <div *ngIf="!showReducedControls" class="input-group">
+ <fieldset *ngIf="!showReducedControls" class="input-group">
+ <legend>Listen</legend>
<aspect-combo-button [inputType]="'list'"
[selectedValue]="editor.getAttributes('bulletList').listStyle"
[availableValues]="['disc', 'circle', 'square']"
@@ -99,9 +113,10 @@
(applySelection)="toggleOrderedList()"
(selectionChanged)="applyListStyle('orderedList', $event)">
</aspect-combo-button>
- </div>
+ </fieldset>
- <div *ngIf="!showReducedControls" class="input-group">
+ <fieldset *ngIf="!showReducedControls" class="input-group">
+ <legend>Textausrichtung</legend>
<button mat-icon-button matTooltip="Linksbündig" [matTooltipShowDelay]="300"
[class.active]="editor.isActive({ textAlign: 'left' })"
(click)="alignText('left')">
@@ -122,9 +137,10 @@
(click)="alignText('justify')">
<mat-icon>format_align_justify</mat-icon>
</button>
- </div>
+ </fieldset>
- <div *ngIf="!showReducedControls" class="input-group">
+ <fieldset *ngIf="!showReducedControls" class="input-group">
+ <legend>Einrückung</legend>
<button mat-icon-button matTooltip="Einrücken" [matTooltipShowDelay]="300"
(click)="indent()">
<mat-icon>format_indent_increase</mat-icon>
@@ -141,11 +157,14 @@
(click)="unhangIndent()">
<mat-icon>view_headline</mat-icon>
</button>
- <input matInput type="text" [(ngModel)]="selectedIndentSize" [matTooltip]="'Einrücktiefe (in px)'"
- [style.width.px]="20">
- </div>
+ <mat-form-field appearance="outline" class="textfield">
+ <mat-label>Tiefe</mat-label>
+ <input matInput type="text" [(ngModel)]="selectedIndentSize">
+ </mat-form-field>
+ </fieldset>
- <div *ngIf="!showReducedControls" class="input-group">
+ <fieldset *ngIf="!showReducedControls" class="input-group">
+ <legend>Bild</legend>
<button mat-icon-button matTooltip="Bild in Zeile einfügen" [matTooltipShowDelay]="300"
(click)="insertImage()">
<mat-icon style="transform: scale(1.1);">burst_mode</mat-icon>
@@ -162,9 +181,10 @@
(click)="insertBlockImage('left')">
<mat-icon style="transform: scale(1.5);">art_track</mat-icon>
</button>
- </div>
+ </fieldset>
- <div class="input-group">
+ <fieldset class="input-group">
+ <legend>Sonderelemente</legend>
<button *ngIf="!showReducedControls" mat-icon-button
matTooltip="Tooltip" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
[class.active]="editor.isActive('tooltip')"
@@ -249,7 +269,7 @@
(applySelection)="applyAnchorId()"
(selectionChanged)="selectedAnchorColor = $event">
</aspect-combo-button>
- </div>
+ </fieldset>
</div>
<div *ngIf="clozeMode" class="fx-row-space-around-center" >
<button mat-button matTooltip="Eingabefeld" [matTooltipShowDelay]="300"
diff --git a/projects/editor/src/app/text-editor/rich-text-editor.component.scss b/projects/editor/src/app/text-editor/rich-text-editor.component.scss
index f6ba31566..8e7d76a80 100644
--- a/projects/editor/src/app/text-editor/rich-text-editor.component.scss
+++ b/projects/editor/src/app/text-editor/rich-text-editor.component.scss
@@ -13,10 +13,12 @@ tiptap-editor {
width: 100%;
margin: 10px;
overflow: scroll;
+ border: 1px solid gray;
}
.editor-control-panel {
margin-bottom: 15px;
+ padding: 5px;
font: unset;
max-width: 1000px;
margin-left: auto;
@@ -24,6 +26,7 @@ tiptap-editor {
display: flex;
flex-direction: row;
flex-wrap: wrap;
+ background: linear-gradient(to top right, #FFF5F8, #FAFAFA);
box-shadow: 0 2px 2px -2px rgba(34,47,62,.1),0 8px 8px -4px rgba(34,47,62,.07);
}
@@ -31,12 +34,50 @@ tiptap-editor {
display: flex;
align-items: center;
height: 50px;
- margin-right: 20px;
+ margin-right: 10px;
+ padding: 0.3em 0 0.7em 0;
}
-.editor-control-panel .input-group mat-select {
- margin: 0 10px;
+
+.editor-control-panel .input-group .dropdown {
+ width: 95px;
+ height: 40px;
+ margin: 0 5px;
+}
+// ### Adjust Material select ###
+:host ::ng-deep .editor-control-panel .input-group .dropdown .mat-mdc-text-field-wrapper {
+ max-height: 100%;
+}
+:host ::ng-deep .editor-control-panel .input-group .dropdown .mat-mdc-form-field-flex {
+ align-self: center;
+}
+:host ::ng-deep .editor-control-panel .input-group .dropdown .mat-mdc-form-field-infix {
+ padding: 0;
+ min-height: 0;
+}
+:host ::ng-deep .editor-control-panel .input-group .dropdown .mat-mdc-form-field-subscript-wrapper {
+ display: none;
+}
+:host ::ng-deep .editor-control-panel .input-group .dropdown .mdc-notched-outline__notch {
+ max-width: unset !important;
}
+:host ::ng-deep .editor-control-panel .input-group .textfield {
+ height: 45px;
+ width: 65px;
+ margin: 0 5px;
+}
+
+// ### Adjust Material text field ###
+:host ::ng-deep .editor-control-panel .input-group .textfield .mat-mdc-form-field-infix {
+ padding-top: 12px;
+}
+:host ::ng-deep .editor-control-panel .input-group .textfield .mat-mdc-text-field-wrapper {
+ max-height: 100%;
+}
+:host ::ng-deep .editor-control-panel .input-group .textfield .mdc-notched-outline__notch {
+ max-width: unset !important;
+}
+
.editor-control-panel .input-group aspect-combo-button {
margin: 0 10px;
--
GitLab