Merge pull request #241 from evt-project/feature/prose-verse-toggler

Feature/prose verse toggler

src/app/app.config.ts

@@ -236,4 +236,4 @@ export interface CustomEditorialConvention {
     };
 }
 
-export type TextFlow = 'prose' | 'verses';
+export type TextFlow = 'prose' | 'prose_mixed' | '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/lb/lb.component.html

@@ -3,7 +3,7 @@
     [attr.id]="data.id" [attr.data-rend]="data.rend || ''" [attr.data-facs]="data.facs || ''">
     <ng-container *ngIf="data">
         <br *ngIf="displayBlock$ | async"/>
-        <span class="lineN" *ngIf="data.n && (displayBlock$ | async)">{{data.n}}</span>
+        <span class="lineN" *ngIf="(data.n && (displayBlock$ | async))">{{data.n}}</span>
     </ng-container>
     <ng-container *ngIf="displayInline$ | async">&nbsp;</ng-container>
 </span>

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]="'Text Flow' | 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"> {{'option_' + item | translate}}</span>
+    </ng-template>
+    <ng-template ng-label-tmp let-item="item">
+        <evt-icon
+            [iconInfo]="getProseVersesTogglerIcon(item)"
+            label-left>
+        </evt-icon>
+        {{'option_' + 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', 'prose_mixed', 'verses'];
+
+  public selectedType: TextFlow = 'prose';
+
+  getProseVersesTogglerIcon(textFlowMode: TextFlow): EvtIconInfo {
+    return { icon: textFlowMode === 'verses' ? 'align-justify' : 'align-left', iconSet: 'fas' };
+  }
+
+  updateSelectedType(textFlowType: TextFlow) {
+    this.textModeSelectionChange.emit(textFlowType);
+  };
+
+}

src/app/components/verse/verse.component.html

@@ -1,6 +1,6 @@
 <span class="verse l " [evtHtmlAttributes]="data.attributes"
 	[class.display-block]="displayBlock$ | async" [class]="data.class" >
-	<span class="verse-num" [class.hidden]="(displayBlock$ | async) && showNumber">{{data.n}}</span>
+	<span *ngIf="!plainTextFlow" class="verse-num" [class.verse-baloon]="baloon" [class.hidden]="(displayBlock$ | async) && showNumber">{{data.n}}</span>
 	<evt-source-note *ngIf="data.source !== null || data.analogue !== null" [data]="data"></evt-source-note>
 	<evt-content-viewer *ngFor="let el of data.content" [content]="el" [editionLevel]="editionLevel"
 		[itemsToHighlight]="itemsToHighlight" [evtHighlight]="highlightData" [textFlow]="textFlow" [withDeletions]="withDeletions" [selectedLayer]="selectedLayer">

src/app/components/verse/verse.component.scss

@@ -38,4 +38,10 @@
             }
         }
     }
+    .verse-baloon {
+        border: 1px solid #000000b5;
+        border-radius: 8px;
+        padding-bottom: 1rem;
+        padding-right: 0.1rem;
+    }
 }

src/app/components/verse/verse.component.ts

@@ -28,6 +28,7 @@ export class VerseComponent {
         // unless current text flow is prose
         // In critical edition verses are always shown as block items, unless current text flow is prose
         switch (this.editionLevel) {
+          case 'changesView':
           case 'diplomatic':
           case 'interpretative':
             return this.textFlow === 'verses' || !hasLines;
@@ -45,6 +46,14 @@ export class VerseComponent {
     return !isNaN(num) && num % this.verseNumberPrinter !== 0;
   }
 
+  get baloon() {
+    return this.textFlow !== 'verses';
+  }
+
+  get plainTextFlow() {
+    return this.textFlow === 'prose';
+  }
+
   constructor(
     private evtModelService: EVTModelService,
   ) {

src/app/components/verses-group/verses-group.component.ts

@@ -25,6 +25,7 @@ export class VersesGroupComponent {
         // In diplomatic and interpretative edition, if the text doesn't have any line, verses group are shown as block items
         // In critical edition verses are always shown as block items
         switch (this.editionLevel) {
+          case 'changesView':
           case 'diplomatic':
           case 'interpretative':
             return !hasLines;

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/config/custom-styles.css

@@ -32,10 +32,6 @@
     vertical-align: text-bottom;
 }
 
-evt-verse {
-    display: block;
-}
-
 evt-page :not(evt-apparatus-entry-detail) .head {
     font-weight: bold;
     display: inline-block;

src/assets/i18n/en.json

@@ -51,6 +51,9 @@
     "omitted": "omitted",
     "prose": "Prose",
     "verses": "Verses",
+    "option_prose": "Prose",
+    "option_prose_mixed": "Prose with verse numbers",
+    "option_verses": "Verses",
     "page": "Page {{value}}",
     "front": "Front",
     "mainText": "Main text",

src/assets/i18n/it.json

@@ -50,6 +50,9 @@
   "omitted": "omissione",
   "prose": "Prosa",
   "verses": "Versi",
+  "option_prose": "Prose",
+  "option_prose_mixed": "Prose with verse numbers",
+  "option_verses": "Verses",
   "page": "Pagina {{value}}",
   "front": "Front",
   "mainText": "Testo principale",

src/styles.scss

@@ -334,4 +334,14 @@ evt-mod-detail .tab-content > .active {
 
 evt-main-header .svg-inline--fa {
   height: 0.85em;
+}
+
+evt-page :not(evt-apparatus-entry-detail) .head {
+  font-weight: bold;
+  display: block;
+  padding: 0.5em 0.1em 0.5em 0em;
+}
+
+[ng-reflect-text-flow="verses"] evt-verse {
+  display: block;
 }