diff --git a/projects/common/element-components/text.component.ts b/projects/common/element-components/text.component.ts index 03b9fd71fd5a0b2cb2b358f0db6ae5c5e5e18f67..e56b6a51da526704aef16fc04f02121fcc21567f 100644 --- a/projects/common/element-components/text.component.ts +++ b/projects/common/element-components/text.component.ts @@ -10,20 +10,21 @@ import { TextElement } from '../classes/textElement'; template: ` <div [style.width.%]="100" [style.height]="'auto'"> - <div *ngIf="elementModel.highlightable"> - <button mat-button [style.background-color]="'yellow'" + <div *ngIf="elementModel.highlightable" + class="marking-bar"> + <button class="marking-button" mat-mini-fab [style.background-color]="'yellow'" (click)="applySelection.emit({color:'yellow', element: container, clear: false})"> <mat-icon>border_color</mat-icon> </button> - <button mat-button [style.background-color]="'turquoise'" + <button class="marking-button" mat-mini-fab [style.background-color]="'turquoise'" (click)="applySelection.emit({color: 'turquoise', element: container, clear: false})"> <mat-icon>border_color</mat-icon> </button> - <button mat-button [style.background-color]="'orange'" + <button class="marking-button" mat-mini-fab [style.background-color]="'orange'" (click)="applySelection.emit({color: 'orange', element: container, clear: false})"> <mat-icon>border_color</mat-icon> </button> - <button mat-button + <button class="marking-button" [style.background-color]="'lightgrey'" mat-mini-fab (click)="applySelection.emit({color: 'none', element: container, clear: true})"> <mat-icon>clear</mat-icon> </button> @@ -38,11 +39,15 @@ import { TextElement } from '../classes/textElement'; #container> </div> </div> - ` + `, + styles: [ + '.marking-bar{position: sticky; top: 0}', + '.marking-button{color: #333}' + ] }) export class TextComponent extends ElementComponent { elementModel!: TextElement; - @Output()applySelection = new EventEmitter<{ color: string, element: HTMLElement, clear: boolean }>(); + @Output() applySelection = new EventEmitter<{ color: string, element: HTMLElement, clear: boolean }>(); @ViewChild('container') containerDiv!: ElementRef; constructor(public sanitizer: DomSanitizer) { diff --git a/projects/common/shared.module.ts b/projects/common/shared.module.ts index 355b7de0543e2c21a00b091efb10abdd172e5ffb..2bc500e13ae77812cd2cca5acc7a712fcd411d34 100644 --- a/projects/common/shared.module.ts +++ b/projects/common/shared.module.ts @@ -50,6 +50,7 @@ import { SafeResourceHTMLPipe } from './element-components/pipes/safe-resource-h MatFormFieldModule, MatInputModule, MatDialogModule, + MatButtonModule, TranslateModule ], declarations: [