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`}
+