diff --git a/packages/uhk-agent/src/services/app.service.ts b/packages/uhk-agent/src/services/app.service.ts index 929e6684108..f66c212263f 100644 --- a/packages/uhk-agent/src/services/app.service.ts +++ b/packages/uhk-agent/src/services/app.service.ts @@ -5,7 +5,7 @@ import * as os from 'os'; import { AppStartInfo, CommandLineArgs, IpcEvents, LogService } from 'uhk-common'; import { MainServiceBase } from './main-service-base'; import { DeviceService } from './device.service'; -import { getUdevFileContentAsync } from '../util'; +import { getUdevFileContentAsync, isRunningOnWayland } from '../util'; export class AppService extends MainServiceBase { constructor(protected logService: LogService, @@ -43,6 +43,7 @@ export class AppService extends MainServiceBase { 'disable-agent-update-protection': this.options['disable-agent-update-protection'] || false, log: this.options.log }, + isRunningOnWayland: isRunningOnWayland(), platform: process.platform as string, osVersion: os.release(), udevFileContent: await getUdevFileContentAsync(this.rootDir) diff --git a/packages/uhk-agent/src/util/index.ts b/packages/uhk-agent/src/util/index.ts index 63ed643287f..276b8d35b68 100644 --- a/packages/uhk-agent/src/util/index.ts +++ b/packages/uhk-agent/src/util/index.ts @@ -10,6 +10,7 @@ export * from './get-updater-logger'; export * from './get-user-config-from-history-async'; export * from './get-user-config-history-dir-async'; export * from './get-window-background-color'; +export * from './is-running-on-wayland'; export * from './load-user-config-from-binary-file'; export * from './load-user-config-history-async'; export * from './make-folder-writeable-to-user-on-linux'; diff --git a/packages/uhk-agent/src/util/is-running-on-wayland.ts b/packages/uhk-agent/src/util/is-running-on-wayland.ts new file mode 100644 index 00000000000..e62f036d99d --- /dev/null +++ b/packages/uhk-agent/src/util/is-running-on-wayland.ts @@ -0,0 +1,7 @@ +import process from "node:process"; + +export function isRunningOnWayland(): boolean { + return !!(process.env.WAYLAND_DISPLAY || + process.env.XDG_SESSION_TYPE === 'wayland' || + process.env.GDK_BACKEND === 'wayland'); +} diff --git a/packages/uhk-common/src/models/app-start-info.ts b/packages/uhk-common/src/models/app-start-info.ts index b884e0793a0..190df1ea37d 100644 --- a/packages/uhk-common/src/models/app-start-info.ts +++ b/packages/uhk-common/src/models/app-start-info.ts @@ -5,4 +5,5 @@ export interface AppStartInfo { platform: string; osVersion: string; udevFileContent: string; + isRunningOnWayland: boolean; } diff --git a/packages/uhk-web/src/app/components/device/led-settings/functional-backlight-color.component.html b/packages/uhk-web/src/app/components/device/led-settings/functional-backlight-color.component.html index db32aafd6d0..c23350b7f41 100644 --- a/packages/uhk-web/src/app/components/device/led-settings/functional-backlight-color.component.html +++ b/packages/uhk-web/src/app/components/device/led-settings/functional-backlight-color.component.html @@ -4,7 +4,7 @@ (colorPickerSelect)="onColorChanged($event)" cpOutputFormat="hex" [cpSaveClickOutside]="false" - [cpEyeDropper]="true" + [cpEyeDropper] [cpOKButton]="true" cpOKButtonClass="btn btn-primary" [cpCancelButton]="true" diff --git a/packages/uhk-web/src/app/components/layers/colors/color-palette-button.component.html b/packages/uhk-web/src/app/components/layers/colors/color-palette-button.component.html index 569fdf8ce01..7556d1f0333 100644 --- a/packages/uhk-web/src/app/components/layers/colors/color-palette-button.component.html +++ b/packages/uhk-web/src/app/components/layers/colors/color-palette-button.component.html @@ -2,7 +2,7 @@ [(colorPicker)]="editColor" cpOutputFormat="hex" [cpSaveClickOutside]="false" - [cpEyeDropper]="true" + [cpEyeDropper] [cpOKButton]="true" cpOKButtonClass="btn btn-primary" [cpCancelButton]="true" diff --git a/packages/uhk-web/src/app/components/layers/layers.component.html b/packages/uhk-web/src/app/components/layers/layers.component.html index f495830be3d..8489e01f0b2 100644 --- a/packages/uhk-web/src/app/components/layers/layers.component.html +++ b/packages/uhk-web/src/app/components/layers/layers.component.html @@ -52,7 +52,7 @@ (colorPickerSelect)="onAddColor($event)" cpOutputFormat="hex" [cpSaveClickOutside]="false" - [cpEyeDropper]="true" + [cpEyeDropper] [cpOKButton]="true" cpOKButtonClass="btn btn-primary" [cpCancelButton]="true" diff --git a/packages/uhk-web/src/app/directives/ngx-color-picker-eye-dropper.ts b/packages/uhk-web/src/app/directives/ngx-color-picker-eye-dropper.ts new file mode 100644 index 00000000000..6ec38fdfa42 --- /dev/null +++ b/packages/uhk-web/src/app/directives/ngx-color-picker-eye-dropper.ts @@ -0,0 +1,29 @@ +import { Directive, OnDestroy, OnInit } from '@angular/core'; +import { Store } from '@ngrx/store'; +import { ColorPickerDirective } from 'ngx-color-picker'; +import { Subscription } from 'rxjs'; + +import { AppState, isColorPickerEyeDropperEnabled } from '../store/index'; + +@Directive({ + selector: '[cpEyeDropper]', + standalone: true, +}) +export class NgxColorPickerEyeDropper implements OnDestroy, OnInit { + private subscription: Subscription; + + constructor(private store: Store, + private colorPicker: ColorPickerDirective) { + } + + ngOnInit() { + this.subscription = this.store.select(isColorPickerEyeDropperEnabled) + .subscribe(value => { + this.colorPicker.cpEyeDropper = value; + }) + } + + ngOnDestroy() { + this.subscription?.unsubscribe(); + } +} diff --git a/packages/uhk-web/src/app/shared.module.ts b/packages/uhk-web/src/app/shared.module.ts index b33893d1009..fe9c8e9513a 100644 --- a/packages/uhk-web/src/app/shared.module.ts +++ b/packages/uhk-web/src/app/shared.module.ts @@ -99,6 +99,7 @@ import { appRoutingProviders, routing } from './app.routes'; import { UhkAgentIconComponent } from './components/uhk-icon/uhk-agent-icon.component'; import { CancelableDirective, ExternalUrlDirective } from './directives'; +import { NgxColorPickerEyeDropper } from './directives/ngx-color-picker-eye-dropper'; import { AsHexColorPipe, EscapeHtmlPipe, @@ -292,6 +293,7 @@ import appInitFactory from './services/app-init-factory'; imports: [ AngularSplitModule, CommonModule, + NgxColorPickerEyeDropper, ColorPickerDirective, BrowserAnimationsModule, FontAwesomeModule, diff --git a/packages/uhk-web/src/app/store/index.ts b/packages/uhk-web/src/app/store/index.ts index e0a6f9443dd..0016facbd32 100644 --- a/packages/uhk-web/src/app/store/index.ts +++ b/packages/uhk-web/src/app/store/index.ts @@ -202,6 +202,7 @@ export const getUhkThemeColors = createSelector(getAppTheme, (theme): UhkThemeCo return defaultUhkThemeColors(theme); }); export const getPlatform = createSelector(appState, fromApp.getPlatform); +export const isColorPickerEyeDropperEnabled = createSelector(appState, fromApp.isColorPickerEyeDropperEnabled); export const appUpdateState = (state: AppState) => state.appUpdate; export const getShowAppUpdateAvailable = createSelector(appUpdateState, fromAppUpdate.getShowAppUpdateAvailable); diff --git a/packages/uhk-web/src/app/store/reducers/app.reducer.ts b/packages/uhk-web/src/app/store/reducers/app.reducer.ts index 9e6a8b799f6..033ba61a9e7 100644 --- a/packages/uhk-web/src/app/store/reducers/app.reducer.ts +++ b/packages/uhk-web/src/app/store/reducers/app.reducer.ts @@ -21,6 +21,7 @@ export interface State { appTheme: AppTheme; animationEnabled: boolean; errorPanelHeight: number; + isRunningOnWayland: boolean; started: boolean; commandLineArgs: CommandLineArgs; undoableNotification?: Notification; @@ -42,6 +43,7 @@ export const initialState: State = { appTheme: AppTheme.System, animationEnabled: true, errorPanelHeight: DEFAULT_ERROR_PANEL_HEIGHT, + isRunningOnWayland: false, started: false, commandLineArgs: {}, navigationCountAfterNotification: 0, @@ -70,6 +72,7 @@ export function reducer( return { ...state, commandLineArgs: payload.commandLineArgs, + isRunningOnWayland: payload.isRunningOnWayland, platform: payload.platform, osVersion: payload.osVersion, udevFileContent: payload.udevFileContent @@ -252,3 +255,4 @@ export const getAnimationEnabled = (state: State): boolean => state.animationEna export const getAppTheme = (state: State): AppTheme => state.appTheme; export const getHardwareConfiguration = (state: State): HardwareConfiguration => state.hardwareConfig; export const getPlatform = (state: State): string => state.platform; +export const isColorPickerEyeDropperEnabled = (state: State): boolean => !state.isRunningOnWayland;