SF-3451 Fix Lynx overlay RTL styles (#3367)

Author: siltomato

src/SIL.XForge.Scripture/ClientApp/src/app/translate/editor/lynx/insights/lynx-insight-overlay.service.spec.ts

@@ -3,6 +3,7 @@ import { ComponentPortal } from '@angular/cdk/portal';
 import { fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { Subject } from 'rxjs';
 import { anything, capture, instance, mock, verify, when } from 'ts-mockito';
+import { I18nService } from 'xforge-common/i18n.service';
 import { configureTestingModule } from 'xforge-common/test-utils';
 import { LynxEditor, LynxTextModelConverter } from './lynx-editor';
 import { LynxInsight } from './lynx-insight';
@@ -11,13 +12,15 @@ import { LynxInsightOverlayComponent } from './lynx-insight-overlay/lynx-insight
 
 const mockOverlay = mock(Overlay);
 const mockScrollDispatcher = mock(ScrollDispatcher);
+const mockedI18nService = mock(I18nService);
 
 describe('LynxInsightOverlayService', () => {
   configureTestingModule(() => ({
     providers: [
       LynxInsightOverlayService,
       { provide: Overlay, useMock: mockOverlay },
-      { provide: ScrollDispatcher, useMock: mockScrollDispatcher }
+      { provide: ScrollDispatcher, useMock: mockScrollDispatcher },
+      { provide: I18nService, useMock: mockedI18nService }
     ]
   }));
 
@@ -157,6 +160,28 @@ describe('LynxInsightOverlayService', () => {
       expect(env.service.close).not.toHaveBeenCalled();
     }));
   });
+
+  describe('direction handling', () => {
+    it('should use rtl i18n direction when creating overlay config', fakeAsync(() => {
+      const env = new TestEnvironment();
+      when(mockedI18nService.direction).thenReturn('rtl');
+
+      env.openOverlay();
+
+      const capturedConfig = env.captureOverlayConfig();
+      expect(capturedConfig.direction).toBe('rtl');
+    }));
+
+    it('should use ltr i18n direction when creating overlay config', fakeAsync(() => {
+      const env = new TestEnvironment();
+      when(mockedI18nService.direction).thenReturn('ltr');
+
+      env.openOverlay();
+
+      const capturedConfig = env.captureOverlayConfig();
+      expect(capturedConfig.direction).toBe('ltr');
+    }));
+  });
 });
 
 class TestEnvironment {
@@ -345,6 +370,11 @@ class TestEnvironment {
     return portalCaptor.last()[0];
   }
 
+  captureOverlayConfig(): any {
+    const configCaptor = capture(mockOverlay.create);
+    return configCaptor.last()[0];
+  }
+
   /**
    * Simulates a click with optional element targeting.
    * @param selector If null, simulates a click outside. Otherwise, simulates a click on the given selector.

src/SIL.XForge.Scripture/ClientApp/src/app/translate/editor/lynx/insights/lynx-insight-overlay.service.ts

@@ -3,6 +3,7 @@ import { ComponentPortal } from '@angular/cdk/portal';
 import { ScrollDispatcher } from '@angular/cdk/scrolling';
 import { Injectable, NgZone } from '@angular/core';
 import { asyncScheduler, observeOn, Subject, take, takeUntil } from 'rxjs';
+import { I18nService } from 'xforge-common/i18n.service';
 import { LynxEditor, LynxTextModelConverter } from './lynx-editor';
 import { LynxInsight } from './lynx-insight';
 import { LynxInsightOverlayComponent } from './lynx-insight-overlay/lynx-insight-overlay.component';
@@ -23,7 +24,8 @@ export class LynxInsightOverlayService {
   constructor(
     private overlay: Overlay,
     private scrollDispatcher: ScrollDispatcher,
-    private ngZone: NgZone
+    private ngZone: NgZone,
+    private i18n: I18nService
   ) {}
 
   get isOpen(): boolean {
@@ -125,7 +127,8 @@ export class LynxInsightOverlayService {
     return {
       positionStrategy: this.getPositionStrategy(origin),
       panelClass: 'lynx-insight-overlay-panel',
-      scrollStrategy: this.overlay.scrollStrategies.reposition()
+      scrollStrategy: this.overlay.scrollStrategies.reposition(),
+      direction: this.i18n.direction
     };
   }
 

src/SIL.XForge.Scripture/ClientApp/src/app/translate/editor/lynx/insights/lynx-insight-overlay/lynx-insight-overlay.component.html

@@ -25,7 +25,12 @@ <h1>
       }
       <div class="secondary-actions">
         @if (menuActions.length > 0) {
-          <mat-icon [matTooltip]="t('tooltip_actions')" [matMenuTriggerFor]="actionMenu" class="action-menu-trigger">
+          <mat-icon
+            [matTooltip]="t('tooltip_actions')"
+            [matMenuTriggerFor]="actionMenu"
+            [dir]="i18n.direction"
+            class="action-menu-trigger"
+          >
             more_horiz
           </mat-icon>
         }

src/SIL.XForge.Scripture/ClientApp/src/app/translate/editor/lynx/insights/lynx-insight-overlay/lynx-insight-overlay.component.scss

@@ -31,6 +31,7 @@ mat-icon {
 
 .main-section {
   background-color: $mainSectionBGColor;
+  position: relative;
 
   // When prompt is for single insight, or insight is selected from multi-picker
   &.focused {
@@ -79,6 +80,8 @@ mat-icon {
 
       h1 {
         font-size: 0.8em;
+        padding-inline-end: 1em;
+        margin-inline-end: auto;
       }
 
       &:not(:last-child) {
@@ -102,8 +105,6 @@ mat-icon {
 
       .ellipsis-icon {
         color: $secondaryTextColor;
-        margin-inline-start: auto;
-        padding-inline-start: 1em;
         flex-shrink: 0;
       }
     }
@@ -162,6 +163,7 @@ h1 {
       position: absolute;
       inset-inline-start: 0;
       font-size: 1.7em;
+      direction: inherit;
     }
 
     &:hover {

src/SIL.XForge.Scripture/ClientApp/src/app/translate/editor/lynx/insights/lynx-insight-overlay/lynx-insight-overlay.component.spec.ts

@@ -3,6 +3,7 @@ import { ComponentFixture, fakeAsync, flush, TestBed } from '@angular/core/testi
 import { By } from '@angular/platform-browser';
 import { TextDocId } from 'src/app/core/models/text-doc';
 import { anything, instance, mock, verify, when } from 'ts-mockito';
+import { I18nService } from 'xforge-common/i18n.service';
 import { configureTestingModule, TestTranslocoModule } from 'xforge-common/test-utils';
 import { UICommonModule } from 'xforge-common/ui-common.module';
 import { LynxEditor, LynxTextModelConverter } from '../lynx-editor';
@@ -17,6 +18,7 @@ const mockLynxInsightOverlayService = mock(LynxInsightOverlayService);
 const mockLynxWorkspaceService = mock(LynxWorkspaceService);
 const mockLynxEditor = mock<LynxEditor>();
 const mockTextModelConverter = mock<LynxTextModelConverter>();
+const mockedI18nService = mock(I18nService);
 
 // Default insight config
 const defaultInsightConfig: LynxInsightConfig = {
@@ -51,15 +53,11 @@ describe('LynxInsightOverlayComponent', () => {
       { provide: LynxInsightStateService, useMock: mockLynxInsightStateService },
       { provide: LynxInsightOverlayService, useMock: mockLynxInsightOverlayService },
       { provide: LynxWorkspaceService, useMock: mockLynxWorkspaceService },
+      { provide: I18nService, useMock: mockedI18nService },
       { provide: EDITOR_INSIGHT_DEFAULTS, useValue: defaultInsightConfig }
     ]
   }));
 
-  it('should create', fakeAsync(() => {
-    const env = new TestEnvironment();
-    expect(env.component).toBeTruthy();
-  }));
-
   it('should update contents when primary action clicked', fakeAsync(() => {
     const env = new TestEnvironment();
 
@@ -69,6 +67,22 @@ describe('LynxInsightOverlayComponent', () => {
     verify(mockLynxEditor.updateContents(anything(), 'user')).once();
     expect().nothing();
   }));
+
+  it('should use rtl direction when i18n.direction is rtl', fakeAsync(() => {
+    when(mockedI18nService.direction).thenReturn('rtl');
+    const env = new TestEnvironment();
+
+    const menuTrigger = env.fixture.debugElement.query(By.css('.action-menu-trigger'));
+    expect(menuTrigger.nativeElement.getAttribute('dir')).toBe('rtl');
+  }));
+
+  it('should use ltr direction when i18n.direction is ltr', fakeAsync(() => {
+    when(mockedI18nService.direction).thenReturn('ltr');
+    const env = new TestEnvironment();
+
+    const menuTrigger = env.fixture.debugElement.query(By.css('.action-menu-trigger'));
+    expect(menuTrigger.nativeElement.getAttribute('dir')).toBe('ltr');
+  }));
 });
 
 class TestEnvironment {
@@ -89,15 +103,16 @@ class TestEnvironment {
     const textModelConverter = instance(mockTextModelConverter);
 
     const insight = this.createTestInsight();
-    const action = this.createTestAction(insight, true);
+    const primaryAction = this.createTestAction(insight, true);
+    const secondaryAction = this.createTestAction(insight, false);
 
     // Set up mocks for the editor root element
     const mockRoot = document.createElement('div');
     when(mockLynxEditor.getRoot()).thenReturn(mockRoot);
     when(mockLynxEditor.focus()).thenReturn();
     when(mockLynxEditor.updateContents(anything(), anything())).thenReturn();
     when(mockTextModelConverter.dataDeltaToEditorDelta(anything())).thenCall(delta => delta);
-    when(mockLynxWorkspaceService.getActions(anything())).thenResolve([action]);
+    when(mockLynxWorkspaceService.getActions(anything())).thenResolve([primaryAction, secondaryAction]);
 
     this.hostComponent.insights = [insight];
     this.hostComponent.editor = editor;

src/SIL.XForge.Scripture/ClientApp/src/app/translate/editor/lynx/insights/lynx-insight-overlay/lynx-insight-overlay.component.ts

@@ -3,6 +3,7 @@ import { Component, DestroyRef, ElementRef, EventEmitter, Inject, Input, OnInit,
 import { MAT_TOOLTIP_DEFAULT_OPTIONS } from '@angular/material/tooltip';
 import { Delta } from 'quill';
 import { fromEvent } from 'rxjs';
+import { I18nService } from 'xforge-common/i18n.service';
 import { quietTakeUntilDestroyed } from 'xforge-common/util/rxjs-util';
 import { LynxEditor, LynxTextModelConverter } from '../lynx-editor';
 import { EDITOR_INSIGHT_DEFAULTS, LynxInsight, LynxInsightAction, LynxInsightConfig } from '../lynx-insight';
@@ -58,6 +59,7 @@ export class LynxInsightOverlayComponent implements OnInit {
     private readonly insightState: LynxInsightStateService,
     private readonly overlayService: LynxInsightOverlayService,
     private readonly lynxWorkspaceService: LynxWorkspaceService,
+    readonly i18n: I18nService,
     @Inject(DOCUMENT) private readonly document: Document,
     @Inject(EDITOR_INSIGHT_DEFAULTS) private readonly config: LynxInsightConfig
   ) {}