Replace the verse-prose button with a select

src/app/app.config.ts

@@ -236,4 +236,4 @@ export interface CustomEditorialConvention {
     };
 }
 
-export type TextFlow = 'prose' | 'verses';
+export type TextFlow = 'prose' | 'proseWithVerseNumbers' | 'verses';

src/app/app.module.ts

@@ -141,6 +141,7 @@ import { TitleStmtComponent } from './components/title-stmt/title-stmt.component
 import { VerseComponent } from './components/verse/verse.component';
 import { VersesGroupComponent } from './components/verses-group/verses-group.component';
 import { VersionPanelComponent } from './panels/version-panel/version-panel.component';
+import { VerseProseSelectComponent } from './components/verse-prose-select/verse-prose-select.component';
 import { WordComponent } from './components/word/word.component';
 import { WitnessPanelComponent } from './panels/witness-panel/witness-panel.component';
 import { XmlBeautifyPipe } from './pipes/xml-beautify.pipe';
@@ -275,6 +276,7 @@ const DynamicComponents = [
     TextTextComponent,
     TextVersionsComponent,
     VersionPanelComponent,
+    VerseProseSelectComponent,
     WitnessPanelComponent,
     XmlBeautifyPipe,
     ...DynamicComponents,

src/app/components/verse-prose-select/verse-prose-select.component.html

@@ -0,0 +1,22 @@
+<ng-select 
+    [items]="textFlowTypes" 
+    [multiple]="false" 
+    [closeOnSelect]="true" 
+    [searchable]="false"
+    [placeholder]="'selectItems' | translate"
+    [(ngModel)]="selectedType" 
+    [disabled]="textFlowTypes.length === 0"
+    [clearable]="false"
+    (change)="updateSelectedType($event)">
+    <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index" let-search="searchTerm">
+        <evt-icon [iconInfo]="getProseVersesTogglerIcon(item)"></evt-icon>
+        <span class="ng-value-label"> {{item | translate}}</span>
+    </ng-template>
+    <ng-template ng-label-tmp let-item="item">
+        <evt-icon
+            [iconInfo]="getProseVersesTogglerIcon(item)"
+            label-left>
+        </evt-icon>
+        {{item | translate}}
+    </ng-template>
+</ng-select>

src/app/components/verse-prose-select/verse-prose-select.component.scss

@@ -0,0 +1,34 @@
+ng-select {
+    width: 13.5rem;
+    margin-left: 0.3rem;
+}
+
+// ng-select overrides
+::ng-deep .ng-select {
+    min-width: 150px;
+}
+
+::ng-deep .ng-dropdown-panel {
+    .ng-dropdown-panel-items {
+        .ng-optgroup {
+            font-size: 90%;
+            font-variant: small-caps;
+        }
+
+        .ng-option {
+            padding-left: 10px !important;
+        }
+    }
+}
+
+.entities-select-toolbar {
+    display: flex;
+
+    .btn {
+        flex-grow: 1;
+    }
+}
+
+.select-all-btn {
+    cursor: pointer;
+}

src/app/components/verse-prose-select/verse-prose-select.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { VerseProseSelectComponent } from './verse-prose-select.component';
+
+describe('VerseProseSelectComponent', () => {
+  let component: VerseProseSelectComponent;
+  let fixture: ComponentFixture<VerseProseSelectComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ VerseProseSelectComponent ],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VerseProseSelectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/verse-prose-select/verse-prose-select.component.ts

@@ -0,0 +1,27 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { TextFlow } from 'src/app/app.config';
+import { EvtIconInfo } from 'src/app/ui-components/icon/icon.component';
+
+@Component({
+  selector: 'evt-verse-prose-select',
+  templateUrl: './verse-prose-select.component.html',
+  styleUrls: ['./verse-prose-select.component.scss'],
+})
+
+export class VerseProseSelectComponent {
+
+  @Output() textModeSelectionChange: EventEmitter<TextFlow> = new EventEmitter();
+
+  public textFlowTypes: TextFlow[] = ['prose', 'proseWithVerseNumbers', 'verses'];
+
+  public selectedType: TextFlow = null;
+
+  getProseVersesTogglerIcon(textFlowMode: TextFlow): EvtIconInfo {
+    return { icon: textFlowMode === 'verses' ? 'align-justify' : 'align-left', iconSet: 'fas' };
+  }
+
+  updateSelectedType(textFlowType: TextFlow) {
+    this.textModeSelectionChange.emit(textFlowType);
+  };
+
+}

src/app/panels/text-panel/text-panel.component.html

@@ -44,12 +44,7 @@
             [active]="secondaryContent === 'SEARCH_RESULTS'">
         </evt-button>
         <evt-entities-select (selectionChange)="itemsToHighlight$.next($event)"></evt-entities-select>
-        <evt-button *ngIf="enableProseVersesToggler"
-            [iconLeft]="proseVersesTogglerIcon"
-            [label]="textFlow | translate"
-            additionalClasses="ms-1"
-            (btnClick)="toggleProseVerses()">
-        </evt-button>
+        <evt-verse-prose-select *ngIf="enableProseVersesToggler" (textModeSelectionChange)="toggleProseVerses($event)"></evt-verse-prose-select>
         <evt-button *ngIf="enableHideDeletionsToggler"
             [iconLeft]="hideDeletionsTogglerIcon"
             [label]="deletionsText | translate "

src/app/panels/text-panel/text-panel.component.ts

@@ -160,11 +160,6 @@ export class TextPanelComponent {
 
   public deletionsText: 'hidesDeletions' | 'showsDeletions' = 'showsDeletions';
 
-  public get proseVersesTogglerIcon(): EvtIconInfo {
-
-    return { icon: this.textFlow === 'prose' ? 'align-left' : 'align-justify', iconSet: 'fas' };
-  }
-
   public get hideDeletionsTogglerIcon(): EvtIconInfo {
     return { icon: (this.showDeletions) ? 'eye' : 'eye-slash', iconSet: 'fas' };
   }
@@ -203,8 +198,8 @@ export class TextPanelComponent {
     }
   }
 
-  toggleProseVerses() {
-    this.textFlow = this.textFlow === 'prose' ? 'verses' : 'prose';
+  toggleProseVerses(mode: TextFlow) {
+    this.textFlow = mode;
   }
 
   toggleHideDeletions() {

src/assets/i18n/en.json

@@ -50,6 +50,7 @@
     "missingP": "missing",
     "omitted": "omitted",
     "prose": "Prose",
+    "proseWithVerseNumbers": "Prose with verse numbers",
     "verses": "Verses",
     "page": "Page {{value}}",
     "front": "Front",
@@ -195,7 +196,7 @@
     "asc": "Ascendent",
     "desc": "Descendent",
     "reprintedIn": "Repr. in",
-    "editedBy": "Edited by"
+    "editedBy": "Edited by",
     "corrSeq": "Correction sequence",
     "criticalNote": "Critical note",
     "showsDeletions": "Show deletions",

src/assets/i18n/it.json

@@ -49,6 +49,7 @@
   "missingP": "mancanti",
   "omitted": "omissione",
   "prose": "Prosa",
+  "proseWithVerseNumbers": "Prosa con numeri dei versi",
   "verses": "Versi",
   "page": "Pagina {{value}}",
   "front": "Front",
@@ -194,7 +195,7 @@
   "asc": "Crescente",
   "desc": "Decrescente",
   "reprintedIn": "Rist. in",
-  "editedBy": "A cura di"
+  "editedBy": "A cura di",
   "corrSeq": "Sequenza correzioni",
   "criticalNote": "Nota critica",
   "showsDeletions": "Mostra cancellazioni",