feat: navigation mode tooltips of add-on page (#2201)

* feat: navigation mode tooltips of add-on page

* fix: cmd/ctrl

* fix: tooltip positioning

* fix: pinch to zoom

Author: ert78gb

packages/uhk-web/src/app/components/add-on/add-on.component.html

@@ -220,14 +220,24 @@ <h3 class="margin-top">Touchpad settings</h3>
                         <circle-tooltip tooltip="Navigation mode to be triggered by the touchpad pinch zoom gesture."/>
                     </td>
                     <td>
-                        <div class="select-container align-slider">
-                            <ng-select [items]="pitchToZoomOptions"
-                                       [ngModel]="moduleConfiguration.touchpadPinchToZoom"
-                                       (ngModelChange)="onSetModuleConfigurationValue('touchpadPinchToZoom', $event)"
-                                       [clearable]="false"
-                                       bindLabel="label"
-                                       bindValue="value"
-                            />
+                        <div class="d-flex align-items-center gap-1">
+                            <div class="select-container align-slider">
+                                <ng-select [items]="pitchToZoomOptions"
+                                           [ngModel]="moduleConfiguration.touchpadPinchToZoom"
+                                           (ngModelChange)="onSetModuleConfigurationValue('touchpadPinchToZoom', $event)"
+                                           [clearable]="false"
+                                           bindLabel="label"
+                                           bindValue="value"
+                                />
+                            </div>
+                            <ng-template #pinchToZoomTooltip>
+                                <ul class="no-indent text-start">
+                                    <li><strong>Zoom</strong>: This mode emits both the PC and Mac zoom modes. It serves as a general, OS-independent zoom mode, but one of the two zoom modes may interfere with some applications, in which case the desired PC or Mac zoom mode must be selected specifically.</li>
+                                    <li><strong>Zoom PC</strong>: <kbd>Ctrl</kbd> + <kbd>+</kbd> / <kbd>Ctrl</kbd> + <kbd>-</kbd> - shortcuts are produced.</li>
+                                    <li><strong>Zoom Mac</strong>: <kbd>Cmd</kbd> + <kbd>+</kbd> / <kbd>Cmd</kbd> + <kbd>-</kbd> - shortcuts are produced.</li>
+                                </ul>
+                            </ng-template>
+                            <circle-tooltip [tooltip]="pinchToZoomTooltip" width="400" placement="bottom top"/>
                         </div>
                     </td>
                 </tr>
@@ -282,6 +292,18 @@ <h3>Navigation modes</h3>
                 </td>
                 <td>
                     Mode
+                    <ng-template #navigationModeTooltip>
+                        <ul class="no-indent text-start">
+                            <li><strong>Cursor</strong>: Module controls mouse movement.</li>
+                            <li><strong>Scroll</strong>: Module controls scrolling.</li>
+                            <li><strong>Media</strong>: Up/down directions control volume, horizontal directions control play/pause, and switch to the next track.</li>
+                            <li><strong>Caret</strong>: Module produces arrow key taps. This can be used to move comfortably in a text editor.</li>
+                            <li><strong>Zoom PC</strong>: <kbd>Ctrl</kbd> + <kbd>+</kbd> / <kbd>Ctrl</kbd> + <kbd>-</kbd> - shortcuts are produced.</li>
+                            <li><strong>Zoom Mac</strong>: <kbd>Cmd</kbd> + <kbd>+</kbd> / <kbd>Cmd</kbd> + <kbd>-</kbd> - shortcuts are produced.</li>
+                            <li><strong>Zoom</strong>: This mode emits both the PC and Mac zoom modes. It serves as a general, OS-independent zoom mode, but one of the two zoom modes may interfere with some applications, in which case the desired PC or Mac zoom mode must be selected specifically.</li>
+                        </ul>
+                    </ng-template>
+                    <circle-tooltip [tooltip]="navigationModeTooltip" width="400" placement="bottom bottom-end"/>
                 </td>
             </tr>
             <tr class="separator">

packages/uhk-web/src/app/components/add-on/add-on.component.ts

@@ -5,7 +5,8 @@ import { Subscription } from 'rxjs';
 import { UHK_MODULES } from 'uhk-common';
 import { ModuleConfiguration, ModuleId, NavigationMode } from 'uhk-common';
 
-import { AppState, getSelectedModuleConfiguration } from '../../store';
+import { OperatingSystem } from '../../models/operating-system';
+import { AppState, getOperatingSystem, getSelectedModuleConfiguration } from '../../store';
 import { SetModuleConfigurationValueAction } from '../../store/actions/user-config';
 
 @Component({
@@ -80,6 +81,8 @@ export class AddOnComponent implements OnDestroy {
     moduleConfiguration = new ModuleConfiguration();
 
     private subscription: Subscription;
+    private osSubscription: Subscription;
+
     constructor(private store:Store<AppState>,
                 private cdRef: ChangeDetectorRef) {
         this.subscription = store.select(getSelectedModuleConfiguration)

packages/uhk-web/src/app/services/mapper.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, OnDestroy } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { KeyModifiers, KeystrokeType, SecondaryRoleAction } from 'uhk-common';
 import { Subscription } from 'rxjs';
@@ -14,7 +14,7 @@ export enum OsSpecificKeys {
 export type OsSpecificTexts = OsSpecificKeys | KeyModifiers;
 
 @Injectable()
-export class MapperService {
+export class MapperService implements OnDestroy {
 
     private basicScanCodeTextMap: Map<number, string[]>;
     private mediaScanCodeTextMap: Map<number, string[]>;
@@ -43,6 +43,10 @@ export class MapperService {
             });
     }
 
+    ngOnDestroy(): void {
+        this.osSubscription.unsubscribe();
+    }
+
     public scanCodeToText(scanCode: number, type: KeystrokeType = KeystrokeType.basic): string[] {
         let map: Map<number, string[]>;
         let prefix: string;