improved tooltips for mobile targets

webosbrew · May 23, 2024 · a4e1e14 · a4e1e14
1 parent a7f2a33
commit a4e1e14
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 40 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -14,11 +14,13 @@ import {SharedModule} from './shared/shared.module';
 import {UpdateDetailsComponent} from './update-details/update-details.component';
 import {
     NgbAccordionModule,
-    NgbDropdown, NgbDropdownItem,
+    NgbDropdown,
+    NgbDropdownItem,
     NgbDropdownMenu,
     NgbDropdownToggle,
     NgbNavModule,
-    NgbTooltip
+    NgbTooltipConfig,
+    NgbTooltipModule
 } from "@ng-bootstrap/ng-bootstrap";
 import {RemoveDeviceComponent} from './remove-device/remove-device.component';
 import {AddDeviceModule} from "./add-device/add-device.module";
@@ -27,15 +29,15 @@ import {Router} from "@angular/router";
 import * as Sentry from "@sentry/angular-ivy";
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    HomeComponent,
-    KeyserverHintComponent,
-    ConnHintComponent,
-    RenewScriptComponent,
-    UpdateDetailsComponent,
-    RemoveDeviceComponent,
-  ],
+    declarations: [
+        AppComponent,
+        HomeComponent,
+        KeyserverHintComponent,
+        ConnHintComponent,
+        RenewScriptComponent,
+        UpdateDetailsComponent,
+        RemoveDeviceComponent,
+    ],
     imports: [
         BrowserModule,
         BrowserAnimationsModule,
@@ -49,30 +51,37 @@ import * as Sentry from "@sentry/angular-ivy";
         NgbAccordionModule,
         AddDeviceModule,
         NgOptimizedImage,
-        NgbTooltip,
+        NgbTooltipModule,
         NgbDropdown,
         NgbDropdownToggle,
         NgbDropdownMenu,
         NgbDropdownItem,
     ],
-  providers: [{
-    provide: ErrorHandler,
-    useValue: Sentry.createErrorHandler({
-      showDialog: false,
-    }),
-  },
-    {
-      provide: Sentry.TraceService,
-      deps: [Router],
-    },
-    {
-      provide: APP_INITIALIZER,
-      useFactory: () => () => {
-      },
-      deps: [Sentry.TraceService],
-      multi: true,
-    },],
-  bootstrap: [AppComponent]
+    providers: [
+        {
+            provide: ErrorHandler,
+            useValue: Sentry.createErrorHandler({
+                showDialog: false,
+            }),
+        },
+        {
+            provide: Sentry.TraceService,
+            deps: [Router],
+        },
+        {
+            provide: APP_INITIALIZER,
+            useFactory: () => () => {
+            },
+            deps: [Sentry.TraceService],
+            multi: true,
+        },
+        NgbTooltipConfig,
+    ],
+    bootstrap: [AppComponent]
 })
 export class AppModule {
+    constructor(tooltipConfig: NgbTooltipConfig) {
+        // Only show tooltips on hover, not on focus
+        tooltipConfig.triggers = 'hover';
+    }
 }
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -1,40 +1,40 @@
 <div class="d-flex flex-column-reverse flex-sm-row h-100" (drop)="defaultDrop($event)"
      (dragover)="defaultDragOver($event)" (dragenter)="defaultDragEnter($event)" (dragleave)="defaultDragLeave($event)">
-  <nav class="d-flex flex-row flex-sm-column bg-panel border-end">
+  <nav class="d-flex flex-row flex-sm-column bg-panel border-end" #appNav>
     <ul class="nav nav-pills flex-row flex-nowrap flex-sm-column me-auto mb-sm-auto w-100 justify-content-evenly">
       <li class="nav-item">
         <a class="nav-link" routerLink="apps" routerLinkActive="active" replaceUrl ngbTooltip="Apps"
-           #t1="ngbTooltip" (mouseleave)="t1?.close()">
+           [placement]="appNavTooltipDirection">
           <i class="bi bi-grid"></i>
         </a>
       </li>
       <li class="nav-item">
         <a class="nav-link" routerLink="files" routerLinkActive="active" replaceUrl ngbTooltip="Files"
-           #t2="ngbTooltip" (mouseleave)="t2?.close()">
+           [placement]="appNavTooltipDirection">
           <i class="bi bi-folder"></i>
         </a>
       </li>
       <li class="nav-item">
         <a class="nav-link" routerLink="terminal" routerLinkActive="active" replaceUrl ngbTooltip="Terminal"
-           #t3="ngbTooltip" (mouseleave)="t3?.close()">
+           [placement]="appNavTooltipDirection">
           <i class="bi bi-terminal"></i>
         </a>
       </li>
       <li class="nav-item">
         <a class="nav-link" routerLink="info" routerLinkActive="active" replaceUrl ngbTooltip="Info"
-           #t4="ngbTooltip" (mouseleave)="t4?.close()">
+           [placement]="appNavTooltipDirection">
           <i class="bi bi-info-circle"></i>
         </a>
       </li>
       <li class="nav-item d-none d-sm-block">
         <a class="nav-link" routerLink="debug" routerLinkActive="active" replaceUrl ngbTooltip="Debug"
-           #t5="ngbTooltip" (mouseleave)="t5?.close()">
+           [placement]="appNavTooltipDirection">
           <i class="bi bi-bug"></i>
         </a>
       </li>
       <li class="nav-item d-block d-sm-none">
         <a class="nav-link" routerLink="nav-more" routerLinkActive="active" replaceUrl ngbTooltip="More"
-           #t6="ngbTooltip" (mouseleave)="t6?.close()">
+           [placement]="appNavTooltipDirection">
           <i class="bi bi-three-dots"></i>
         </a>
       </li>

diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
@@ -1,4 +1,4 @@
-import {Component, Injector} from '@angular/core';
+import {Component, ElementRef, HostListener, Injector, OnInit, ViewChild} from '@angular/core';
 import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 import {Device} from '../types';
 import {DeviceManagerService} from '../core/services';
@@ -16,11 +16,13 @@ import {DeviceChooserComponent} from "./device-chooser/device-chooser.component"
     templateUrl: './home.component.html',
     styleUrls: ['./home.component.scss']
 })
-export class HomeComponent {
+export class HomeComponent implements OnInit {
 
     selectedDevice?: Device;
-    activeItem: string = 'apps';
     appVersion: string;
+    @ViewChild('appNav', {static: true})
+    appNav?: ElementRef<HTMLElement>;
+    appNavTooltipDirection: string = 'right';
 
     constructor(
         public deviceManager: DeviceManagerService,
@@ -99,4 +101,21 @@ export class HomeComponent {
             centered: true,
         }).result.then((device) => this.markDefault(device)).catch(noop);
     }
+
+    ngOnInit(): void {
+        this.updateTooltipDirection();
+    }
+
+    @HostListener('window:resize')
+    onResize(): void {
+        this.updateTooltipDirection();
+    }
+
+    private updateTooltipDirection(): void {
+        const flexDirection = this.appNav?.nativeElement?.computedStyleMap().get('flex-direction');
+        if (!(flexDirection instanceof CSSKeywordValue)) {
+            return;
+        }
+        this.appNavTooltipDirection = flexDirection.value === 'row' ? 'top' : 'right';
+    }
 }