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>();