From f95ecebb6bd8a59a9c949910d37bccde6cda55ee Mon Sep 17 00:00:00 2001 From: "Robin E. R. Davies" Date: Sun, 22 Jun 2025 16:12:03 -0400 Subject: [PATCH] Touch tooltips, more tooltips --- todo.txt | 1 + vite/src/pipedal/AppThemed.css | 3 + vite/src/pipedal/AppThemed.tsx | 24 ++- vite/src/pipedal/ControlTooltip.tsx | 34 ++- vite/src/pipedal/FilePropertyDialog.tsx | 16 +- vite/src/pipedal/LoopDialog.tsx | 7 +- vite/src/pipedal/MidiBindingView.tsx | 13 +- vite/src/pipedal/MidiBindingsDialog.tsx | 7 +- vite/src/pipedal/MidiChannelBindingDialog.tsx | 9 +- vite/src/pipedal/PluginControl.tsx | 27 ++- vite/src/pipedal/PresetSelector.tsx | 11 +- vite/src/pipedal/SelectMidiChannelsDialog.tsx | 5 + vite/src/pipedal/SnapshotEditor.tsx | 17 +- vite/src/pipedal/SystemMidiBindingView.tsx | 7 +- vite/src/pipedal/SystemMidiBindingsDialog.tsx | 31 ++- vite/src/pipedal/TemporaryDrawer.tsx | 7 +- vite/src/pipedal/TimebaseselectorDialog.tsx | 7 +- vite/src/pipedal/ToobPlayerControl.tsx | 96 ++++----- vite/src/pipedal/ToolTipEx.tsx | 204 ++++++++++++++++-- vite/src/pipedal/WifiDirectConfigDialog.tsx | 7 +- 20 files changed, 378 insertions(+), 155 deletions(-) diff --git a/todo.txt b/todo.txt index 49d2298..8b36e1e 100644 --- a/todo.txt +++ b/todo.txt @@ -1,4 +1,5 @@ +channel bindings help dialog. - { this.showDrawer() }} size="large"> - +
{this.state.canFullScreen && - { this.toggleFullScreen(); }} color="inherit" size="large"> @@ -827,22 +829,24 @@ export )} - + } ) : (
- { this.showDrawer() }} color="inherit" size="large"> - + {this.state.canFullScreen && ( - + )}
)} diff --git a/vite/src/pipedal/ControlTooltip.tsx b/vite/src/pipedal/ControlTooltip.tsx index 074efab..fae6398 100644 --- a/vite/src/pipedal/ControlTooltip.tsx +++ b/vite/src/pipedal/ControlTooltip.tsx @@ -9,30 +9,42 @@ import ToolTipEx from './ToolTipEx' interface ControlTooltipProps { children: ReactElement, uiControl: UiControl + valueTooltip?: React.ReactNode; } export default function ControlTooltip(props: ControlTooltipProps) { - let { children, uiControl } = props; + let { children, uiControl, valueTooltip } = props; if (uiControl.comment && (uiControl.comment !== uiControl.name)) { return ( - - {uiControl.name} - - {uiControl.comment} + + {uiControl.name} + + {uiControl.comment} - - )} + + )} > - {children} +
+ {children} +
); } else { return ( - {uiControl.name} + )} > - {children} +
+ {children} +
); } diff --git a/vite/src/pipedal/FilePropertyDialog.tsx b/vite/src/pipedal/FilePropertyDialog.tsx index dbc823b..d245e11 100644 --- a/vite/src/pipedal/FilePropertyDialog.tsx +++ b/vite/src/pipedal/FilePropertyDialog.tsx @@ -44,7 +44,6 @@ import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile'; import DialogActions from '@mui/material/DialogActions'; import DialogTitle from '@mui/material/DialogTitle'; import DialogContent from '@mui/material/DialogContent'; -import IconButton from '@mui/material/IconButton'; import IconButtonEx from './IconButtonEx'; import OldDeleteIcon from './OldDeleteIcon'; import Toolbar from '@mui/material/Toolbar'; @@ -995,7 +994,8 @@ export default withStyles( }} > {this.state.reordering && ( - - + Reorder files @@ -1013,7 +1013,8 @@ export default withStyles( )} {this.state.multiSelect && ( - - + {this.state.selectedFiles.length.toString() + " files selected."} @@ -1071,7 +1072,8 @@ export default withStyles( {!(this.state.reordering || this.state.multiSelect) && ( <> - { this.props.onCancel(); }} > - + {this.props.fileProperty.label} diff --git a/vite/src/pipedal/LoopDialog.tsx b/vite/src/pipedal/LoopDialog.tsx index 66c9ab9..698a404 100644 --- a/vite/src/pipedal/LoopDialog.tsx +++ b/vite/src/pipedal/LoopDialog.tsx @@ -29,7 +29,7 @@ import TextField, { StandardTextFieldProps } from "@mui/material/TextField"; import DialogTitle from "@mui/material/DialogTitle"; import DialogEx from "./DialogEx"; import Toolbar from "@mui/material/Toolbar"; -import IconButton from "@mui/material/IconButton"; +import IconButtonEx from "./IconButtonEx"; import ArrowBackIcon from "@mui/icons-material/ArrowBack"; import Typography from "@mui/material/Typography"; import Slider, { SliderProps } from "@mui/material/Slider"; @@ -456,7 +456,8 @@ export default function LoopDialog(props: LoopDialogProps) { > - - + Loop diff --git a/vite/src/pipedal/MidiBindingView.tsx b/vite/src/pipedal/MidiBindingView.tsx index 1eeadb6..0add748 100644 --- a/vite/src/pipedal/MidiBindingView.tsx +++ b/vite/src/pipedal/MidiBindingView.tsx @@ -33,7 +33,8 @@ import Utility from './Utility'; import Typography from '@mui/material/Typography'; import MicNoneOutlinedIcon from '@mui/icons-material/MicNoneOutlined'; import MicOutlinedIcon from '@mui/icons-material/MicOutlined'; -import IconButton from '@mui/material/IconButton'; +import IconButtonEx from './IconButtonEx'; + import NumericInput from './NumericInput'; @@ -259,7 +260,8 @@ const MidiBindingView = this.generateMidiNoteSelects() } - { if (this.props.listen) { this.props.onListen(-2, "", false) @@ -273,7 +275,7 @@ const MidiBindingView = ) : ( )} - +
) } @@ -292,7 +294,8 @@ const MidiBindingView = this.generateControlSelects() } - { if (this.props.listen) { this.props.onListen(-2, "", false) @@ -306,7 +309,7 @@ const MidiBindingView = ) : ( )} - + ) diff --git a/vite/src/pipedal/MidiBindingsDialog.tsx b/vite/src/pipedal/MidiBindingsDialog.tsx index 1b846e4..d38db41 100644 --- a/vite/src/pipedal/MidiBindingsDialog.tsx +++ b/vite/src/pipedal/MidiBindingsDialog.tsx @@ -30,7 +30,7 @@ import { withStyles } from "tss-react/mui"; import AppBar from '@mui/material/AppBar'; import Toolbar from '@mui/material/Toolbar'; import ArrowBackIcon from '@mui/icons-material/ArrowBack'; -import IconButton from '@mui/material/IconButton'; +import IconButtonEx from './IconButtonEx'; import MidiBinding from './MidiBinding'; import MidiBindingView from './MidiBindingView'; import Snackbar from '@mui/material/Snackbar'; @@ -350,14 +350,15 @@ export const MidiBindingDialog =
- - + Preset MIDI Bindings diff --git a/vite/src/pipedal/MidiChannelBindingDialog.tsx b/vite/src/pipedal/MidiChannelBindingDialog.tsx index e3ba3d5..027a81a 100644 --- a/vite/src/pipedal/MidiChannelBindingDialog.tsx +++ b/vite/src/pipedal/MidiChannelBindingDialog.tsx @@ -27,8 +27,7 @@ import DialogActions from '@mui/material/DialogActions'; import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel'; import FormControlLabel from '@mui/material/FormControlLabel'; import ChannelBindingHelpDialog from './ChannelBindingsHelpDialog'; - -import IconButton from '@mui/material/IconButton'; +import IconButtonEx from './IconButtonEx'; import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; import Checkbox from '@mui/material/Checkbox'; @@ -167,7 +166,9 @@ function MidiChannelBindingDialog(props: MidiChannelBindingDialogProps) { } label="Allow Program Changes" /> {false&&( // wait until the implementation stabilizes before exposing the help dialog. - { setHelpDialog(true); }} size="large"> - + )}
diff --git a/vite/src/pipedal/PluginControl.tsx b/vite/src/pipedal/PluginControl.tsx index 1d1b86a..3c66e92 100644 --- a/vite/src/pipedal/PluginControl.tsx +++ b/vite/src/pipedal/PluginControl.tsx @@ -146,6 +146,7 @@ export interface PluginControlProps extends WithStyles): void { if (this.isCapturedPointer(e)) { @@ -604,6 +610,7 @@ const PluginControl = break; } } + this.setState({ previewValue: undefined}); } previewInputValue(value: number, commitValue: boolean) { let range = this.valueToRange(value); @@ -667,6 +674,12 @@ const PluginControl = if (displayValue) { let v = this.formatDisplayValue(this.props.uiControl, value); displayValue.childNodes[0].textContent = v; + + if (commitValue) { + this.setState({ previewValue: undefined }); + } else { + this.setState({ previewValue: v }); + } } let selectElement = this.selectRef.current; if (selectElement) { @@ -1026,7 +1039,8 @@ const PluginControl = ) : (isGraphicEq) ? (
- + + ) : (
- + diff --git a/vite/src/pipedal/PresetSelector.tsx b/vite/src/pipedal/PresetSelector.tsx index 05cf62e..b5e3614 100644 --- a/vite/src/pipedal/PresetSelector.tsx +++ b/vite/src/pipedal/PresetSelector.tsx @@ -18,7 +18,7 @@ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import { SyntheticEvent, Component } from 'react'; -import IconButton from '@mui/material/IconButton'; +import IconButtonEx from './IconButtonEx'; import { PiPedalModel, PiPedalModelFactory, PresetIndex } from './PiPedalModel'; import SaveIconOutline from '@mui/icons-material/Save'; import MoreVertIcon from '@mui/icons-material/MoreVert'; @@ -300,12 +300,12 @@ const PresetSelector = justifyContent: "left", flexWrap: "nowrap", alignItems: "center", height: "100%", position: "relative" }}>
- { this.handleSave(); }} size="large"> - +
@@ -337,13 +337,14 @@ const PresetSelector =
- this.handlePresetMenuClick(e)} size="large" > - + + No MIDI devices found. + )}
) } - { if (this.props.listen) { this.props.onListen(-2, "", false) @@ -209,7 +210,7 @@ const SystemMidiBindingView = ) : ( )} - +
); diff --git a/vite/src/pipedal/SystemMidiBindingsDialog.tsx b/vite/src/pipedal/SystemMidiBindingsDialog.tsx index 736f4d5..2f41421 100644 --- a/vite/src/pipedal/SystemMidiBindingsDialog.tsx +++ b/vite/src/pipedal/SystemMidiBindingsDialog.tsx @@ -31,13 +31,13 @@ import { PiPedalModel, PiPedalModelFactory, ListenHandle } from './PiPedalModel' import Typography from '@mui/material/Typography'; import { Theme } from '@mui/material/styles'; import WithStyles from './WithStyles'; -import {createStyles} from './WithStyles'; +import { createStyles } from './WithStyles'; import { withStyles } from "tss-react/mui"; import AppBar from '@mui/material/AppBar'; import Toolbar from '@mui/material/Toolbar'; import ArrowBackIcon from '@mui/icons-material/ArrowBack'; -import IconButton from '@mui/material/IconButton'; +import IconButtonEx from './IconButtonEx'; import MidiBinding from './MidiBinding'; import SystemMidiBindingView from './SystemMidiBindingView'; import Snackbar from '@mui/material/Snackbar'; @@ -69,11 +69,11 @@ const styles = (theme: Theme) => createStyles({ paddingTop: 12 }), plainRow: css({ - borderWidth: "1px 0px 0px 0px", borderStyle: "solid", borderColor: "transparent" + borderWidth: "1px 0px 0px 0px", borderStyle: "solid", borderColor: "transparent" }), dividerRow: css({ - borderWidth: "1px 0px 0px 0px", borderStyle: "solid", borderColor: theme.palette.divider - }) + borderWidth: "1px 0px 0px 0px", borderStyle: "solid", borderColor: theme.palette.divider + }) }); @@ -139,7 +139,7 @@ export const SystemMidiBindingDialog = } else if (item.symbol === "nextProgram") { displayName = "Next Preset"; - }else if (item.symbol === "prevProgram") { + } else if (item.symbol === "prevProgram") { displayName = "Previous Preset"; } else if (item.symbol === "snapshot1") { @@ -170,8 +170,7 @@ export const SystemMidiBindingDialog = } else { found = false; } - if (found) - { + if (found) { result.push(new BindingEntry(displayName, listenInstanceId, item)); ++listenInstanceId; } @@ -277,12 +276,11 @@ export const SystemMidiBindingDialog = for (var item of items) { let symbol = item.midiBinding.symbol; - let hasDivider = symbol === "snapshot1" || symbol === "stopHotspot" || symbol === "shotdown"; - if (hasDivider) - { + let hasDivider = symbol === "snapshot1" || symbol === "stopHotspot" || symbol === "shotdown"; + if (hasDivider) { result.push( -
+
); } @@ -321,7 +319,7 @@ export const SystemMidiBindingDialog = render() { let props = this.props; - let { open} = props; + let { open } = props; const classes = withStyles.getClasses(this.props); if (!open) { @@ -332,20 +330,21 @@ export const SystemMidiBindingDialog = {}} + onEnterKey={() => { }} >
- - + System MIDI Bindings diff --git a/vite/src/pipedal/TemporaryDrawer.tsx b/vite/src/pipedal/TemporaryDrawer.tsx index 6c87b0f..ee1afaf 100644 --- a/vite/src/pipedal/TemporaryDrawer.tsx +++ b/vite/src/pipedal/TemporaryDrawer.tsx @@ -23,7 +23,7 @@ import { withStyles } from "tss-react/mui"; import {createStyles} from './WithStyles'; -import IconButton from '@mui/material/Toolbar'; +import IconButtonEx from './IconButtonEx'; import Drawer from '@mui/material/Drawer'; import ArrowBackIcon from '@mui/icons-material/ArrowBack'; import { Theme } from '@mui/material/styles'; @@ -100,9 +100,10 @@ export const TemporaryDrawer = withStyles( >
- + - +
{this.props.children} diff --git a/vite/src/pipedal/TimebaseselectorDialog.tsx b/vite/src/pipedal/TimebaseselectorDialog.tsx index 9c449e3..bdd4bd9 100644 --- a/vite/src/pipedal/TimebaseselectorDialog.tsx +++ b/vite/src/pipedal/TimebaseselectorDialog.tsx @@ -32,7 +32,7 @@ import TextField, { StandardTextFieldProps } from '@mui/material/TextField'; import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; import Toolbar from '@mui/material/Toolbar'; -import IconButton from '@mui/material/IconButton'; +import IconButtonEx from './IconButtonEx'; import ArrowBackIcon from '@mui/icons-material/ArrowBack'; import Timebase, { TimebaseUnits } from './Timebase'; @@ -198,7 +198,8 @@ export default function TimebaseSelectorDialog(props: TimebaseSelectorDialogProp > - { handleClose(); }} > - + Timebase Settings diff --git a/vite/src/pipedal/ToobPlayerControl.tsx b/vite/src/pipedal/ToobPlayerControl.tsx index d648675..80da5eb 100644 --- a/vite/src/pipedal/ToobPlayerControl.tsx +++ b/vite/src/pipedal/ToobPlayerControl.tsx @@ -27,13 +27,12 @@ import LoopDialog from './LoopDialog'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import ButtonEx from './ButtonEx'; -import IconButton from '@mui/material/IconButton'; +import IconButtonEx from './IconButtonEx'; import Pause from '@mui/icons-material/Pause'; import PlayArrow from '@mui/icons-material/PlayArrow'; import FastForward from '@mui/icons-material/FastForward'; import FastRewind from '@mui/icons-material/FastRewind'; import { PiPedalModelFactory, State } from './PiPedalModel'; -import ButtonTooltip from './ButtonTooltip'; import { pathFileNameOnly } from './FileUtils'; import ButtonBase from '@mui/material/ButtonBase'; import FilePropertyDialog from './FilePropertyDialog'; @@ -351,61 +350,56 @@ export default function ToobPlayerControl( }, })} > - - { - if (position > start + 3.0) { + { + if (position > start + 3.0) { + model.sendPedalboardControlTrigger( + props.instanceId, + "stop", + 1 + ); + } else { + onPreviousTrack(); + } + }} + > + + + { + if (pluginState != PluginState.Idle) { + if (paused) { model.sendPedalboardControlTrigger( props.instanceId, - "stop", + "play", 1 ); } else { - onPreviousTrack(); + model.sendPedalboardControlTrigger( + props.instanceId, + "pause", + 1 + ); } - }} - > - - - - - { - if (pluginState != PluginState.Idle) { - if (paused) { - model.sendPedalboardControlTrigger( - props.instanceId, - "play", - 1 - ); - } else { - model.sendPedalboardControlTrigger( - props.instanceId, - "pause", - 1 - ); - } - } - }} - > - {paused ? ( - - ) : ( - - )} - - - - { onNextTrack(); }} - > - - - + } + }} + > + {paused ? ( + + ) : ( + + )} + + { onNextTrack(); }} + > + + ); diff --git a/vite/src/pipedal/ToolTipEx.tsx b/vite/src/pipedal/ToolTipEx.tsx index 9c0d9a4..9c8326b 100644 --- a/vite/src/pipedal/ToolTipEx.tsx +++ b/vite/src/pipedal/ToolTipEx.tsx @@ -25,39 +25,213 @@ import React from 'react'; import Tooltip from '@mui/material/Tooltip'; export interface ToolTipExProps extends React.ComponentProps { + valueTooltip?: React.ReactNode; // For use with value prop, to show a tooltip on the value. } +/* ToolTipEx: a reimplementation of the MUI Tooltip that works with pointer events and long presses. */ + function ToolTipEx(props: ToolTipExProps) { - let [disableToolTip, setDisableToolTip] = React.useState(false); - let {title, ...extras} = props; - function handleMouseDownCapture(event: React.PointerEvent) { - if ((event as any).pointerType === "mouse") { - setDisableToolTip(true); + let {title, valueTooltip, ...extras} = props; + let [open,setOpen]= React.useState(false); + let [isLongPress, setIsLongPress] = React.useState(false); + let [longPressLeaving, setLongPressLeaving] = React.useState(false); + let [timeout, setTimeout] = React.useState(0); + let [timeoutInstance, setTimeoutInstance] = React.useState(0); + let [pointerDownPoint, setPointerdownPoint] = React.useState<{x: number, y: number} | null>(null); + + const hoverTimeout = 1250; + const longpressTimeout = 500; + const longpressLeaveTimeout = 1500; + + function startTimeout(timeout: number) { + setTimeout(timeout); + setTimeoutInstance(timeoutInstance + 1); // make useeffect run. + } + function stopTimeout() { + if (timeout > 0) { + startTimeout(0); + } + } + function handleMouseEnter(event: React.MouseEvent) { + setOpen(false); + startTimeout(hoverTimeout); + } + + function handleMouseLeave(event: React.MouseEvent) { + setOpen(false); + stopTimeout(); + } + + function handlePointerDownCapture(event: React.PointerEvent) { + let pointerType = (event as any).pointerType || "n/a"; + setIsLongPress(false); + if (pointerType === "mouse") { + setOpen(false); + stopTimeout(); // Reset hover timeout for mouse + } else { // pen, or touch. + setTimeout(longpressTimeout); + setOpen(false); + setPointerdownPoint({x: event.clientX, y: event.clientY}); } } - function handlePointerMoveCapture(event: React.PointerEvent) { - if ((event as any).pointerType !== "mouse") { - setDisableToolTip(false); + React.useEffect(()=> { + let t = timeout; + let handle: number | null = null; + if (valueTooltip === undefined) // no timeout if there's a value tooltip + { + if (t > 0) { + console.log("ToolTipEx: starting timeout for ", t); + handle = window.setTimeout(() => { + setOpen(true); + },t); + } } + return () => { + if (handle !== null) { + console.log("ToolTipEx: clearing timeout for ", t); + window.clearTimeout(handle); + } + }; + },[timeoutInstance]); + + React.useEffect(()=> { + if (longPressLeaving) { + let handle: number | null = null; + handle = window.setTimeout(() => { + setIsLongPress(false); + setLongPressLeaving(false); + }, longpressLeaveTimeout); + return () => { + if (handle !== null) { + window.clearTimeout(handle); + } + }; + } else { + return () => { }; + } + },[longPressLeaving]); + + function handlePointerCancel(event: React.PointerEvent) { + setOpen(false); + setIsLongPress(false); + stopTimeout(); + setPointerdownPoint(null); // Reset the mouse down point + } + function handlePointerMoveCapture(event: React.PointerEvent) { + let pointerType = (event as any).pointerType || "n/a"; + if (pointerType === "mouse") { + setOpen(false); + startTimeout(hoverTimeout); // Reset hover timeout for mouse + } else { // pen, or touch. + if (pointerDownPoint) { + const dx = event.clientX - pointerDownPoint.x; + const dy = event.clientY - pointerDownPoint.y; + if (Math.abs(dx) > 5 || Math.abs(dy) > 5) { + // If the mouse has moved more than 5 pixels, re-enable the tooltip + setOpen(false); + setIsLongPress(false); + stopTimeout(); + setPointerdownPoint(null); // Reset the mouse down point + } + } + } + } + function handleConextMenu(event: React.MouseEvent) { + event.preventDefault(); // Prevent the default context menu from appearing + event.stopPropagation(); // Prevent the default context menu from appearing + if (pointerDownPoint) // touch sequence. This is a long press. + { + setIsLongPress(true); + setOpen(true); + stopTimeout(); + } + } // Reset hover timeout for context menu + function handlePointerUpCapture(event: React.PointerEvent) { + let pointerType = (event as any).pointerType || "n/a"; + if (pointerType === "mouse") { + setOpen(false); + stopTimeout(); // Reset hover timeout for mouse + } else { // pen, or touch. + stopTimeout(); + setOpen(false); + if (isLongPress) { + // If this is a long press, we want to leave the tooltip open for a while. + setLongPressLeaving(true); + } + } + } + let effectiveTitle: React.ReactNode | null = null; + let placement: "top-start" | "right" = "top-start"; + if (valueTooltip !== undefined && !isLongPress) { + effectiveTitle = valueTooltip; // Show value tooltip if available + placement = "right"; + } + else { + if (open || isLongPress) { + effectiveTitle = title; // Show regular title if no value tooltip + } + } + function handleClickCapture(event: React.MouseEvent) { + setLongPressLeaving(false); + setIsLongPress(false); + setOpen(false); + stopTimeout(); // Reset hover timeout on click } return (
{ + console.log("ToolTipEx: onClickCapture"); + handleClickCapture(e); + }} + + onMouseEnter={(e)=> { + console.log("ToolTipEx: onMouseEnter"); + + handleMouseEnter(e); + }} + onMouseLeave={(e)=> { + console.log("ToolTipEx: onMouseLeave"); + handleMouseLeave(e); + }} + + onPointerCancelCapture={(e) => { + console.log("ToolTipEx: onPointerCancelCapture"); + handlePointerCancel(e); + }} + onContextMenuCapture={(e) => { + console.log("ToolTipEx: onContextMenuCapture"); + handleConextMenu(e); + return false; + }} onPointerDownCapture={(e) => { - handleMouseDownCapture(e); + console.log("ToolTipEx: onPointerDownCapture"); + handlePointerDownCapture(e); }} onPointerMoveCapture={(e) => { + console.log("ToolTipEx: onPointerMoveCapture"); handlePointerMoveCapture(e); }} - onMouseLeave={() => { - setDisableToolTip(false); - } - } + onPointerUpCapture={(e) => { + console.log("ToolTipEx: onPointerUpCapture"); + handlePointerUpCapture(e); + }} >
) diff --git a/vite/src/pipedal/WifiDirectConfigDialog.tsx b/vite/src/pipedal/WifiDirectConfigDialog.tsx index 90909e6..d53c122 100644 --- a/vite/src/pipedal/WifiDirectConfigDialog.tsx +++ b/vite/src/pipedal/WifiDirectConfigDialog.tsx @@ -23,7 +23,7 @@ */ import React from 'react'; -import IconButton from '@mui/material/IconButton'; +import IconButtonEx from './IconButtonEx'; import ArrowBackIcon from '@mui/icons-material/ArrowBack'; import Button from '@mui/material/Button'; @@ -305,14 +305,15 @@ const WifiDirectConfigDialog = {this.state.landscapeLayout && (
- { this.props.onClose(); }} aria-label="back" size="large"> - +