Clean up button toggle

src/SIL.XForge.Scripture/ClientApp/src/app/shared/book-multi-select/book-multi-select.component.html

@@ -33,13 +33,12 @@
   <div class="flex-row">
     @for (book of bookOptions; track book) {
       <app-toggle-book
-        [book]="book.bookNum"
         [selected]="book.selected"
-        (selected)="onChipListChange(book)"
+        (selectedChanged)="onChipListChange(book)"
         [disabled]="readonly"
         [progress]="book.progressPercentage / 100"
-        (change)="onChipListChange(book)"
-      ></app-toggle-book>
+        >{{ "canon.book_names." + book.bookId | transloco }}</app-toggle-book
+      >
     }
   </div>
 </ng-container>

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.html

@@ -1,20 +1,17 @@
-<ng-container transloco>
-  <span
-    class="book"
-    [style.--progress]="progressCssValue"
-    [style.--progress-selected-color]="progressColorCssValue"
-    [style.--progress-selected-hover-color]="progressColorHoverCssValue"
-    [style.--progress-selected-bg-color]="progressBgColorCssValue"
-    [style.--progress-selected-hover-bg-color]="progressHoverBgColorCssValue"
-    [class.selected]="selected"
-    [class.disabled]="disabled"
-    (click)="toggleSelected()"
-    (keypress)="onKeyPress($event)"
-    [matTooltip]="progressDescription"
-    matRipple
-    [matRippleDisabled]="disabled"
-    [tabindex]="disabled ? -1 : 0"
-  >
-    {{ bookName(book) }}
-  </span>
-</ng-container>
+<span
+  class="book"
+  [style.--progress]="progressCssValue"
+  [style.--progress-color]="progressColorCssValue"
+  [style.--progress-hover-color]="progressColorHoverCssValue"
+  [style.--progress-bg-color]="progressBgColorCssValue"
+  [style.--progress-hover-bg-color]="progressHoverBgColorCssValue"
+  [style.--progress-direction-degrees]="progressDirectionCssValue"
+  (click)="toggleSelected()"
+  (keypress)="onKeyPress($event)"
+  [matTooltip]="progressDescription"
+  matRipple
+  [matRippleDisabled]="disabled"
+  [tabindex]="disabled ? -1 : 0"
+>
+  <ng-content></ng-content>
+</span>

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.scss

