diff --git a/packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.html b/packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.html index 0f499326b74..db0d86d2a8b 100644 --- a/packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.html +++ b/packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.html @@ -10,6 +10,7 @@ [allowLayerDoubleTap]="allowLayerDoubleTap$ | async" [backlightingMode]="backlightingMode$ | async" [canPasteLayer]="hasCopiedLayer$ | async" + [copiedLayerOrigin]="copiedLayerOrigin$ | async" [currentLayer]="currentLayer$ | async" [isBacklightingColoring]="isBacklightingColoring$ | async" [lastEditedKey]="lastEditedKey$ | async" diff --git a/packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.ts b/packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.ts index b35622c142b..0d0712ac83f 100644 --- a/packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.ts +++ b/packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.ts @@ -7,7 +7,7 @@ import { Observable, Subscription } from 'rxjs'; import { map } from 'rxjs/operators'; import { BacklightingMode, HalvesInfo, KeyboardLayout, Keymap, LayerName } from 'uhk-common'; -import { LastEditedKey, LayerOption, ModifyColorOfBacklightingColorPalettePayload } from '../../../models'; +import { CopiedLayerOrigin, LastEditedKey, LayerOption, ModifyColorOfBacklightingColorPalettePayload } from '../../../models'; import { ChangeKeymapDescription } from '../../../models/ChangeKeymapDescription'; import { SelectOptionData } from '../../../models/select-option-data'; @@ -16,6 +16,7 @@ import { backlightingColorPalette, backlightingMode, getHalvesInfo, + getCopiedLayerOrigin, getHasCopiedLayer, getKeyboardLayout, getLayerOptions, @@ -56,6 +57,7 @@ import { export class KeymapEditComponent implements OnDestroy { backlightingMode$: Observable; + copiedLayerOrigin$: Observable; currentLayer$: Observable; deletable$: Observable; hasCopiedLayer$: Observable; @@ -111,6 +113,7 @@ export class KeymapEditComponent implements OnDestroy { this.backlightingMode$ = store.select(backlightingMode); this.currentLayer$ = store.select(getSelectedLayerOption); + this.copiedLayerOrigin$ = store.select(getCopiedLayerOrigin); this.keymap$ = store.select(getSelectedKeymap); this.keymapSubscription = this.keymap$ .subscribe(keymap => { 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 06f62c59cda..9c335fbd345 100644 --- a/packages/uhk-web/src/app/components/layers/layers.component.html +++ b/packages/uhk-web/src/app/components/layers/layers.component.html @@ -47,7 +47,7 @@ #pasteTooltip="ngbTooltip" type="button" class="btn btn-default" - ngbTooltip="Overwrite the current layer with the layer stored in Agent's virtual clipboard." + [ngbTooltip]="pasteLayerTooltip" tooltipClass="tooltip-layer-action" triggers="hover" container="body" diff --git a/packages/uhk-web/src/app/components/layers/layers.component.ts b/packages/uhk-web/src/app/components/layers/layers.component.ts index 89047a57ae9..c5a0aa52e50 100644 --- a/packages/uhk-web/src/app/components/layers/layers.component.ts +++ b/packages/uhk-web/src/app/components/layers/layers.component.ts @@ -4,7 +4,7 @@ import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'; import { colord, RgbColor } from 'colord'; import { LayerName, RgbColorInterface } from 'uhk-common'; -import { LayerOption, ModifyColorOfBacklightingColorPalettePayload } from '../../models'; +import { LayerOption, CopiedLayerOrigin, ModifyColorOfBacklightingColorPalettePayload } from '../../models'; @Component({ selector: 'layers', @@ -17,6 +17,7 @@ export class LayersComponent { @Input() allowLayerCopy = false; @Input() allowNewLayers: boolean; @Input() canPasteLayer = false; + @Input() copiedLayerOrigin: CopiedLayerOrigin; @Input() current: LayerOption; @Input() layerOptions: LayerOption[]; @Input() paletteColors: Array = []; @@ -42,6 +43,15 @@ export class LayersComponent { LayerName = LayerName; newColorPaletteColor = '#000000'; + get pasteLayerTooltip(): string { + const origin = this.copiedLayerOrigin; + if (!origin) { + return `Overwrite the current layer with the layer stored in Agent's virtual clipboard.`; + } + + return `Overwrite the current layer with the ${origin.deviceName}: ${origin.keymapName}: ${origin.layerName} layer stored in Agent's virtual clipboard.`; + } + onSelectLayer(option: LayerOption) { if (this.current?.id === option.id) { return; diff --git a/packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.html b/packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.html index 9424a9b138f..96f25e21222 100644 --- a/packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.html +++ b/packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.html @@ -3,6 +3,7 @@ [allowLayerCopy]="allowLayerCopy" [allowNewLayers]="allowNewLayers" [canPasteLayer]="canPasteLayer" + [copiedLayerOrigin]="copiedLayerOrigin" [paletteColors]="paletteColors" [current]="currentLayer" [layerOptions]="layerOptions" diff --git a/packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.ts b/packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.ts index 0f7ff45671e..92f37e4122f 100644 --- a/packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.ts +++ b/packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.ts @@ -58,7 +58,7 @@ import { } from '../../../models/svg-key-events'; import { SelectOptionData } from '../../../models/select-option-data'; import { findModuleById, mapLeftRightModifierToKeyActionModifier } from '../../../util'; -import { LastEditedKey, LayerOption, ModifyColorOfBacklightingColorPalettePayload, OpenPopoverModel, SelectedKeyModel } from '../../../models'; +import { CopiedLayerOrigin, LastEditedKey, LayerOption, ModifyColorOfBacklightingColorPalettePayload, OpenPopoverModel, SelectedKeyModel } from '../../../models'; interface NameValuePair { name: string; @@ -105,6 +105,7 @@ export class SvgKeyboardWrapComponent implements AfterViewInit, OnInit, OnChange @Input() allowNewLayers: boolean; @Input() backlightingMode: BacklightingMode; @Input() canPasteLayer = false; + @Input() copiedLayerOrigin: CopiedLayerOrigin; @Input() currentLayer: LayerOption; @Input() isBacklightingColoring = false; @Input() keymap: Keymap; diff --git a/packages/uhk-web/src/app/models/copied-layer-origin.ts b/packages/uhk-web/src/app/models/copied-layer-origin.ts new file mode 100644 index 00000000000..a55cf84c626 --- /dev/null +++ b/packages/uhk-web/src/app/models/copied-layer-origin.ts @@ -0,0 +1,5 @@ +export interface CopiedLayerOrigin { + deviceName: string; + keymapName: string; + layerName: string; +} diff --git a/packages/uhk-web/src/app/models/index.ts b/packages/uhk-web/src/app/models/index.ts index 4b7905afca0..4369d1ae62a 100644 --- a/packages/uhk-web/src/app/models/index.ts +++ b/packages/uhk-web/src/app/models/index.ts @@ -2,6 +2,7 @@ export * from './apply-user-configuration-from-file-payload'; export * from './backlighting-option'; export * from './ble-adding-state'; export * from './config-size-state'; +export * from './copied-layer-origin'; export * from './delete-host-connection-payload'; export * from './device-ui-states'; export * from './dongle-pairing-state'; diff --git a/packages/uhk-web/src/app/store/index.ts b/packages/uhk-web/src/app/store/index.ts index 2628ea085be..359e1157c14 100644 --- a/packages/uhk-web/src/app/store/index.ts +++ b/packages/uhk-web/src/app/store/index.ts @@ -140,6 +140,7 @@ export const lastEditedKey = createSelector(userConfigState, fromUserConfig.last export const getOpenPopover = createSelector(userConfigState, fromUserConfig.getOpenPopover); export const getSelectedLayerOption = createSelector(userConfigState, fromUserConfig.getSelectedLayerOption); export const getHasCopiedLayer = createSelector(userConfigState, fromUserConfig.getHasCopiedLayer); +export const getCopiedLayerOrigin = createSelector(userConfigState, fromUserConfig.getCopiedLayerOrigin); export const getLayerOptions = createSelector(userConfigState, fromUserConfig.getLayerOptions); export const getSecondaryRoleOptions = createSelector(getSelectedLayerOption, getLayerOptions, (selectedLayer, layerOptions): SelectOptionData[] => { diff --git a/packages/uhk-web/src/app/store/reducers/user-configuration.ts b/packages/uhk-web/src/app/store/reducers/user-configuration.ts index ae35b0a73e2..f946c23f3e8 100644 --- a/packages/uhk-web/src/app/store/reducers/user-configuration.ts +++ b/packages/uhk-web/src/app/store/reducers/user-configuration.ts @@ -47,6 +47,7 @@ import { BleAddingStates, BleAddingState, BacklightingOption, + CopiedLayerOrigin, defaultLastEditKey, ExchangeKey, LastEditedKey, @@ -97,6 +98,7 @@ export interface State { isCustomPresetTheLastLoadedPreset: boolean; copiedLayer?: Layer; copiedLayerMacroNames?: Map; + copiedLayerOrigin?: CopiedLayerOrigin; } export const initialState: State = { @@ -413,6 +415,11 @@ export function reducer( ...state, copiedLayer: new Layer(layerToCopy), copiedLayerMacroNames, + copiedLayerOrigin: { + deviceName: state.userConfiguration.deviceName, + keymapName: currentKeymap.name, + layerName: state.layerOptions.get(layerId).name, + }, }; } @@ -1474,6 +1481,7 @@ export const getLayerOptions = (state: State): LayerOption[] => Array .sort((a, b) => a.order - b.order); export const getSelectedLayerOption = (state: State): LayerOption => state.selectedLayerOption; export const getHasCopiedLayer = (state: State): boolean => !!state.copiedLayer; +export const getCopiedLayerOrigin = (state: State): CopiedLayerOrigin | undefined => state.copiedLayerOrigin; export const getSelectedMacroAction = (state: State): SelectedMacroAction => state.selectedMacroAction; export const getSelectedModuleConfiguration = (state: State): ModuleConfiguration => { if(!state.selectedModuleConfigurationId) {