From daa794c602d6e0e4b6a1435d07750aa52d3716dc Mon Sep 17 00:00:00 2001 From: Cipulot <40441626+Cipulot@users.noreply.github.com> Date: Wed, 6 Dec 2023 01:19:02 +0100 Subject: [PATCH 1/4] Update custom-control.tsx --- .../configure-panes/custom/custom-control.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/panes/configure-panes/custom/custom-control.tsx b/src/components/panes/configure-panes/custom/custom-control.tsx index 3ab9e818..7ecef2c5 100644 --- a/src/components/panes/configure-panes/custom/custom-control.tsx +++ b/src/components/panes/configure-panes/custom/custom-control.tsx @@ -50,7 +50,7 @@ type ControlGetSet = { updateValue: (name: string, ...command: number[]) => void; }; -type VIACustomControlProps = VIAItem & ControlGetSet; +type VIACustomControlProps = VIAItem & ControlGetSet & {label: string}; const boxOrArr = (elem: N | N[]) => Array.isArray(elem) ? elem : [elem]; @@ -83,10 +83,18 @@ const VIACustomControl = (props: VIACustomControlProps) => { const buttonOption: any[] = options || [1]; return ( - props.updateValue(name, ...command, buttonOption[0]) - } - >Click + onClick={() => { + if ( + window.confirm( + `Are you sure you want to continue performing the action **${props.label}**?`, + ) + ) { + props.updateValue(name, ...command, buttonOption[0]); + } + }} + > + Click + ); } case 'range': { From 520beb10913714593069c948893c037d10e477d7 Mon Sep 17 00:00:00 2001 From: Cipulot <40441626+Cipulot@users.noreply.github.com> Date: Wed, 6 Dec 2023 01:37:33 +0100 Subject: [PATCH 2/4] Removal of asterisks --- src/components/panes/configure-panes/custom/custom-control.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/panes/configure-panes/custom/custom-control.tsx b/src/components/panes/configure-panes/custom/custom-control.tsx index 7ecef2c5..9d5e338c 100644 --- a/src/components/panes/configure-panes/custom/custom-control.tsx +++ b/src/components/panes/configure-panes/custom/custom-control.tsx @@ -86,7 +86,7 @@ const VIACustomControl = (props: VIACustomControlProps) => { onClick={() => { if ( window.confirm( - `Are you sure you want to continue performing the action **${props.label}**?`, + `Are you sure you want to continue performing the action ${props.label}?`, ) ) { props.updateValue(name, ...command, buttonOption[0]); From b6a54c21d10d455b5a73d4bb7eba93cd47ca08b7 Mon Sep 17 00:00:00 2001 From: Cipulot <40441626+Cipulot@users.noreply.github.com> Date: Wed, 17 Jul 2024 13:18:21 +0200 Subject: [PATCH 3/4] Addition of toggle in settings --- .../configure-panes/custom/custom-control.tsx | 46 ++++++++++++------- src/components/panes/settings.tsx | 14 +++++- src/store/settingsSlice.ts | 6 +++ src/types/types.ts | 1 + 4 files changed, 49 insertions(+), 18 deletions(-) diff --git a/src/components/panes/configure-panes/custom/custom-control.tsx b/src/components/panes/configure-panes/custom/custom-control.tsx index 9d5e338c..f37c78de 100644 --- a/src/components/panes/configure-panes/custom/custom-control.tsx +++ b/src/components/panes/configure-panes/custom/custom-control.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import {useSelector} from 'react-redux'; import {PelpiKeycodeInput} from '../../../inputs/pelpi/keycode-input'; import {AccentButton} from '../../../inputs/accent-button'; import {AccentSlider} from '../../../inputs/accent-slider'; @@ -10,6 +11,7 @@ import type {LightingData} from '../../../../types/types'; import {ArrayColorPicker} from '../../../inputs/color-picker'; import {ConnectedColorPalettePicker} from 'src/components/inputs/color-palette-picker'; import {shiftFrom16Bit, shiftTo16Bit} from 'src/utils/keyboard-api'; +import {getAskConfirmationButton} from 'src/store/settingsSlice'; type Props = { lightingData: LightingData; @@ -28,21 +30,26 @@ type ControlMeta = [ type AdvancedControlProps = Props & {meta: ControlMeta}; export const VIACustomItem = React.memo( - (props: VIACustomControlProps & {_id: string}) => ( - - - - {'type' in props ? ( - - ) : ( - props.content - )} - - - ), + (props: VIACustomControlProps & {_id: string}) => { + const showAskConfirmationButton = useSelector(getAskConfirmationButton); + + return ( + + + + {'type' in props ? ( + + ) : ( + props.content + )} + + + ); + }, ); type ControlGetSet = { @@ -50,7 +57,8 @@ type ControlGetSet = { updateValue: (name: string, ...command: number[]) => void; }; -type VIACustomControlProps = VIAItem & ControlGetSet & {label: string}; +type VIACustomControlProps = VIAItem & + ControlGetSet & {label: string; showAskConfirmationButton: boolean}; const boxOrArr = (elem: N | N[]) => Array.isArray(elem) ? elem : [elem]; @@ -76,7 +84,8 @@ const getRangeBytes = (value: number, max: number) => { }; const VIACustomControl = (props: VIACustomControlProps) => { - const {content, type, options, value} = props as any; + const {content, type, options, value, showAskConfirmationButton} = + props as any; const [name, ...command] = content; switch (type) { case 'button': { @@ -85,11 +94,14 @@ const VIACustomControl = (props: VIACustomControlProps) => { { if ( + showAskConfirmationButton && window.confirm( `Are you sure you want to continue performing the action ${props.label}?`, ) ) { props.updateValue(name, ...command, buttonOption[0]); + } else if (!showAskConfirmationButton) { + props.updateValue(name, ...command, buttonOption[0]); } }} > diff --git a/src/components/panes/settings.tsx b/src/components/panes/settings.tsx index 119f4587..359db262 100644 --- a/src/components/panes/settings.tsx +++ b/src/components/panes/settings.tsx @@ -14,11 +14,13 @@ import { import {AccentSlider} from '../inputs/accent-slider'; import {useDispatch} from 'react-redux'; import {useAppSelector} from 'src/store/hooks'; -import { +import { getShowDesignTab, getDisableFastRemap, toggleCreatorMode, toggleFastRemap, + getAskConfirmationButton, + toggleAskConfirmationButton, getThemeMode, toggleThemeMode, getThemeName, @@ -57,6 +59,7 @@ export const Settings = () => { const dispatch = useDispatch(); const showDesignTab = useAppSelector(getShowDesignTab); const disableFastRemap = useAppSelector(getDisableFastRemap); + const showAskConfirmationButton = useAppSelector(getAskConfirmationButton); const themeMode = useAppSelector(getThemeMode); const themeName = useAppSelector(getThemeName); const renderMode = useAppSelector(getRenderMode); @@ -120,6 +123,15 @@ export const Settings = () => { /> + + + + dispatch(toggleAskConfirmationButton())} + isChecked={showAskConfirmationButton} + /> + + diff --git a/src/store/settingsSlice.ts b/src/store/settingsSlice.ts index 0355db4a..f4544bb1 100644 --- a/src/store/settingsSlice.ts +++ b/src/store/settingsSlice.ts @@ -45,6 +45,9 @@ const settingsSlice = createSlice({ toggleCreatorMode: (state) => { toggleBool(state, 'showDesignTab'); }, + toggleAskConfirmationButton: (state) => { + toggleBool(state, 'showAskConfirmationButton'); + }, toggleThemeMode: (state) => { const newThemeMode = state.themeMode === 'light' ? 'dark' : 'light'; document.documentElement.dataset.themeMode = newThemeMode; @@ -104,6 +107,7 @@ const settingsSlice = createSlice({ export const { toggleFastRemap, toggleCreatorMode, + toggleAskConfirmationButton, setTestMatrixEnabled, setTestKeyboardSoundsSettings, setMacroEditorSettings, @@ -125,6 +129,8 @@ export const getDisableFastRemap = (state: RootState) => state.settings.disableFastRemap; export const getShowDesignTab = (state: RootState) => state.settings.showDesignTab; +export const getAskConfirmationButton = (state: RootState) => + state.settings.showAskConfirmationButton; export const getRestartRequired = (state: RootState) => state.settings.restartRequired; export const getIsTestMatrixEnabled = (state: RootState) => diff --git a/src/types/types.ts b/src/types/types.ts index 3b86fb2f..729fd17e 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -84,6 +84,7 @@ export type TestKeyboardSoundsSettings = { export type Settings = { showDesignTab: boolean; disableFastRemap: boolean; + showAskConfirmationButton: boolean; renderMode: '3D' | '2D'; themeMode: 'light' | 'dark'; themeName: string; From a1d617d84e8caf2466ab73e1c0fd6425bff06d43 Mon Sep 17 00:00:00 2001 From: Cipulot <40441626+Cipulot@users.noreply.github.com> Date: Wed, 17 Jul 2024 13:26:22 +0200 Subject: [PATCH 4/4] added default value --- src/utils/device-store.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/utils/device-store.ts b/src/utils/device-store.ts index ecfd1e88..077a5608 100644 --- a/src/utils/device-store.ts +++ b/src/utils/device-store.ts @@ -31,6 +31,7 @@ const defaultStoreData = { settings: { showDesignTab: false, disableFastRemap: false, + showAskConfirmationButton: true, renderMode: '2D' as const, themeMode: 'dark' as const, designDefinitionVersion: 'v3' as const,