From a3defebd403c4d0af1ef52cd3ff7681e90fbec8c Mon Sep 17 00:00:00 2001 From: Nathaniel Paulus Date: Tue, 20 Aug 2024 16:00:31 -0400 Subject: [PATCH 1/3] Create improved book toggling component --- .../book-multi-select.component.html | 15 ++-- .../book-multi-select.component.ts | 3 +- .../toggle-book/toggle-book.component.html | 19 +++++ .../toggle-book/toggle-book.component.scss | 51 ++++++++++++++ .../toggle-book/toggle-book.component.ts | 70 +++++++++++++++++++ .../toggle-book/toggle-book.stories.ts | 68 ++++++++++++++++++ 6 files changed, 215 insertions(+), 11 deletions(-) create mode 100644 src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.html create mode 100644 src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.scss create mode 100644 src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.ts create mode 100644 src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.stories.ts diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/shared/book-multi-select/book-multi-select.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/shared/book-multi-select/book-multi-select.component.html index d620b6a1278..f2fe7c1db9d 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/shared/book-multi-select/book-multi-select.component.html +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/shared/book-multi-select/book-multi-select.component.html @@ -32,17 +32,12 @@ }
@for (book of bookOptions; track book) { - - - {{ "canon.book_names." + book.bookId | transloco }} - - + > }
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/shared/book-multi-select/book-multi-select.component.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/shared/book-multi-select/book-multi-select.component.ts index 34e0e2bd219..516f731701d 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/shared/book-multi-select/book-multi-select.component.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/shared/book-multi-select/book-multi-select.component.ts @@ -3,6 +3,7 @@ import { MatChipsModule } from '@angular/material/chips'; import { TranslocoModule } from '@ngneat/transloco'; import { Canon } from '@sillsdev/scripture'; import { UICommonModule } from 'xforge-common/ui-common.module'; +import { ToggleBookComponent } from '../../translate/draft-generation/toggle-book/toggle-book.component'; export interface BookOption { bookNum: number; @@ -14,7 +15,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 implements OnChanges { diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.html new file mode 100644 index 00000000000..51cc617a5c6 --- /dev/null +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.html @@ -0,0 +1,19 @@ + + + + {{ bookName(book) }} + + + diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.scss new file mode 100644 index 00000000000..3812ee60761 --- /dev/null +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.scss @@ -0,0 +1,51 @@ +:host { + --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%); + + user-select: none; +} + +.wrapper { + display: inline-block; + border-radius: 1000px; +} + +.wrapper:has(.selected) { + background-image: var(--background-image); +} + +.book { + display: block; + background-color: var(--progress-bg-color); + padding: 0 16px; + line-height: 32px; + border-radius: 1000px; + margin: var(--border-width); + position: relative; + + background-image: linear-gradient( + 90deg, + var(--progress-color) var(--progress), + var(--progress-bg-color) var(--progress) + ); + + &.disabled:not(.selected) { + opacity: 0.7; + } + + &:not(.disabled) { + cursor: pointer; + } + + &:hover:not(.disabled), + &:focus:not(.disabled) { + outline: none; + background-image: linear-gradient( + 90deg, + var(--progress-hover-color) var(--progress), + var(--progress-hover-bg-color) var(--progress) + ); + } +} diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.ts new file mode 100644 index 00000000000..32075e49a3d --- /dev/null +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.ts @@ -0,0 +1,70 @@ +import { Component, EventEmitter, 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'; + +@Component({ + selector: 'app-toggle-book', + standalone: true, + imports: [TranslocoModule, MatTooltipModule, MatRippleModule], + templateUrl: './toggle-book.component.html', + styleUrl: './toggle-book.component.scss' +}) +export class ToggleBookComponent { + @Output() selectedChanged = new EventEmitter(); + @Input() selected = false; + @Input() disabled = false; + @Input() borderWidth = 2; + @Input() book!: number; + @Input() progress?: number; + @Input() hues: number[] = [230]; + + constructor(private readonly i18n: I18nService) {} + + bookName(book: number): string { + return this.i18n.localizeBook(book); + } + + toggleSelected(): void { + if (!this.disabled) { + this.selected = !this.selected; + this.selectedChanged.emit(this.book); + } + } + + onKeyPress(event: KeyboardEvent): void { + if (event.key === 'Enter' || event.key === ' ') { + this.toggleSelected(); + event.preventDefault(); + } + } + + 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 borderWidthCssValue(): string { + return `${this.borderWidth}px`; + } + + 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` : ''; + } +} diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.stories.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.stories.ts new file mode 100644 index 00000000000..e9dcfb187a7 --- /dev/null +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.stories.ts @@ -0,0 +1,68 @@ +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 } } + } +}; + +export default meta; + +interface StoryState { + book: number; + progress?: number; + hues: number[]; + selected: boolean; + disabled: boolean; +} + +type Story = StoryObj; + +export const Default: Story = { + args: { + book: 1, + progress: 0.37, + hues: [0] + } +}; + +export const Selected: Story = { + args: { + ...Default.args, + selected: true + } +}; + +export const TwoColor: Story = { + args: { + ...Selected.args, + hues: [0, 240] + } +}; + +export const ThreeColor: Story = { + args: { + ...Selected.args, + hues: [0, 120, 240] + } +}; + +export const Disabled: Story = { + args: { + book: 8, + disabled: true + } +}; From dad95d34d6d8012415ee6a2ad771def2cd4f5a5e Mon Sep 17 00:00:00 2001 From: Nathaniel Paulus Date: Thu, 22 Aug 2024 10:55:54 -0400 Subject: [PATCH 2/3] Update book toggle component to use background instead of border --- .../toggle-book/toggle-book.component.html | 33 ++++++------ .../toggle-book/toggle-book.component.scss | 37 ++++---------- .../toggle-book/toggle-book.component.ts | 51 ++++++++++++++++++- 3 files changed, 77 insertions(+), 44 deletions(-) diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.html index 51cc617a5c6..d51a4514b0d 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.html +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.html @@ -1,19 +1,20 @@ - - - {{ bookName(book) }} - + + {{ bookName(book) }} diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.scss index 3812ee60761..dc8d3171ab9 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.scss +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.scss @@ -1,29 +1,24 @@ -:host { +.book.selected { + 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%); - - user-select: none; -} - -.wrapper { - display: inline-block; - border-radius: 1000px; -} - -.wrapper:has(.selected) { - background-image: var(--background-image); } .book { - display: block; - background-color: var(--progress-bg-color); + display: inline-block; + user-select: none; padding: 0 16px; line-height: 32px; border-radius: 1000px; - margin: var(--border-width); - position: relative; background-image: linear-gradient( 90deg, @@ -38,14 +33,4 @@ &:not(.disabled) { cursor: pointer; } - - &:hover:not(.disabled), - &:focus:not(.disabled) { - outline: none; - background-image: linear-gradient( - 90deg, - var(--progress-hover-color) var(--progress), - var(--progress-hover-bg-color) var(--progress) - ); - } } diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.ts index 32075e49a3d..f81a7767c7e 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.ts @@ -4,6 +4,42 @@ import { MatTooltipModule } from '@angular/material/tooltip'; import { TranslocoModule } from '@ngneat/transloco'; 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, @@ -20,6 +56,8 @@ export class ToggleBookComponent { @Input() progress?: number; @Input() hues: number[] = [230]; + colorSpec = availableColors[3]; + constructor(private readonly i18n: I18nService) {} bookName(book: number): string { @@ -56,8 +94,17 @@ export class ToggleBookComponent { return `${(this.progress ?? 0) * 100}%`; } - get borderWidthCssValue(): string { - return `${this.borderWidth}px`; + get progressColorCssValue(): string { + return `hsl(${this.colorSpec.hue}, ${this.colorSpec.saturation}%, ${this.colorSpec.dark}%)`; + } + get progressColorHoverCssValue(): string { + return `hsl(${this.colorSpec.hue}, ${this.colorSpec.saturation}%, ${this.colorSpec.hoverDark}%)`; + } + get progressBgColorCssValue(): string { + return `hsl(${this.colorSpec.hue}, ${this.colorSpec.saturation}%, ${this.colorSpec.light}%)`; + } + get progressHoverBgColorCssValue(): string { + return `hsl(${this.colorSpec.hue}, ${this.colorSpec.saturation}%, ${this.colorSpec.hoverLight}%)`; } get progressDescription(): string { From 1a80a2f33646397f785880f2505a97a41bdf1a27 Mon Sep 17 00:00:00 2001 From: Nathaniel Paulus Date: Thu, 22 Aug 2024 11:58:32 -0400 Subject: [PATCH 3/3] Clean up button toggle --- .../book-multi-select.component.html | 7 +-- .../toggle-book/toggle-book.component.html | 37 ++++++----- .../toggle-book/toggle-book.component.scss | 37 ++++++----- .../toggle-book/toggle-book.component.ts | 61 ++++++++++--------- .../toggle-book/toggle-book.stories.ts | 48 +++++++-------- .../src/xforge-common/ui-common.module.ts | 6 +- 6 files changed, 96 insertions(+), 100 deletions(-) diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/shared/book-multi-select/book-multi-select.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/shared/book-multi-select/book-multi-select.component.html index 0a7fb52e1aa..445e9bb8ee9 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/shared/book-multi-select/book-multi-select.component.html +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/shared/book-multi-select/book-multi-select.component.html @@ -33,13 +33,12 @@
@for (book of bookOptions; track book) { + >{{ "canon.book_names." + book.bookId | transloco }} }
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.html index d51a4514b0d..bdaaaac4eb8 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.html +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.html @@ -1,20 +1,17 @@ - - - {{ bookName(book) }} - - + + + diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.scss index dc8d3171ab9..51af42d9561 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.scss +++ b/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; } diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.ts index f81a7767c7e..7dc312d24cb 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.component.ts +++ b/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(); - @Input() selected = false; - @Input() disabled = false; + @Output() selectedChanged = new EventEmitter(); + + @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 { diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.stories.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.stories.ts index e9dcfb187a7..86b46ae327b 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/toggle-book/toggle-book.stories.ts +++ b/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: `${args.text}` + }) }; export default meta; -interface StoryState { - book: number; - progress?: number; - hues: number[]; - selected: boolean; - disabled: boolean; -} - -type Story = StoryObj; +type Story = StoryObj; 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' } }; diff --git a/src/SIL.XForge.Scripture/ClientApp/src/xforge-common/ui-common.module.ts b/src/SIL.XForge.Scripture/ClientApp/src/xforge-common/ui-common.module.ts index 9a17b59b7c3..c55ff003e44 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/xforge-common/ui-common.module.ts +++ b/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 } } ] })