shawn/op-pedal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Disable tooltip when intereacting.

Browse Source
This commit is contained in:
Robin E. R. Davies
2025-06-21 15:26:26 -04:00
parent 2dbb9d8c6d
commit aff98b0c20
11 changed files with 123 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
todo.txt
-4
View File
@@ -1,12 +1,8 @@
Numeric up-down buttons blown in light theme.
Tooltips on touch ui?
convolution reverb broken.
- pipewire aux in?
vite/src/pipedal/AppThemed.css
+26 -24
View File
@@ -4,43 +4,45 @@
margin-top: 0px;
margin-bottom: 0px;
}
.fossCopyrights {
padding-top: 16px;
padding-bottom: 16px;
}
.fossLicense {
padding-left: 36px;
border-bottom: 1px #CCC solid
}
div {
min-width: 0;
background: "red";
}
input[type="number"].scrollMod::-webkit-outer-spin-button,
input[type="number"].scrollMod::-webkit-inner-spin-button {
-webkit-appearance: none;
color: #FFF;
background: #0001 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
filter: invert(100%);
width: 1em;
padding: 2px;
opacity: .6; /* shows Spin Buttons per default (Chrome >= 39) */
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
input[type="number"].scrollMod::-webkit-inner-spin-button:hover,
input[type="number"].scrollMod::-webkit-inner-spin-button:active {
background: #0003 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
opacity: .8;
}
@media not all /* seems to be ok in current chrome (prefers-color-scheme: light) */{
input[type="number"].scrollMod::-webkit-outer-spin-button,
input[type="number"].scrollMod::-webkit-inner-spin-button {
-webkit-appearance: none;
color: #FFF;
background: #0001 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
filter: invert(100%);
width: 1em;
padding: 2px;
opacity: .6;
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
input[type="number"].scrollMod::-webkit-inner-spin-button:hover,
input[type="number"].scrollMod::-webkit-inner-spin-button:active {
background: #0003 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
opacity: .8;
}
}
input[type=number] {
-moz-appearance: textfield;
-moz-appearance: textfield;
}
vite/src/pipedal/ButtonEx.tsx
+4 -6
View File
@@ -22,7 +22,7 @@
*/
import Button, {ButtonProps} from '@mui/material/Button';
import Tooltip from "@mui/material/Tooltip";
import ToolTipEx from './ToolTipEx';
import Typography from "@mui/material/Typography";
@@ -34,19 +34,17 @@ function ButtonEx(props: ButtonExProps) {
const { tooltip, style, ...extra } = props;
return (
<Tooltip title={
<ToolTipEx title={
(
<Typography variant="caption">{tooltip || extra['aria-label']}</Typography>
<Typography variant="caption">{tooltip}</Typography>
)
}
placement="top-start" arrow
enterDelay={1500} enterNextDelay={1500}
>
<span>
{/* Using span to prevent tooltip from disappearing when button is disabled */}
<Button {...extra} style={style} />
</span>
</Tooltip>
</ToolTipEx>
);
}
export default ButtonEx;
vite/src/pipedal/ButtonTooltip.tsx
+3 -3
View File
@@ -22,7 +22,7 @@
*/
import { Typography } from "@mui/material";
import Tooltip from "@mui/material/Tooltip";
import ToolTipEx from "./ToolTipEx";
import { ReactElement } from "react";
@@ -34,7 +34,7 @@ export interface ButtonTooltipProps {
export default function ButtonTooltip(props: ButtonTooltipProps)
{
return (
<Tooltip placement="top-start" arrow enterDelay={1500} enterNextDelay={1500}
<ToolTipEx
title={
(
<Typography variant="body2">
@@ -44,6 +44,6 @@ export default function ButtonTooltip(props: ButtonTooltipProps)
}
>
{props.children}
</Tooltip>
</ToolTipEx>
);
}
vite/src/pipedal/ControlTooltip.tsx
+5 -7
View File
@@ -1,9 +1,9 @@
import React, { ReactElement } from 'react';
import Tooltip from "@mui/material/Tooltip"
import { UiControl } from './Lv2Plugin';
import Typography from "@mui/material/Typography";
import Divider from '@mui/material/Divider';
import ToolTipEx from './ToolTipEx'
interface ControlTooltipProps {
@@ -16,7 +16,7 @@ export default function ControlTooltip(props: ControlTooltipProps) {
let { children, uiControl } = props;
if (uiControl.comment && (uiControl.comment !== uiControl.name)) {
return (
<Tooltip title={(
<ToolTipEx title={(
<React.Fragment>
<Typography variant="caption">{uiControl.name}</Typography>
<Divider />
@@ -24,18 +24,16 @@ export default function ControlTooltip(props: ControlTooltipProps) {
</React.Fragment>
)}
placement="top-start" arrow enterDelay={1500} enterNextDelay={1500}
>
{children}
</Tooltip>
</ToolTipEx>
);
} else {
return (
<Tooltip title={uiControl.name}
placement="top-start" arrow enterDelay={1500} enterNextDelay={1500}
<ToolTipEx title={uiControl.name}
>
{children}
</Tooltip>
</ToolTipEx>
);
}
}
vite/src/pipedal/FilePropertyControl.tsx
+5 -9
View File
@@ -33,7 +33,7 @@ import ButtonBase from '@mui/material/ButtonBase'
import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
import { PedalboardItem } from './Pedalboard';
import { isDarkMode } from './DarkMode';
import Tooltip from "@mui/material/Tooltip"
export const StandardItemSize = { width: 80, height: 140 }
@@ -225,14 +225,10 @@ const FilePropertyControl =
{/* TITLE SECTION */}
<div className={classes.titleSection}
>
<Tooltip title={fileProperty.label} placement="top-start" arrow
enterDelay={1000} enterNextDelay={1000}
>
<Typography variant="caption" display="block" noWrap style={{
width: "100%",
textAlign: "start"
}}> {fileProperty.label}</Typography>
</Tooltip>
<Typography variant="caption" display="block" noWrap style={{
width: "100%",
textAlign: "start"
}}> {fileProperty.label}</Typography>
</div>
{/* CONTROL SECTION */}
vite/src/pipedal/IconButtonEx.tsx
+3 -5
View File
@@ -22,7 +22,7 @@
*/
import IconButton, {IconButtonProps} from '@mui/material/IconButton';
import Tooltip from "@mui/material/Tooltip";
import ToolTipEx from './ToolTipEx';
import Typography from "@mui/material/Typography";
interface IconButtonExProps extends IconButtonProps {
@@ -34,16 +34,14 @@ function IconButtonEx(props: IconButtonExProps) {
const { tooltip,style, ...extra } = props;
return (
<Tooltip title={
<ToolTipEx title={
(
<Typography variant="caption">{tooltip || extra['aria-label'] }</Typography>
)
}
placement="top-start" arrow
enterDelay={1500} enterNextDelay={1500}
>
<IconButton {...extra} style={style} />
</Tooltip>
</ToolTipEx>
);
}
vite/src/pipedal/MainPage.tsx
+4 -3
View File
@@ -23,8 +23,8 @@ import WithStyles, {withTheme} from './WithStyles';
import { withStyles } from "tss-react/mui";
import IconButtonEx from './IconButtonEx';
import ButtonEx from './ButtonEx';
import Tooltip from '@mui/material/Tooltip';
import ToolTipEx from './ToolTipEx';
import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
import {
Pedalboard, PedalboardItem, PedalboardSplitItem, SplitType
@@ -530,9 +530,10 @@ export const MainPage =
}} >
<div style={{ flex: "0 0 auto", width: this.state.splitControlBar? undefined: 80 }} >
<div style={{ display: bypassVisible ? "block" : "none", width: this.state.splitControlBar? undefined: 80 }} >
<Tooltip title="Bypass" placement="top-start" arrow enterDelay={1500} enterNextDelay={1500}>
<ToolTipEx title="Bypass"
>
<Switch color="secondary" checked={bypassChecked} onChange={this.handleEnableCurrentItemChanged} />
</Tooltip>
</ToolTipEx>
</div>
</div>
{
vite/src/pipedal/MidiChannelBindingControl.tsx
+4 -4
View File
@@ -26,7 +26,7 @@ import { withStyles } from "tss-react/mui";
import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
import { pluginControlStyles } from './PluginControl';
import MidiChannelBinding from './MidiChannelBinding';
import Tooltip from '@mui/material/Tooltip';
import ToolTipEx from './ToolTipEx';
import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';
import ButtonBase from '@mui/material/ButtonBase';
@@ -78,7 +78,7 @@ const MidiChannelBindingControl =
alignSelf: "stretch"
}}>
<Tooltip title={(
<ToolTipEx title={(
<React.Fragment>
<Typography variant="caption">title</Typography>
<Divider />
@@ -86,13 +86,13 @@ const MidiChannelBindingControl =
</React.Fragment>
)}
placement="top-start" arrow enterDelay={1500} enterNextDelay={1500}
>
<Typography variant="caption" display="block" noWrap style={{
width: "100%",
textAlign: "center"
}}> MIDI</Typography>
</Tooltip>
</ToolTipEx>
</div>
{/* CONTROL SECTION */}
vite/src/pipedal/PluginControlView.tsx
+3 -4
View File
@@ -42,7 +42,7 @@ import JsonAtom from './JsonAtom';
import PluginOutputControl from './PluginOutputControl';
import Units from './Units';
import ToobFrequencyResponseView from './ToobFrequencyResponseView';
import Tooltip from '@mui/material/Tooltip';
import ToolTipEx from './ToolTipEx';
import MidiChannelBindingControl from './MidiChannelBindingControl';
import MidiChannelBinding from './MidiChannelBinding';
@@ -697,11 +697,10 @@ const PluginControlView =
result.push((
<div key={"ctlx" + (this.controlKeyIndex++)} className={!isLandscapeGrid ? classes.portGroup : classes.portGroupLandscape}>
<div className={classes.portGroupTitle}>
<Tooltip title={controlGroup.name}
placement="top-start" arrow enterDelay={1500} enterNextDelay={1500}
<ToolTipEx title={controlGroup.name}
>
<Typography noWrap variant="caption" >{controlGroup.name}</Typography>
</Tooltip>
</ToolTipEx>
</div>
<div className={
this.state.landscapeGrid ? classes.portGroupControlsLandscape : classes.portGroupControls} >
vite/src/pipedal/ToolTipEx.tsx
+66
View File
@@ -0,0 +1,66 @@
/*
* Copyright (c) 2025 Robin E. R. Davies
* All rights reserved.
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React from 'react';
import Tooltip from '@mui/material/Tooltip';
export interface ToolTipExProps extends React.ComponentProps<typeof Tooltip> {
}
function ToolTipEx(props: ToolTipExProps) {
let [disableToolTip, setDisableToolTip] = React.useState(false);
let {title, ...extras} = props;
function handleMouseDownCapture(event: React.PointerEvent<HTMLDivElement>) {
if ((event as any).pointerType === "mouse") {
setDisableToolTip(true);
}
}
function handlePointerMoveCapture(event: React.PointerEvent<HTMLDivElement>) {
if ((event as any).pointerType !== "mouse") {
setDisableToolTip(false);
}
}
return (
<div
onPointerDownCapture={(e) => {
handleMouseDownCapture(e);
}}
onPointerMoveCapture={(e) => {
handlePointerMoveCapture(e);
}}
onMouseLeave={() => {
setDisableToolTip(false);
}
}
>
<Tooltip {...extras}
title={disableToolTip? undefined: title}
placement="top-start" arrow enterDelay={1500} enterNextDelay={1500}
/>
</div>
)
}
export default ToolTipEx;