fix(core): Hint/Dropdown fix directives order mattering

taiga-family · Feb 21, 2023 · 74f111d · 74f111d
1 parent 4452896
commit 74f111d
Show file tree

Hide file tree

Showing 46 changed files with 237 additions and 97 deletions.
diff --git a/projects/addon-editor/components/color-selector/color-selector.template.html b/projects/addon-editor/components/color-selector/color-selector.template.html
@@ -65,11 +65,11 @@
             type="button"
             size="xs"
             appearance=""
+            tuiHintDescribe
             class="t-direction"
             [class.t-direction_active]="isDirectionActive(button)"
             [icon]="getIcon(button)"
             [tuiHint]="button"
-            [tuiHintDescribe]="''"
             (click)="onDirectionChange(button)"
         ></button>
     </div>

diff --git a/projects/addon-editor/components/editor/portal/editor-portal.directive.ts b/projects/addon-editor/components/editor/portal/editor-portal.directive.ts
@@ -12,13 +12,15 @@ import {TuiEditorPortalService} from './editor-portal.service';
     ],
 })
 export class TuiEditorPortalDirective extends TuiRectAccessor {
+    readonly type = 'viewport';
+
     constructor(
         @Inject(ElementRef) private readonly elementRef: ElementRef<HTMLElement>,
     ) {
         super();
     }
 
-    override getClientRect(): ClientRect {
+    getClientRect(): ClientRect {
         return this.elementRef.nativeElement.getBoundingClientRect();
     }
 }
diff --git a/projects/addon-editor/components/toolbar-tools/align-content/align-content.template.html b/projects/addon-editor/components/toolbar-tools/align-content/align-content.template.html
@@ -12,8 +12,8 @@
             icon="tuiIconAlignLeftLarge"
             appearance="icon"
             tuiHintDirection="top-left"
+            tuiHintDescribe
             [tuiHint]="texts.justify"
-            [tuiHintDescribe]="''"
             [pseudoActive]="align.open"
             [focusable]="align.open"
         ></button>

diff --git a/projects/addon-editor/components/toolbar-tools/code/code.component.html b/projects/addon-editor/components/toolbar-tools/code/code.component.html
@@ -9,8 +9,8 @@
         icon="tuiIconCodeLarge"
         appearance="icon"
         tuiHintDirection="top-left"
+        tuiHintDescribe
         [tuiHint]="hintText$ | async"
-        [tuiHintDescribe]="''"
         [pseudoActive]="codes.open || (insideCode$ | async)"
         [focusable]="codes.open"
     ></button>

diff --git a/...addon-editor/components/toolbar-tools/details/details-remove/details-remove.template.html b/...addon-editor/components/toolbar-tools/details/details-remove/details-remove.template.html
@@ -6,8 +6,8 @@
     icon="tuiIconSpoilerDeleteLarge"
     appearance="icon"
     tuiHintDirection="top-left"
+    tuiHintDescribe
     [tuiHint]="text.removeDetails"
-    [tuiHintDescribe]="''"
     [focusable]="false"
     [disabled]="!!(disabled$ | async)"
     (click)="removeDetails()"

diff --git a/projects/addon-editor/components/toolbar-tools/details/details.template.html b/projects/addon-editor/components/toolbar-tools/details/details.template.html
@@ -6,8 +6,8 @@
     icon="tuiIconSpoilerLarge"
     appearance="icon"
     tuiHintDirection="top-left"
+    tuiHintDescribe
     [tuiHint]="text.setDetails"
-    [tuiHintDescribe]="''"
     [focusable]="false"
     (click)="setDetails()"
 ></button>
diff --git a/projects/addon-editor/components/toolbar-tools/font-size/font-size.template.html b/projects/addon-editor/components/toolbar-tools/font-size/font-size.template.html
@@ -9,8 +9,8 @@
         appearance="icon"
         icon="tuiIconFontLarge"
         tuiHintDirection="top-left"
+        tuiHintDescribe
         [tuiHint]="fontText$ | async"
-        [tuiHintDescribe]="''"
         [pseudoActive]="fonts.open"
         [focusable]="fonts.open"
     ></button>

diff --git a/projects/addon-editor/components/toolbar-tools/font-style/font-style.template.html b/projects/addon-editor/components/toolbar-tools/font-style/font-style.template.html
@@ -13,8 +13,8 @@
             appearance="icon"
             tuiHintDirection="top-left"
             automation-id="toolbar__font-style-button"
+            tuiHintDescribe
             [tuiHint]="texts.fontStyle"
-            [tuiHintDescribe]="''"
             [pseudoActive]="format.open || state.bold || state.italic || state.underline || state.strike"
             [focusable]="format.open"
         ></button>

diff --git a/projects/addon-editor/components/toolbar-tools/group/group.component.html b/projects/addon-editor/components/toolbar-tools/group/group.component.html
@@ -4,9 +4,9 @@
     size="s"
     icon="tuiIconPlusLarge"
     appearance="icon"
+    tuiHintDescribe
     [focusable]="false"
     [tuiHint]="insertGroupText$ | async"
-    [tuiHintDescribe]="''"
     (click)="addGroup()"
 ></button>
 
@@ -16,9 +16,9 @@
     size="s"
     icon="tuiIconCloseLarge"
     appearance="icon"
+    tuiHintDescribe
     [focusable]="false"
     [disabled]="!!(disabled$ | async)"
     [tuiHint]="removeGroupText$ | async"
-    [tuiHintDescribe]="''"
     (click)="removeGroup()"
 ></button>
diff --git a/projects/addon-editor/components/toolbar-tools/highlight-color/highlight-color.template.html b/projects/addon-editor/components/toolbar-tools/highlight-color/highlight-color.template.html
@@ -13,9 +13,9 @@
         appearance="icon"
         icon="tuiIconHiliteLarge"
         automation-id="toolbar__hilite-button"
+        tuiHintDescribe
         class="t-tool"
         [tuiHint]="backColorText$ | async"
-        [tuiHintDescribe]="''"
         [pseudoActive]="hilite.open"
         [focusable]="hilite.open"
     ></button>

diff --git a/projects/addon-editor/components/toolbar-tools/list-configs/list-configs.template.html b/projects/addon-editor/components/toolbar-tools/list-configs/list-configs.template.html
@@ -13,8 +13,8 @@
             appearance="icon"
             tuiHintDirection="top-left"
             automation-id="toolbar__ordering-list-button"
+            tuiHintDescribe
             [tuiHint]="texts.list"
-            [tuiHintDescribe]="''"
             [pseudoActive]="list?.open || listState?.unordered || listState?.ordered || false"
             [focusable]="list.open"
         ></button>

diff --git a/...cts/addon-editor/components/toolbar-tools/table-cell-color/table-cell-color.template.html b/...cts/addon-editor/components/toolbar-tools/table-cell-color/table-cell-color.template.html
@@ -13,8 +13,8 @@
             tuiHintDirection="top-left"
             appearance="icon"
             icon="tuiIconPaintLarge"
+            tuiHintDescribe
             [tuiHint]="colorText$ | async"
-            [tuiHintDescribe]="''"
             [pseudoActive]="colorSelect.open"
             [focusable]="colorSelect.open"
             [disabled]="!isActive"

diff --git a/projects/addon-editor/components/toolbar-tools/table-create/table-create.template.html b/projects/addon-editor/components/toolbar-tools/table-create/table-create.template.html
@@ -11,8 +11,8 @@
         icon="tuiIconTableLarge"
         appearance="icon"
         tuiHintDirection="top-left"
+        tuiHintDescribe
         [tuiHint]="insertTableText$ | async"
-        [tuiHintDescribe]="''"
         [focusable]="table.open"
     ></button>
 </tui-hosted-dropdown>

diff --git a/...s/addon-editor/components/toolbar-tools/table-merge-cells/table-merge-cells.template.html b/...s/addon-editor/components/toolbar-tools/table-merge-cells/table-merge-cells.template.html
@@ -11,9 +11,9 @@
         size="s"
         appearance="icon"
         tuiHintDirection="top-left"
+        tuiHintDescribe
         [icon]="can.mergeCells ? 'tuiIconTableMergeLarge' : 'tuiIconTableSplitLarge'"
         [tuiHint]="can.mergeCells ? texts.mergeCells : texts.splitCells"
-        [tuiHintDescribe]="''"
         [focusable]="false"
         [disabled]="!can.mergeCells && !can.splitCells"
         (click)="can.mergeCells ? mergeCells() : splitCell()"

diff --git a/.../components/toolbar-tools/table-row-column-manager/table-row-column-manager.template.html b/.../components/toolbar-tools/table-row-column-manager/table-row-column-manager.template.html
@@ -11,8 +11,8 @@
         icon="tuiIconAddRowLarge"
         appearance="icon"
         tuiHintDirection="top-left"
+        tuiHintDescribe
         [tuiHint]="rowsColumnsManagingText$ | async"
-        [tuiHintDescribe]="''"
         [focusable]="tableCommand.open"
         [disabled]="!active"
     ></button>

diff --git a/projects/addon-editor/components/toolbar-tools/text-color/text-color.template.html b/projects/addon-editor/components/toolbar-tools/text-color/text-color.template.html
@@ -14,8 +14,8 @@
         appearance="icon"
         tuiHintDirection="top-left"
         automation-id="toolbar__color-button"
+        tuiHintDescribe
         [tuiHint]="foreColorText$ | async"
-        [tuiHintDescribe]="''"
         [pseudoActive]="color.open"
         [focusable]="color.open"
     ></button>

diff --git a/projects/addon-editor/components/toolbar/toolbar.template.html b/projects/addon-editor/components/toolbar/toolbar.template.html
@@ -31,9 +31,9 @@
             icon="tuiIconUndoLarge"
             appearance="icon"
             tuiHintDirection="top-left"
+            tuiHintDescribe
             class="t-tool t-tool_margin"
             [tuiHint]="texts.undo"
-            [tuiHintDescribe]="''"
             [disabled]="undoDisabled"
             [focusable]="false"
             (click)="undo()"
@@ -46,9 +46,9 @@
             icon="tuiIconRedoLarge"
             appearance="icon"
             tuiHintDirection="top-left"
+            tuiHintDescribe
             class="t-tool t-tool_margin"
             [tuiHint]="texts.redo"
-            [tuiHintDescribe]="''"
             [disabled]="redoDisabled"
             [focusable]="false"
             (click)="redo()"
@@ -96,9 +96,9 @@
             icon="tuiIconQuoteLarge"
             appearance="icon"
             tuiHintDirection="top-left"
+            tuiHintDescribe
             class="t-tool t-tool_margin"
             [tuiHint]="texts.quote"
-            [tuiHintDescribe]="''"
             [pseudoActive]="blockquote"
             [disabled]="unorderedList || orderedList"
             [focusable]="false"
@@ -120,9 +120,9 @@
                 icon="tuiIconLinkLarge"
                 appearance="icon"
                 tuiHintDirection="top-left"
+                tuiHintDescribe
                 class="t-tool"
                 [tuiHint]="texts.link"
-                [tuiHintDescribe]="''"
                 [pseudoActive]="link.open || a"
                 [focusable]="link.open"
             ></button>
@@ -148,10 +148,10 @@
                 icon="tuiIconAnchorLarge"
                 tuiHintDirection="top-left"
                 appearance="icon"
+                tuiHintDescribe
                 [focusable]="false"
                 [pseudoActive]="anchor.open || jumpAnchor"
                 [tuiHint]="texts.insertAnchor"
-                [tuiHintDescribe]="''"
             ></button>
             <ng-template #anchorDropdown>
                 <tui-edit-link
@@ -171,9 +171,9 @@
                 icon="tuiIconPaperclipLarge"
                 appearance="icon"
                 tuiHintDirection="top-left"
+                tuiHintDescribe
                 class="t-tool t-tool_margin"
                 [tuiHint]="texts.attach"
-                [tuiHintDescribe]="''"
                 [focusable]="false"
                 (click)="fileUpload.click()"
             ></button>
@@ -203,9 +203,9 @@
             icon="tuiIconSubscriptLarge"
             appearance="icon"
             tuiHintDirection="top-left"
+            tuiHintDescribe
             class="t-tool t-tool_margin"
             [tuiHint]="texts.subscript"
-            [tuiHintDescribe]="''"
             [pseudoActive]="subscript"
             [focusable]="false"
             (click)="toggleSubscript()"
@@ -220,9 +220,9 @@
             icon="tuiIconSuperscriptLarge"
             appearance="icon"
             tuiHintDirection="top-left"
+            tuiHintDescribe
             class="t-tool t-tool_margin"
             [tuiHint]="texts.superscript"
-            [tuiHintDescribe]="''"
             [pseudoActive]="superscript"
             [focusable]="false"
             (click)="toggleSuperscript()"
@@ -266,9 +266,9 @@
             icon="tuiIconTeXLarge"
             appearance="icon"
             tuiHintDirection="top-left"
+            tuiHintDescribe
             class="t-tool"
             [tuiHint]="texts.tex"
-            [tuiHintDescribe]="''"
             [focusable]="false"
             (click)="onTeX()"
         ></button>
@@ -285,9 +285,9 @@
                 icon="tuiIconImageLarge"
                 appearance="icon"
                 tuiHintDirection="top-left"
+                tuiHintDescribe
                 class="t-tool"
                 [tuiHint]="texts.image"
-                [tuiHintDescribe]="''"
                 [focusable]="false"
                 (click)="image.click()"
             ></button>
@@ -311,9 +311,9 @@
             icon="tuiIconHrLarge"
             appearance="icon"
             tuiHintDirection="top-left"
+            tuiHintDescribe
             class="t-tool t-tool_margin"
             [tuiHint]="texts.insertHorizontalRule"
-            [tuiHintDescribe]="''"
             [focusable]="false"
             (click)="insertHorizontalRule()"
         ></button>
@@ -331,9 +331,9 @@
             icon="tuiIconClearFormatLarge"
             appearance="icon"
             tuiHintDirection="top-left"
+            tuiHintDescribe
             class="t-tool t-tool_margin"
             [tuiHint]="texts.clear"
-            [tuiHintDescribe]="''"
             [focusable]="false"
             (click)="removeFormat()"
         ></button>

diff --git a/projects/addon-preview/components/preview/preview.template.html b/projects/addon-preview/components/preview/preview.template.html
@@ -39,9 +39,9 @@
             icon="tuiIconRotate"
             tuiHintDirection="top-right"
             tuiHintAppearance="onDark"
+            tuiHintDescribe
             class="t-rotate-button"
             [tuiHint]="texts.rotate"
-            [tuiHintDescribe]="''"
             (click)="rotate()"
         ></button>
 

diff --git a/projects/addon-preview/components/preview/zoom/preview-zoom.template.html b/projects/addon-preview/components/preview/zoom/preview-zoom.template.html
@@ -52,9 +52,9 @@
         icon="tuiIconMinimize"
         tuiHintDirection="top-right"
         tuiHintAppearance="onDark"
+        tuiHintDescribe
         class="t-reset-button"
         [tuiHint]="texts.reset"
-        [tuiHintDescribe]="''"
         [class.t-invisible]="!collapseVisible"
         (click)="onReset()"
     ></button>

diff --git a/projects/core/abstract/abstract-driver.directive.ts b/projects/core/abstract/abstract-driver.directive.ts
@@ -1,20 +1,28 @@
-import {Directive, Inject, Self} from '@angular/core';
+import {Directive, Inject, OnInit, Self} from '@angular/core';
 import {TuiDestroyService} from '@taiga-ui/cdk';
-import {Observable} from 'rxjs';
+import {merge, Observable} from 'rxjs';
 import {distinctUntilChanged, takeUntil} from 'rxjs/operators';
 
 import {TuiDriver} from './driver';
 import {TuiVehicle} from './vehicle';
 
 @Directive()
-export abstract class AbstractTuiDriverDirective {
+export abstract class AbstractTuiDriverDirective implements OnInit {
+    abstract type: string;
+
     constructor(
-        @Self() @Inject(TuiDestroyService) destroy$: Observable<unknown>,
-        @Inject(TuiDriver) driver$: Observable<boolean>,
-        @Inject(TuiVehicle) vehicle: TuiVehicle,
-    ) {
-        driver$.pipe(distinctUntilChanged(), takeUntil(destroy$)).subscribe(value => {
-            vehicle.toggle(value);
-        });
+        @Self() @Inject(TuiDestroyService) private readonly destroy$: Observable<unknown>,
+        @Inject(TuiDriver) private readonly drivers: TuiDriver[],
+        @Inject(TuiVehicle) private readonly vehicles: TuiVehicle[],
+    ) {}
+
+    ngOnInit(): void {
+        const vehicle = this.vehicles.find(({type}) => type === this.type);
+
+        merge(...this.drivers.filter(({type}) => type === this.type))
+            .pipe(distinctUntilChanged(), takeUntil(this.destroy$))
+            .subscribe(value => {
+                vehicle?.toggle(value);
+            });
     }
 }
diff --git a/projects/core/abstract/driver.ts b/projects/core/abstract/driver.ts
@@ -2,11 +2,14 @@ import {ExistingProvider, Type} from '@angular/core';
 import {Observable} from 'rxjs';
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export abstract class TuiDriver extends Observable<boolean> {}
+export abstract class TuiDriver extends Observable<boolean> {
+    abstract readonly type: string;
+}
 
 export function tuiAsDriver(useExisting: Type<TuiDriver>): ExistingProvider {
     return {
         provide: TuiDriver,
+        multi: true,
         useExisting,
     };
 }