From 5ce4407242bc623914fbeed5480b64435d3c5de0 Mon Sep 17 00:00:00 2001 From: Raymond Luong Date: Fri, 17 Jan 2025 16:15:21 -0700 Subject: [PATCH] SF-3111 Fix question dialog verse reference error message overlap --- .../question-dialog.component.html | 8 +++--- .../question-dialog.component.scss | 7 ++++-- .../question-dialog.component.ts | 25 +++++++++---------- 3 files changed, 22 insertions(+), 18 deletions(-) diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/question-dialog/question-dialog.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/question-dialog/question-dialog.component.html index c2abd322dc..6832f76663 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/question-dialog/question-dialog.component.html +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/question-dialog/question-dialog.component.html @@ -45,9 +45,11 @@

[projectDoc]="projectDoc" > - -
- +
+ +
+ +
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/question-dialog/question-dialog.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/question-dialog/question-dialog.component.scss index c4f871d6e6..402696e5fe 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/question-dialog/question-dialog.component.scss +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/question-dialog/question-dialog.component.scss @@ -3,6 +3,9 @@ .mat-mdc-dialog-content.content-padding { padding-top: 0.5em; + display: flex; + flex-direction: column; + row-gap: 1em; } .dialog-title { @@ -15,7 +18,7 @@ display: flex; flex-direction: row; flex-wrap: wrap; - column-gap: 1em; + gap: 1em; justify-content: center; } @@ -36,7 +39,7 @@ mat-form-field { .text-container { height: 10em; - margin-bottom: 3em; + margin-bottom: 2em; app-checking-text { position: relative; } diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/question-dialog/question-dialog.component.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/question-dialog/question-dialog.component.ts index 6d131e5176..0a84006acf 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/question-dialog/question-dialog.component.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/question-dialog/question-dialog.component.ts @@ -1,5 +1,6 @@ -import { Component, Inject, OnInit, ViewChild } from '@angular/core'; -import { AbstractControl, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms'; +import { Component, DestroyRef, Inject, OnInit, ViewChild } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms'; import { MAT_DIALOG_DATA, MatDialogConfig, MatDialogRef } from '@angular/material/dialog'; import { translate } from '@ngneat/transloco'; import { VerseRef } from '@sillsdev/scripture'; @@ -8,7 +9,6 @@ import { Question } from 'realtime-server/lib/esm/scriptureforge/models/question import { toStartAndEndVerseRefs } from 'realtime-server/lib/esm/scriptureforge/models/verse-ref-data'; import { DialogService } from 'xforge-common/dialog.service'; import { I18nService } from 'xforge-common/i18n.service'; -import { SubscriptionDisposable } from 'xforge-common/subscription-disposable'; import { QuestionDoc } from '../../core/models/question-doc'; import { SFProjectProfileDoc } from '../../core/models/sf-project-profile-doc'; import { TextDocId } from '../../core/models/text-doc'; @@ -41,17 +41,17 @@ export interface QuestionDialogResult { templateUrl: './question-dialog.component.html', styleUrls: ['./question-dialog.component.scss'] }) -export class QuestionDialogComponent extends SubscriptionDisposable implements OnInit { +export class QuestionDialogComponent implements OnInit { @ViewChild(TextAndAudioComponent) textAndAudio?: TextAndAudioComponent; modeLabel = this.data && this.data.questionDoc != null ? translate('question_dialog.edit_question') : translate('question_dialog.new_question'); parentAndStartMatcher = new ParentAndStartErrorStateMatcher(); - versesForm: UntypedFormGroup = new UntypedFormGroup( + versesForm: FormGroup = new FormGroup( { - scriptureStart: new UntypedFormControl('', [Validators.required, SFValidators.verseStr(this.data.textsByBookId)]), - scriptureEnd: new UntypedFormControl('', [SFValidators.verseStr(this.data.textsByBookId)]) + scriptureStart: new FormControl('', [Validators.required, SFValidators.verseStr(this.data.textsByBookId)]), + scriptureEnd: new FormControl('', [SFValidators.verseStr(this.data.textsByBookId)]) }, SFValidators.verseStartBeforeEnd ); @@ -63,10 +63,9 @@ export class QuestionDialogComponent extends SubscriptionDisposable implements O private readonly dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) private data: QuestionDialogData, readonly i18n: I18nService, - readonly dialogService: DialogService - ) { - super(); - } + readonly dialogService: DialogService, + private readonly destroyRef: DestroyRef + ) {} get scriptureStart(): AbstractControl { return this.versesForm.controls.scriptureStart; @@ -138,7 +137,7 @@ export class QuestionDialogComponent extends SubscriptionDisposable implements O // set initial enabled/disabled state for scriptureEnd this.updateScriptureEndEnabled(); - this.subscribe(this.scriptureStart.valueChanges, () => { + this.scriptureStart.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => { if (this.scriptureStart.valid) { this.updateSelection(); } else { @@ -147,7 +146,7 @@ export class QuestionDialogComponent extends SubscriptionDisposable implements O // update enabled/disabled state for scriptureEnd this.updateScriptureEndEnabled(); }); - this.subscribe(this.scriptureEnd.valueChanges, () => { + this.scriptureEnd.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => { if (this.scriptureEnd.valid) { this.updateSelection(); } else {