Clean up button toggle

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

@@ -35,11 +35,11 @@
       <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,16 @@
-<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-selected-color]="progressColorCssValue"
+  [style.--progress-selected-hover-color]="progressColorHoverCssValue"
+  [style.--progress-selected-bg-color]="progressBgColorCssValue"
+  [style.--progress-selected-hover-bg-color]="progressHoverBgColorCssValue"
+  (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,12 +1,12 @@
-.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) {
+:host:not(.selected) .book {
   --progress-color: hsl(0, 0%, 80%);
   --progress-hover-color: hsl(0, 0%, 70%);
   --progress-bg-color: hsl(0, 0%, 90%);
@@ -26,11 +26,19 @@
     var(--progress-bg-color) var(--progress)
   );
 
-  &.disabled:not(.selected) {
-    opacity: 0.7;
+  &:hover {
+    background-image: linear-gradient(
+      90deg,
+      var(--progress-hover-color) var(--progress),
+      var(--progress-hover-bg-color) var(--progress)
+    );
   }
+}
 
-  &:not(.disabled) {
-    cursor: pointer;
-  }
+:host.disabled:not(.selected) {
+  opacity: 0.7;
+}
+
+:host:not(.disabled) {
+  cursor: pointer;
 }

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

@@ -1,8 +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 {
   hue: number;
@@ -43,26 +41,29 @@ 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;
+
+  @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];
+  // @Input() hues: number[] = [230];
 
   colorSpec = availableColors[3];
 
-  constructor(private readonly i18n: I18nService) {}
-
-  bookName(book: number): string {
-    return this.i18n.localizeBook(book);
-  }
+  constructor() {}
 
   toggleSelected(): void {
     if (!this.disabled) {
@@ -78,18 +79,6 @@ 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}%`;
   }

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

@@ -15,27 +15,23 @@ 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', default: false }
+  },
+  render: args => ({
+    props: args,
+    template: `<app-toggle-book [selected]="selected" [disabled]="disabled" [progress]="progress" [hues]="hues" [book]="1">Genesis</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>;
 
 export const Default: Story = {
   args: {
-    book: 1,
-    progress: 0.37,
-    hues: [0]
+    progress: 0.37
+    // hues: [0]
   }
 };
 
@@ -48,21 +44,20 @@ export const Selected: Story = {
 
 export const TwoColor: Story = {
   args: {
-    ...Selected.args,
-    hues: [0, 240]
+    ...Selected.args
+    // hues: [0, 240]
   }
 };
 
 export const ThreeColor: Story = {
   args: {
-    ...Selected.args,
-    hues: [0, 120, 240]
+    ...Selected.args
+    // hues: [0, 120, 240]
   }
 };
 
 export const Disabled: Story = {
   args: {
-    book: 8,
     disabled: true
   }
 };

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 }
     }
   ]
 })