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

Icon button tooltips

Browse Source
This commit is contained in:
Robin E. R. Davies
2025-06-19 16:31:19 -04:00
parent f35ee9330d
commit ea22ca3a93
15 changed files with 83 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vite/src/pipedal/AboutDialog.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
import React, { SyntheticEvent, Component } from 'react';
import IconButton from '@mui/material/IconButton';
import IconButtonEx from './IconButtonEx';
import Typography from '@mui/material/Typography';
import { PiPedalModel, PiPedalModelFactory, State } from './PiPedalModel';
import AppBar from '@mui/material/AppBar';
@@ -147,10 +147,10 @@ const AboutDialog = class extends Component<AboutDialogProps, AboutDialogState>
top: 0, left: 0
}} >
<Toolbar>
<IconButton edge="start" color="inherit" onClick={this.handleDialogClose} aria-label="back"
<IconButtonEx tooltip="Back" edge="start" color="inherit" onClick={this.handleDialogClose} aria-label="back"
>
<ArrowBackIcon />
</IconButton>
</IconButtonEx>
<Typography noWrap variant="h6"
sx={{ maringLeft: 2, flex: 1 }}
>
vite/src/pipedal/FilePropertyDialog.tsx
+2 -2
View File
@@ -1176,11 +1176,11 @@ export default withStyles(
) : (
<div style={{ width: "100%" }}>
<div style={{ display: "flex", width: "100%", alignItems: "center", flexFlow: "row nowrap" }}>
<IconButton style={{ visibility: (this.state.hasSelection ? "visible" : "hidden") }} aria-label="delete" component="label" color="primary"
<IconButtonEx tooltip="Delete" style={{ visibility: (this.state.hasSelection ? "visible" : "hidden") }} aria-label="delete" component="label" color="primary"
disabled={!this.state.hasSelection || this.state.selectedFile === "" || protectedItem}
onClick={() => this.handleDelete()} >
<OldDeleteIcon fontSize='small' />
</IconButton>
</IconButtonEx>
<Button style={{ flex: "0 0 auto" }} aria-label="upload" variant="text" startIcon={<FileUploadIcon />}
onClick={() => { this.setState({ openUploadFileDialog: true }) }} disabled={protectedDirectory}
vite/src/pipedal/LoadPluginDialog.tsx
+9 -9
View File
@@ -34,7 +34,7 @@ import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import SelectHoverBackground from './SelectHoverBackground';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import IconButton from '@mui/material/IconButton';
import IconButtonEx from './IconButtonEx';
import PluginClass from './PluginClass'
import ResizeResponsiveComponent from './ResizeResponsiveComponent';
import SearchControl from './SearchControl';
@@ -722,9 +722,9 @@ export const LoadPluginDialog =
<div style={{ display: "flex", flexDirection: "column", flexWrap: "nowrap", height: "100%" }}>
<DialogTitle id="select-plugin-dialog-title" style={{ flex: "0 0 auto", padding: "0px", height: 54 }}>
<div style={{ display: "flex", flexDirection: "row", paddingTop: 3, paddingBottom: 3, flexWrap: "nowrap", width: "100%", alignItems: "center" }}>
<IconButton onClick={() => { this.cancel(); }} style={{ flex: "0 0 auto" }} >
<IconButtonEx tooltip="Back" onClick={() => { this.cancel(); }} style={{ flex: "0 0 auto" }} >
<ArrowBackIcon />
</IconButton>
</IconButtonEx>
<Typography display="inline" noWrap variant="h6" style={{
flex: "0 0 auto", height: "auto", verticalAlign: "center",
@@ -776,13 +776,13 @@ export const LoadPluginDialog =
/>
</div>
<div style={{ flex: "0 0 auto" }} >
<IconButton onClick={() => { this.onClearFilter(); }}>
<IconButtonEx tooltip="Clear Filter" onClick={() => { this.onClearFilter(); }}>
{this.state.filterType === PluginType.Plugin ? (
<FilterListIcon fontSize='small' style={{ opacity: 0.75 }} />
) : (
<FilterListOffIcon fontSize='small' style={{ opacity: 0.75 }} />
)}
</IconButton>
</IconButtonEx>
</div>
<div style={{ flex: "0 0 160px", marginRight: 24 }} >
@@ -861,11 +861,11 @@ export const LoadPluginDialog =
color: isFavorite ? "#F80" : "#CCC", display: (this.state.selected_uri !== "" ? "block" : "none"),
position: "relative", top: -2
}}>
<IconButton color="inherit" aria-label="Set as favorite"
<IconButtonEx tooltip="Set as favorite" color="inherit" aria-label="Set as favorite"
onClick={() => { this.setFavorite(this.state.selected_uri, !isFavorite); }}
>
<StarBorderIcon />
</IconButton>
</IconButtonEx>
</div>
</div>
<div style={{ position: "relative", float: "right", flex: "0 1 200px", width: 200, display: "flex", alignItems: "center" }}>
@@ -886,11 +886,11 @@ export const LoadPluginDialog =
}}>
{
this.state.selected_uri !== "uri://two-play/pipedal/pedalboard#Empty" && (
<IconButton color="inherit" aria-label="Set as favorite"
<IconButtonEx tooltip="Set as favorite" color="inherit" aria-label="Set as favorite"
onClick={() => { this.setFavorite(this.state.selected_uri, !isFavorite); }}
>
<StarBorderIcon />
</IconButton>
</IconButtonEx>
)
}
</div>
vite/src/pipedal/PerformanceView.tsx
+20 -19
View File
@@ -27,7 +27,7 @@ import { withStyles } from "tss-react/mui";
import { PiPedalModel, PiPedalModelFactory, PresetIndex } from './PiPedalModel';
import ResizeResponsiveComponent from './ResizeResponsiveComponent';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import IconButton from '@mui/material/IconButton';
import IconButtonEx from './IconButtonEx';
import AppBar from '@mui/material/AppBar';
import SnapshotPanel from './SnapshotPanel';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
@@ -246,13 +246,13 @@ export const PerformanceView =
paddingTop: 3, paddingBottom: 3, paddingRight: 8, paddingLeft: 8,
alignItems: "start"
}}>
<IconButton aria-label="menu" color="inherit"
<IconButtonEx tooltip="Back" aria-label="menu" color="inherit"
onClick={() => { this.props.onClose(); }}
style={{
position: "relative",top: 3,
flex: "0 0 auto" }} >
<ArrowBackIcon />
</IconButton>
</IconButtonEx>
<div style={{
flex: "1 1 1px", display: "flex",
@@ -265,7 +265,7 @@ export const PerformanceView =
}}>
{/********* BANKS *******************/}
<div style={{ flex: "1 1 1px", display: "flex", flexFlow: "row nowrap", maxWidth: 500 }}>
<IconButton
<IconButtonEx tooltip="Previous bank"
aria-label="previous-bank"
onClick={() => { this.handlePreviousBank(); }}
size="medium"
@@ -275,7 +275,7 @@ export const PerformanceView =
}}
>
<ArrowBackIosIcon style={{ opacity: 0.75 }} />
</IconButton>
</IconButtonEx>
<Select variant="standard"
className={classes.select}
@@ -299,18 +299,19 @@ export const PerformanceView =
}
</Select>
<IconButton
<IconButtonEx tooltip="Next bank"
aria-label="next-bank"
onClick={() => { this.handleNextBank(); }}
color="inherit"
style={{ borderTopLeftRadius: "3px", borderBottomLeftRadius: "3px", marginLeft: 4 }}
>
<ArrowForwardIosIcon style={{ opacity: 0.75 }} />
</IconButton>
</IconButtonEx>
{/** spacer */}
<IconButton
<IconButtonEx
tooltip="Next bank"
aria-label="next-bank"
onClick={() => { this.handleNextBank(); }}
size="medium"
@@ -318,22 +319,22 @@ export const PerformanceView =
style={{visibility: "hidden"}}
>
<ArrowForwardIosIcon style={{ opacity: 0.75 }} />
</IconButton>
</IconButtonEx>
</div>
{/********* PRESETS *******************/}
<div style={{ flex: "1 1 1px", display: "flex", flexFlow: "row nowrap", maxWidth: 500 }}>
<IconButton
aria-label="previous-presest"
<IconButtonEx tooltip="Previous preset"
aria-label="previous-preset"
onClick={() => { this.handlePreviousPreset(); }}
color="inherit"
style={{ borderTopRightRadius: "3px", borderBottomRightRadius: "3px", marginRight: 4 }}
>
<ArrowBackIosIcon style={{ opacity: 0.75 }} />
</IconButton>
</IconButtonEx>
<Select variant="standard"
className={classes.select}
style={{
@@ -365,24 +366,24 @@ export const PerformanceView =
}
</Select>
<IconButton
<IconButtonEx tooltip="Next preset"
aria-label="next-preset"
onClick={() => { this.handleNextPreset(); }}
color="inherit"
style={{ borderTopLeftRadius: "3px", borderBottomLeftRadius: "3px", marginLeft: 4 }}
>
<ArrowForwardIosIcon style={{ opacity: 0.75 }} />
</IconButton>
</IconButtonEx>
<IconButton
<IconButtonEx tooltip="Save preset"
aria-label="save-preset"
onClick={() => { this.model.saveCurrentPreset(); }}
size="medium"
color="inherit"
style={{flexShrink: 0,visibility: this.state.presetModified? "visible": "hidden"}}
>
<SaveIconOutline style={{ opacity: 0.75 }} color="inherit" />
</IconButton>
<SaveIconOutline style={{ opacity: 0.75 }} color="inherit" />
</IconButtonEx>
</div>
</div>
vite/src/pipedal/PluginInfoDialog.tsx
-17
View File
@@ -67,23 +67,6 @@ export interface PluginInfoDialogTitleProps extends WithStyles<typeof styles> {
onClose: () => void;
}
// const PluginInfoDialogTitle = withStyles(styles)((props: PluginInfoDialogTitleProps) => {
// const { children, classes, onClose, ...other } = props;
// return (
// <MuiDialogTitle style={{ display: "flex", flexDirection: "row", alignItems: "start", flexWrap: "nowrap" }}>
// <div style={{ flex: "0 0 auto", marginRight: 8 }}>
// <PluginIcon pluginType={plugin.plugin_type} pluginUri={plugin.uri} offsetY={5} />
// </div>
// <div style={{ flex: "1 1 auto" }}>
// {children}
// </div>
// <IconButton aria-label="close" className={classes.closeButton} onClick={() => handleClose()}
// style={{ flex: "0 0 auto" }}>
// <CloseIcon />
// </IconButton>
// </MuiDialogTitle>
// );
// });
const PluginInfoDialogContent = withStyles(
MuiDialogContent,
vite/src/pipedal/PluginPresetsDialog.tsx
+13 -13
View File
@@ -18,7 +18,7 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React, { SyntheticEvent,Component } from 'react';
import IconButton from '@mui/material/IconButton';
import IconButtonEx from './IconButtonEx';
import Typography from '@mui/material/Typography';
import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
import Button from "@mui/material/Button";
@@ -371,17 +371,17 @@ const PluginPresetsDialog = withStyles(
<div style={{ flex: "0 0 auto" }}>
<AppBar className={classes.dialogAppBar} style={{ display: this.isEditMode() ? "none" : "block" }} >
<Toolbar>
<IconButton edge="start" color="inherit" onClick={this.handleDialogClose} aria-label="back"
<IconButtonEx tooltip="Back" edge="start" color="inherit" onClick={this.handleDialogClose} aria-label="back"
disabled={this.isEditMode()}
>
<ArrowBackIcon />
</IconButton>
</IconButtonEx>
<Typography noWrap variant="h6" className={classes.dialogTitle}>
{title}
</Typography>
<IconButton color="inherit" onClick={(e) => this.showActionBar(true)} >
<IconButtonEx tooltip="Edit" color="inherit" onClick={(e) => this.showActionBar(true)} >
<EditIcon />
</IconButton>
</IconButtonEx>
</Toolbar>
</AppBar>
<AppBar className={actionBarClass} style={{ display: this.isEditMode() ? "block" : "none" }}
@@ -389,14 +389,14 @@ const PluginPresetsDialog = withStyles(
>
<Toolbar>
{(!this.props.isEditDialog) ? (
<IconButton edge="start" color="inherit" onClick={(e) => this.showActionBar(false)} aria-label="close">
<IconButtonEx tooltip="Close" edge="start" color="inherit" onClick={(e) => this.showActionBar(false)} aria-label="close">
<CloseIcon />
</IconButton>
</IconButtonEx>
) : (
<IconButton edge="start" color="inherit" onClick={this.handleDialogClose} aria-label="back"
<IconButtonEx tooltip="Back" edge="start" color="inherit" onClick={this.handleDialogClose} aria-label="back"
>
<ArrowBackIcon />
</IconButton>
</IconButtonEx>
)}
<Typography noWrap variant="h6" className={classes.dialogTitle}>
@@ -422,12 +422,12 @@ const PluginPresetsDialog = withStyles(
}
}
/>
<IconButton color="inherit" onClick={(e) => this.handleDeleteClick()} >
<IconButtonEx tooltip="Delete" color="inherit" onClick={(e) => this.handleDeleteClick()} >
<img src="/img/old_delete_outline_white_24dp.svg" alt="Delete" style={{ width: 24, height: 24, opacity: 0.6 }} />
</IconButton>
<IconButton color="inherit" onClick={(e) => { this.onMoreClick(e) }} >
</IconButtonEx>
<IconButtonEx tooltip="More..." color="inherit" onClick={(e) => { this.onMoreClick(e) }} >
<MoreVertIcon />
</IconButton>
</IconButtonEx>
<Menu
id="more-menu"
anchorEl={this.state.moreMenuAnchorEl}
vite/src/pipedal/PresetDialog.tsx
-1
View File
@@ -24,7 +24,6 @@ import IconButtonEx from './IconButtonEx';
import Typography from '@mui/material/Typography';
import { PiPedalModel, PiPedalModelFactory, PresetIndexEntry, PresetIndex } from './PiPedalModel';
import Button from '@mui/material/Button';
import ButtonEx from './ButtonEx';
import ButtonBase from "@mui/material/ButtonBase";
import DialogEx from './DialogEx';
import AppBar from '@mui/material/AppBar';
vite/src/pipedal/SearchControl.tsx
+5 -5
View File
@@ -24,7 +24,7 @@ import { withStyles } from "tss-react/mui";
import {createStyles} from './WithStyles';
import Input from '@mui/material/Input';
import IconButton from '@mui/material/IconButton';
import IconButtonEx from './IconButtonEx';
import SearchIcon from '@mui/icons-material/Search';
import ClearIcon from '@mui/icons-material/Clear';
import InputAdornment from '@mui/material/InputAdornment';
@@ -102,9 +102,9 @@ const SearchControl = withTheme(withStyles(
return (
<div style={{ display: "flex", flexFlow: "row nowrap", justifyContent: "flex-end", alignItems: "center" }}>
{(this.props.showSearchIcon ?? true) && (
<IconButton onClick={() => { this.props.onClick(); }} size="large">
<IconButtonEx tooltip="Search" onClick={() => { this.props.onClick(); }} size="large">
<SearchIcon />
</IconButton>
</IconButtonEx>
)
}
@@ -118,7 +118,7 @@ const SearchControl = withTheme(withStyles(
placeholder="Search"
endAdornment={(
<InputAdornment position="end">
<IconButton
<IconButtonEx tooltip="Clear search filter"
aria-label="clear search filter"
onClick={() => {
this.props.onClearFilterClick();
@@ -130,7 +130,7 @@ const SearchControl = withTheme(withStyles(
edge="end"
size="large">
<ClearIcon fontSize='small' style={{ opacity: 0.6 }} />
</IconButton>
</IconButtonEx>
</InputAdornment>
)}
vite/src/pipedal/SettingsDialog.tsx
+3 -3
View File
@@ -21,7 +21,7 @@ import React, { SyntheticEvent, Component } from 'react';
import Switch from "@mui/material/Switch";
import OkCancelDialog from './OkCancelDialog';
import RadioSelectDialog from './RadioSelectDialog';
import IconButton from '@mui/material/IconButton';
import IconButtonEx from './IconButtonEx';
import Typography from '@mui/material/Typography';
import { PiPedalModel, PiPedalModelFactory, State } from './PiPedalModel';
import { ColorTheme } from './DarkMode';
@@ -570,10 +570,10 @@ const SettingsDialog = withStyles(
:
(
<Toolbar>
<IconButton edge="start" color="inherit" onClick={this.handleDialogClose} aria-label="back"
<IconButtonEx tooltip="Back" edge="start" color="inherit" onClick={this.handleDialogClose} aria-label="back"
>
<ArrowBackIcon />
</IconButton>
</IconButtonEx>
<Typography variant="h6" className={classes.dialogTitle}>
Settings
</Typography>
vite/src/pipedal/SnapshotButton.tsx
+5 -5
View File
@@ -23,7 +23,7 @@
*/
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import IconButtonEx from './IconButtonEx';
import ButtonBase from '@mui/material/ButtonBase';
import ResizeResponsiveComponent from './ResizeResponsiveComponent';
import SaveIconOutline from '@mui/icons-material/Save';
@@ -217,19 +217,19 @@ export default class SnapshotButton extends ResizeResponsiveComponent<SnapshotBu
) : (
<div style={{ marginLeft: "auto", marginRight: 8, display: "flex", flexFlow: "row nowrap" }}>
<div style={{ flexGrow: 1, flexBasis: 1 }} ></div>
<IconButton color="inherit" style={{ opacity: 0.66 }} disabled={false}
<IconButtonEx tooltip="Save snapshot" color="inherit" style={{ opacity: 0.66 }} disabled={false}
onMouseDown={(ev) => { ev.stopPropagation(); /*don't prop to card*/ }}
onClick={() => { this.props.onSaveSnapshot(snapshotIndex); }}
>
<SaveIconOutline />
</IconButton>
<IconButton color="inherit" disabled={disabled} style={{ opacity: 0.66 }}
</IconButtonEx>
<IconButtonEx tooltip="Edit snapshot" color="inherit" disabled={disabled} style={{ opacity: 0.66 }}
onMouseDown={(ev) => { ev.stopPropagation(); /*don't prop to card*/ }}
onClick={() => { this.props.onEditSnapshot(snapshotIndex); }}
>
<EditIconOutline />
</IconButton>
</IconButtonEx>
</div>
)}
</div>
vite/src/pipedal/SnapshotDialog.tsx
+3 -3
View File
@@ -29,7 +29,7 @@ import DialogEx from './DialogEx';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import IconButton from '@mui/material/IconButton';
import IconButtonEx from './IconButtonEx';
import ResizeResponsiveComponent from './ResizeResponsiveComponent';
import { TransitionProps } from '@mui/material/transitions';
@@ -114,10 +114,10 @@ export default class SnapshotDialog extends ResizeResponsiveComponent<SnapshotDi
>
<DialogTitle>
<div>
<IconButton edge="start" color="inherit" onClick={() => { this.props.onOk(); }} aria-label="back"
<IconButtonEx tooltip="Back" edge="start" color="inherit" onClick={() => { this.props.onOk(); }} aria-label="back"
>
<ArrowBackIcon fontSize="small" style={{ opacity: "0.6" }} />
</IconButton>
</IconButtonEx>
<Typography display="inline" variant="body1" color="textSecondary" >Snapshots</Typography>
</div>
vite/src/pipedal/SnapshotPropertiesDialog.tsx
+3 -3
View File
@@ -29,7 +29,7 @@ import Typography from '@mui/material/Typography';
import DialogEx from './DialogEx';
import DialogTitle from '@mui/material/DialogTitle';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import IconButton from '@mui/material/IconButton';
import IconButtonEx from './IconButtonEx';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import { colorKeys } from "./MaterialColors";
@@ -117,10 +117,10 @@ export default class SnapshotPropertiesDialog extends ResizeResponsiveComponent<
>
<DialogTitle>
<div>
<IconButton edge="start" color="inherit" onClick={() => { this.props.onClose(); }} aria-label="back"
<IconButtonEx tooltip="Back" edge="start" color="inherit" onClick={() => { this.props.onClose(); }} aria-label="back"
>
<ArrowBackIcon fontSize="small" style={{ opacity: "0.6" }} />
</IconButton>
</IconButtonEx>
<Typography display="inline" variant="body1" color="textSecondary" >
{this.props.editing ? "Edit snapshot" : "Save snapshot"}
</Typography>
vite/src/pipedal/UploadFileDialog.tsx
+3 -3
View File
@@ -32,7 +32,7 @@ import SvgIcon from '@mui/material/SvgIcon';
//import ErrorIcon from '@mui/icons-material/Error';
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import IconButton from '@mui/material/IconButton';
import IconButtonEx from './IconButtonEx';
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import CircularProgress from '@mui/material/CircularProgress';
@@ -372,10 +372,10 @@ export default class UploadFileDialog extends ResizeResponsiveComponent<UploadFi
>
<DialogTitle >
<div>
<IconButton edge="start" color="inherit" onClick={() => { this.handleCancel(); }} aria-label="back"
<IconButtonEx tooltip="Back" edge="start" color="inherit" onClick={() => { this.handleCancel(); }} aria-label="back"
>
<ArrowBackIcon fontSize="small" style={{ opacity: "0.6" }} />
</IconButton>
</IconButtonEx>
<Typography display="inline" >Upload</Typography>
</div>
</DialogTitle>
vite/src/pipedal/WifiConfigDialog.tsx
+9 -7
View File
@@ -18,7 +18,7 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import IconButton from '@mui/material/IconButton';
import IconButtonEx from './IconButtonEx';
import VisibilityIcon from '@mui/icons-material/Visibility';
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
import FormHelperText from '@mui/material/FormHelperText';
@@ -432,11 +432,11 @@ const WifiConfigDialog = withStyles(
<FormHelperText>{NBSP}</FormHelperText>
</FormControl>
{(this.state.compactWidth || this.state.autoStartMode !== 2) && (
<IconButton style={{ flexGrow: 0, flexShrink: 0, marginTop: 8 }}
<IconButtonEx tooltip="Help" style={{ flexGrow: 0, flexShrink: 0, marginTop: 8 }}
onClick={() => { this.setState({ showHelpDialog: true }); }}
>
<HelpOutlineIcon />
</IconButton>
</IconButtonEx>
)}
</div>
<div style={{
@@ -472,11 +472,11 @@ const WifiConfigDialog = withStyles(
}}
/>}
/>
<IconButton style={{ visibility: this.state.compactWidth ? "hidden" : "visible", flexGrow: 0, flexShrink: 0 }}
<IconButtonEx tooltip="Help" style={{ visibility: this.state.compactWidth ? "hidden" : "visible", flexGrow: 0, flexShrink: 0 }}
onClick={() => { this.setState({ showHelpDialog: true }); }}
>
<HelpOutlineIcon />
</IconButton>
</IconButtonEx>
</div>
</div>
@@ -532,7 +532,9 @@ const WifiConfigDialog = withStyles(
: ""
,
endAdornment: (
<IconButton size="small"
<IconButtonEx tooltip={
this.state.showPassword ? "Hide password": "Show password"
} size="small"
aria-label="toggle password visibility"
onClick={() => { this.handleTogglePasswordVisibility(); }}
>
@@ -546,7 +548,7 @@ const WifiConfigDialog = withStyles(
)
}
</IconButton>
</IconButtonEx>
)
}}
/>
vite/src/pipedal/ZoomedUiControl.tsx
+5 -5
View File
@@ -33,7 +33,7 @@ import DialogEx from './DialogEx';
import Typography from '@mui/material/Typography';
import { PiPedalModelFactory, PiPedalModel } from './PiPedalModel';
import ZoomedDial from './ZoomedDial';
import IconButton from '@mui/material/IconButton';
import IconButtonEx from './IconButtonEx';
import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
import NavigateNextIcon from '@mui/icons-material/NavigateNext';
@@ -233,13 +233,13 @@ const ZoomedUiControl = withTheme(withStyles(
width: 380, height: 300,
display: "flex", flexFlow: "row", alignItems: "center", alignContent: " center", justifyContent: "center"
}}>
<IconButton sx={{ height: "100%", width: 48, borderRadius: "0% 50% 50% 0%" }} onClick={
<IconButtonEx tooltip="Previous" sx={{ height: "100%", width: 48, borderRadius: "0% 50% 50% 0%" }} onClick={
() => {
this.model.onNextZoomedControl();
}
} >
<NavigateBeforeIcon />
</IconButton>
</IconButtonEx>
<div style={{
width: 200, flexGrow: 1, height: 300,
display: "flex", flexFlow: "column", alignItems: "center", alignContent: "center", justifyContent: "center"
@@ -281,14 +281,14 @@ const ZoomedUiControl = withTheme(withStyles(
{displayValue}
</Typography>
</div>
<IconButton sx={{ height: "100%", width: 48, borderRadius: "50% 0% 0% 50%" }}
<IconButtonEx tooltip="Next" sx={{ height: "100%", width: 48, borderRadius: "50% 0% 0% 50%" }}
onClick={() => {
this.model.onPreviousZoomedControl();
}
}
>
<NavigateNextIcon />
</IconButton>
</IconButtonEx>
</div>
</DialogEx>