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 React, { SyntheticEvent, Component } from 'react';
import IconButton from '@mui/material/IconButton'; import IconButtonEx from './IconButtonEx';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import { PiPedalModel, PiPedalModelFactory, State } from './PiPedalModel'; import { PiPedalModel, PiPedalModelFactory, State } from './PiPedalModel';
import AppBar from '@mui/material/AppBar'; import AppBar from '@mui/material/AppBar';
@@ -147,10 +147,10 @@ const AboutDialog = class extends Component<AboutDialogProps, AboutDialogState>
top: 0, left: 0 top: 0, left: 0
}} > }} >
<Toolbar> <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 /> <ArrowBackIcon />
</IconButton> </IconButtonEx>
<Typography noWrap variant="h6" <Typography noWrap variant="h6"
sx={{ maringLeft: 2, flex: 1 }} 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={{ width: "100%" }}>
<div style={{ display: "flex", width: "100%", alignItems: "center", flexFlow: "row nowrap" }}> <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} disabled={!this.state.hasSelection || this.state.selectedFile === "" || protectedItem}
onClick={() => this.handleDelete()} > onClick={() => this.handleDelete()} >
<OldDeleteIcon fontSize='small' /> <OldDeleteIcon fontSize='small' />
</IconButton> </IconButtonEx>
<Button style={{ flex: "0 0 auto" }} aria-label="upload" variant="text" startIcon={<FileUploadIcon />} <Button style={{ flex: "0 0 auto" }} aria-label="upload" variant="text" startIcon={<FileUploadIcon />}
onClick={() => { this.setState({ openUploadFileDialog: true }) }} disabled={protectedDirectory} 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 DialogTitle from '@mui/material/DialogTitle';
import SelectHoverBackground from './SelectHoverBackground'; import SelectHoverBackground from './SelectHoverBackground';
import ArrowBackIcon from '@mui/icons-material/ArrowBack'; import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import IconButton from '@mui/material/IconButton'; import IconButtonEx from './IconButtonEx';
import PluginClass from './PluginClass' import PluginClass from './PluginClass'
import ResizeResponsiveComponent from './ResizeResponsiveComponent'; import ResizeResponsiveComponent from './ResizeResponsiveComponent';
import SearchControl from './SearchControl'; import SearchControl from './SearchControl';
@@ -722,9 +722,9 @@ export const LoadPluginDialog =
<div style={{ display: "flex", flexDirection: "column", flexWrap: "nowrap", height: "100%" }}> <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 }}> <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" }}> <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 /> <ArrowBackIcon />
</IconButton> </IconButtonEx>
<Typography display="inline" noWrap variant="h6" style={{ <Typography display="inline" noWrap variant="h6" style={{
flex: "0 0 auto", height: "auto", verticalAlign: "center", flex: "0 0 auto", height: "auto", verticalAlign: "center",
@@ -776,13 +776,13 @@ export const LoadPluginDialog =
/> />
</div> </div>
<div style={{ flex: "0 0 auto" }} > <div style={{ flex: "0 0 auto" }} >
<IconButton onClick={() => { this.onClearFilter(); }}> <IconButtonEx tooltip="Clear Filter" onClick={() => { this.onClearFilter(); }}>
{this.state.filterType === PluginType.Plugin ? ( {this.state.filterType === PluginType.Plugin ? (
<FilterListIcon fontSize='small' style={{ opacity: 0.75 }} /> <FilterListIcon fontSize='small' style={{ opacity: 0.75 }} />
) : ( ) : (
<FilterListOffIcon fontSize='small' style={{ opacity: 0.75 }} /> <FilterListOffIcon fontSize='small' style={{ opacity: 0.75 }} />
)} )}
</IconButton> </IconButtonEx>
</div> </div>
<div style={{ flex: "0 0 160px", marginRight: 24 }} > <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"), color: isFavorite ? "#F80" : "#CCC", display: (this.state.selected_uri !== "" ? "block" : "none"),
position: "relative", top: -2 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); }} onClick={() => { this.setFavorite(this.state.selected_uri, !isFavorite); }}
> >
<StarBorderIcon /> <StarBorderIcon />
</IconButton> </IconButtonEx>
</div> </div>
</div> </div>
<div style={{ position: "relative", float: "right", flex: "0 1 200px", width: 200, display: "flex", alignItems: "center" }}> <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" && ( 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); }} onClick={() => { this.setFavorite(this.state.selected_uri, !isFavorite); }}
> >
<StarBorderIcon /> <StarBorderIcon />
</IconButton> </IconButtonEx>
) )
} }
</div> </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 { PiPedalModel, PiPedalModelFactory, PresetIndex } from './PiPedalModel';
import ResizeResponsiveComponent from './ResizeResponsiveComponent'; import ResizeResponsiveComponent from './ResizeResponsiveComponent';
import ArrowBackIcon from '@mui/icons-material/ArrowBack'; import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import IconButton from '@mui/material/IconButton'; import IconButtonEx from './IconButtonEx';
import AppBar from '@mui/material/AppBar'; import AppBar from '@mui/material/AppBar';
import SnapshotPanel from './SnapshotPanel'; import SnapshotPanel from './SnapshotPanel';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'; import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
@@ -246,13 +246,13 @@ export const PerformanceView =
paddingTop: 3, paddingBottom: 3, paddingRight: 8, paddingLeft: 8, paddingTop: 3, paddingBottom: 3, paddingRight: 8, paddingLeft: 8,
alignItems: "start" alignItems: "start"
}}> }}>
<IconButton aria-label="menu" color="inherit" <IconButtonEx tooltip="Back" aria-label="menu" color="inherit"
onClick={() => { this.props.onClose(); }} onClick={() => { this.props.onClose(); }}
style={{ style={{
position: "relative",top: 3, position: "relative",top: 3,
flex: "0 0 auto" }} > flex: "0 0 auto" }} >
<ArrowBackIcon /> <ArrowBackIcon />
</IconButton> </IconButtonEx>
<div style={{ <div style={{
flex: "1 1 1px", display: "flex", flex: "1 1 1px", display: "flex",
@@ -265,7 +265,7 @@ export const PerformanceView =
}}> }}>
{/********* BANKS *******************/} {/********* BANKS *******************/}
<div style={{ flex: "1 1 1px", display: "flex", flexFlow: "row nowrap", maxWidth: 500 }}> <div style={{ flex: "1 1 1px", display: "flex", flexFlow: "row nowrap", maxWidth: 500 }}>
<IconButton <IconButtonEx tooltip="Previous bank"
aria-label="previous-bank" aria-label="previous-bank"
onClick={() => { this.handlePreviousBank(); }} onClick={() => { this.handlePreviousBank(); }}
size="medium" size="medium"
@@ -275,7 +275,7 @@ export const PerformanceView =
}} }}
> >
<ArrowBackIosIcon style={{ opacity: 0.75 }} /> <ArrowBackIosIcon style={{ opacity: 0.75 }} />
</IconButton> </IconButtonEx>
<Select variant="standard" <Select variant="standard"
className={classes.select} className={classes.select}
@@ -299,18 +299,19 @@ export const PerformanceView =
} }
</Select> </Select>
<IconButton <IconButtonEx tooltip="Next bank"
aria-label="next-bank" aria-label="next-bank"
onClick={() => { this.handleNextBank(); }} onClick={() => { this.handleNextBank(); }}
color="inherit" color="inherit"
style={{ borderTopLeftRadius: "3px", borderBottomLeftRadius: "3px", marginLeft: 4 }} style={{ borderTopLeftRadius: "3px", borderBottomLeftRadius: "3px", marginLeft: 4 }}
> >
<ArrowForwardIosIcon style={{ opacity: 0.75 }} /> <ArrowForwardIosIcon style={{ opacity: 0.75 }} />
</IconButton> </IconButtonEx>
{/** spacer */} {/** spacer */}
<IconButton <IconButtonEx
tooltip="Next bank"
aria-label="next-bank" aria-label="next-bank"
onClick={() => { this.handleNextBank(); }} onClick={() => { this.handleNextBank(); }}
size="medium" size="medium"
@@ -318,22 +319,22 @@ export const PerformanceView =
style={{visibility: "hidden"}} style={{visibility: "hidden"}}
> >
<ArrowForwardIosIcon style={{ opacity: 0.75 }} /> <ArrowForwardIosIcon style={{ opacity: 0.75 }} />
</IconButton> </IconButtonEx>
</div> </div>
{/********* PRESETS *******************/} {/********* PRESETS *******************/}
<div style={{ flex: "1 1 1px", display: "flex", flexFlow: "row nowrap", maxWidth: 500 }}> <div style={{ flex: "1 1 1px", display: "flex", flexFlow: "row nowrap", maxWidth: 500 }}>
<IconButton <IconButtonEx tooltip="Previous preset"
aria-label="previous-presest" aria-label="previous-preset"
onClick={() => { this.handlePreviousPreset(); }} onClick={() => { this.handlePreviousPreset(); }}
color="inherit" color="inherit"
style={{ borderTopRightRadius: "3px", borderBottomRightRadius: "3px", marginRight: 4 }} style={{ borderTopRightRadius: "3px", borderBottomRightRadius: "3px", marginRight: 4 }}
> >
<ArrowBackIosIcon style={{ opacity: 0.75 }} /> <ArrowBackIosIcon style={{ opacity: 0.75 }} />
</IconButton> </IconButtonEx>
<Select variant="standard" <Select variant="standard"
className={classes.select} className={classes.select}
style={{ style={{
@@ -365,24 +366,24 @@ export const PerformanceView =
} }
</Select> </Select>
<IconButton <IconButtonEx tooltip="Next preset"
aria-label="next-preset" aria-label="next-preset"
onClick={() => { this.handleNextPreset(); }} onClick={() => { this.handleNextPreset(); }}
color="inherit" color="inherit"
style={{ borderTopLeftRadius: "3px", borderBottomLeftRadius: "3px", marginLeft: 4 }} style={{ borderTopLeftRadius: "3px", borderBottomLeftRadius: "3px", marginLeft: 4 }}
> >
<ArrowForwardIosIcon style={{ opacity: 0.75 }} /> <ArrowForwardIosIcon style={{ opacity: 0.75 }} />
</IconButton> </IconButtonEx>
<IconButton <IconButtonEx tooltip="Save preset"
aria-label="save-preset" aria-label="save-preset"
onClick={() => { this.model.saveCurrentPreset(); }} onClick={() => { this.model.saveCurrentPreset(); }}
size="medium" size="medium"
color="inherit" color="inherit"
style={{flexShrink: 0,visibility: this.state.presetModified? "visible": "hidden"}} style={{flexShrink: 0,visibility: this.state.presetModified? "visible": "hidden"}}
> >
<SaveIconOutline style={{ opacity: 0.75 }} color="inherit" /> <SaveIconOutline style={{ opacity: 0.75 }} color="inherit" />
</IconButton> </IconButtonEx>
</div> </div>
</div> </div>
vite/src/pipedal/PluginInfoDialog.tsx
-17
View File
@@ -67,23 +67,6 @@ export interface PluginInfoDialogTitleProps extends WithStyles<typeof styles> {
onClose: () => void; 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( const PluginInfoDialogContent = withStyles(
MuiDialogContent, 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. // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React, { SyntheticEvent,Component } from 'react'; import React, { SyntheticEvent,Component } from 'react';
import IconButton from '@mui/material/IconButton'; import IconButtonEx from './IconButtonEx';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel'; import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
@@ -371,17 +371,17 @@ const PluginPresetsDialog = withStyles(
<div style={{ flex: "0 0 auto" }}> <div style={{ flex: "0 0 auto" }}>
<AppBar className={classes.dialogAppBar} style={{ display: this.isEditMode() ? "none" : "block" }} > <AppBar className={classes.dialogAppBar} style={{ display: this.isEditMode() ? "none" : "block" }} >
<Toolbar> <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()} disabled={this.isEditMode()}
> >
<ArrowBackIcon /> <ArrowBackIcon />
</IconButton> </IconButtonEx>
<Typography noWrap variant="h6" className={classes.dialogTitle}> <Typography noWrap variant="h6" className={classes.dialogTitle}>
{title} {title}
</Typography> </Typography>
<IconButton color="inherit" onClick={(e) => this.showActionBar(true)} > <IconButtonEx tooltip="Edit" color="inherit" onClick={(e) => this.showActionBar(true)} >
<EditIcon /> <EditIcon />
</IconButton> </IconButtonEx>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
<AppBar className={actionBarClass} style={{ display: this.isEditMode() ? "block" : "none" }} <AppBar className={actionBarClass} style={{ display: this.isEditMode() ? "block" : "none" }}
@@ -389,14 +389,14 @@ const PluginPresetsDialog = withStyles(
> >
<Toolbar> <Toolbar>
{(!this.props.isEditDialog) ? ( {(!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 /> <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 /> <ArrowBackIcon />
</IconButton> </IconButtonEx>
)} )}
<Typography noWrap variant="h6" className={classes.dialogTitle}> <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 }} /> <img src="/img/old_delete_outline_white_24dp.svg" alt="Delete" style={{ width: 24, height: 24, opacity: 0.6 }} />
</IconButton> </IconButtonEx>
<IconButton color="inherit" onClick={(e) => { this.onMoreClick(e) }} > <IconButtonEx tooltip="More..." color="inherit" onClick={(e) => { this.onMoreClick(e) }} >
<MoreVertIcon /> <MoreVertIcon />
</IconButton> </IconButtonEx>
<Menu <Menu
id="more-menu" id="more-menu"
anchorEl={this.state.moreMenuAnchorEl} 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 Typography from '@mui/material/Typography';
import { PiPedalModel, PiPedalModelFactory, PresetIndexEntry, PresetIndex } from './PiPedalModel'; import { PiPedalModel, PiPedalModelFactory, PresetIndexEntry, PresetIndex } from './PiPedalModel';
import Button from '@mui/material/Button'; import Button from '@mui/material/Button';
import ButtonEx from './ButtonEx';
import ButtonBase from "@mui/material/ButtonBase"; import ButtonBase from "@mui/material/ButtonBase";
import DialogEx from './DialogEx'; import DialogEx from './DialogEx';
import AppBar from '@mui/material/AppBar'; 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 {createStyles} from './WithStyles';
import Input from '@mui/material/Input'; import Input from '@mui/material/Input';
import IconButton from '@mui/material/IconButton'; import IconButtonEx from './IconButtonEx';
import SearchIcon from '@mui/icons-material/Search'; import SearchIcon from '@mui/icons-material/Search';
import ClearIcon from '@mui/icons-material/Clear'; import ClearIcon from '@mui/icons-material/Clear';
import InputAdornment from '@mui/material/InputAdornment'; import InputAdornment from '@mui/material/InputAdornment';
@@ -102,9 +102,9 @@ const SearchControl = withTheme(withStyles(
return ( return (
<div style={{ display: "flex", flexFlow: "row nowrap", justifyContent: "flex-end", alignItems: "center" }}> <div style={{ display: "flex", flexFlow: "row nowrap", justifyContent: "flex-end", alignItems: "center" }}>
{(this.props.showSearchIcon ?? true) && ( {(this.props.showSearchIcon ?? true) && (
<IconButton onClick={() => { this.props.onClick(); }} size="large"> <IconButtonEx tooltip="Search" onClick={() => { this.props.onClick(); }} size="large">
<SearchIcon /> <SearchIcon />
</IconButton> </IconButtonEx>
) )
} }
@@ -118,7 +118,7 @@ const SearchControl = withTheme(withStyles(
placeholder="Search" placeholder="Search"
endAdornment={( endAdornment={(
<InputAdornment position="end"> <InputAdornment position="end">
<IconButton <IconButtonEx tooltip="Clear search filter"
aria-label="clear search filter" aria-label="clear search filter"
onClick={() => { onClick={() => {
this.props.onClearFilterClick(); this.props.onClearFilterClick();
@@ -130,7 +130,7 @@ const SearchControl = withTheme(withStyles(
edge="end" edge="end"
size="large"> size="large">
<ClearIcon fontSize='small' style={{ opacity: 0.6 }} /> <ClearIcon fontSize='small' style={{ opacity: 0.6 }} />
</IconButton> </IconButtonEx>
</InputAdornment> </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 Switch from "@mui/material/Switch";
import OkCancelDialog from './OkCancelDialog'; import OkCancelDialog from './OkCancelDialog';
import RadioSelectDialog from './RadioSelectDialog'; import RadioSelectDialog from './RadioSelectDialog';
import IconButton from '@mui/material/IconButton'; import IconButtonEx from './IconButtonEx';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import { PiPedalModel, PiPedalModelFactory, State } from './PiPedalModel'; import { PiPedalModel, PiPedalModelFactory, State } from './PiPedalModel';
import { ColorTheme } from './DarkMode'; import { ColorTheme } from './DarkMode';
@@ -570,10 +570,10 @@ const SettingsDialog = withStyles(
: :
( (
<Toolbar> <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 /> <ArrowBackIcon />
</IconButton> </IconButtonEx>
<Typography variant="h6" className={classes.dialogTitle}> <Typography variant="h6" className={classes.dialogTitle}>
Settings Settings
</Typography> </Typography>
vite/src/pipedal/SnapshotButton.tsx
+5 -5
View File
@@ -23,7 +23,7 @@
*/ */
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton'; import IconButtonEx from './IconButtonEx';
import ButtonBase from '@mui/material/ButtonBase'; import ButtonBase from '@mui/material/ButtonBase';
import ResizeResponsiveComponent from './ResizeResponsiveComponent'; import ResizeResponsiveComponent from './ResizeResponsiveComponent';
import SaveIconOutline from '@mui/icons-material/Save'; 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={{ marginLeft: "auto", marginRight: 8, display: "flex", flexFlow: "row nowrap" }}>
<div style={{ flexGrow: 1, flexBasis: 1 }} ></div> <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*/ }} onMouseDown={(ev) => { ev.stopPropagation(); /*don't prop to card*/ }}
onClick={() => { this.props.onSaveSnapshot(snapshotIndex); }} onClick={() => { this.props.onSaveSnapshot(snapshotIndex); }}
> >
<SaveIconOutline /> <SaveIconOutline />
</IconButton> </IconButtonEx>
<IconButton color="inherit" disabled={disabled} style={{ opacity: 0.66 }} <IconButtonEx tooltip="Edit snapshot" color="inherit" disabled={disabled} style={{ opacity: 0.66 }}
onMouseDown={(ev) => { ev.stopPropagation(); /*don't prop to card*/ }} onMouseDown={(ev) => { ev.stopPropagation(); /*don't prop to card*/ }}
onClick={() => { this.props.onEditSnapshot(snapshotIndex); }} onClick={() => { this.props.onEditSnapshot(snapshotIndex); }}
> >
<EditIconOutline /> <EditIconOutline />
</IconButton> </IconButtonEx>
</div> </div>
)} )}
</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 DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle'; import DialogTitle from '@mui/material/DialogTitle';
import ArrowBackIcon from '@mui/icons-material/ArrowBack'; import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import IconButton from '@mui/material/IconButton'; import IconButtonEx from './IconButtonEx';
import ResizeResponsiveComponent from './ResizeResponsiveComponent'; import ResizeResponsiveComponent from './ResizeResponsiveComponent';
import { TransitionProps } from '@mui/material/transitions'; import { TransitionProps } from '@mui/material/transitions';
@@ -114,10 +114,10 @@ export default class SnapshotDialog extends ResizeResponsiveComponent<SnapshotDi
> >
<DialogTitle> <DialogTitle>
<div> <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" }} /> <ArrowBackIcon fontSize="small" style={{ opacity: "0.6" }} />
</IconButton> </IconButtonEx>
<Typography display="inline" variant="body1" color="textSecondary" >Snapshots</Typography> <Typography display="inline" variant="body1" color="textSecondary" >Snapshots</Typography>
</div> </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 DialogEx from './DialogEx';
import DialogTitle from '@mui/material/DialogTitle'; import DialogTitle from '@mui/material/DialogTitle';
import ArrowBackIcon from '@mui/icons-material/ArrowBack'; import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import IconButton from '@mui/material/IconButton'; import IconButtonEx from './IconButtonEx';
import DialogActions from '@mui/material/DialogActions'; import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent'; import DialogContent from '@mui/material/DialogContent';
import { colorKeys } from "./MaterialColors"; import { colorKeys } from "./MaterialColors";
@@ -117,10 +117,10 @@ export default class SnapshotPropertiesDialog extends ResizeResponsiveComponent<
> >
<DialogTitle> <DialogTitle>
<div> <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" }} /> <ArrowBackIcon fontSize="small" style={{ opacity: "0.6" }} />
</IconButton> </IconButtonEx>
<Typography display="inline" variant="body1" color="textSecondary" > <Typography display="inline" variant="body1" color="textSecondary" >
{this.props.editing ? "Edit snapshot" : "Save snapshot"} {this.props.editing ? "Edit snapshot" : "Save snapshot"}
</Typography> </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 ErrorIcon from '@mui/icons-material/Error';
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'; import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
import ArrowBackIcon from '@mui/icons-material/ArrowBack'; 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 CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import CircularProgress from '@mui/material/CircularProgress'; import CircularProgress from '@mui/material/CircularProgress';
@@ -372,10 +372,10 @@ export default class UploadFileDialog extends ResizeResponsiveComponent<UploadFi
> >
<DialogTitle > <DialogTitle >
<div> <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" }} /> <ArrowBackIcon fontSize="small" style={{ opacity: "0.6" }} />
</IconButton> </IconButtonEx>
<Typography display="inline" >Upload</Typography> <Typography display="inline" >Upload</Typography>
</div> </div>
</DialogTitle> </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. // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react'; import React from 'react';
import IconButton from '@mui/material/IconButton'; import IconButtonEx from './IconButtonEx';
import VisibilityIcon from '@mui/icons-material/Visibility'; import VisibilityIcon from '@mui/icons-material/Visibility';
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
import FormHelperText from '@mui/material/FormHelperText'; import FormHelperText from '@mui/material/FormHelperText';
@@ -432,11 +432,11 @@ const WifiConfigDialog = withStyles(
<FormHelperText>{NBSP}</FormHelperText> <FormHelperText>{NBSP}</FormHelperText>
</FormControl> </FormControl>
{(this.state.compactWidth || this.state.autoStartMode !== 2) && ( {(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 }); }} onClick={() => { this.setState({ showHelpDialog: true }); }}
> >
<HelpOutlineIcon /> <HelpOutlineIcon />
</IconButton> </IconButtonEx>
)} )}
</div> </div>
<div style={{ <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 }); }} onClick={() => { this.setState({ showHelpDialog: true }); }}
> >
<HelpOutlineIcon /> <HelpOutlineIcon />
</IconButton> </IconButtonEx>
</div> </div>
</div> </div>
@@ -532,7 +532,9 @@ const WifiConfigDialog = withStyles(
: "" : ""
, ,
endAdornment: ( endAdornment: (
<IconButton size="small" <IconButtonEx tooltip={
this.state.showPassword ? "Hide password": "Show password"
} size="small"
aria-label="toggle password visibility" aria-label="toggle password visibility"
onClick={() => { this.handleTogglePasswordVisibility(); }} 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 Typography from '@mui/material/Typography';
import { PiPedalModelFactory, PiPedalModel } from './PiPedalModel'; import { PiPedalModelFactory, PiPedalModel } from './PiPedalModel';
import ZoomedDial from './ZoomedDial'; import ZoomedDial from './ZoomedDial';
import IconButton from '@mui/material/IconButton'; import IconButtonEx from './IconButtonEx';
import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore'; import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
import NavigateNextIcon from '@mui/icons-material/NavigateNext'; import NavigateNextIcon from '@mui/icons-material/NavigateNext';
@@ -233,13 +233,13 @@ const ZoomedUiControl = withTheme(withStyles(
width: 380, height: 300, width: 380, height: 300,
display: "flex", flexFlow: "row", alignItems: "center", alignContent: " center", justifyContent: "center" 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(); this.model.onNextZoomedControl();
} }
} > } >
<NavigateBeforeIcon /> <NavigateBeforeIcon />
</IconButton> </IconButtonEx>
<div style={{ <div style={{
width: 200, flexGrow: 1, height: 300, width: 200, flexGrow: 1, height: 300,
display: "flex", flexFlow: "column", alignItems: "center", alignContent: "center", justifyContent: "center" display: "flex", flexFlow: "column", alignItems: "center", alignContent: "center", justifyContent: "center"
@@ -281,14 +281,14 @@ const ZoomedUiControl = withTheme(withStyles(
{displayValue} {displayValue}
</Typography> </Typography>
</div> </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={() => { onClick={() => {
this.model.onPreviousZoomedControl(); this.model.onPreviousZoomedControl();
} }
} }
> >
<NavigateNextIcon /> <NavigateNextIcon />
</IconButton> </IconButtonEx>
</div> </div>
</DialogEx> </DialogEx>