diff --git a/react/src/AppThemed.tsx b/react/src/AppThemed.tsx index b47ecf0..86d1c5f 100644 --- a/react/src/AppThemed.tsx +++ b/react/src/AppThemed.tsx @@ -200,7 +200,7 @@ const appStyles = (theme: Theme) => createStyles({ }, heroContent: { - backgroundColor: isDarkMode()? theme.palette.background.default: "#FFFFFF", + backgroundColor: isDarkMode()? "#222": "#FFFFFF", position: "relative", height: "100%", width: "100%" diff --git a/react/src/FilePropertyControl.tsx b/react/src/FilePropertyControl.tsx index eb2acc6..1e29b65 100644 --- a/react/src/FilePropertyControl.tsx +++ b/react/src/FilePropertyControl.tsx @@ -33,6 +33,7 @@ import { PiPedalModel, PiPedalModelFactory, ListenHandle} from './PiPedalModel'; import ButtonBase from '@mui/material/ButtonBase' import MoreHorizIcon from '@mui/icons-material/MoreHoriz'; import {PedalboardItem} from './Pedalboard'; +import isDarkMode from './DarkMode'; export const StandardItemSize = { width: 80, height: 140 } @@ -204,14 +205,16 @@ const FilePropertyControl =
{ this.onFileClick() }} > -
+
{value}
-
 
+
 
diff --git a/react/src/LoadPluginDialog.tsx b/react/src/LoadPluginDialog.tsx index e4edb29..98cdba2 100644 --- a/react/src/LoadPluginDialog.tsx +++ b/react/src/LoadPluginDialog.tsx @@ -86,7 +86,7 @@ const pluginGridStyles = (theme: Theme) => createStyles({ justifyContent: "space-between", paddingLeft: "24px", paddingRight: "48px", - background: theme.palette.background.paper, + }, paper: { position: "relative", diff --git a/react/src/MainPage.tsx b/react/src/MainPage.tsx index baee5ab..a81ecec 100644 --- a/react/src/MainPage.tsx +++ b/react/src/MainPage.tsx @@ -45,6 +45,8 @@ import PluginInfoDialog from './PluginInfoDialog'; import { GetControlView } from './ControlViewFactory'; import MidiBindingsDialog from './MidiBindingsDialog'; import PluginPresetSelector from './PluginPresetSelector'; +import {ReactComponent as OldDeleteIcon} from "./svg/old_delete_outline_24dp.svg"; +import {ReactComponent as MidiIcon} from "./svg/ic_midi.svg"; @@ -461,7 +463,7 @@ export const MainPage =
{ this.onAddClick(e) }} size="large"> - + { this.onDeletePedal(pedalboardItem?.instanceId ?? -1) }} size="large"> - Delete +
@@ -502,7 +504,7 @@ export const MainPage = { this.handleMidiConfiguration(instanceId); }} size="large"> - Midi configuration +
diff --git a/react/src/PedalboardView.tsx b/react/src/PedalboardView.tsx index da5e067..f2e3b2e 100644 --- a/react/src/PedalboardView.tsx +++ b/react/src/PedalboardView.tsx @@ -33,6 +33,7 @@ import Draggable from './Draggable' import Rect from './Rect'; import {PiPedalStateError} from './PiPedalError'; import Utility from './Utility'; +import isDarkMode from './DarkMode'; import { Pedalboard, PedalboardItem, PedalboardSplitItem, SplitType @@ -45,8 +46,9 @@ const END_CONTROL = Pedalboard.END_CONTROL; const START_PEDALBOARD_ITEM_URI = Pedalboard.START_PEDALBOARD_ITEM_URI; const END_PEDALBOARD_ITEM_URI = Pedalboard.END_PEDALBOARD_ITEM_URI; -const ENABLED_CONNECTOR_COLOR = "#666"; -const DISABLED_CONNECTOR_COLOR = "#CCC"; +const ENABLED_CONNECTOR_COLOR = isDarkMode() ? "#CCC": "#666"; +const DISABLED_CONNECTOR_COLOR = isDarkMode() ? "#666": "#CCC"; + const CELL_WIDTH: number = 96; @@ -130,14 +132,14 @@ const pedalboardStyles = (theme: Theme) => createStyles({ alignItems: "center", justifyContent: "center", - background: theme.palette.background.paper, + background: theme.palette.background.default, marginLeft: (CELL_WIDTH - FRAME_SIZE) / 2, marginRight: (CELL_WIDTH - FRAME_SIZE) / 2, marginTop: (CELL_HEIGHT - FRAME_SIZE) / 2, marginBottom: (CELL_HEIGHT - FRAME_SIZE) / 2, width: FRAME_SIZE, height: FRAME_SIZE, - border: "1pt #666 solid", + border: isDarkMode()? "1pt #AAA solid": "1pt #666 solid", borderRadius: 6 }, borderlessIconFrame: { diff --git a/react/src/PluginControl.tsx b/react/src/PluginControl.tsx index 38feddd..c47a59f 100644 --- a/react/src/PluginControl.tsx +++ b/react/src/PluginControl.tsx @@ -1,4 +1,4 @@ - // Copyright (c) 2022 Robin Davies +// Copyright (c) 2022 Robin Davies // // Permission is hereby granted, free of charge, to any person obtaining a copy of // this software and associated documentation files (the "Software"), to deal in @@ -30,7 +30,7 @@ import Switch from '@mui/material/Switch'; import Utility, {nullCast} from './Utility'; import MenuItem from '@mui/material/MenuItem'; import {PiPedalModel,PiPedalModelFactory} from './PiPedalModel'; - +import {ReactComponent as DialIcon} from './svg/fx_dial.svg'; const MIN_ANGLE = -135; const MAX_ANGLE = 135; @@ -72,8 +72,8 @@ const styles = (theme: Theme) => createStyles({ right: 0, bottom: 4, textAlign: "center", - background: "white", - color: "#666", + background: theme.palette.background.paper, + color: theme.palette.text.secondary, // zIndex: -1, } }); @@ -98,7 +98,7 @@ const PluginControl = { frameRef: React.RefObject; - imgRef: React.RefObject; + imgRef: React.RefObject; inputRef: React.RefObject; selectRef: React.RefObject; @@ -243,7 +243,7 @@ const PluginControl = e.preventDefault(); } - isValidPointer(e: PointerEvent): boolean { + isValidPointer(e: PointerEvent): boolean { if (e.pointerType === "mouse") { return e.button === 0; } else if (e.pointerType === "pen") { @@ -257,9 +257,9 @@ const PluginControl = touchDown: boolean = false; touchIdentifier: number = -1; - onTouchStart(e: TouchEvent) { + onTouchStart(e: TouchEvent) { } - onTouchMove(e: TouchEvent) { + onTouchMove(e: TouchEvent) { // e.preventDefault(); e.stopPropagation(); // cancels scroll!!! @@ -282,7 +282,7 @@ const PluginControl = pointerId: number = 0; pointerType: string = ""; - isCapturedPointer(e: PointerEvent): boolean { + isCapturedPointer(e: PointerEvent): boolean { return this.mouseDown && e.pointerId === this.pointerId && e.pointerType === this.pointerType; @@ -294,9 +294,9 @@ const PluginControl = dRange: number = 0; pointersDown: number = 0; - captureElement?: HTMLElement = undefined; + captureElement?: SVGSVGElement = undefined; - onPointerDown(e: PointerEvent): void { + onPointerDown(e: PointerEvent): void { if (!this.mouseDown && this.isValidPointer(e)) { e.preventDefault(); e.stopPropagation(); @@ -351,7 +351,7 @@ const PluginControl = } - onPointerLostCapture(e: PointerEvent) { + onPointerLostCapture(e: PointerEvent) { if (this.isCapturedPointer(e)) { --this.pointersDown; @@ -361,7 +361,7 @@ const PluginControl = } - updateRange(e: PointerEvent): number { + updateRange(e: PointerEvent): number { let ultraHigh = false; let high = false; @@ -396,7 +396,7 @@ const PluginControl = this.lastX = e.clientX; return this.dRange; } - onPointerUp(e: PointerEvent) { + onPointerUp(e: PointerEvent) { if (this.isCapturedPointer(e)) { --this.pointersDown; @@ -414,7 +414,7 @@ const PluginControl = } } - releaseCapture(e: PointerEvent) + releaseCapture(e: PointerEvent) { let img = this.imgRef.current; @@ -437,7 +437,7 @@ const PluginControl = } - onPointerMove(e: PointerEvent): void { + onPointerMove(e: PointerEvent): void { if (this.isCapturedPointer(e)) { e.preventDefault(); let dRange = this.updateRange(e) @@ -651,6 +651,7 @@ const PluginControl = return (
#Error
); } + let dialColor = this.props.theme.palette.text.primary; let control: UiControl = t; this.uiControl = control; let value = this.props.value; @@ -684,13 +685,12 @@ const PluginControl = this.makeSelect(control, value) ) : (
- {control.name}
) @@ -736,7 +736,7 @@ const PluginControl = ); } /* - isSamePointer(PointerEvent e): boolean + isSamePointer(PointerEvent e): boolean { return e.pointerId === this.pointerId && e.pointerType === this.pointerType; diff --git a/react/src/PluginControlView.tsx b/react/src/PluginControlView.tsx index 62be402..1763c84 100644 --- a/react/src/PluginControlView.tsx +++ b/react/src/PluginControlView.tsx @@ -39,6 +39,7 @@ 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 }; @@ -78,6 +79,8 @@ let endPluginInfo: UiPlugin = makeIoPluginInfo("Output", Pedalboard.END_PEDALBOARD_ITEM_URI); +const darkBackgroundColor = "#181818"; + const styles = (theme: Theme) => createStyles({ frame: { display: "block", @@ -96,7 +99,7 @@ const styles = (theme: Theme) => createStyles({ paddingRight: 4, paddingBottom: 24, left: 0, - background: "white", + background: isDarkMode() ? darkBackgroundColor: theme.palette.background.default, zIndex: 3 }, @@ -106,7 +109,7 @@ const styles = (theme: Theme) => createStyles({ marginRight: 22, paddingLeft: 4, paddingBottom: 24, - background: "white", + background: isDarkMode() ? darkBackgroundColor: theme.palette.background.default, zIndex: 3 }, @@ -116,7 +119,7 @@ const styles = (theme: Theme) => createStyles({ paddingRight: 22, paddingLeft: 12, paddingBottom: 24, - background: "white", + background: isDarkMode() ? darkBackgroundColor: theme.palette.background.default, zIndex: 3 }, @@ -188,7 +191,7 @@ const styles = (theme: Theme) => createStyles({ portGroupTitle: { position: "absolute", top: -15, - background: "white", + background: isDarkMode() ? darkBackgroundColor: theme.palette.background.default, textOverflow: "ellipsis", minWidth: 0, marginLeft: 20, diff --git a/react/src/PluginPresetSelector.tsx b/react/src/PluginPresetSelector.tsx index fa37aa3..e550fd0 100644 --- a/react/src/PluginPresetSelector.tsx +++ b/react/src/PluginPresetSelector.tsx @@ -33,6 +33,8 @@ import {PluginUiPresets} from './PluginPreset'; import Divider from "@mui/material/Divider"; +import {ReactComponent as PluginPresetsIcon} from "./svg/ic_pluginpreset.svg"; +import {ReactComponent as PluginPresetIcon} from "./svg/ic_pluginpreset2.svg"; interface PluginPresetSelectorProps extends WithStyles { pluginUri?: string; @@ -60,6 +62,12 @@ interface PluginPresetSelectorState { const styles = (theme: Theme) => createStyles({ itemIcon: { width: 24, height: 24, marginRight: "4px", opacity: 0.6 + }, + pluginIcon: { + 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 } }); @@ -285,7 +293,7 @@ const PluginPresetSelector = return (
this.handlePresetMenuClick(e)} size="large"> - Plugin Presets + { return ( this.handleLoadPluginPreset(preset.instanceId)} - > + > + + {preset.label}); }) } diff --git a/react/src/SelectHoverBackground.tsx b/react/src/SelectHoverBackground.tsx index ea0fc20..1285f44 100644 --- a/react/src/SelectHoverBackground.tsx +++ b/react/src/SelectHoverBackground.tsx @@ -36,15 +36,15 @@ const styles = ({ palette }: Theme) => createStyles({ position: "absolute", width: "100%", height: "100%", - background: "#000000", - opacity: 0.1 + background: palette.action.hover, + //opacity: palette.action.hoverOpacity }, selected: { position: "absolute", width: "100%", height: "100%", - background: palette.action.active, - opacity: 0.3 + background: palette.action.selected, + //opacity: palette.action.selectedOpacity } }); diff --git a/react/public/img/ic_midi.svg b/react/src/svg/ic_midi.svg similarity index 100% rename from react/public/img/ic_midi.svg rename to react/src/svg/ic_midi.svg diff --git a/react/public/img/ic_pluginpreset.svg b/react/src/svg/ic_pluginpreset.svg similarity index 100% rename from react/public/img/ic_pluginpreset.svg rename to react/src/svg/ic_pluginpreset.svg diff --git a/react/public/img/ic_pluginpreset2.svg b/react/src/svg/ic_pluginpreset2.svg similarity index 100% rename from react/public/img/ic_pluginpreset2.svg rename to react/src/svg/ic_pluginpreset2.svg diff --git a/react/src/svg/ic_presets.svg b/react/src/svg/ic_presets.svg new file mode 100644 index 0000000..5f3d7d5 --- /dev/null +++ b/react/src/svg/ic_presets.svg @@ -0,0 +1,12 @@ + + + + + + + + + diff --git a/react/src/svg/old_delete_outline_24dp.svg b/react/src/svg/old_delete_outline_24dp.svg new file mode 100644 index 0000000..24f7b41 --- /dev/null +++ b/react/src/svg/old_delete_outline_24dp.svg @@ -0,0 +1,12 @@ + + + + + + + + + + +