diff --git a/projects/editor/src/app/components/util/combo-button.component.ts b/projects/editor/src/app/components/util/combo-button.component.ts
index a8c05b3dd226c7f90ca23d81cbb3e3aa6344e728..7649e60ae08d8623d595b40cb7281dc75be311df 100644
--- a/projects/editor/src/app/components/util/combo-button.component.ts
+++ b/projects/editor/src/app/components/util/combo-button.component.ts
@@ -1,74 +1,43 @@
import {
- Component, EventEmitter, Input, Output
+ Component, ElementRef, EventEmitter, Input, Output, ViewChild
} from '@angular/core';
@Component({
selector: 'aspect-combo-button',
template: `
- <div class="root-panel" [style.outline]="inputType === 'color' && '1px solid'"
- [style.outline-color]="selectedValue"
- [style.background-color]="inputType === 'list' && isActive ? 'lightgrey' : 'unset'">
- <button class="apply-button" mat-icon-button [matTooltip]="tooltip"
+ <div class="wrapper">
+ <button class="apply-button" mat-button [matTooltip]="tooltip"
+ [style.background-color]="inputType === 'list' && isActive ? 'lightgrey' : 'unset'"
(click)="applySelection.emit()">
<mat-icon>{{icon}}</mat-icon>
</button>
- <ng-container *ngIf="inputType == 'color'">
- <button class="select-trigger-button" type="button" (click)="input.click()">
- <svg viewBox="0 0 24 24" width="24px" height="24px" focusable="false" aria-hidden="true">
- <path d="M7 10l5 5 5-5z"></path>
- </svg>
- </button>
- <input matInput type="color" #input hidden
- (input)="selectionChanged.emit($any($event.target).value); applySelection.emit()">
- </ng-container>
+ <input matInput type="color" #colorInput hidden
+ (input)="selectionChanged.emit($any($event.target).value); applySelection.emit()">
- <ng-container *ngIf="inputType == 'list'">
- <button class="select-trigger-button" type="button" cdkOverlayOrigin #trigger="cdkOverlayOrigin"
- (click)="isOpen = !isOpen">
- <svg viewBox="0 0 24 24" width="24px" height="24px" focusable="false" aria-hidden="true">
- <path d="M7 10l5 5 5-5z"></path>
- </svg>
- </button>
- <ng-template cdkConnectedOverlay
- [cdkConnectedOverlayOrigin]="trigger"
- [cdkConnectedOverlayOpen]="isOpen"
- (overlayOutsideClick)="isOpen = false">
- <mat-action-list class="list-box">
- <button *ngFor="let value of availableValues"
- mat-list-item (click)="selectValue(value)">{{value}}</button>
- </mat-action-list>
- </ng-template>
- </ng-container>
+ <mat-select panelClass="combo-button-select-overlay"
+ (click)="onClickSelect($event)">
+ <mat-option *ngFor="let value of availableValues"
+ (click)="selectValue(value)">{{value}}</mat-option>
+ </mat-select>
</div>
`,
styles: [`
- .root-panel {
+ .wrapper {
display: flex;
flex-direction: row;
- border: 1px solid;
- border-radius: 5px;
- border-color: var(--mdc-outlined-text-field-outline-color);
}
- mat-select {
- margin-top: 20%;
- }
- .list-box {
- background-color: white;
+ .apply-button {
+ min-width: unset;
}
- .select-trigger-button {
- width: 24px;
- border: unset;
- background-color: unset;
- padding: 0;
- margin-left: -5px;
+ .apply-button .mat-icon {
+ margin-right: 0;
}
- .select-trigger-button:hover {
- background-color: grey;
+ mat-select {
+ display: flex;
}
- .apply-button {
- height: 42px;
- padding-top: 9px;
+ mat-select:hover {
+ background-color: WhiteSmoke;
}
`
]
@@ -82,10 +51,18 @@ export class ComboButtonComponent {
@Input() isActive: boolean = false;
@Output() applySelection = new EventEmitter<void>();
@Output() selectionChanged = new EventEmitter<string>();
- isOpen: boolean = false;
+
+ @ViewChild('colorInput') colorInput!: ElementRef<HTMLInputElement>;
selectValue(value: string) {
this.selectionChanged.emit(value);
- this.isOpen = false;
+ }
+
+ onClickSelect(event: MouseEvent) {
+ if (this.inputType === 'color') {
+ event.preventDefault();
+ event.stopPropagation();
+ this.colorInput.nativeElement.click();
+ }
}
}
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 3e9015ace737cd82ce4f4dc7030c266e8c7d6d06..042e5fb23c1341ccc1b1fa38b23e884412b53fbc 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 class="editor-control-panel">
- <fieldset class="fx-row-start-stretch">
- <legend>Schriftauszeichnung</legend>
+
+ <div class="input-group">
<button mat-icon-button matTooltip="Fett" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
[class.active]="editor.isActive('bold')"
(click)="toggleBold()">
@@ -31,27 +31,25 @@
(click)="toggleStrike()">
<mat-icon>strikethrough_s</mat-icon>
</button>
- </fieldset>
- <fieldset class="fx-row-start-start" [style.gap.px]="5">
- <legend>Schrift</legend>
- <mat-form-field *ngIf="!showReducedControls" class="dropdown" appearance="outline" [style.width.px]="90">
- <mat-label>Größe</mat-label>
- <mat-select [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>
+ </div>
+
+ <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>
<aspect-combo-button [inputType]="'color'" [selectedValue]="selectedFontColor"
[tooltip]="'Textfarbe'" [icon]="'format_color_text'"
(applySelection)="applyFontColor()"
@@ -62,34 +60,28 @@
(applySelection)="applyHighlightColor()"
(selectionChanged)="selectedHighlightColor = $event">
</aspect-combo-button>
- </fieldset>
- <fieldset *ngIf="!showReducedControls" class="fx-row-start-start" [style.gap.px]="5" >
- <legend>Absatz</legend>
- <mat-form-field class="dropdown" appearance="outline" [style.width.px]="135">
- <mat-label>Typ</mat-label>
- <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-form-field>
- <mat-form-field class="dropdown" appearance="outline" [style.width.px]="90">
- <mat-label>Abstand</mat-label>
- <mat-select matTooltip="Achtung: Gilt nur für zukünftig angelegte 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" >
+ <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="fx-row-start-stretch" [style.gap.px]="5">
- <legend>Listen</legend>
+ </div>
+
+ <div *ngIf="!showReducedControls" class="input-group">
<aspect-combo-button [inputType]="'list'"
[selectedValue]="editor.getAttributes('bulletList').listStyle"
[availableValues]="['disc', 'circle', 'square']"
@@ -107,10 +99,9 @@
(applySelection)="toggleOrderedList()"
(selectionChanged)="applyListStyle('orderedList', $event)">
</aspect-combo-button>
- </fieldset>
+ </div>
- <fieldset *ngIf="!showReducedControls" class="fx-row-start-stretch">
- <legend>Textausrichtung</legend>
+ <div *ngIf="!showReducedControls" class="input-group">
<button mat-icon-button matTooltip="Linksbündig" [matTooltipShowDelay]="300"
[class.active]="editor.isActive({ textAlign: 'left' })"
(click)="alignText('left')">
@@ -131,9 +122,9 @@
(click)="alignText('justify')">
<mat-icon>format_align_justify</mat-icon>
</button>
- </fieldset>
- <fieldset *ngIf="!showReducedControls" class="fx-row-start-start">
- <legend>Einrückung</legend>
+ </div>
+
+ <div *ngIf="!showReducedControls" class="input-group">
<button mat-icon-button matTooltip="Einrücken" [matTooltipShowDelay]="300"
(click)="indent()">
<mat-icon>format_indent_increase</mat-icon>
@@ -150,14 +141,11 @@
(click)="unhangIndent()">
<mat-icon>view_headline</mat-icon>
</button>
- <mat-form-field class="indent-size-input" appearance="outline" [style.width.px]="90">
- <mat-label>Tiefe</mat-label>
- <input matInput type="text" [(ngModel)]="selectedIndentSize">
- </mat-form-field>
- </fieldset>
+ <input matInput type="text" [(ngModel)]="selectedIndentSize" [matTooltip]="'Einrücktiefe (in px)'"
+ [style.width.px]="20">
+ </div>
- <fieldset *ngIf="!showReducedControls" class="fx-row-start-stretch">
- <legend>Bild</legend>
+ <div *ngIf="!showReducedControls" class="input-group">
<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>
@@ -174,10 +162,9 @@
(click)="insertBlockImage('left')">
<mat-icon style="transform: scale(1.5);">art_track</mat-icon>
</button>
- </fieldset>
+ </div>
- <fieldset class="fx-row-start-stretch">
- <legend>Sonderelemente</legend>
+ <div class="input-group">
<button *ngIf="!showReducedControls" mat-icon-button
matTooltip="Tooltip" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
[class.active]="editor.isActive('tooltip')"
@@ -262,7 +249,7 @@
(applySelection)="applyAnchorId()"
(selectionChanged)="selectedAnchorColor = $event">
</aspect-combo-button>
- </fieldset>
+ </div>
</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 0f05d1b1d4dd40375b65c702559cd18499481edf..f6ba31566c89055d576ff06e1f95b627cc42b3ff 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
@@ -24,36 +24,26 @@ tiptap-editor {
display: flex;
flex-direction: row;
flex-wrap: wrap;
+ box-shadow: 0 2px 2px -2px rgba(34,47,62,.1),0 8px 8px -4px rgba(34,47,62,.07);
}
-.editor-control-panel button.active {
- background-color: lightgrey;
-}
-
-:host ::ng-deep .editor-control-panel .dropdown .mat-mdc-form-field-infix {
- min-height: unset;
- padding-top: 10px;
- padding-bottom: 10px;
-}
-
-:host ::ng-deep .editor-control-panel .dropdown .mdc-notched-outline__notch {
- max-width: unset !important;
+.editor-control-panel .input-group {
+ display: flex;
+ align-items: center;
+ height: 50px;
+ margin-right: 20px;
}
-:host ::ng-deep .editor-control-panel .indent-size-input .mat-mdc-form-field-flex {
- height: 45px;
+.editor-control-panel .input-group mat-select {
+ margin: 0 10px;
}
-:host ::ng-deep .editor-control-panel .indent-size-input .mat-mdc-form-field-infix {
- padding-top: 10px;
- padding-bottom: 10px;
+.editor-control-panel .input-group aspect-combo-button {
+ margin: 0 10px;
}
-:host fieldset {
- height: 55px;
- box-sizing: content-box !important;
- border-radius: 3px;
- padding: 2px 5px 15px 5px;
+.editor-control-panel button.active {
+ background-color: lightgrey;
}
// ### Override TipTap text styling ###
diff --git a/projects/editor/src/app/text-editor/rich-text-editor.component.ts b/projects/editor/src/app/text-editor/rich-text-editor.component.ts
index 2f685605157fbd80f23f8dbfe7f0af7de2f68660..ec28eaa7c1cad0f7250908f9038eec6c8fd37b11 100644
--- a/projects/editor/src/app/text-editor/rich-text-editor.component.ts
+++ b/projects/editor/src/app/text-editor/rich-text-editor.component.ts
@@ -47,7 +47,6 @@ export class RichTextEditorComponent implements OnInit, AfterViewInit {
@Input() defaultFontSize!: number;
@Input() clozeMode: boolean = false;
@Input() showReducedControls: boolean = false;
- @Input() showGroupedControls: boolean = true;
@Output() contentChange = new EventEmitter<string | Record<string, any>>();
selectedFontColor = 'black';
diff --git a/projects/editor/src/styles.css b/projects/editor/src/styles.css
index b9f2fee06306576bcb161d3631441cb8ed7d73a5..2acedb8bba5de5e90209d14832659358bfd9d947 100644
--- a/projects/editor/src/styles.css
+++ b/projects/editor/src/styles.css
@@ -18,6 +18,11 @@ u>span {
text-decoration: underline;
}
+/* Overlay size for dropdown panel */
+.cdk-overlay-pane .combo-button-select-overlay {
+ min-width: 150px;
+}
+
/*Flex Styles*/
.fx-column-start-stretch {