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

Dialog button colors

Browse Source
This commit is contained in:
Robin Davies
2024-08-14 17:56:28 -04:00
parent 508b7d2808
commit 5bf2905c79
20 changed files with 116 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react/src/App.tsx
+69 -27
View File
@@ -21,12 +21,12 @@ import React from 'react';
import { ThemeProvider, createTheme, StyledEngineProvider, Theme } from '@mui/material/styles'; import { ThemeProvider, createTheme, StyledEngineProvider, Theme } from '@mui/material/styles';
import AppThemed from "./AppThemed"; import AppThemed from "./AppThemed";
import {isDarkMode} from './DarkMode'; import { isDarkMode } from './DarkMode';
declare module '@mui/material/styles' { declare module '@mui/material/styles' {
interface Theme { interface Theme {
mainBackground: React.CSSProperties['color']; mainBackground: React.CSSProperties['color'];
toolbarColor: React.CSSProperties['color']; toolbarColor: React.CSSProperties['color'];
} }
interface ThemeOptions { interface ThemeOptions {
mainBackground?: React.CSSProperties['color']; mainBackground?: React.CSSProperties['color'];
@@ -35,12 +35,17 @@ declare module '@mui/material/styles' {
} }
declare module '@mui/material/Button' {
interface ButtonPropsVariantOverrides {
dialogPrimary: true;
dialogSecondary: true;
}
}
declare module '@mui/styles/defaultTheme' { declare module '@mui/styles/defaultTheme' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface // eslint-disable-next-line @typescript-eslint/no-empty-interface
interface DefaultTheme extends Theme {} interface DefaultTheme extends Theme { }
} }
@@ -49,34 +54,71 @@ declare module '@mui/styles/defaultTheme' {
const theme = createTheme( const theme = createTheme(
isDarkMode() ? isDarkMode() ?
{ {
palette: { components: {
mode: 'dark', MuiButton: {
primary: { variants: [
main: '#A770E4'// #6750A4" // #5B5690 #60529A #5C5694 {
props: { variant: 'dialogPrimary' },
style: {
color: "#FFFFFF"
}
},
{
props: { variant: 'dialogSecondary', },
style: {
color: "rgb(255,255,255,0.7)"
},
},
],
},
}, },
secondary: {
main: "#FF6060" palette: {
mode: 'dark',
primary: {
main: '#A770E4'// #6750A4" // #5B5690 #60529A #5C5694
},
secondary: {
main: "#0AA102" //'"#FF6060"
},
}, },
}, mainBackground: "#222",
mainBackground: "#222", toolbarColor: '#222'
toolbarColor: '#222' }
}
: :
{ {
palette: { components: {
primary: { MuiButton: {
main: "#6750A4" // #5B5690 #60529A #5C5694 variants: [
{
props: { variant: 'dialogPrimary' },
style: {
color: "rgb(0,0,0,0.87)"
}
},
{
props: { variant: 'dialogSecondary', },
style: {
color: "rgb(0,0,0,0.6)"
},
},
],
},
}, },
secondary: { palette: {
main: "#FF6060" primary: {
} main: "#6750A4" // #5B5690 #60529A #5C5694
},
secondary: {
main: "#FF6060"
}
}, },
mainBackground: "#FFFFFF", mainBackground: "#FFFFFF",
toolbarColor: '#FFFFFF' toolbarColor: '#FFFFFF'
} }
); );
@@ -97,7 +139,7 @@ const App = (class extends React.Component {
return ( return (
<StyledEngineProvider injectFirst> <StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<AppThemed/> <AppThemed />
</ThemeProvider> </ThemeProvider>
</StyledEngineProvider> </StyledEngineProvider>
); );
react/src/AppThemed.tsx
+1 -1
View File
@@ -879,7 +879,7 @@ render() {
</DialogContentText> </DialogContentText>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={this.handleCloseAlert} color="primary" autoFocus> <Button variant="dialogPrimary" onClick={this.handleCloseAlert} color="primary" autoFocus>
OK OK
</Button> </Button>
</DialogActions> </DialogActions>
react/src/BankDialog.tsx
+2 -2
View File
@@ -546,10 +546,10 @@ const BankDialog = withStyles(styles, { withTheme: true })(
<Typography>Are you sure you want to delete bank '{this.getSelectedBankName()}'?</Typography> <Typography>Are you sure you want to delete bank '{this.getSelectedBankName()}'?</Typography>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={()=> this.handleDeletePromptClose()} color="primary"> <Button variant="dialogSecondary" onClick={()=> this.handleDeletePromptClose()} color="primary">
Cancel Cancel
</Button> </Button>
<Button onClick={()=> this.handleDeletePromptOk()} color="secondary" > <Button variant="dialogPrimary" onClick={()=> this.handleDeletePromptOk()} color="secondary" >
DELETE DELETE
</Button> </Button>
react/src/FilePropertyDialog.tsx
+3 -3
View File
@@ -553,12 +553,12 @@ export default withStyles(styles, { withTheme: true })(
</Button> </Button>
<div style={{ flex: "1 1 auto" }}>&nbsp;</div> <div style={{ flex: "1 1 auto" }}>&nbsp;</div>
<Button onClick={() => { this.props.onCancel(); }} aria-label="cancel"> <Button variant="dialogSecondary" onClick={() => { this.props.onCancel(); }} aria-label="cancel">
Cancel Cancel
</Button> </Button>
<Button style={{ flex: "0 0 auto" }} <Button variant="dialogPrimary" style={{ flex: "0 0 auto" }}
onClick={() => { this.openSelectedFile(); }} onClick={() => { this.openSelectedFile(); }}
color="secondary"
disabled={(!this.state.hasSelection) && this.state.selectedFile !== ""} aria-label="select" disabled={(!this.state.hasSelection) && this.state.selectedFile !== ""} aria-label="select"
> >
Select Select
react/src/FilePropertyDirectorySelectDialog.tsx
+2 -2
View File
@@ -334,10 +334,10 @@ export default class FilePropertyDirectorySelectDialog extends ResizeResponsiveC
</DialogContent> </DialogContent>
<Divider /> <Divider />
<DialogActions> <DialogActions>
<Button onClick={() => { this.onClose(); }} color="primary"> <Button variant="dialogSecondary" onClick={() => { this.onClose(); }} color="primary">
Cancel Cancel
</Button> </Button>
<Button onClick={() => { this.onOK(); }} color="secondary" disabled={!this.state.hasSelection} > <Button variant="dialogPrimary" onClick={() => { this.onOK(); }} color="secondary" disabled={!this.state.hasSelection} >
OK OK
</Button> </Button>
</DialogActions> </DialogActions>
react/src/JackServerSettingsDialog.tsx
+2 -2
View File
@@ -362,10 +362,10 @@ const JackServerSettingsDialog = withStyles(styles)(
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={handleClose} color="primary"> <Button variant="dialogSecondary" onClick={handleClose} >
Cancel Cancel
</Button> </Button>
<Button onClick={() => this.handleApply()} color="primary" disabled={ <Button variant="dialogPrimary" onClick={() => this.handleApply()} disabled={
(!this.state.alsaDevices) || !this.state.jackServerSettings.valid}> (!this.state.alsaDevices) || !this.state.jackServerSettings.valid}>
OK OK
</Button> </Button>
react/src/ListSelectDialog.tsx
+1 -1
View File
@@ -106,7 +106,7 @@ export default class ListSelectDialog extends ResizeResponsiveComponent<ListSele
} }
</List> </List>
<DialogActions> <DialogActions>
<Button onClick={()=> this.props.onClose()} color="primary"> <Button variant="dialogSecondary" onClick={()=> this.props.onClose()} color="primary">
Cancel Cancel
</Button> </Button>
</DialogActions> </DialogActions>
react/src/LoadPluginDialog.tsx
+4 -4
View File
@@ -814,8 +814,8 @@ export const LoadPluginDialog =
</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" }}>
<Button onClick={this.handleCancel} style={{ width: 120 }} >Cancel</Button> <Button variant="dialogSecondary" onClick={this.handleCancel} style={{ width: 120 }} >Cancel</Button>
<Button onClick={this.handleOk} color="secondary" disabled={selectedPlugin === null} style={{ width: 180 }} >SELECT</Button> <Button variant="dialogPrimary" onClick={this.handleOk} disabled={selectedPlugin === null} style={{ width: 180 }} >SELECT</Button>
</div> </div>
</div> </div>
</DialogActions> </DialogActions>
@@ -839,8 +839,8 @@ export const LoadPluginDialog =
<div className={classes.bottom} style={{height: 64}}> <div className={classes.bottom} style={{height: 64}}>
<div style={{ flex: "1 1 1px" }} /> <div style={{ flex: "1 1 1px" }} />
<div style={{ position: "relative", flex: "0 1 auto", display: "flex", alignItems: "center" }}> <div style={{ position: "relative", flex: "0 1 auto", display: "flex", alignItems: "center" }}>
<Button onClick={this.handleCancel} style={{ height: 48 }} >Cancel</Button> <Button variant="dialogSecondary" onClick={this.handleCancel} style={{ height: 48 }} >Cancel</Button>
<Button onClick={this.handleOk} color="secondary" disabled={selectedPlugin === null} style={{ height: 48 }} >SELECT</Button> <Button variant="dialogPrimary" onClick={this.handleOk} disabled={selectedPlugin === null} style={{ height: 48 }} >SELECT</Button>
</div> </div>
</div> </div>
</DialogActions> </DialogActions>
react/src/OkCancelDialog.tsx
+2 -2
View File
@@ -70,10 +70,10 @@ export default class OkCancelDialog extends React.Component<OkCancelDialogProps,
>{text}</Typography> >{text}</Typography>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={handleClose} color="primary"> <Button variant="dialogSecondary" onClick={handleClose} >
Cancel Cancel
</Button> </Button>
<Button onClick={handleOk} color="secondary" > <Button variant="dialogPrimary" onClick={handleOk} >
{okButtonText} {okButtonText}
</Button> </Button>
</DialogActions> </DialogActions>
react/src/PiPedalModel.tsx
+8 -3
View File
@@ -2644,8 +2644,11 @@ export class PiPedalModel //implements PiPedalModel
if (this.getTheme() !== value) if (this.getTheme() !== value)
{ {
setColorScheme(value); setColorScheme(value);
this.reloadPage(); setTimeout(()=>{
} this.reloadPage();
},
200);
}
} }
reloadRequested: boolean = false; reloadRequested: boolean = false;
@@ -2653,7 +2656,9 @@ export class PiPedalModel //implements PiPedalModel
reloadPage() { reloadPage() {
this.reloadRequested = true; this.reloadRequested = true;
// eslint-disable-next-line no-restricted-globals // eslint-disable-next-line no-restricted-globals
window.location.reload(); let url = window.location.href.split('#')[0];
window.location.href = url;
//window.location.reload();
} }
}; };
react/src/PluginInfoDialog.tsx
+1 -1
View File
@@ -317,7 +317,7 @@ const PluginInfoDialog = withStyles(styles)((props: PluginInfoProps) => {
</div> </div>
</PluginInfoDialogContent> </PluginInfoDialogContent>
<PluginInfoDialogActions> <PluginInfoDialogActions>
<Button autoFocus onClick={handleClose} color="primary" style={{ width: "130px" }}> <Button variant="dialogPrimary" autoFocus onClick={handleClose} style={{ width: "130px" }}>
OK OK
</Button> </Button>
</PluginInfoDialogActions> </PluginInfoDialogActions>
react/src/RenameDialog.tsx
+2 -2
View File
@@ -131,10 +131,10 @@ export default class RenameDialog extends ResizeResponsiveComponent<RenameDialog
/> />
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={handleClose} color="primary"> <Button onClick={handleClose} variant="dialogSecondary" >
Cancel Cancel
</Button> </Button>
<Button onClick={handleOk} color="secondary" > <Button onClick={handleOk} variant="dialogPrimary" >
{acceptActionName} {acceptActionName}
</Button> </Button>
</DialogActions> </DialogActions>
react/src/SelectChannelsDialog.tsx
+2 -2
View File
@@ -107,10 +107,10 @@ function SelectChannelsDialog(props: SelectChannelsDialogProps) {
)} )}
</List> </List>
<DialogActions> <DialogActions>
<Button onClick={handleClose} color="primary"> <Button onClick={handleClose} variant="dialogSecondary" >
Cancel Cancel
</Button> </Button>
<Button onClick={handleOk} color="primary" disabled={currentSelection.length === 0 || currentSelection.length > 2} > <Button onClick={handleOk} variant="dialogPrimary" disabled={currentSelection.length === 0 || currentSelection.length > 2} >
OK OK
</Button> </Button>
</DialogActions> </DialogActions>
react/src/SelectMidiChannelsDialog.tsx
+2 -2
View File
@@ -110,10 +110,10 @@ function SelectMidiChannelsDialog(props: SelectMidiChannelsDialogProps) {
)} )}
</List> </List>
<DialogActions> <DialogActions>
<Button onClick={handleClose} color="primary"> <Button onClick={handleClose} variant="dialogSecondary" >
Cancel Cancel
</Button> </Button>
<Button onClick={handleOk} color="primary" > <Button onClick={handleOk} variant="dialogPrimary" >
OK OK
</Button> </Button>
</DialogActions> </DialogActions>
react/src/SelectThemeDialog.tsx
+2 -2
View File
@@ -79,10 +79,10 @@ function SelectThemesDialog(props: SelectThemesDialogProps) {
</FormControl> </FormControl>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={handleClose} color="primary"> <Button onClick={handleClose} variant="dialogSecondary" >
Cancel Cancel
</Button> </Button>
<Button onClick={handleOk} color="primary" > <Button onClick={handleOk} variant="dialogPrimary" >
OK OK
</Button> </Button>
</DialogActions> </DialogActions>
react/src/SettingsDialog.tsx
+1 -1
View File
@@ -885,7 +885,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
onClose={()=> { this.setState({showThemeSelectDialog: false});} } onClose={()=> { this.setState({showThemeSelectDialog: false});} }
onOk={(selectedTheme: ColorTheme) => { onOk={(selectedTheme: ColorTheme) => {
this.model.setTheme(selectedTheme); this.model.setTheme(selectedTheme);
this.setState({showThemeSelectDialog: false}); this.setState({showThemeSelectDialog: false});
}} }}
defaultTheme={this.model.getTheme()} defaultTheme={this.model.getTheme()}
/> />
react/src/UploadFileDialog.tsx
+4 -3
View File
@@ -384,7 +384,8 @@ export default class UploadFileDialog extends ResizeResponsiveComponent<UploadFi
<DialogActions > <DialogActions >
<Button <Button
component="label" color="primary" style={{ whiteSpace: "nowrap", textOverflow: "ellipsis", marginLeft: 16, width: 120, flex: "0 0 auto" }} component="label" variant="dialogPrimary" style={{ whiteSpace: "nowrap",
textOverflow: "ellipsis", marginLeft: 16, width: 120, flex: "0 0 auto" }}
> >
Select&nbsp;Files Select&nbsp;Files
<input <input
@@ -399,12 +400,12 @@ export default class UploadFileDialog extends ResizeResponsiveComponent<UploadFi
{ {
this.state.okEnabled ? this.state.okEnabled ?
( (
<Button onClick={() => this.handleClose()} color="primary"> <Button onClick={() => this.handleClose()} variant="dialogPrimary" >
OK OK
</Button> </Button>
) : ( ) : (
<Button onClick={() => this.handleCancel()} color="primary"> <Button onClick={() => this.handleCancel()} variant="dialogPrimary" >
Cancel Cancel
</Button> </Button>
react/src/UploadPresetDialog.tsx
+2 -2
View File
@@ -182,11 +182,11 @@ export default class UploadPresetDialog extends ResizeResponsiveComponent<Upload
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={() => this.handleClose()} color="primary"> <Button onClick={() => this.handleClose()} variant="dialogSecondary" >
Cancel Cancel
</Button> </Button>
<Button <Button
component="label" color="secondary" style={{width: 120}} component="label" variant="dialogPrimary" style={{width: 120}}
> >
Select File Select File
<input <input
react/src/WifiConfigDialog.tsx
+4 -4
View File
@@ -337,10 +337,10 @@ const WifiConfigDialog = withStyles(styles, { withTheme: true })(
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={handleClose} color="primary" style={{ width: 120 }}> <Button onClick={handleClose} variant="dialogSecondary" style={{ width: 120 }}>
Cancel Cancel
</Button> </Button>
<Button onClick={()=> this.handleOk(false)} color="success" style={{ width: 120 }} > <Button onClick={()=> this.handleOk(false)} variant="dialogPrimary" style={{ width: 120 }} >
OK OK
</Button> </Button>
</DialogActions> </DialogActions>
@@ -356,13 +356,13 @@ const WifiConfigDialog = withStyles(styles, { withTheme: true })(
</Typography> </Typography>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={()=> this.setState({showWifiWarningDialog: false})} color="primary" style={{ width: 120 }}> <Button onClick={()=> this.setState({showWifiWarningDialog: false})} variant="dialogSecondary" style={{ width: 120 }}>
Cancel Cancel
</Button> </Button>
<Button onClick={()=> { <Button onClick={()=> {
this.setState({showWifiWarningDialog: false}); this.setState({showWifiWarningDialog: false});
this.handleOk(true); this.handleOk(true);
}} color="secondary" style={{ width: 120 }} > }} variant="dialogPrimary" style={{ width: 120 }} >
PROCEED PROCEED
</Button> </Button>
</DialogActions> </DialogActions>
react/src/WifiDirectConfigDialog.tsx
+2 -2
View File
@@ -506,10 +506,10 @@ const WifiDirectConfigDialog = withStyles(styles, { withTheme: true })(
)} )}
<DialogActions> <DialogActions>
<Button onClick={handleClose} color="primary" style={{ width: 120 }}> <Button onClick={handleClose} variant="dialogSecondary" style={{ width: 120 }}>
Cancel Cancel
</Button> </Button>
<Button onClick={() => this.handleOk()} color="primary" style={{ width: 120 }} > <Button onClick={() => this.handleOk()} variant="dialogPrimary" style={{ width: 120 }} >
OK OK
</Button> </Button>
</DialogActions> </DialogActions>