feat: change position of module config icon (#2209)

* feat: change position of module config icon

* Adjust the positions of module configuration circle buttons.

---------

Co-authored-by: László Monda <[email protected]>

Author: ert78gb

packages/uhk-common/src/config-serializer/config-items/index.ts

@@ -21,4 +21,5 @@ export * from './module-configuration.js';
 export * from './mouse-speed-configuration.js';
 export * from './rgb-color.js';
 export * from './svg-keyboard-cover-colors.js';
+export * from './uhk-theme-colors.js';
 export * from './user-configuration.js';

packages/uhk-common/src/config-serializer/config-items/layer.ts

@@ -4,7 +4,7 @@ import { assertEnum } from '../assert.js';
 import { Macro } from './macro.js';
 import { Module } from './module.js';
 import { SerialisationInfo } from './serialisation-info.js';
-import { SvgKeyboardCoverColors } from './svg-keyboard-cover-colors.js';
+import { UhkThemeColors } from './uhk-theme-colors.js';
 import { UserConfiguration } from './user-configuration.js';
 import { LayerName } from './layer-name.js';
 
@@ -14,15 +14,15 @@ export class Layer {
 
     modules: Module[];
 
-    svgKeyboardCoverColors: SvgKeyboardCoverColors;
+    uhkThemeColors: UhkThemeColors;
 
     constructor(layers?: Layer) {
         if (!layers) {
             return;
         }
         this.id = layers.id;
         this.modules = layers.modules.map(module => new Module(module));
-        this.svgKeyboardCoverColors = layers.svgKeyboardCoverColors;
+        this.uhkThemeColors = layers.uhkThemeColors;
     }
 
     fromJsonObject(jsonObject: any, macros: Macro[], serialisationInfo: SerialisationInfo): Layer {

packages/uhk-common/src/config-serializer/config-items/uhk-theme-colors.ts

@@ -0,0 +1,6 @@
+import { SvgKeyboardCoverColors } from './svg-keyboard-cover-colors.js';
+
+export interface UhkThemeColors {
+    backgroundColor: string;
+    svgKeyboardCoverColors: SvgKeyboardCoverColors;
+}

packages/uhk-web/src/app/components/keyboard/slider/keyboard-slider.component.html

@@ -10,7 +10,7 @@
               [keyboardLayout]="keyboardLayout"
               [description]="description"
               [showDescription]="true"
-              [svgKeyboardCoverColors]="aLayer.svgKeyboardCoverColors"
+              [uhkThemeColors]="aLayer.uhkThemeColors"
               [lastEditedKey]="lastEditedKey"
               oncontextmenu="return false;"
               (keyClick)="keyClick.emit($event)"
@@ -34,7 +34,7 @@
               [keyboardLayout]="keyboardLayout"
               [description]="description"
               [showDescription]="true"
-              [svgKeyboardCoverColors]="bLayer.svgKeyboardCoverColors"
+              [uhkThemeColors]="bLayer.uhkThemeColors"
               [lastEditedKey]="lastEditedKey"
               oncontextmenu="return false;"
               (keyClick)="keyClick.emit($event)"

packages/uhk-web/src/app/components/popover/popover.component.html

@@ -49,7 +49,7 @@
                     [defaultKeyAction]="defaultKeyAction"
                     [keymaps]="keymaps$ | async"
                     [keymapOptions]="keymapOptions$ | async"
-                    [svgKeyboardCoverColors]="svgKeyboardCoverColors$ | async"
+                    [uhkThemeColors]="uhkThemeColors$ | async"
                     (validAction)="setKeyActionValidState($event)"
         ></keymap-tab>
         <none-tab #tab *ngSwitchCase="tabName.None" class="popover-content"

packages/uhk-web/src/app/components/popover/popover.component.ts

@@ -24,7 +24,7 @@ import {
     MouseAction,
     PlayMacroAction,
     SecondaryRoleAction,
-    SvgKeyboardCoverColors,
+    UhkThemeColors,
     SwitchKeymapAction,
     SwitchLayerAction
 } from 'uhk-common';
@@ -37,7 +37,7 @@ import {
     getKeymapOptions,
     getKeymaps,
     getLayerOptions,
-    getSvgKeyboardCoverColorsOfTheme,
+    getUhkThemeColors,
     macroPlaybackSupported
 } from '../../store';
 import { KeyActionRemap } from '../../models/key-action-remap';
@@ -87,7 +87,7 @@ export class PopoverComponent implements OnChanges {
     tabName = TabName;
     keyActionValid: boolean;
     activeTab: TabName;
-    svgKeyboardCoverColors$: Observable<SvgKeyboardCoverColors>;
+    uhkThemeColors$: Observable<UhkThemeColors>;
     keymaps$: Observable<Keymap[]>;
     keymapOptions$: Observable<SelectOptionData[]>;
     shadowKeyAction: KeyAction;
@@ -130,7 +130,7 @@ export class PopoverComponent implements OnChanges {
 
     constructor(private store: Store<AppState>,
                 private cdRef: ChangeDetectorRef) {
-        this.svgKeyboardCoverColors$ = store.select(getSvgKeyboardCoverColorsOfTheme);
+        this.uhkThemeColors$ = store.select(getUhkThemeColors);
         this.keymaps$ = store.select(getKeymaps);
         this.keymapOptions$ = store.select(getKeymapOptions);
         this.macroPlaybackSupported$ = store.select(macroPlaybackSupported);

packages/uhk-web/src/app/components/popover/tab/keymap/keymap-tab.component.html

@@ -34,7 +34,7 @@
         <svg-keyboard *ngIf="selectedKeymap?.abbreviation"
                       [moduleConfig]="selectedKeymap.layers[0].modules"
                       [embedded]="true"
-                      [svgKeyboardCoverColors]="svgKeyboardCoverColors"
+                      [uhkThemeColors]="uhkThemeColors"
         >
         </svg-keyboard>
     </div>

packages/uhk-web/src/app/components/popover/tab/keymap/keymap-tab.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { copyRgbColor, Keymap, KeyAction, SvgKeyboardCoverColors, SwitchKeymapAction } from 'uhk-common';
+import { copyRgbColor, Keymap, KeyAction, UhkThemeColors, SwitchKeymapAction } from 'uhk-common';
 
 import { Tab } from '../tab';
 import { SelectOptionData } from '../../../../models/select-option-data';
@@ -14,7 +14,7 @@ export class KeymapTabComponent extends Tab implements OnChanges {
     @Input() defaultKeyAction: KeyAction;
     @Input() keymaps: Keymap[];
     @Input() keymapOptions: SelectOptionData[];
-    @Input() svgKeyboardCoverColors: SvgKeyboardCoverColors;
+    @Input() uhkThemeColors: UhkThemeColors;
 
     selectedKeymap: Keymap;
 

packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.html

@@ -19,7 +19,7 @@
            [selectedKey]="selectedKey"
            [@fadeKeyboard]="{value:'', params: { animationTime: modulesState[module.id].animationTime } }"
            [selected]="selectedKey?.moduleId === module.id"
-           [svgKeyboardCoverColors]="svgKeyboardCoverColors"
+           [uhkThemeColors]="uhkThemeColors"
            [lastEdited]="lastEditedKey?.moduleId === module.id"
            [lastEditedKeyId]="lastEditedKey?.key"
            (keyClick)="onKeyClick(module.id, $event)"

packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.ts

@@ -20,7 +20,7 @@ import {
     LeftSlotModules,
     Module,
     RightSlotModules,
-    SvgKeyboardCoverColors
+    UhkThemeColors,
 } from 'uhk-common';
 
 import { SvgModule } from '../module';
@@ -99,7 +99,7 @@ export class SvgKeyboardComponent implements AfterViewInit, OnInit, OnChanges {
     @Input() keyboardLayout = KeyboardLayout.ANSI;
     @Input() description: string;
     @Input() showDescription = false;
-    @Input() svgKeyboardCoverColors: SvgKeyboardCoverColors;
+    @Input() uhkThemeColors: UhkThemeColors;
     @Input() lastEditedKey: LastEditedKey;
     @Input() embedded = false;
     @Output() keyClick = new EventEmitter<SvgKeyboardKeyClickEvent>();

packages/uhk-web/src/app/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts

@@ -47,7 +47,7 @@ import { KeyModifierModel } from '../../../../models/key-modifier-model';
 import { StartKeypressCapturingAction, StopKeypressCapturingAction } from '../../../../store/actions/app';
 import { KeyActionDragAndDropService } from '../../../../services/key-action-drag-and-drop.service';
 import { getColorsOf } from '../../../../util/get-colors-of';
-import { uhkThemeColors } from '../../../../util/uhk-theme-colors';
+import { defaultUhkThemeColors } from '../../../../util/default-uhk-theme-colors';
 import { keyboardGreyRgbColor } from '../../../../util/rgb-color-contants';
 import { SvgKeyboardKey } from './svg-keyboard-key.model';
 
@@ -484,7 +484,7 @@ export class SvgKeyboardKeyComponent implements OnChanges, OnDestroy {
             : colors.backgroundColorAsHex;
         this.textColor = colors.fontColorAsHex;
 
-        const themeColors = uhkThemeColors();
+        const themeColors = defaultUhkThemeColors();
 
         this.strokeColor = isPerKeyBacklighting && colord(themeColors.backgroundColor).delta(this.keyAction) < 0.01
             ? 'lightgray'

packages/uhk-web/src/app/components/svg/module/svg-module.component.html

@@ -1,20 +1,21 @@
 <svg:path *ngFor="let path of coverages"
           [attr.d]="path.d"
-          [attr.fill]="svgKeyboardCoverColors?.fillColor"
-          [attr.stroke]="svgKeyboardCoverColors?.strokeColor"/>
+          [attr.fill]="uhkThemeColors?.svgKeyboardCoverColors.fillColor"
+          [attr.stroke]="uhkThemeColors?.svgKeyboardCoverColors.strokeColor"/>
 <svg:circle *ngFor="let circle of circles"
             [attr.cx]="circle.cx"
             [attr.cy]="circle.cy"
             [attr.r]="circle.r"
-            [attr.fill]="svgKeyboardCoverColors?.fillColor"
-            [attr.stroke]="svgKeyboardCoverColors?.strokeColor"/>
+            [attr.fill]="uhkThemeColors?.svgKeyboardCoverColors.fillColor"
+            [attr.stroke]="uhkThemeColors?.svgKeyboardCoverColors.strokeColor"/>
 
 <svg:g class="module-nav" *ngIf="moduleNavPath && moduleNavCircle" (click)="navigateToModuleSettings.emit()">
     <svg:circle [attr.cx]="moduleNavCircle.cx"
                 [attr.cy]="moduleNavCircle.cy"
                 [attr.r]="moduleNavCircle.r"
-                [attr.fill]="svgKeyboardCoverColors?.fillColor"
-                [attr.stroke]="svgKeyboardCoverColors?.strokeColor"
+                [attr.fill]="uhkThemeColors?.svgKeyboardCoverColors.fillColor"
+                [attr.stroke]="uhkThemeColors.backgroundColor"
+                [attr.stroke-width]="moduleNavCircle['stroke-width']"
                 />
     <svg:path [attr.d]="moduleNavPath.d" />
 </svg:g>

packages/uhk-web/src/app/components/svg/module/svg-module.component.ts

@@ -7,7 +7,7 @@ import {
     ChangeDetectionStrategy
 } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { BacklightingMode, KeyAction, Macro, SvgKeyboardCoverColors } from 'uhk-common';
+import { BacklightingMode, KeyAction, Macro, UhkThemeColors } from 'uhk-common';
 import { Subscription } from 'rxjs';
 
 import { SvgKeyboardKey } from '../keys';
@@ -33,7 +33,7 @@ export class SvgModuleComponent implements OnDestroy {
     @Input() keyActions: KeyAction[];
     @Input() selectedKey: { layerId: number, moduleId: number, keyId: number };
     @Input() selected: boolean;
-    @Input() svgKeyboardCoverColors: SvgKeyboardCoverColors;
+    @Input() uhkThemeColors: UhkThemeColors;
     @Input() capturingEnabled: boolean;
     @Input() lastEdited: boolean;
     @Input() lastEditedKeyId: string;

packages/uhk-web/src/app/store/index.ts

@@ -25,7 +25,7 @@ import {
     LeftSlotModules,
     PlayMacroAction,
     RightSlotModules,
-    SvgKeyboardCoverColors,
+    UhkThemeColors,
     UHK_60_DEVICE,
     UhkBuffer,
     UserConfiguration,
@@ -48,7 +48,7 @@ import {
 } from '../models';
 import { PrivilagePageSate } from '../models/privilage-page-sate';
 import { SelectOptionData } from '../models/select-option-data';
-import { uhkThemeColors } from '../util/uhk-theme-colors';
+import { defaultUhkThemeColors } from '../util/default-uhk-theme-colors';
 import { addMissingModuleConfigs } from './reducers/add-missing-module-configs';
 
 import * as fromAdvancedSettings from './reducers/advanced-settings.reducer';
@@ -181,8 +181,8 @@ export const getEverAttemptedSavingToKeyboard = createSelector(appState, fromApp
 export const getUdevFileContent = createSelector(appState, fromApp.getUdevFileContent);
 export const getAnimationEnabled = createSelector(appState, fromApp.getAnimationEnabled);
 export const getAppTheme = createSelector(appState, fromApp.getAppTheme);
-export const getSvgKeyboardCoverColorsOfTheme = createSelector(getAppTheme, (theme): SvgKeyboardCoverColors => {
-    return  uhkThemeColors(theme).svgKeyboardCoverColors;
+export const getUhkThemeColors = createSelector(getAppTheme, (theme): UhkThemeColors => {
+    return  defaultUhkThemeColors(theme);
 });
 export const getPlatform = createSelector(appState, fromApp.getPlatform);
 

packages/uhk-web/src/app/util/uhk-theme-colors.ts renamed to packages/uhk-web/src/app/util/default-uhk-theme-colors.ts

@@ -1,13 +1,9 @@
-import { SvgKeyboardCoverColors } from 'uhk-common';
+import { UhkThemeColors } from 'uhk-common';
 
-export interface UhkThemeColors {
-    backgroundColor: string;
-    svgKeyboardCoverColors: SvgKeyboardCoverColors;
-}
-export function uhkThemeColors(theme = (window as any).getUhkTheme()): UhkThemeColors {
+export function defaultUhkThemeColors(theme = (window as any).getUhkTheme()): UhkThemeColors {
     if (theme === 'dark') {
         return {
-            backgroundColor: '#000',
+            backgroundColor: '#111',
             svgKeyboardCoverColors: {
                 fillColor: '#333',
                 strokeColor: ''

packages/uhk-web/src/app/util/set-svg-keyboard-cover-colors-of-layer.ts

@@ -2,23 +2,26 @@ import { colord, extend } from 'colord';
 import labPlugin from 'colord/plugins/lab';
 import { BacklightingMode, Layer } from 'uhk-common';
 
-import { uhkThemeColors } from './uhk-theme-colors';
+import { defaultUhkThemeColors } from './default-uhk-theme-colors';
 
 extend([labPlugin]);
 
 export function setSvgKeyboardCoverColorsOfLayer(backligtingMode: BacklightingMode, layer: Layer, theme: string): void {
-    const themeColors = uhkThemeColors(theme);
+    const themeColors = defaultUhkThemeColors(theme);
 
     if (backligtingMode === BacklightingMode.PerKeyBacklighting) {
         const fillColord = colord('#cccccc');
 
-        layer.svgKeyboardCoverColors = {
-            fillColor: fillColord.toHex(),
-            strokeColor: colord(themeColors.backgroundColor).delta(fillColord) < 0.01
-                ? 'lightgray'
-                : ''
+        layer.uhkThemeColors = {
+            ...themeColors,
+            svgKeyboardCoverColors: {
+                fillColor: fillColord.toHex(),
+                strokeColor: colord(themeColors.backgroundColor).delta(fillColord) < 0.01
+                    ? 'lightgray'
+                    : ''
+            }
         };
     } else {
-        layer.svgKeyboardCoverColors = themeColors.svgKeyboardCoverColors;
+        layer.uhkThemeColors = themeColors;
     }
 }