Rename component MarkingBar to TextMarkingBar

projects/common/components/marking-bar/marking-bar.component.ts → projects/common/components/text-marking-bar/text-marking-bar.component.ts

@@ -4,38 +4,38 @@ import {
 import { TextElement } from '../../interfaces/elements';
 
 @Component({
-  selector: 'aspect-marking-bar',
+  selector: 'aspect-text-marking-bar',
   template: `
     <div class="marking-bar">
-      <aspect-marking-button *ngIf="elementModel.highlightableYellow"
+      <aspect-text-marking-button *ngIf="elementModel.highlightableYellow"
                              [color]="selectionColors.yellow"
                              [selected]="selectedColor === selectionColors.yellow"
                              mode="mark"
                              (selectedChanged)="onSelectionChange($event)">
-      </aspect-marking-button>
-      <aspect-marking-button *ngIf="elementModel.highlightableTurquoise"
+      </aspect-text-marking-button>
+      <aspect-text-marking-button *ngIf="elementModel.highlightableTurquoise"
                              [color]="selectionColors.turquoise"
                              [selected]="selectedColor === selectionColors.turquoise"
                              mode="mark"
                              (selectedChanged)="onSelectionChange($event)">
-      </aspect-marking-button>
-      <aspect-marking-button *ngIf="elementModel.highlightableOrange"
+      </aspect-text-marking-button>
+      <aspect-text-marking-button *ngIf="elementModel.highlightableOrange"
                              [color]="selectionColors.orange"
                              [selected]="selectedColor === selectionColors.orange"
                              mode="mark"
                              (selectedChanged)="onSelectionChange($event)">
-      </aspect-marking-button>
-      <aspect-marking-button [color]="selectionColors.delete"
+      </aspect-text-marking-button>
+      <aspect-text-marking-button [color]="selectionColors.delete"
                              [selected]="selectedColor === selectionColors.delete"
                              mode="delete"
                              (selectedChanged)="onSelectionChange($event)">
-      </aspect-marking-button>
+      </aspect-text-marking-button>
     </div>`,
   styles: [
     '.marking-bar {position: sticky; top: 0; margin-bottom: 13px;}'
   ]
 })
-export class MarkingBarComponent {
+export class TextMarkingBarComponent {
   @Input() elementModel!: TextElement;
   @Output() selectionChanged = new EventEmitter<{
     active: boolean,

projects/common/components/marking-bar/marking-button.component.ts → projects/common/components/text-marking-bar/text-marking-button.component.ts

@@ -3,7 +3,7 @@ import {
 } from '@angular/core';
 
 @Component({
-  selector: 'aspect-marking-button',
+  selector: 'aspect-text-marking-button',
   template: `
     <button type="button"
             class="marking-button"
@@ -24,7 +24,7 @@ import {
     '.marking-icon {margin-top: -4px}'
   ]
 })
-export class MarkingButtonComponent {
+export class TextMarkingButtonComponent {
   @Input() selected!: boolean;
   @Input() color!: string;
   @Input() mode!: 'mark' | 'delete';

projects/common/components/ui-elements/text.component.ts

@@ -9,13 +9,13 @@ import { TextElement, ValueChangeElement } from '../../interfaces/elements';
   template: `
     <div [style.width.%]="100"
          [style.height.%]="100">
-        <aspect-marking-bar
+        <aspect-text-marking-bar
                 *ngIf="elementModel.highlightableYellow ||
             elementModel.highlightableTurquoise ||
             elementModel.highlightableOrange"
                 [elementModel]="elementModel"
                 (selectionChanged)="onSelectionChanged($event)">
-        </aspect-marking-bar>
+        </aspect-text-marking-bar>
         <div #textContainerRef class="text-container"
              [class.orange-selection]="selectedColor === 'orange'"
              [class.yellow-selection]="selectedColor === 'yellow'"

projects/common/shared.module.ts

@@ -49,9 +49,9 @@ import { SpellCorrectComponent } from './components/ui-elements/spell-correct.co
 import { DropListSimpleComponent } from './components/ui-elements/drop-list-simple.component';
 import { FrameComponent } from './components/ui-elements/frame.component';
 import { ToggleButtonComponent } from './components/ui-elements/toggle-button.component';
-import { MarkingBarComponent } from './components/marking-bar/marking-bar.component';
+import { TextMarkingBarComponent } from './components/text-marking-bar/text-marking-bar.component';
 import { StyleMarksPipe } from './pipes/styleMarks.pipe';
-import { MarkingButtonComponent } from './components/marking-bar/marking-button.component';
+import { TextMarkingButtonComponent } from './components/text-marking-bar/text-marking-button.component';
 import { CompoundChildOverlayComponent } from './components/compound-child-overlay.component';
 import { MarkListPipe } from './pipes/mark-list.pipe';
 
@@ -103,9 +103,9 @@ import { MarkListPipe } from './pipes/mark-list.pipe';
     SpellCorrectComponent,
     FrameComponent,
     ToggleButtonComponent,
-    MarkingBarComponent,
+    TextMarkingBarComponent,
     StyleMarksPipe,
-    MarkingButtonComponent,
+    TextMarkingButtonComponent,
     CompoundChildOverlayComponent,
     MarkListPipe
   ],
@@ -124,7 +124,7 @@ import { MarkListPipe } from './pipes/mark-list.pipe';
     MatDialogModule,
     TranslateModule,
     SafeResourceHTMLPipe,
-    MarkingBarComponent,
+    TextMarkingBarComponent,
     ToggleButtonComponent,
     TextFieldComponent,
     DropListSimpleComponent,

projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.html

@@ -9,9 +9,9 @@
   <div class="marking-bar-container"
        (mousedown)="$event.stopPropagation()"
        cdkDrag>
-    <aspect-marking-bar
+    <aspect-text-marking-bar
         [elementModel]="elementModel"
         (selectionChanged)="applySelection.emit($event)">
-    </aspect-marking-bar>
+    </aspect-text-marking-bar>
   </div>
 </ng-template>