Minor style and theming fixes.
This commit is contained in:
Robin Davies
@@ -64,6 +64,8 @@ import UpdateDialog from './UpdateDialog';
|
||||
|
||||
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 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 HelpOutlineIcon } from './svg/ic_help_outline.svg';
|
||||
@@ -808,19 +810,19 @@ const AppThemed = withStyles(appStyles)(class extends ResizeResponsiveComponent<
|
||||
<ListItemIcon >
|
||||
<RenameOutlineIcon color='inherit' className={classes.menuIcon} />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary='Rename Bank' />
|
||||
<ListItemText primary='Rename bank' />
|
||||
</ListItem>
|
||||
<ListItem button key='SaveBank' onClick={() => { this.handleDrawerSaveBankAs() }} >
|
||||
<ListItemIcon>
|
||||
<SaveBankAsIcon color="inherit" className={classes.menuIcon} />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary='Save As New Bank' />
|
||||
<ListItemText primary='Save as new bank' />
|
||||
</ListItem>
|
||||
<ListItem button key='EditBanks' onClick={() => { this.handleDrawerManageBanks(); }}>
|
||||
<ListItemIcon>
|
||||
<EditBanksIcon color="inherit" className={classes.menuIcon} />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary='Manage Banks...' />
|
||||
<ListItemText primary='Manage banks...' />
|
||||
</ListItem>
|
||||
</List>
|
||||
<Divider />
|
||||
|
||||
+24
-21
@@ -24,11 +24,11 @@ import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
|
||||
import { BankIndexEntry, BankIndex } from './Banks';
|
||||
import Button from "@mui/material/Button";
|
||||
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 Toolbar from '@mui/material/Toolbar';
|
||||
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 Fade from '@mui/material/Fade';
|
||||
|
||||
@@ -46,8 +46,12 @@ import MenuItem from '@mui/material/MenuItem';
|
||||
import DialogEx from './DialogEx';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import DialogActions from '@mui/material/DialogActions';
|
||||
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 DownloadIcon } from './svg/file_download_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> {
|
||||
show: boolean;
|
||||
@@ -73,8 +77,8 @@ interface BankDialogState {
|
||||
|
||||
const styles = (theme: Theme) => createStyles({
|
||||
listIcon: {
|
||||
width: 24, height: 24,
|
||||
opacity: 0.6, fill: theme.palette.text.primary
|
||||
width: 24, height: 24,
|
||||
opacity: 0.6, fill: theme.palette.text.primary
|
||||
},
|
||||
dialogAppBar: {
|
||||
position: 'relative',
|
||||
@@ -166,7 +170,7 @@ const BankDialog = withStyles(styles, { withTheme: true })(
|
||||
uploadAfter = await this.model.uploadBank(fileList[i], uploadAfter);
|
||||
}
|
||||
} catch (error) {
|
||||
this.model.showAlert(error +"");
|
||||
this.model.showAlert(error + "");
|
||||
};
|
||||
return uploadAfter;
|
||||
}
|
||||
@@ -300,11 +304,11 @@ const BankDialog = withStyles(styles, { withTheme: true })(
|
||||
>
|
||||
<SelectHoverBackground selected={bankEntry.instanceId === selectedItem} showHover={true} />
|
||||
<div className={classes.itemFrame}>
|
||||
<div className={classes.iconFrame}>
|
||||
<img src="img/ic_bank.svg" className={classes.itemIcon} alt="" />
|
||||
<div className={classes.ListItemIcon}>
|
||||
<BankIcon className={classes.listIcon}/>
|
||||
</div>
|
||||
<div className={classes.itemLabel}>
|
||||
<Typography noWrap>
|
||||
<Typography noWrap variant="body2" color="textPrimary">
|
||||
{bankEntry.name}
|
||||
</Typography>
|
||||
</div>
|
||||
@@ -405,8 +409,8 @@ const BankDialog = withStyles(styles, { withTheme: true })(
|
||||
return (
|
||||
<DialogEx tag="bank" fullScreen open={this.props.show}
|
||||
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={{ flex: "0 0 auto" }}>
|
||||
<AppBar className={classes.dialogAppBar} style={{ display: this.isEditMode() ? "none" : "block" }} >
|
||||
@@ -482,8 +486,8 @@ const BankDialog = withStyles(styles, { withTheme: true })(
|
||||
>
|
||||
<MenuItem onClick={() => { this.handleDownloadBank(); }} >
|
||||
<ListItemIcon>
|
||||
<DownloadIcon className="listIcon"
|
||||
/>
|
||||
<DownloadIcon className={classes.listIcon}
|
||||
/>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
Download bank
|
||||
@@ -494,9 +498,8 @@ const BankDialog = withStyles(styles, { withTheme: true })(
|
||||
<MenuItem onClick={(e) => this.handleUploadBank()}>
|
||||
|
||||
|
||||
<ListItemIcon>
|
||||
<UploadIcon className="listIcon"
|
||||
/>
|
||||
<ListItemIcon >
|
||||
<UploadIcon className={classes.listIcon} />
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
Upload bank
|
||||
@@ -541,15 +544,15 @@ const BankDialog = withStyles(styles, { withTheme: true })(
|
||||
/>
|
||||
|
||||
<DialogEx tag="deletePrompt" open={this.state.showDeletePrompt} onClose={() => this.handleDeletePromptClose()}
|
||||
style={{userSelect: "none"}}>
|
||||
style={{ userSelect: "none" }}>
|
||||
<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>
|
||||
<DialogActions>
|
||||
<Button variant="dialogSecondary" onClick={()=> this.handleDeletePromptClose()} color="primary">
|
||||
<Button variant="dialogSecondary" onClick={() => this.handleDeletePromptClose()} color="primary">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="dialogPrimary" onClick={()=> this.handleDeletePromptOk()} color="secondary" >
|
||||
<Button variant="dialogPrimary" onClick={() => this.handleDeletePromptOk()} color="secondary" >
|
||||
DELETE
|
||||
</Button>
|
||||
|
||||
|
||||
@@ -671,7 +671,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
|
||||
<ButtonBase className={classes.setting} disabled={!isConfigValid} onClick={() => this.handleMidiMessageSettings()} >
|
||||
<SelectHoverBackground selected={false} showHover={true} />
|
||||
<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>
|
||||
</ButtonBase>
|
||||
@@ -754,7 +754,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
|
||||
<SelectHoverBackground selected={false} showHover={true} />
|
||||
<div style={{ width: "100%" }}>
|
||||
<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>
|
||||
{ this.model.getTheme() === ColorTheme.Dark ? "Dark" :
|
||||
(this.model.getTheme() === ColorTheme.Light ? "Light": "System")}
|
||||
|
||||
@@ -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>
|
||||
|
Before Width: | Height: | Size: 333 B After Width: | Height: | Size: 358 B |
@@ -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>
|
||||
|
After Width: | Height: | Size: 939 B |
Reference in New Issue
Block a user