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 AppThemed from "./AppThemed";
import {isDarkMode} from './DarkMode';
import { isDarkMode } from './DarkMode';
declare module '@mui/material/styles' {
interface Theme {
mainBackground: React.CSSProperties['color'];
toolbarColor: React.CSSProperties['color'];
mainBackground: React.CSSProperties['color'];
toolbarColor: React.CSSProperties['color'];
}
interface ThemeOptions {
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' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface DefaultTheme extends Theme {}
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface DefaultTheme extends Theme { }
}
@@ -49,34 +54,71 @@ declare module '@mui/styles/defaultTheme' {
const theme = createTheme(
isDarkMode() ?
{
palette: {
mode: 'dark',
primary: {
main: '#A770E4'// #6750A4" // #5B5690 #60529A #5C5694
components: {
MuiButton: {
variants: [
{
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",
toolbarColor: '#222'
}
mainBackground: "#222",
toolbarColor: '#222'
}
:
{
palette: {
primary: {
main: "#6750A4" // #5B5690 #60529A #5C5694
components: {
MuiButton: {
variants: [
{
props: { variant: 'dialogPrimary' },
style: {
color: "rgb(0,0,0,0.87)"
}
},
{
props: { variant: 'dialogSecondary', },
style: {
color: "rgb(0,0,0,0.6)"
},
},
],
},
},
secondary: {
main: "#FF6060"
}
palette: {
primary: {
main: "#6750A4" // #5B5690 #60529A #5C5694
},
secondary: {
main: "#FF6060"
}
},
mainBackground: "#FFFFFF",
toolbarColor: '#FFFFFF'
},
mainBackground: "#FFFFFF",
toolbarColor: '#FFFFFF'
}
}
);
@@ -97,7 +139,7 @@ const App = (class extends React.Component {
return (
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<AppThemed/>
<AppThemed />
</ThemeProvider>
</StyledEngineProvider>
);
react/src/AppThemed.tsx
+1 -1
View File
@@ -879,7 +879,7 @@ render() {
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={this.handleCloseAlert} color="primary" autoFocus>
<Button variant="dialogPrimary" onClick={this.handleCloseAlert} color="primary" autoFocus>
OK
</Button>
</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>
</DialogContent>
<DialogActions>
<Button onClick={()=> this.handleDeletePromptClose()} color="primary">
<Button variant="dialogSecondary" onClick={()=> this.handleDeletePromptClose()} color="primary">
Cancel
</Button>
<Button onClick={()=> this.handleDeletePromptOk()} color="secondary" >
<Button variant="dialogPrimary" onClick={()=> this.handleDeletePromptOk()} color="secondary" >
DELETE
</Button>
react/src/FilePropertyDialog.tsx
+3 -3
View File
@@ -553,12 +553,12 @@ export default withStyles(styles, { withTheme: true })(
</Button>
<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
</Button>
<Button style={{ flex: "0 0 auto" }}
<Button variant="dialogPrimary" style={{ flex: "0 0 auto" }}
onClick={() => { this.openSelectedFile(); }}
color="secondary"
disabled={(!this.state.hasSelection) && this.state.selectedFile !== ""} aria-label="select"
>
Select
react/src/FilePropertyDirectorySelectDialog.tsx
+2 -2
View File
@@ -334,10 +334,10 @@ export default class FilePropertyDirectorySelectDialog extends ResizeResponsiveC
</DialogContent>
<Divider />
<DialogActions>
<Button onClick={() => { this.onClose(); }} color="primary">
<Button variant="dialogSecondary" onClick={() => { this.onClose(); }} color="primary">
Cancel
</Button>
<Button onClick={() => { this.onOK(); }} color="secondary" disabled={!this.state.hasSelection} >
<Button variant="dialogPrimary" onClick={() => { this.onOK(); }} color="secondary" disabled={!this.state.hasSelection} >
OK
</Button>
</DialogActions>
react/src/JackServerSettingsDialog.tsx
+2 -2
View File
@@ -362,10 +362,10 @@ const JackServerSettingsDialog = withStyles(styles)(
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
<Button variant="dialogSecondary" onClick={handleClose} >
Cancel
</Button>
<Button onClick={() => this.handleApply()} color="primary" disabled={
<Button variant="dialogPrimary" onClick={() => this.handleApply()} disabled={
(!this.state.alsaDevices) || !this.state.jackServerSettings.valid}>
OK
</Button>
react/src/ListSelectDialog.tsx
+1 -1
View File
@@ -106,7 +106,7 @@ export default class ListSelectDialog extends ResizeResponsiveComponent<ListSele
}
</List>
<DialogActions>
<Button onClick={()=> this.props.onClose()} color="primary">
<Button variant="dialogSecondary" onClick={()=> this.props.onClose()} color="primary">
Cancel
</Button>
</DialogActions>
react/src/LoadPluginDialog.tsx
+4 -4
View File
@@ -814,8 +814,8 @@ export const LoadPluginDialog =
</div>
</div>
<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 onClick={this.handleOk} color="secondary" disabled={selectedPlugin === null} style={{ width: 180 }} >SELECT</Button>
<Button variant="dialogSecondary" onClick={this.handleCancel} style={{ width: 120 }} >Cancel</Button>
<Button variant="dialogPrimary" onClick={this.handleOk} disabled={selectedPlugin === null} style={{ width: 180 }} >SELECT</Button>
</div>
</div>
</DialogActions>
@@ -839,8 +839,8 @@ export const LoadPluginDialog =
<div className={classes.bottom} style={{height: 64}}>
<div style={{ flex: "1 1 1px" }} />
<div style={{ position: "relative", flex: "0 1 auto", display: "flex", alignItems: "center" }}>
<Button onClick={this.handleCancel} style={{ height: 48 }} >Cancel</Button>
<Button onClick={this.handleOk} color="secondary" disabled={selectedPlugin === null} style={{ height: 48 }} >SELECT</Button>
<Button variant="dialogSecondary" onClick={this.handleCancel} style={{ height: 48 }} >Cancel</Button>
<Button variant="dialogPrimary" onClick={this.handleOk} disabled={selectedPlugin === null} style={{ height: 48 }} >SELECT</Button>
</div>
</div>
</DialogActions>
react/src/OkCancelDialog.tsx
+2 -2
View File
@@ -70,10 +70,10 @@ export default class OkCancelDialog extends React.Component<OkCancelDialogProps,
>{text}</Typography>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
<Button variant="dialogSecondary" onClick={handleClose} >
Cancel
</Button>
<Button onClick={handleOk} color="secondary" >
<Button variant="dialogPrimary" onClick={handleOk} >
{okButtonText}
</Button>
</DialogActions>
react/src/PiPedalModel.tsx
+8 -3
View File
@@ -2644,8 +2644,11 @@ export class PiPedalModel //implements PiPedalModel
if (this.getTheme() !== value)
{
setColorScheme(value);
this.reloadPage();
}
setTimeout(()=>{
this.reloadPage();
},
200);
}
}
reloadRequested: boolean = false;
@@ -2653,7 +2656,9 @@ export class PiPedalModel //implements PiPedalModel
reloadPage() {
this.reloadRequested = true;
// 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>
</PluginInfoDialogContent>
<PluginInfoDialogActions>
<Button autoFocus onClick={handleClose} color="primary" style={{ width: "130px" }}>
<Button variant="dialogPrimary" autoFocus onClick={handleClose} style={{ width: "130px" }}>
OK
</Button>
</PluginInfoDialogActions>
react/src/RenameDialog.tsx
+2 -2
View File
@@ -131,10 +131,10 @@ export default class RenameDialog extends ResizeResponsiveComponent<RenameDialog
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
<Button onClick={handleClose} variant="dialogSecondary" >
Cancel
</Button>
<Button onClick={handleOk} color="secondary" >
<Button onClick={handleOk} variant="dialogPrimary" >
{acceptActionName}
</Button>
</DialogActions>
react/src/SelectChannelsDialog.tsx
+2 -2
View File
@@ -107,10 +107,10 @@ function SelectChannelsDialog(props: SelectChannelsDialogProps) {
)}
</List>
<DialogActions>
<Button onClick={handleClose} color="primary">
<Button onClick={handleClose} variant="dialogSecondary" >
Cancel
</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
</Button>
</DialogActions>
react/src/SelectMidiChannelsDialog.tsx
+2 -2
View File
@@ -110,10 +110,10 @@ function SelectMidiChannelsDialog(props: SelectMidiChannelsDialogProps) {
)}
</List>
<DialogActions>
<Button onClick={handleClose} color="primary">
<Button onClick={handleClose} variant="dialogSecondary" >
Cancel
</Button>
<Button onClick={handleOk} color="primary" >
<Button onClick={handleOk} variant="dialogPrimary" >
OK
</Button>
</DialogActions>
react/src/SelectThemeDialog.tsx
+2 -2
View File
@@ -79,10 +79,10 @@ function SelectThemesDialog(props: SelectThemesDialogProps) {
</FormControl>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
<Button onClick={handleClose} variant="dialogSecondary" >
Cancel
</Button>
<Button onClick={handleOk} color="primary" >
<Button onClick={handleOk} variant="dialogPrimary" >
OK
</Button>
</DialogActions>
react/src/SettingsDialog.tsx
+1 -1
View File
@@ -885,7 +885,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
onClose={()=> { this.setState({showThemeSelectDialog: false});} }
onOk={(selectedTheme: ColorTheme) => {
this.model.setTheme(selectedTheme);
this.setState({showThemeSelectDialog: false});
this.setState({showThemeSelectDialog: false});
}}
defaultTheme={this.model.getTheme()}
/>
react/src/UploadFileDialog.tsx
+4 -3
View File
@@ -384,7 +384,8 @@ export default class UploadFileDialog extends ResizeResponsiveComponent<UploadFi
<DialogActions >
<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
<input
@@ -399,12 +400,12 @@ export default class UploadFileDialog extends ResizeResponsiveComponent<UploadFi
{
this.state.okEnabled ?
(
<Button onClick={() => this.handleClose()} color="primary">
<Button onClick={() => this.handleClose()} variant="dialogPrimary" >
OK
</Button>
) : (
<Button onClick={() => this.handleCancel()} color="primary">
<Button onClick={() => this.handleCancel()} variant="dialogPrimary" >
Cancel
</Button>
react/src/UploadPresetDialog.tsx
+2 -2
View File
@@ -182,11 +182,11 @@ export default class UploadPresetDialog extends ResizeResponsiveComponent<Upload
</DialogContent>
<DialogActions>
<Button onClick={() => this.handleClose()} color="primary">
<Button onClick={() => this.handleClose()} variant="dialogSecondary" >
Cancel
</Button>
<Button
component="label" color="secondary" style={{width: 120}}
component="label" variant="dialogPrimary" style={{width: 120}}
>
Select File
<input
react/src/WifiConfigDialog.tsx
+4 -4
View File
@@ -337,10 +337,10 @@ const WifiConfigDialog = withStyles(styles, { withTheme: true })(
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary" style={{ width: 120 }}>
<Button onClick={handleClose} variant="dialogSecondary" style={{ width: 120 }}>
Cancel
</Button>
<Button onClick={()=> this.handleOk(false)} color="success" style={{ width: 120 }} >
<Button onClick={()=> this.handleOk(false)} variant="dialogPrimary" style={{ width: 120 }} >
OK
</Button>
</DialogActions>
@@ -356,13 +356,13 @@ const WifiConfigDialog = withStyles(styles, { withTheme: true })(
</Typography>
</DialogContent>
<DialogActions>
<Button onClick={()=> this.setState({showWifiWarningDialog: false})} color="primary" style={{ width: 120 }}>
<Button onClick={()=> this.setState({showWifiWarningDialog: false})} variant="dialogSecondary" style={{ width: 120 }}>
Cancel
</Button>
<Button onClick={()=> {
this.setState({showWifiWarningDialog: false});
this.handleOk(true);
}} color="secondary" style={{ width: 120 }} >
}} variant="dialogPrimary" style={{ width: 120 }} >
PROCEED
</Button>
</DialogActions>
react/src/WifiDirectConfigDialog.tsx
+2 -2
View File
@@ -506,10 +506,10 @@ const WifiDirectConfigDialog = withStyles(styles, { withTheme: true })(
)}
<DialogActions>
<Button onClick={handleClose} color="primary" style={{ width: 120 }}>
<Button onClick={handleClose} variant="dialogSecondary" style={{ width: 120 }}>
Cancel
</Button>
<Button onClick={() => this.handleOk()} color="primary" style={{ width: 120 }} >
<Button onClick={() => this.handleOk()} variant="dialogPrimary" style={{ width: 120 }} >
OK
</Button>
</DialogActions>