@@ -1,16 +1,5 @@
-.book.selected {
+:host.selected .book {
   color: white;
-  --progress-color: var(--progress-selected-color);
-  --progress-hover-color: var(--progress-selected-hover-color);
-  --progress-bg-color: var(--progress-selected-bg-color);
-  --progress-hover-bg-color: var(--progress-selected-hover-bg-color);
-}
-
-.book:not(.selected) {
-  --progress-color: hsl(0, 0%, 80%);
-  --progress-hover-color: hsl(0, 0%, 70%);
-  --progress-bg-color: hsl(0, 0%, 90%);
-  --progress-hover-bg-color: hsl(0, 0%, 80%);
 }
 
 .book {
@@ -19,18 +8,28 @@
   padding: 0 16px;
   line-height: 32px;
   border-radius: 1000px;
+  min-width: 5em;
+  text-align: center;
 
   background-image: linear-gradient(
-    90deg,
+    var(--progress-direction-degrees),
     var(--progress-color) var(--progress),
     var(--progress-bg-color) var(--progress)
   );
+}
+
+:host:not(.disabled) .book:hover {
+  background-image: linear-gradient(
+    var(--progress-direction-degrees),
+    var(--progress-hover-color) var(--progress),
+    var(--progress-hover-bg-color) var(--progress)
+  );
+}
 
-  &.disabled:not(.selected) {
-    opacity: 0.7;
-  }
+:host.disabled:not(.selected) {
+  opacity: 0.7;
+}
 
-  &:not(.disabled) {
-    cursor: pointer;
-  }
+:host:not(.disabled) {
+  cursor: pointer;
 }

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.ts

@@ -1,7 +1,6 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
 import { MatRippleModule } from '@angular/material/core';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { TranslocoModule } from '@ngneat/transloco';
 import { I18nService } from '../../../../xforge-common/i18n.service';
 
 interface ButtonColorSpec {
@@ -43,31 +42,39 @@ const availableColors: ButtonColorSpec[] = [
 @Component({
   selector: 'app-toggle-book',
   standalone: true,
-  imports: [TranslocoModule, MatTooltipModule, MatRippleModule],
+  imports: [MatTooltipModule, MatRippleModule],
   templateUrl: './toggle-book.component.html',
   styleUrl: './toggle-book.component.scss'
 })
 export class ToggleBookComponent {
-  @Output() selectedChanged = new EventEmitter<number>();
-  @Input() selected = false;
-  @Input() disabled = false;
+  @Output() selectedChanged = new EventEmitter<boolean>();
+
+  @HostBinding('class.selected')
+  @Input()
+  selected = false;
+
+  @HostBinding('class.disabled')
+  @Input()
+  disabled = false;
+
   @Input() borderWidth = 2;
-  @Input() book!: number;
   @Input() progress?: number;
-  @Input() hues: number[] = [230];
 
-  colorSpec = availableColors[3];
+  selectedColorSpec = availableColors[3];
+  unselectedColorSpec: ButtonColorSpec = { hue: 0, saturation: 0, dark: 80, light: 90, hoverLight: 80, hoverDark: 70 };
 
-  constructor(private readonly i18n: I18nService) {}
+  get colorSpec(): ButtonColorSpec {
+    return this.selected ? this.selectedColorSpec : this.unselectedColorSpec;
+  }
 
-  bookName(book: number): string {
-    return this.i18n.localizeBook(book);
+  constructor(readonly i18n: I18nService) {
+    console.log(i18n.direction);
   }
 
   toggleSelected(): void {
     if (!this.disabled) {
       this.selected = !this.selected;
-      this.selectedChanged.emit(this.book);
+      this.selectedChanged.emit(this.selected);
     }
   }
 
@@ -78,33 +85,29 @@ export class ToggleBookComponent {
     }
   }
 
-  get backgroundCssGradientStripes(): string {
-    const percentPerStripe = 12.5;
-    const colors = this.hues.map(hue => `hsl(${hue}, 80%, 60%)`);
-    let gradient = [];
-    for (const [index, color] of colors.entries()) {
-      const from = index * percentPerStripe;
-      const to = (index + 1) * percentPerStripe;
-      gradient.push(`${color} ${from}%, ${color} ${to}%`);
-    }
-    return `repeating-linear-gradient(135deg, ${gradient.join(', ')})`;
-  }
-
   get progressCssValue(): string {
     return `${(this.progress ?? 0) * 100}%`;
   }
 
   get progressColorCssValue(): string {
-    return `hsl(${this.colorSpec.hue}, ${this.colorSpec.saturation}%, ${this.colorSpec.dark}%)`;
+    return this.hsl(this.colorSpec.hue, this.colorSpec.saturation, this.colorSpec.dark);
   }
   get progressColorHoverCssValue(): string {
-    return `hsl(${this.colorSpec.hue}, ${this.colorSpec.saturation}%, ${this.colorSpec.hoverDark}%)`;
+    return this.hsl(this.colorSpec.hue, this.colorSpec.saturation, this.colorSpec.hoverDark);
   }
   get progressBgColorCssValue(): string {
-    return `hsl(${this.colorSpec.hue}, ${this.colorSpec.saturation}%, ${this.colorSpec.light}%)`;
+    return this.hsl(this.colorSpec.hue, this.colorSpec.saturation, this.colorSpec.light);
   }
   get progressHoverBgColorCssValue(): string {
-    return `hsl(${this.colorSpec.hue}, ${this.colorSpec.saturation}%, ${this.colorSpec.hoverLight}%)`;
+    return this.hsl(this.colorSpec.hue, this.colorSpec.saturation, this.colorSpec.hoverLight);
+  }
+
+  get progressDirectionCssValue(): string {
+    return this.i18n.direction === 'rtl' ? '270deg' : '90deg';
+  }
+
+  hsl(hue: number, saturation: number, light: number): string {
+    return `hsl(${hue}, ${saturation}%, ${light}%)`;
   }
 
   get progressDescription(): string {

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.stories.ts

@@ -15,27 +15,25 @@ const meta: Meta = {
     })
   ],
   argTypes: {
-    progress: { control: { type: 'range', min: 0, max: 1, step: 0.01 } }
-  }
+    progress: { control: { type: 'range', min: 0, max: 1, step: 0.01 } },
+    selected: { control: 'boolean' },
+    text: { control: 'text' }
+  },
+  render: args => ({
+    props: args,
+    template: `<app-toggle-book [selected]="selected" [disabled]="disabled" [progress]="progress">${args.text}</app-toggle-book>`
+  })
 };
 
 export default meta;
 
-interface StoryState {
-  book: number;
-  progress?: number;
-  hues: number[];
-  selected: boolean;
-  disabled: boolean;
-}
-
-type Story = StoryObj<StoryState>;
+type Story = StoryObj<ToggleBookComponent & { text: string }>;
 
 export const Default: Story = {
   args: {
-    book: 1,
-    progress: 0.37,
-    hues: [0]
+    text: 'Genesis',
+    selected: false,
+    progress: 0.37
   }
 };
 
@@ -46,23 +44,19 @@ export const Selected: Story = {
   }
 };
 
-export const TwoColor: Story = {
-  args: {
-    ...Selected.args,
-    hues: [0, 240]
-  }
-};
-
-export const ThreeColor: Story = {
+export const Disabled: Story = {
   args: {
-    ...Selected.args,
-    hues: [0, 120, 240]
+    ...Default.args,
+    disabled: true
   }
 };
 
-export const Disabled: Story = {
+export const RTL: Story = {
   args: {
-    book: 8,
-    disabled: true
+    ...Default.args,
+    text: 'تكوين'
+  },
+  parameters: {
+    locale: 'ar'
   }
 };

src/SIL.XForge.Scripture/ClientApp/src/xforge-common/ui-common.module.ts

@@ -33,7 +33,7 @@ import { MatStepperModule } from '@angular/material/stepper';
 import { MatTableModule } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipModule } from '@angular/material/tooltip';
 import { TranslocoService } from '@ngneat/transloco';
 import { NgCircleProgressModule } from 'ng-circle-progress';
 import { AutofocusDirective } from './autofocus.directive';
@@ -153,6 +153,10 @@ const appFlexLayoutBreakPoints = [
     {
       provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
       useValue: { appearance: 'outline', hideRequiredMarker: true }
+    },
+    {
+      provide: MAT_TOOLTIP_DEFAULT_OPTIONS,
+      useValue: { disableTooltipInteractivity: true }
     }
   ]
 })