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

Dark Moded interrim checkin.

Browse Source
This commit is contained in:
Robin Davies
2023-06-28 04:48:35 -04:00
parent 2319c30649
commit e33e61e37a
62 changed files with 1568 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react/src/PresetSelector.tsx
+28 -49
View File
@@ -19,11 +19,8 @@
import { SyntheticEvent, Component } from 'react';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import { PiPedalModel, PiPedalModelFactory, PresetIndex } from './PiPedalModel';
import SaveIconOutline from '@mui/icons-material/Save';
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import ButtonBase from "@mui/material/ButtonBase";
import MoreVertIcon from '@mui/icons-material/MoreVert';
import { Theme } from '@mui/material/styles';
import { WithStyles } from '@mui/styles';
@@ -37,6 +34,7 @@ import Divider from '@mui/material/Divider';
import RenameDialog from './RenameDialog'
import Select from '@mui/material/Select';
import UploadPresetDialog from './UploadPresetDialog';
import isDarkMode from './DarkMode';
interface PresetSelectorProps extends WithStyles<typeof styles> {
@@ -60,7 +58,7 @@ interface PresetSelectorState {
}
const selectColor = "black";
const selectColor = isDarkMode()? "#888": "black";
const styles = (theme: Theme) => createStyles({
select: { // fu fu fu.Overrides for white selector on dark background.
@@ -311,51 +309,32 @@ const PresetSelector =
</div>
<div style={{ flex: "1 1 auto", minWidth: 60, maxWidth: 300, position: "relative", paddingRight: 12 }} >
{true ? (
<Select variant="standard"
className={classes.select}
style={{ width: "100%", position: "relative", top: 0 }} disabled={!this.state.enabled}
onChange={(e, extra) => this.handleChange(e, extra)}
onClose={(e) => this.handleSelectClose(e)}
displayEmpty
value={presets.selectedInstanceId === 0? '' : presets.selectedInstanceId}
inputProps={{
classes: { icon: classes.icon },
'aria-label': "Select preset"
}
}
>
{
presets.presets.map((preset) => {
return (
<MenuItem key={preset.instanceId} value={preset.instanceId} >
{(presets.presetChanged && preset.instanceId === presets.selectedInstanceId)
? (preset.name + "*")
: (preset.name)
}
</MenuItem>
);
})
}
</Select>
) : (
<ButtonBase style={{ width: "100%", textAlign: "left", borderBottom: "1px white solid", position: "relative", top: 2 }} disabled={!this.state.enabled}
onClick={(e) => { this.showPresetDialog(true); }}
>
<div style={{ width: "100%", textAlign: "left", display: "flex", flexWrap: "nowrap", flexDirection: "row", overflow: "hidden" }}>
<div style={{ flex: "0 1 auto", paddingLeft: 8, overflow: "hidden" }}>
<Typography noWrap >
{this.state.presets.getSelectedText()}
</Typography>
</div>
<div style={{ flex: "1 1 1px" }} />
<div style={{ flex: "0 0 auto" }}>
<ArrowDropDownIcon style={{ opacity: 0.75 }} />
</div>
</div>
</ButtonBase>
)}
<Select variant="standard"
className={classes.select}
style={{ width: "100%", position: "relative", top: 0 }} disabled={!this.state.enabled}
onChange={(e, extra) => this.handleChange(e, extra)}
onClose={(e) => this.handleSelectClose(e)}
displayEmpty
value={presets.selectedInstanceId === 0? '' : presets.selectedInstanceId}
inputProps={{
classes: { icon: classes.icon },
'aria-label': "Select preset"
}
}
>
{
presets.presets.map((preset) => {
return (
<MenuItem key={preset.instanceId} value={preset.instanceId} >
{(presets.presetChanged && preset.instanceId === presets.selectedInstanceId)
? (preset.name + "*")
: (preset.name)
}
</MenuItem>
);
})
}
</Select>
</div>
<div style={{ flex: "0 0 auto" }}>
<IconButton