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

Minor style and theming fixes.

Browse Source
This commit is contained in:
Robin Davies
2024-08-25 20:13:43 -04:00
parent fa1c456bf0
commit a91fe2e60b
5 changed files with 53 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react/src/AppThemed.tsx
+5 -3
View File
@@ -64,6 +64,8 @@ import UpdateDialog from './UpdateDialog';
import { ReactComponent as RenameOutlineIcon } from './svg/drive_file_rename_outline_black_24dp.svg'; import { ReactComponent as RenameOutlineIcon } from './svg/drive_file_rename_outline_black_24dp.svg';
import { ReactComponent as SaveBankAsIcon } from './svg/ic_save_bank_as.svg'; import { ReactComponent as SaveBankAsIcon } from './svg/ic_save_bank_as.svg';
import { ReactComponent as EditBanksIcon } from './svg/ic_edit_banks.svg';
import { ReactComponent as EditBanksIcon } from './svg/ic_edit_banks.svg'; import { ReactComponent as EditBanksIcon } from './svg/ic_edit_banks.svg';
import { ReactComponent as SettingsIcon } from './svg/ic_settings.svg'; import { ReactComponent as SettingsIcon } from './svg/ic_settings.svg';
import { ReactComponent as HelpOutlineIcon } from './svg/ic_help_outline.svg'; import { ReactComponent as HelpOutlineIcon } from './svg/ic_help_outline.svg';
@@ -808,19 +810,19 @@ const AppThemed = withStyles(appStyles)(class extends ResizeResponsiveComponent<
<ListItemIcon > <ListItemIcon >
<RenameOutlineIcon color='inherit' className={classes.menuIcon} /> <RenameOutlineIcon color='inherit' className={classes.menuIcon} />
</ListItemIcon> </ListItemIcon>
<ListItemText primary='Rename Bank' /> <ListItemText primary='Rename bank' />
</ListItem> </ListItem>
<ListItem button key='SaveBank' onClick={() => { this.handleDrawerSaveBankAs() }} > <ListItem button key='SaveBank' onClick={() => { this.handleDrawerSaveBankAs() }} >
<ListItemIcon> <ListItemIcon>
<SaveBankAsIcon color="inherit" className={classes.menuIcon} /> <SaveBankAsIcon color="inherit" className={classes.menuIcon} />
</ListItemIcon> </ListItemIcon>
<ListItemText primary='Save As New Bank' /> <ListItemText primary='Save as new bank' />
</ListItem> </ListItem>
<ListItem button key='EditBanks' onClick={() => { this.handleDrawerManageBanks(); }}> <ListItem button key='EditBanks' onClick={() => { this.handleDrawerManageBanks(); }}>
<ListItemIcon> <ListItemIcon>
<EditBanksIcon color="inherit" className={classes.menuIcon} /> <EditBanksIcon color="inherit" className={classes.menuIcon} />
</ListItemIcon> </ListItemIcon>
<ListItemText primary='Manage Banks...' /> <ListItemText primary='Manage banks...' />
</ListItem> </ListItem>
</List> </List>
<Divider /> <Divider />
react/src/BankDialog.tsx
+24 -21
View File
@@ -24,11 +24,11 @@ import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
import { BankIndexEntry, BankIndex } from './Banks'; import { BankIndexEntry, BankIndex } from './Banks';
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
import ButtonBase from "@mui/material/ButtonBase"; import ButtonBase from "@mui/material/ButtonBase";
import Slide, {SlideProps} from '@mui/material/Slide'; import Slide, { SlideProps } from '@mui/material/Slide';
import AppBar from '@mui/material/AppBar'; import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar'; import Toolbar from '@mui/material/Toolbar';
import { Theme, createStyles } from '@mui/material/styles'; import { Theme, createStyles } from '@mui/material/styles';
import { WithStyles,withStyles } from "@mui/styles"; import { WithStyles, withStyles } from "@mui/styles";
import DraggableGrid, { ScrollDirection } from './DraggableGrid'; import DraggableGrid, { ScrollDirection } from './DraggableGrid';
import Fade from '@mui/material/Fade'; import Fade from '@mui/material/Fade';
@@ -46,8 +46,12 @@ import MenuItem from '@mui/material/MenuItem';
import DialogEx from './DialogEx'; import DialogEx from './DialogEx';
import DialogContent from '@mui/material/DialogContent'; import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions'; import DialogActions from '@mui/material/DialogActions';
import { ReactComponent as DownloadIcon} from './svg/file_download_black_24dp.svg'; import { ReactComponent as DownloadIcon } from './svg/file_download_black_24dp.svg';
import { ReactComponent as UploadIcon} from './svg/file_upload_black_24dp.svg'; import { ReactComponent as UploadIcon } from './svg/file_upload_black_24dp.svg';
import { ReactComponent as BankIcon } from './svg/ic_bank.svg';
//import PublishIcon from '@mui/icons-material/Publish';
// import FileDownloadIcon from '@mui/icons-material/FileDownload';
// import AppsIcon from '@mui/icons-material/Apps';
interface BankDialogProps extends WithStyles<typeof styles> { interface BankDialogProps extends WithStyles<typeof styles> {
show: boolean; show: boolean;
@@ -73,8 +77,8 @@ interface BankDialogState {
const styles = (theme: Theme) => createStyles({ const styles = (theme: Theme) => createStyles({
listIcon: { listIcon: {
width: 24, height: 24, width: 24, height: 24,
opacity: 0.6, fill: theme.palette.text.primary opacity: 0.6, fill: theme.palette.text.primary
}, },
dialogAppBar: { dialogAppBar: {
position: 'relative', position: 'relative',
@@ -166,7 +170,7 @@ const BankDialog = withStyles(styles, { withTheme: true })(
uploadAfter = await this.model.uploadBank(fileList[i], uploadAfter); uploadAfter = await this.model.uploadBank(fileList[i], uploadAfter);
} }
} catch (error) { } catch (error) {
this.model.showAlert(error +""); this.model.showAlert(error + "");
}; };
return uploadAfter; return uploadAfter;
} }
@@ -300,11 +304,11 @@ const BankDialog = withStyles(styles, { withTheme: true })(
> >
<SelectHoverBackground selected={bankEntry.instanceId === selectedItem} showHover={true} /> <SelectHoverBackground selected={bankEntry.instanceId === selectedItem} showHover={true} />
<div className={classes.itemFrame}> <div className={classes.itemFrame}>
<div className={classes.iconFrame}> <div className={classes.ListItemIcon}>
<img src="img/ic_bank.svg" className={classes.itemIcon} alt="" /> <BankIcon className={classes.listIcon}/>
</div> </div>
<div className={classes.itemLabel}> <div className={classes.itemLabel}>
<Typography noWrap> <Typography noWrap variant="body2" color="textPrimary">
{bankEntry.name} {bankEntry.name}
</Typography> </Typography>
</div> </div>
@@ -405,8 +409,8 @@ const BankDialog = withStyles(styles, { withTheme: true })(
return ( return (
<DialogEx tag="bank" fullScreen open={this.props.show} <DialogEx tag="bank" fullScreen open={this.props.show}
onClose={() => { this.handleDialogClose() }} TransitionComponent={Transition} onClose={() => { this.handleDialogClose() }} TransitionComponent={Transition}
style={{userSelect: "none"}} style={{ userSelect: "none" }}
> >
<div style={{ display: "flex", flexDirection: "column", flexWrap: "nowrap", width: "100%", height: "100%", overflow: "hidden" }}> <div style={{ display: "flex", flexDirection: "column", flexWrap: "nowrap", width: "100%", height: "100%", overflow: "hidden" }}>
<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" }} >
@@ -482,8 +486,8 @@ const BankDialog = withStyles(styles, { withTheme: true })(
> >
<MenuItem onClick={() => { this.handleDownloadBank(); }} > <MenuItem onClick={() => { this.handleDownloadBank(); }} >
<ListItemIcon> <ListItemIcon>
<DownloadIcon className="listIcon" <DownloadIcon className={classes.listIcon}
/> />
</ListItemIcon> </ListItemIcon>
<ListItemText> <ListItemText>
Download bank Download bank
@@ -494,9 +498,8 @@ const BankDialog = withStyles(styles, { withTheme: true })(
<MenuItem onClick={(e) => this.handleUploadBank()}> <MenuItem onClick={(e) => this.handleUploadBank()}>
<ListItemIcon> <ListItemIcon >
<UploadIcon className="listIcon" <UploadIcon className={classes.listIcon} />
/>
</ListItemIcon> </ListItemIcon>
<ListItemText> <ListItemText>
Upload bank Upload bank
@@ -541,15 +544,15 @@ const BankDialog = withStyles(styles, { withTheme: true })(
/> />
<DialogEx tag="deletePrompt" open={this.state.showDeletePrompt} onClose={() => this.handleDeletePromptClose()} <DialogEx tag="deletePrompt" open={this.state.showDeletePrompt} onClose={() => this.handleDeletePromptClose()}
style={{userSelect: "none"}}> style={{ userSelect: "none" }}>
<DialogContent> <DialogContent>
<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 variant="dialogSecondary" onClick={()=> this.handleDeletePromptClose()} color="primary"> <Button variant="dialogSecondary" onClick={() => this.handleDeletePromptClose()} color="primary">
Cancel Cancel
</Button> </Button>
<Button variant="dialogPrimary" onClick={()=> this.handleDeletePromptOk()} color="secondary" > <Button variant="dialogPrimary" onClick={() => this.handleDeletePromptOk()} color="secondary" >
DELETE DELETE
</Button> </Button>
react/src/SettingsDialog.tsx
+2 -2
View File
@@ -671,7 +671,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
<ButtonBase className={classes.setting} disabled={!isConfigValid} onClick={() => this.handleMidiMessageSettings()} > <ButtonBase className={classes.setting} disabled={!isConfigValid} onClick={() => this.handleMidiMessageSettings()} >
<SelectHoverBackground selected={false} showHover={true} /> <SelectHoverBackground selected={false} showHover={true} />
<div style={{ width: "100%" }}> <div style={{ width: "100%" }}>
<Typography className={classes.primaryItem} display="block" variant="body2" noWrap>System MIDI Bindings</Typography> <Typography className={classes.primaryItem} display="block" variant="body2" noWrap>System MIDI bindings</Typography>
</div> </div>
</ButtonBase> </ButtonBase>
@@ -754,7 +754,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
<SelectHoverBackground selected={false} showHover={true} /> <SelectHoverBackground selected={false} showHover={true} />
<div style={{ width: "100%" }}> <div style={{ width: "100%" }}>
<Typography className={classes.primaryItem} display="block" variant="body2" color="textPrimary" noWrap> <Typography className={classes.primaryItem} display="block" variant="body2" color="textPrimary" noWrap>
Color Theme</Typography> Color theme</Typography>
<Typography className={classes.secondaryItem} display="block" variant="caption" color="textSecondary" noWrap> <Typography className={classes.secondaryItem} display="block" variant="caption" color="textSecondary" noWrap>
{ this.model.getTheme() === ColorTheme.Dark ? "Dark" : { this.model.getTheme() === ColorTheme.Dark ? "Dark" :
(this.model.getTheme() === ColorTheme.Light ? "Light": "System")} (this.model.getTheme() === ColorTheme.Light ? "Light": "System")}
react/src/svg/file_download_black_24dp.svg
+8 -1
View File
@@ -1 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"/></g></svg> <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" >
<g>
<rect fill="none" height="24" width="24"/>
</g>
<g>
<path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 333 B

After

Width:  |  Height:  |  Size: 358 B

react/src/svg/ic_bank.svg
+14
View File
@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path d="M18.993,8.993L18.99,5c0-1.1-0.891-2-1.99-2h-4h-3H6C4.9,3,4.01,3.9,4.01,5L4.007,8.993L4,9v10c0,1.1,0.891,2,1.99,2H6h11
h0.01c1.1,0,1.99-0.9,1.99-2V9L18.993,8.993z M17,10v9H6v-9V5h5h1h5V10z"/>
<rect x="8" y="7" width="2" height="2"/>
<rect x="12" y="7" width="3" height="2"/>
<rect x="8" y="11" width="2" height="2"/>
<rect x="12" y="11" width="3" height="2"/>
<rect x="8" y="15" width="2" height="2"/>
<rect x="12" y="15" width="3" height="2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 939 B