Create improved book toggling component

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

@@ -32,18 +32,13 @@
   }
   <div class="flex-row">
     @for (book of bookOptions; track book) {
-      <mat-chip-listbox
-        hideSingleSelectionIndicator
-        [selectable]="!readonly"
-        class="book-multi-select"
+      <app-toggle-book
+        [selected]="book.selected"
+        (selectedChanged)="onChipListChange(book)"
         [disabled]="readonly"
-        (change)="onChipListChange(book)"
+        [progress]="book.progressPercentage / 100"
+        >{{ "canon.book_names." + book.bookId | transloco }}</app-toggle-book
       >
-        <mat-chip-option [value]="book" [selected]="book.selected">
-          {{ "canon.book_names." + book.bookId | transloco }}
-          <div class="border-fill" [style.width]="book.progressPercentage + '%'"></div>
-        </mat-chip-option>
-      </mat-chip-listbox>
     }
   </div>
 </ng-container>

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

@@ -6,6 +6,7 @@ import { Canon } from '@sillsdev/scripture';
 import { filter, firstValueFrom, map } from 'rxjs';
 import { SubscriptionDisposable } from 'xforge-common/subscription-disposable';
 import { UICommonModule } from 'xforge-common/ui-common.module';
+import { ToggleBookComponent } from '../../translate/draft-generation/toggle-book/toggle-book.component';
 import { ProgressService } from '../progress-service/progress-service';
 
 export interface BookOption {
@@ -19,7 +20,7 @@ export interface BookOption {
   selector: 'app-book-multi-select',
   templateUrl: './book-multi-select.component.html',
   standalone: true,
-  imports: [UICommonModule, MatChipsModule, TranslocoModule],
+  imports: [UICommonModule, MatChipsModule, TranslocoModule, ToggleBookComponent],
   styleUrls: ['./book-multi-select.component.scss']
 })
 export class BookMultiSelectComponent extends SubscriptionDisposable implements OnInit, OnChanges {

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

@@ -0,0 +1,17 @@
+<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

@@ -0,0 +1,35 @@
+:host.selected .book {
+  color: white;
+}
+
+.book {
+  display: inline-block;
+  user-select: none;
+  padding: 0 16px;
+  line-height: 32px;
+  border-radius: 1000px;
+  min-width: 5em;
+  text-align: center;
+
+  background-image: linear-gradient(
+    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)
+  );
+}
+
+: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

@@ -0,0 +1,120 @@
+import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
+import { MatRippleModule } from '@angular/material/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { I18nService } from '../../../../xforge-common/i18n.service';
+
+interface ButtonColorSpec {
+  hue: number;
+  saturation: number;
+  light: number;
+  dark: number;
+  hoverLight: number;
+  hoverDark: number;
+}
+
+const availableColors: ButtonColorSpec[] = [
+  // some are commented out because they are ugly, or too similar to others
+  { hue: 0 },
+  // { hue: 30, dark: 35 },
+  // { hue: 60, dark: 35 },
+  { hue: 90, dark: 35 },
+  // { hue: 120, dark: 35 },
+  // { hue: 150, dark: 35 },
+  { hue: 180, dark: 35 },
+  { hue: 210 },
+  { hue: 240 },
+  { hue: 270 },
+  { hue: 300 },
+  { hue: 330 }
+].map(spec => {
+  const dark = spec['dark'] ?? 55;
+  const light = spec['light'] ?? Math.round(Math.min(dark * 1.18, 100));
+  return {
+    ...spec,
+    dark,
+    light,
+    hoverLight: spec['hoverLight'] ?? Math.round(Math.min(light * 1.07, 100)),
+    hoverDark: spec['hoverDark'] ?? Math.round(Math.min(dark * 1.07, 100)),
+    saturation: spec['saturation'] ?? 80
+  };
+});
+
+@Component({
+  selector: 'app-toggle-book',
+  standalone: true,
+  imports: [MatTooltipModule, MatRippleModule],
+  templateUrl: './toggle-book.component.html',
+  styleUrl: './toggle-book.component.scss'
+})
+export class ToggleBookComponent {
+  @Output() selectedChanged = new EventEmitter<boolean>();
+
+  @HostBinding('class.selected')
+  @Input()
+  selected = false;
+
+  @HostBinding('class.disabled')
+  @Input()
+  disabled = false;
+
+  @Input() borderWidth = 2;
+  @Input() progress?: number;
+
+  selectedColorSpec = availableColors[3];
+  unselectedColorSpec: ButtonColorSpec = { hue: 0, saturation: 0, dark: 80, light: 90, hoverLight: 80, hoverDark: 70 };
+
+  get colorSpec(): ButtonColorSpec {
+    return this.selected ? this.selectedColorSpec : this.unselectedColorSpec;
+  }
+
+  constructor(readonly i18n: I18nService) {
+    console.log(i18n.direction);
+  }
+
+  toggleSelected(): void {
+    if (!this.disabled) {
+      this.selected = !this.selected;
+      this.selectedChanged.emit(this.selected);
+    }
+  }
+
+  onKeyPress(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      this.toggleSelected();
+      event.preventDefault();
+    }
+  }
+
+  get progressCssValue(): string {
+    return `${(this.progress ?? 0) * 100}%`;
+  }
+
+  get progressColorCssValue(): string {
+    return this.hsl(this.colorSpec.hue, this.colorSpec.saturation, this.colorSpec.dark);
+  }
+  get progressColorHoverCssValue(): string {
+    return this.hsl(this.colorSpec.hue, this.colorSpec.saturation, this.colorSpec.hoverDark);
+  }
+  get progressBgColorCssValue(): string {
+    return this.hsl(this.colorSpec.hue, this.colorSpec.saturation, this.colorSpec.light);
+  }
+  get progressHoverBgColorCssValue(): string {
+    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 {
+    if (this.progress == null) return '';
+
+    // avoid showing 100% when it's not quite there
+    let percent = this.progress > 0.99 && this.progress < 1 ? 99 : Math.round(this.progress * 100);
+    return this.progress != null ? `${Math.round(percent)}% translated` : '';
+  }
+}

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

@@ -0,0 +1,62 @@
+import { CommonModule } from '@angular/common';
+import { TranslocoModule } from '@ngneat/transloco';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { TranslocoMarkupModule } from 'ngx-transloco-markup';
+import { I18nStoryModule } from '../../../../xforge-common/i18n-story.module';
+import { UICommonModule } from '../../../../xforge-common/ui-common.module';
+import { ToggleBookComponent } from './toggle-book.component';
+
+const meta: Meta = {
+  title: 'Translate/ToggleBook',
+  component: ToggleBookComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [UICommonModule, I18nStoryModule, CommonModule, TranslocoModule, TranslocoMarkupModule]
+    })
+  ],
+  argTypes: {
+    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;
+
+type Story = StoryObj<ToggleBookComponent & { text: string }>;
+
+export const Default: Story = {
+  args: {
+    text: 'Genesis',
+    selected: false,
+    progress: 0.37
+  }
+};
+
+export const Selected: Story = {
+  args: {
+    ...Default.args,
+    selected: true
+  }
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true
+  }
+};
+
+export const RTL: Story = {
+  args: {
+    ...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 }
     }
   ]
 })