diff --git a/.eslintrc.json b/.eslintrc.json index 032b4cf..806d6ea 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -39,6 +39,7 @@ "react-hooks/rules-of-hooks": "error", "jsx-a11y/click-events-have-key-events":"off", "jsx-a11y/no-static-element-interactions":"off", + "jsx-a11y/control-has-associated-label": "off", "no-continue": "off", "no-multiple-empty-lines": "off", "react/function-component-definition": "off", diff --git a/src/components/UI.jsx b/src/components/UI.jsx index becf3b5..b16c2ab 100644 --- a/src/components/UI.jsx +++ b/src/components/UI.jsx @@ -20,10 +20,14 @@ const UI = () => { isHistoricalView, is3D, isOnMobile, + showMvmCtrls, + holdPaint, ] = useSelector((state) => [ state.canvas.isHistoricalView, state.canvas.is3D, state.user.isOnMobile, + state.gui.showMvmCtrls, + state.gui.holdPaint, ], shallowEqual); return ( @@ -36,10 +40,9 @@ const UI = () => { {(!is3D) && } - {// (isOnMobile) && - } - - {(!is3D) && } + {(showMvmCtrls || ((is3D || holdPaint) && isOnMobile)) + && } + {(!is3D && isOnMobile) && } )} diff --git a/src/components/buttons/MovementControls.jsx b/src/components/buttons/MovementControls.jsx index f3ab782..ecc2fa9 100644 --- a/src/components/buttons/MovementControls.jsx +++ b/src/components/buttons/MovementControls.jsx @@ -8,7 +8,6 @@ import React, { } from 'react'; import { useSelector, - shallowEqual, useDispatch, } from 'react-redux'; import { @@ -20,7 +19,7 @@ import { PiArrowFatDown, PiCaretDoubleUp, PiCaretDoubleDown, -} from "react-icons/pi"; +} from 'react-icons/pi'; import { setMoveU, @@ -34,10 +33,7 @@ const btnStyle = { }; const MovementControls = () => { - const [holdPaint, is3D] = useSelector((state) => [ - state.gui.holdPaint, - state.canvas.is3D, - ], shallowEqual); + const is3D = useSelector((state) => state.canvas.is3D); const dispatch = useDispatch(); const onPressStart = useCallback((event) => { @@ -92,7 +88,7 @@ const MovementControls = () => { const onCancel = useCallback((event) => { event.preventDefault(); - dispatch(cancelMove()); + // dispatch(cancelMove()); }, []); const refCallBack = useCallback((node) => { @@ -107,10 +103,6 @@ const MovementControls = () => { node.addEventListener('touchcancel', onCancel, { passive: false }); }, [onPressStart, onPressStop, onCancel]); - if (!holdPaint && !is3D) { - return null; - } - return ( <>
{ - const holdPaint = useSelector((state) => state.gui.holdPaint); + const [ + holdPaint, + showMvmCtrls, + ] = useSelector((state) => [ + state.gui.holdPaint, + state.gui.showMvmCtrls, + ], shallowEqual); const dispatch = useDispatch(); return ( @@ -20,6 +26,9 @@ const PencilButton = () => { className={ `actionbuttons${(holdPaint === HOLD_PAINT.PENCIL) ? ' pressed' : ''}` } + style={{ + bottom: (holdPaint === HOLD_PAINT.PENCIL || showMvmCtrls) ? 180 : 98, + }} role="button" title={(holdPaint === HOLD_PAINT.PENCIL) ? t`Disable Pencil` diff --git a/src/components/windows/Settings.jsx b/src/components/windows/Settings.jsx index cffab50..cb40d29 100644 --- a/src/components/windows/Settings.jsx +++ b/src/components/windows/Settings.jsx @@ -11,6 +11,7 @@ import LanguageSelect from '../LanguageSelect'; import { toggleGrid, togglePixelNotify, + toggleMvmCtrls, toggleMute, toggleAutoZoomIn, toggleCompactPalette, @@ -56,6 +57,7 @@ function Settings() { const [ isGridShown, isPixelNotifyShown, + isMvmCtrlsShown, autoZoomIn, compactPalette, isPotato, @@ -67,6 +69,7 @@ function Settings() { ] = useSelector((state) => [ state.gui.showGrid, state.gui.showPixelNotify, + state.gui.showMvmCtrls, state.gui.autoZoomIn, state.gui.compactPalette, state.gui.isPotato, @@ -98,6 +101,14 @@ function Settings() { > {t`Show circles where pixels are placed.`} + dispatch(toggleMvmCtrls())} + > + {t`Always show movement control buttons`} +