diff --git a/react/CMakeLists.txt b/react/CMakeLists.txt index d70a1f0..196d80c 100644 --- a/react/CMakeLists.txt +++ b/react/CMakeLists.txt @@ -122,18 +122,19 @@ add_custom_command( src/PluginIcon.tsx src/UploadFileDialog.tsx - public/ - public/css public/css/roboto.css public/logo192x.png public/robots.txt - public/img public/img/ic_drawer_2.png public/img/fx_constant.svg + public/img/ic_presets_white.svg public/img/cx_mono.svg public/img/cx_stereo.svg public/img/fx_distortion.svg + public/img/Pi-Logo-3.png public/img/fx_oscillator.svg + public/img/save_bank_as_white.svg + public/img/edit_banks_white.svg public/img/settings_black_24dp.svg public/img/fx_filter.svg public/img/delete_outline_black_24dp.svg @@ -142,19 +143,16 @@ add_custom_command( public/img/old_delete_outline_black_24dp.svg public/img/ic_bank.svg public/img/fx_compressor.svg - public/img/file_download_black_24dp.svg public/img/fx_filter_hp.svg public/img/fx_plugin.svg public/img/fx_error.svg public/img/fx_gate.svg public/img/cc-by.png - public/img/ic_midi.svg - public/img/ic_pluginpreset.svg public/img/fx_split_a.svg public/img/fx_utility.svg + public/img/help_outline_white_24dp.svg public/img/ic_navigate_before.svg public/img/ic_drawer_2.svg - public/img/ic_pluginpreset2.svg public/img/fx_parametric_eq.svg public/img/fx_terminal.svg public/img/ic_presets.svg @@ -170,7 +168,6 @@ add_custom_command( public/img/fx_mixer.svg public/img/fx_eq.svg public/img/fx_modulator.svg - public/img/file_upload_black_24dp.svg public/img/fx_pitch.svg public/img/ic_navigate_next.svg public/img/fx_phaser.svg @@ -179,6 +176,7 @@ add_custom_command( public/img/save_bank_as.svg public/img/fx_lr.svg public/img/fx_instrument.svg + public/img/Pi-Logo-3.svg public/img/fx_reverb.svg public/img/fx_limiter.svg public/img/VST_Logo_Steinberg.png @@ -191,11 +189,12 @@ add_custom_command( public/img/fx_split_b.svg public/img/fx_spatial.svg public/img/fx_converter.svg + public/img/settings_white_24dp.svg + public/img/drive_file_rename_outline_white_24dp.svg public/img/vst.svg public/img/vst.png public/sample_lv2_plugins.json public/serve.json - public/fonts public/fonts/Roboto-LightItalic.woff2 public/fonts/Roboto-Light.woff2 public/fonts/Roboto-BlackItalic.woff2 @@ -215,12 +214,55 @@ add_custom_command( public/logo512.png public/index.html public/manifest.json - public/var public/var/config.json public/var/current_pedalboard.json public/var/uiplugins.json public/var/plugin_classes.json - + src/svg/fx_constant.svg + src/svg/fx_distortion.svg + src/svg/fx_oscillator.svg + src/svg/fx_filter.svg + src/svg/fx_function.svg + src/svg/fx_generator.svg + src/svg/fx_compressor.svg + src/svg/file_download_black_24dp.svg + src/svg/fx_filter_hp.svg + src/svg/fx_plugin.svg + src/svg/fx_error.svg + src/svg/fx_gate.svg + src/svg/ic_midi.svg + src/svg/ic_pluginpreset.svg + src/svg/fx_split_a.svg + src/svg/fx_utility.svg + src/svg/ic_pluginpreset2.svg + src/svg/fx_parametric_eq.svg + src/svg/fx_terminal.svg + src/svg/ic_presets.svg + src/svg/fx_flanger.svg + src/svg/fx_analyzer.svg + src/svg/fx_delay.svg + src/svg/fx_spectral.svg + src/svg/fx_chorus.svg + src/svg/fx_simulator.svg + src/svg/fx_mixer.svg + src/svg/fx_eq.svg + src/svg/fx_modulator.svg + src/svg/file_upload_black_24dp.svg + src/svg/fx_pitch.svg + src/svg/fx_phaser.svg + src/svg/fx_amplifier.svg + src/svg/fx_lr.svg + src/svg/fx_instrument.svg + src/svg/fx_reverb.svg + src/svg/fx_limiter.svg + src/svg/fx_empty.svg + src/svg/fx_dial.svg + src/svg/fx_flanger2.svg + src/svg/fx_split_b.svg + src/svg/fx_spatial.svg + src/svg/fx_converter.svg + src/svg/old_delete_outline_24dp.svg + ) add_custom_target ( diff --git a/react/public/img/file_download_white_24dp.svg b/react/public/img/file_download_white_24dp.svg deleted file mode 100644 index c2be6df..0000000 --- a/react/public/img/file_download_white_24dp.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/react/public/img/file_upload_white_24dp.svg b/react/public/img/file_upload_white_24dp.svg deleted file mode 100644 index 7f1f497..0000000 --- a/react/public/img/file_upload_white_24dp.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/react/src/App.tsx b/react/src/App.tsx index 299bba8..3acc70c 100644 --- a/react/src/App.tsx +++ b/react/src/App.tsx @@ -23,6 +23,16 @@ import { ThemeProvider, createTheme, StyledEngineProvider, Theme } from '@mui/ma import AppThemed from "./AppThemed"; import isDarkMode from './DarkMode'; +declare module '@mui/material/styles' { + interface Theme { + mainBackground: string; + } + interface ThemeOptions { + mainBackground?: string; + } + +} + @@ -44,8 +54,9 @@ const theme = createTheme( }, secondary: { main: "#FF6060" - } - } + }, + }, + mainBackground: "#222" } : { @@ -56,7 +67,10 @@ const theme = createTheme( secondary: { main: "#FF6060" } - } + + }, + mainBackground: "#FFFFFF" + } ); diff --git a/react/src/AppThemed.tsx b/react/src/AppThemed.tsx index 86d1c5f..2a0a81b 100644 --- a/react/src/AppThemed.tsx +++ b/react/src/AppThemed.tsx @@ -200,7 +200,7 @@ const appStyles = (theme: Theme) => createStyles({ }, heroContent: { - backgroundColor: isDarkMode()? "#222": "#FFFFFF", + backgroundColor: theme.mainBackground, position: "relative", height: "100%", width: "100%" diff --git a/react/src/BankDialog.tsx b/react/src/BankDialog.tsx index 3824983..7e380dd 100644 --- a/react/src/BankDialog.tsx +++ b/react/src/BankDialog.tsx @@ -46,6 +46,8 @@ 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'; interface BankDialogProps extends WithStyles { show: boolean; @@ -70,6 +72,10 @@ interface BankDialogState { const styles = (theme: Theme) => createStyles({ + listIcon: { + width: 24, height: 24, + opacity: 0.6, fill: theme.palette.text.primary + }, dialogAppBar: { position: 'relative', top: 0, left: 0 @@ -476,7 +482,8 @@ const BankDialog = withStyles(styles, { withTheme: true })( > { this.handleDownloadBank(); }} > - + Download bank @@ -488,7 +495,8 @@ const BankDialog = withStyles(styles, { withTheme: true })( - + Upload bank diff --git a/react/src/DraggableGrid.tsx b/react/src/DraggableGrid.tsx index eb17a5a..0a1e967 100644 --- a/react/src/DraggableGrid.tsx +++ b/react/src/DraggableGrid.tsx @@ -21,6 +21,7 @@ import { Theme } from '@mui/material/styles'; import createStyles from '@mui/styles/createStyles'; import { Property } from "csstype"; import { nullCast} from './Utility' +import isDarkMode from './DarkMode'; const SELECT_SCALE = 1.0; @@ -714,7 +715,7 @@ const DraggableGrid = this.savedIndex = gridElement.style.zIndex; gridElement.style.zIndex = "3"; this.savedBackground = gridElement.style.background; - gridElement.style.background = "#EEE"; + gridElement.style.background = isDarkMode()? "333": "#EEE"; gridElement.style.opacity = "0.8"; } } diff --git a/react/src/GxTunerControl.tsx b/react/src/GxTunerControl.tsx index ca81fdf..e222533 100644 --- a/react/src/GxTunerControl.tsx +++ b/react/src/GxTunerControl.tsx @@ -24,6 +24,7 @@ import createStyles from '@mui/styles/createStyles'; import withStyles from '@mui/styles/withStyles'; import { MonitorPortHandle, PiPedalModel, State, PiPedalModelFactory } from "./PiPedalModel"; import SvgPathBuilder from './SvgPathBuilder' +import isDarkMode from './DarkMode'; //const char* model[] = {"12-TET","19-TET","24-TET", "31-TET", "53-TET"}; // set_adjustment(ui->widget[2]->adj,440.0, 440.0, 427.0, 453.0, 0.1, CL_CONTINUOS); @@ -386,15 +387,19 @@ const GxTunerControl = } render() { - + let textColor = isDarkMode() ? "#999": "#444"; return (
- {this.state.pitchInfo.name} + {this.state.pitchInfo.name}
- {this.state.pitchInfo.fractionText} + {this.state.pitchInfo.fractionText}
{ this.renderDial(this.state.pitchInfo) } diff --git a/react/src/JackHostStatus.tsx b/react/src/JackHostStatus.tsx index cf47973..dc831f0 100644 --- a/react/src/JackHostStatus.tsx +++ b/react/src/JackHostStatus.tsx @@ -22,7 +22,7 @@ import Typography from '@mui/material/Typography'; import isDarkMode from './DarkMode'; -const RED_COLOR = "#C00"; +const RED_COLOR = isDarkMode()? "#F88":"#C00"; const GREEN_COLOR = isDarkMode()? "rgba(255,255,255,0.7)": "#666"; diff --git a/react/src/PluginControl.tsx b/react/src/PluginControl.tsx index c47a59f..6b4237c 100644 --- a/react/src/PluginControl.tsx +++ b/react/src/PluginControl.tsx @@ -72,7 +72,7 @@ const styles = (theme: Theme) => createStyles({ right: 0, bottom: 4, textAlign: "center", - background: theme.palette.background.paper, + background: theme.mainBackground, color: theme.palette.text.secondary, // zIndex: -1, } diff --git a/react/src/PluginControlView.tsx b/react/src/PluginControlView.tsx index 1763c84..3793ce1 100644 --- a/react/src/PluginControlView.tsx +++ b/react/src/PluginControlView.tsx @@ -39,7 +39,6 @@ import FilePropertyDialog from './FilePropertyDialog'; import JsonAtom from './JsonAtom'; import PluginOutputControl from './PluginOutputControl'; import Units from './Units'; -import isDarkMode from './DarkMode'; export const StandardItemSize = { width: 80, height: 110 }; @@ -79,7 +78,6 @@ let endPluginInfo: UiPlugin = makeIoPluginInfo("Output", Pedalboard.END_PEDALBOARD_ITEM_URI); -const darkBackgroundColor = "#181818"; const styles = (theme: Theme) => createStyles({ frame: { @@ -99,7 +97,7 @@ const styles = (theme: Theme) => createStyles({ paddingRight: 4, paddingBottom: 24, left: 0, - background: isDarkMode() ? darkBackgroundColor: theme.palette.background.default, + background: theme.mainBackground, zIndex: 3 }, @@ -109,7 +107,7 @@ const styles = (theme: Theme) => createStyles({ marginRight: 22, paddingLeft: 4, paddingBottom: 24, - background: isDarkMode() ? darkBackgroundColor: theme.palette.background.default, + background: theme.mainBackground, zIndex: 3 }, @@ -119,7 +117,7 @@ const styles = (theme: Theme) => createStyles({ paddingRight: 22, paddingLeft: 12, paddingBottom: 24, - background: isDarkMode() ? darkBackgroundColor: theme.palette.background.default, + background: theme.mainBackground, zIndex: 3 }, @@ -191,7 +189,7 @@ const styles = (theme: Theme) => createStyles({ portGroupTitle: { position: "absolute", top: -15, - background: isDarkMode() ? darkBackgroundColor: theme.palette.background.default, + background: theme.mainBackground, textOverflow: "ellipsis", minWidth: 0, marginLeft: 20, diff --git a/react/src/PluginInfoDialog.tsx b/react/src/PluginInfoDialog.tsx index 338a98c..afe55b5 100644 --- a/react/src/PluginInfoDialog.tsx +++ b/react/src/PluginInfoDialog.tsx @@ -228,7 +228,7 @@ const PluginInfoDialog = withStyles(styles)((props: PluginInfoProps) => { style={{ display: (props.plugin_uri !== "") ? "inline-flex" : "none" }} onClick={handleClickOpen} size="large"> - + {open && ( diff --git a/react/src/PluginPresetSelector.tsx b/react/src/PluginPresetSelector.tsx index e550fd0..6a1f0f4 100644 --- a/react/src/PluginPresetSelector.tsx +++ b/react/src/PluginPresetSelector.tsx @@ -67,7 +67,7 @@ const styles = (theme: Theme) => createStyles({ width: 24, height: 24, opacity: 0.6,fill: theme.palette.text.primary }, pluginMenuIcon: { - width: 24, height: 24, opacity: 0.6,fill: theme.palette.text.primary, marginRight: 4 + width: 24, height: 24, opacity: 0.6,fill: theme.palette.text.primary,marginRight: 4 } }); diff --git a/react/src/PluginPresetsDialog.tsx b/react/src/PluginPresetsDialog.tsx index f3eac23..b2dda66 100644 --- a/react/src/PluginPresetsDialog.tsx +++ b/react/src/PluginPresetsDialog.tsx @@ -45,6 +45,10 @@ import RenameDialog from './RenameDialog'; import Slide, {SlideProps} from '@mui/material/Slide'; import { createStyles, Theme } from '@mui/material/styles'; import { WithStyles, withStyles} from '@mui/styles'; +import {ReactComponent as PluginPresetIcon} from "./svg/ic_pluginpreset2.svg"; + +import { ReactComponent as DownloadIcon} from './svg/file_download_black_24dp.svg'; +import { ReactComponent as UploadIcon} from './svg/file_upload_black_24dp.svg'; @@ -74,6 +78,9 @@ interface PluginPresetsDialogState { const styles = (theme: Theme) => createStyles({ + listIcon: { + width: 24, height: 24, opacity: 0.6,fill: theme.palette.text.primary + }, dialogAppBar: { position: 'relative', top: 0, left: 0 @@ -107,7 +114,8 @@ const styles = (theme: Theme) => createStyles({ }, itemIcon: { - width: 24, height: 24, margin: 12, opacity: 0.6 + width: 24, height: 24, margin: 12, opacity: 0.6, + fill: theme.palette.text.primary }, itemLabel: { flex: "1 1 1px", @@ -260,7 +268,7 @@ const PluginPresetsDialog = withStyles(styles, { withTheme: true })(
- +
@@ -427,7 +435,7 @@ const PluginPresetsDialog = withStyles(styles, { withTheme: true })( disabled={this.props.presets.presets.length === 0} > - + Download presets @@ -436,7 +444,7 @@ const PluginPresetsDialog = withStyles(styles, { withTheme: true })( { this.handleUploadPresets() }}> - + Upload presets diff --git a/react/src/PresetDialog.tsx b/react/src/PresetDialog.tsx index 95d2e38..3e9a833 100644 --- a/react/src/PresetDialog.tsx +++ b/react/src/PresetDialog.tsx @@ -45,7 +45,8 @@ import RenameDialog from './RenameDialog'; import Slide, {SlideProps} from '@mui/material/Slide'; import { createStyles, Theme } from '@mui/material/styles'; import { WithStyles, withStyles} from '@mui/styles'; - +import { ReactComponent as DownloadIcon} from './svg/file_download_black_24dp.svg'; +import { ReactComponent as UploadIcon} from './svg/file_upload_black_24dp.svg'; interface PresetDialogProps extends WithStyles { @@ -72,6 +73,9 @@ interface PresetDialogState { const styles = (theme: Theme) => createStyles({ + listIcon: { + width: 24, height: 24, opacity: 0.6, fill: theme.palette.text.primary + }, dialogAppBar: { position: 'relative', top: 0, left: 0 @@ -408,9 +412,7 @@ const PresetDialog = withStyles(styles, { withTheme: true })( > { this.handleDownloadPreset(); }} > - + Download preset @@ -419,8 +421,7 @@ const PresetDialog = withStyles(styles, { withTheme: true })( { this.handleUploadPreset() }}> - + Upload preset diff --git a/react/src/SplitControlView.tsx b/react/src/SplitControlView.tsx index b8fbf01..45a560b 100644 --- a/react/src/SplitControlView.tsx +++ b/react/src/SplitControlView.tsx @@ -52,7 +52,7 @@ const styles = (theme: Theme) => createStyles({ paddingLeft: 12, paddingRight: 12, left: 0, - background: "white", + background: theme.mainBackground, zIndex: 3 }, @@ -61,7 +61,7 @@ const styles = (theme: Theme) => createStyles({ right: 0, marginRight: 22, paddingLeft: 12, - background: "white", + background: theme.mainBackground, zIndex: 3 }, @@ -70,7 +70,7 @@ const styles = (theme: Theme) => createStyles({ right: 0, paddingRight: 22, paddingLeft: 12, - background: "white", + background: theme.mainBackground, zIndex: 3 }, diff --git a/react/public/img/file_download_black_24dp.svg b/react/src/svg/file_download_black_24dp.svg similarity index 100% rename from react/public/img/file_download_black_24dp.svg rename to react/src/svg/file_download_black_24dp.svg diff --git a/react/public/img/file_upload_black_24dp.svg b/react/src/svg/file_upload_black_24dp.svg similarity index 100% rename from react/public/img/file_upload_black_24dp.svg rename to react/src/svg/file_upload_black_24dp.svg diff --git a/react/tmp.txt b/react/tmp.txt new file mode 100644 index 0000000..da32ca9 --- /dev/null +++ b/react/tmp.txt @@ -0,0 +1,45 @@ +src/svg/ +src/svg/fx_constant.svg +src/svg/fx_distortion.svg +src/svg/fx_oscillator.svg +src/svg/fx_filter.svg +src/svg/fx_function.svg +src/svg/fx_generator.svg +src/svg/fx_compressor.svg +src/svg/file_download_black_24dp.svg +src/svg/fx_filter_hp.svg +src/svg/fx_plugin.svg +src/svg/fx_error.svg +src/svg/fx_gate.svg +src/svg/ic_midi.svg +src/svg/ic_pluginpreset.svg +src/svg/fx_split_a.svg +src/svg/fx_utility.svg +src/svg/ic_pluginpreset2.svg +src/svg/fx_parametric_eq.svg +src/svg/fx_terminal.svg +src/svg/ic_presets.svg +src/svg/fx_flanger.svg +src/svg/fx_analyzer.svg +src/svg/fx_delay.svg +src/svg/fx_spectral.svg +src/svg/fx_chorus.svg +src/svg/fx_simulator.svg +src/svg/fx_mixer.svg +src/svg/fx_eq.svg +src/svg/fx_modulator.svg +src/svg/file_upload_black_24dp.svg +src/svg/fx_pitch.svg +src/svg/fx_phaser.svg +src/svg/fx_amplifier.svg +src/svg/fx_lr.svg +src/svg/fx_instrument.svg +src/svg/fx_reverb.svg +src/svg/fx_limiter.svg +src/svg/fx_empty.svg +src/svg/fx_dial.svg +src/svg/fx_flanger2.svg +src/svg/fx_split_b.svg +src/svg/fx_spatial.svg +src/svg/fx_converter.svg +src/svg/old_delete_outline_24dp.svg