diff --git a/packages/uhk-common/src/models/application-settings.ts b/packages/uhk-common/src/models/application-settings.ts index 9f91a359c0d..ba50a375cdf 100644 --- a/packages/uhk-common/src/models/application-settings.ts +++ b/packages/uhk-common/src/models/application-settings.ts @@ -1,3 +1,4 @@ +import { MacroGroupingSettings } from './macro-grouping-settings.js'; import { RgbColorInterface } from './rgb-color-interface.js'; export enum AppTheme { @@ -34,4 +35,8 @@ export interface ApplicationSettings { * If true, the Advanced settings menu is shown on Agent startup. */ alwaysEnableAdvancedMode?: boolean; + /** + * Sidebar macro grouping preferences. + */ + macroGrouping?: Partial; } diff --git a/packages/uhk-common/src/models/index.ts b/packages/uhk-common/src/models/index.ts index d5863a2a207..dec9dcd6082 100644 --- a/packages/uhk-common/src/models/index.ts +++ b/packages/uhk-common/src/models/index.ts @@ -1,4 +1,5 @@ export * from './application-settings.js'; +export * from './macro-grouping-settings.js'; export * from './backup-user-configuration.js'; export * from './backup-user-configuration-info.js'; export * from './ble-address-pair.js'; diff --git a/packages/uhk-common/src/models/macro-grouping-settings.ts b/packages/uhk-common/src/models/macro-grouping-settings.ts new file mode 100644 index 00000000000..f881d4af726 --- /dev/null +++ b/packages/uhk-common/src/models/macro-grouping-settings.ts @@ -0,0 +1,15 @@ +export interface MacroGroupingSettings { + camelCaseSeparation: boolean; + enabled: boolean; + maxDepth: number; + minChildren: number; +} + +export const MACRO_GROUPING_MIN_DEPTH = 1; + +export const DEFAULT_MACRO_GROUPING_SETTINGS: MacroGroupingSettings = { + camelCaseSeparation: false, + enabled: false, + maxDepth: 1, + minChildren: 2, +}; diff --git a/packages/uhk-web/src/app/components/agent/settings/settings.component.html b/packages/uhk-web/src/app/components/agent/settings/settings.component.html index 8563b1c6338..32e2945b61a 100644 --- a/packages/uhk-web/src/app/components/agent/settings/settings.component.html +++ b/packages/uhk-web/src/app/components/agent/settings/settings.component.html @@ -44,9 +44,8 @@

- -
-
+
+
+
+

Macro sidebar grouping

+
+
+ +
+ +
+
+
+
+ +
+ +
+
+ + +
+
+ + +
+
+
+

The Follow operating system theme option may not be supported on all Linux distributions.

 diff --git a/packages/uhk-web/src/app/components/agent/settings/settings.component.scss b/packages/uhk-web/src/app/components/agent/settings/settings.component.scss index 9bc88c1d65a..b06cfcef6db 100644 --- a/packages/uhk-web/src/app/components/agent/settings/settings.component.scss +++ b/packages/uhk-web/src/app/components/agent/settings/settings.component.scss @@ -1,3 +1,27 @@ +h1 { + margin-bottom: 1rem; +} + .theme-selector { min-width: 230px; } + +.macro-grouping-number-input { + width: 4rem; +} + +.macro-grouping-checkbox { + align-items: center; + display: flex; + gap: 0.375rem; +} + +.macro-grouping-inline-option { + align-items: center; + display: flex; + gap: 0.5rem; +} + +.macro-grouping-dependent-options--disabled { + opacity: 0.55; +} diff --git a/packages/uhk-web/src/app/components/agent/settings/settings.component.ts b/packages/uhk-web/src/app/components/agent/settings/settings.component.ts index 7087de85d47..8bb2c563ab7 100644 --- a/packages/uhk-web/src/app/components/agent/settings/settings.component.ts +++ b/packages/uhk-web/src/app/components/agent/settings/settings.component.ts @@ -4,7 +4,7 @@ import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; import { faCog } from '@fortawesome/free-solid-svg-icons'; -import { AppTheme, AppThemeSelect } from 'uhk-common'; +import { AppTheme, AppThemeSelect, MacroGroupingSettings } from 'uhk-common'; import { AppState, appUpdateSettingsState, @@ -12,16 +12,18 @@ import { getAnimationEnabled, getAppTheme, getIsAdvancedSettingsMenuVisible, + getMacroGroupingSettings, getOperatingSystem, getSupportedThemes, keyboardHalvesAlwaysJoined } from '../../../store'; +import { MACRO_GROUPING_MAX_DEPTH } from '../../../util/group-macros-by-name'; import { State as UpdateSettingsState } from '../../../store/reducers/auto-update-settings'; import { CheckForUpdateNowAction, ToggleCheckForUpdateOnStartupAction } from '../../../store/actions/auto-update-settings'; -import { OpenConfigFolderAction, SetAppThemeAction, ToggleAnimationEnabledAction, ToggleKeyboardHalvesAlwaysJoinedAction } from '../../../store/actions/app'; +import { OpenConfigFolderAction, SetAppThemeAction, SetMacroGroupingSettingsAction, ToggleAnimationEnabledAction, ToggleKeyboardHalvesAlwaysJoinedAction } from '../../../store/actions/app'; import { ToggleAlwaysEnableAdvancedModeAction } from '../../../store/actions/advance-settings.action'; import { OperatingSystem } from '../../../models/operating-system'; @@ -44,6 +46,8 @@ export class SettingsComponent { keyboardHalvesAlwaysJoined$: Observable; alwaysEnableAdvancedMode$: Observable; alwaysEnableAdvancedModeSettingVisible$: Observable; + macroGroupingSettings$: Observable; + macroGroupingMaxDepth = MACRO_GROUPING_MAX_DEPTH; constructor(private store: Store) { this.updateSettingsState$ = store.select(appUpdateSettingsState); @@ -54,6 +58,7 @@ export class SettingsComponent { this.keyboardHalvesAlwaysJoined$ = store.select(keyboardHalvesAlwaysJoined); this.alwaysEnableAdvancedMode$ = store.select(getAlwaysEnableAdvancedMode); this.alwaysEnableAdvancedModeSettingVisible$ = store.select(getIsAdvancedSettingsMenuVisible); + this.macroGroupingSettings$ = store.select(getMacroGroupingSettings); } openConfigFolder(): void { @@ -84,4 +89,8 @@ export class SettingsComponent { this.store.dispatch(new ToggleAlwaysEnableAdvancedModeAction(enabled)); } + updateMacroGroupingSettings(settings: Partial): void { + this.store.dispatch(new SetMacroGroupingSettingsAction(settings)); + } + } diff --git a/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.scss b/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.scss index 9acc66ae5c6..7bf277bab86 100644 --- a/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.scss +++ b/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.scss @@ -28,7 +28,6 @@ .col-controls { min-width: 145px; text-align: right; - white-space: nowrap; &.arguments { fa-icon { diff --git a/packages/uhk-web/src/app/components/side-menu/side-menu.component.html b/packages/uhk-web/src/app/components/side-menu/side-menu.component.html index d133669cb8b..f7774404455 100644 --- a/packages/uhk-web/src/app/components/side-menu/side-menu.component.html +++ b/packages/uhk-web/src/app/components/side-menu/side-menu.component.html @@ -221,23 +221,40 @@ class="chevron float-end me-1" (click)="toggleMenuItem('macro')">
- + + +
  • +
    + {{ node.macro.name }} + {{ node.macro.usageCount }} +
    +
    • +
  • +
    + {{ node.label }}… + +
    +
      + +
    +
    • +     +     +