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

1.1.30 Dark mode for android app.

Browse Source
This commit is contained in:
Robin Davies
2023-08-29 20:54:33 -04:00
parent 21b5a2fec9
commit 6242a1a818
26 changed files with 147 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react/package.json
+2 -1
View File
@@ -58,6 +58,7 @@
},
"devDependencies": {
"@types/react-virtualized-auto-sizer": "^1.0.1",
"@types/react-window": "^1.8.5"
"@types/react-window": "^1.8.5",
"@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2"
}
}
react/public/index.html
+46 -15
View File
@@ -40,22 +40,52 @@
}
</style>
<script>
const darkMode = localStorage.getItem("darkMode"); if (darkMode) { }
if (darkMode)
{
let bgStyle = document.getElementById("bgStyle");
if (bgStyle)
{
// disable the style block.
bgStyle.setAttribute('media',"max-width: 1px");
}
const androidHosted = !!(window.AndroidHost);
var darkMode = false;
var useSystem = false;
var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
switch (localStorage.getItem("colorScheme")) {
case null:
default:
if (androidHosted) {
useSystem = true;
} else {
darkMode = false;
}
break;
case "Light":
darkMode = false;
break;
case "Dark":
darkMode = true;
break;
case "System":
useSystem = true;
break;
}
if (useSystem)
{
darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}
if (!darkMode) {
let bgStyle = document.getElementById("bgStyle");
if (bgStyle) {
// disable the style block.
bgStyle.setAttribute('media', "max-width: 1px");
}
}
</script>
</head>
<body >
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
@@ -65,5 +95,6 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</body>
</html>
react/src/App.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ import React from 'react';
import { ThemeProvider, createTheme, StyledEngineProvider, Theme } from '@mui/material/styles';
import AppThemed from "./AppThemed";
import isDarkMode from './DarkMode';
import {isDarkMode} from './DarkMode';
declare module '@mui/material/styles' {
interface Theme {
react/src/AppThemed.tsx
+1 -1
View File
@@ -60,7 +60,7 @@ import { BankIndex, BankIndexEntry } from './Banks';
import RenameDialog from './RenameDialog';
import JackStatusView from './JackStatusView';
import { Theme } from '@mui/material/styles';
import isDarkMode from './DarkMode';
import {isDarkMode} from './DarkMode';
import {ReactComponent as RenameOutlineIcon} from './svg/drive_file_rename_outline_black_24dp.svg';
import {ReactComponent as SaveBankAsIcon} from './svg/ic_save_bank_as.svg';
react/src/DarkMode.tsx
+51 -5
View File
@@ -17,12 +17,58 @@
// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
export enum ColorTheme {
Light,
Dark,
System
};
export default function isDarkMode(): boolean {
let value = localStorage.getItem("darkMode");
return value === "true";
export function getColorScheme(): ColorTheme {
const androidHosted = !!((window as any).AndroidHost);
switch (localStorage.getItem('colorScheme')) {
case null:
default:
if (androidHosted) {
return ColorTheme.System;
} else {
return ColorTheme.Light;
}
case "Light":
return ColorTheme.Light;
case "Dark":
return ColorTheme.Dark;
case "System":
return ColorTheme.System;
}
}
export function setColorScheme(value: ColorTheme): void {
var storageValue;
switch (value) {
default:
case ColorTheme.Light:
storageValue = "Light";
break;
case ColorTheme.Dark:
storageValue = "Dark";
break;
case ColorTheme.System:
storageValue = "System";
break;
}
localStorage.setItem("colorScheme", storageValue);
}
export function setDarkMode(value: boolean): void {
localStorage.setItem("darkMode",value? "true": "false");
export function isDarkMode(): boolean {
var colorTheme = getColorScheme();
if (colorTheme === ColorTheme.System) {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
return true;
}
}
return colorTheme === ColorTheme.Dark;
}
react/src/DraggableGrid.tsx
+1 -1
View File
@@ -21,7 +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';
import {isDarkMode} from './DarkMode';
const SELECT_SCALE = 1.0;
react/src/FilePropertyControl.tsx
+1 -2
View File
@@ -33,8 +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';
import {isDarkMode} from './DarkMode';
export const StandardItemSize = { width: 80, height: 140 }
react/src/GxTunerControl.tsx
+1 -2
View File
@@ -24,8 +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';
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);
react/src/JackHostStatus.tsx
+1 -2
View File
@@ -19,8 +19,7 @@
import React from 'react';
import Typography from '@mui/material/Typography';
import isDarkMode from './DarkMode';
import {isDarkMode} from './DarkMode';
const RED_COLOR = isDarkMode()? "#F88":"#C00";
const GREEN_COLOR = isDarkMode()? "rgba(255,255,255,0.7)": "#666";
react/src/MainPage.tsx
+1 -2
View File
@@ -47,8 +47,7 @@ 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";
import isDarkMode from './DarkMode';
import {isDarkMode} from './DarkMode';
const SPLIT_CONTROLBAR_THRESHHOLD = 650;
react/src/PedalboardView.tsx
+1 -2
View File
@@ -33,8 +33,7 @@ import Draggable from './Draggable'
import Rect from './Rect';
import {PiPedalStateError} from './PiPedalError';
import Utility from './Utility';
import isDarkMode from './DarkMode';
import {isDarkMode} from './DarkMode';
import {
Pedalboard, PedalboardItem, PedalboardSplitItem, SplitType
} from './Pedalboard';
react/src/PiPedalModel.tsx
+5 -8
View File
@@ -38,12 +38,8 @@ import GovernorSettings from './GovernorSettings';
import WifiChannel from './WifiChannel';
import AlsaDeviceInfo from './AlsaDeviceInfo';
import { AndroidHostInterface, FakeAndroidHost } from './AndroidHost';
import isDarkMode, {setDarkMode} from './DarkMode';
import {ColorTheme, getColorScheme,setColorScheme} from './DarkMode';
export enum ColorTheme {
Light,
Dark
};
export enum State {
Loading,
@@ -2546,13 +2542,14 @@ export class PiPedalModel //implements PiPedalModel
}
getTheme(): ColorTheme {
return isDarkMode() ? ColorTheme.Dark: ColorTheme.Light;
return getColorScheme();
}
setTheme(value: ColorTheme) {
if (this.getTheme() !== value)
{
setDarkMode(value === ColorTheme.Dark);
setColorScheme(value);
this.reloadPage();
}
}
@@ -2562,7 +2559,7 @@ export class PiPedalModel //implements PiPedalModel
reloadPage() {
this.reloadRequested = true;
// eslint-disable-next-line no-restricted-globals
location.reload();
window.location.reload();
}
react/src/PluginOutputControl.tsx
+1 -2
View File
@@ -25,8 +25,7 @@ import withStyles from '@mui/styles/withStyles';
import { UiControl } from './Lv2Plugin';
import Typography from '@mui/material/Typography';
import { PiPedalModel, PiPedalModelFactory, MonitorPortHandle,State } from './PiPedalModel';
import isDarkMode from './DarkMode';
import {isDarkMode} from './DarkMode';
react/src/PresetDialog.tsx
+1 -1
View File
@@ -18,7 +18,7 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React, { SyntheticEvent,Component } from 'react';
import isDarkMode from './DarkMode';
import {isDarkMode} from './DarkMode';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import { PiPedalModel, PiPedalModelFactory, PresetIndexEntry, PresetIndex } from './PiPedalModel';
react/src/PresetSelector.tsx
+1 -2
View File
@@ -34,8 +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';
import {isDarkMode} from './DarkMode';
interface PresetSelectorProps extends WithStyles<typeof styles> {
react/src/SelectThemeDialog.tsx
+10 -2
View File
@@ -29,7 +29,7 @@ import FormControl from '@mui/material/FormControl';
import RadioGroup from '@mui/material/RadioGroup';
import Radio from '@mui/material/Radio';
import {ColorTheme} from './PiPedalModel';
import {ColorTheme} from './DarkMode';
@@ -45,7 +45,14 @@ function SelectThemesDialog(props: SelectThemesDialogProps) {
const { onClose, defaultTheme, open,onOk } = props;
const [ selectedTheme, setSelectedTheme ] = useState(defaultTheme);
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
let value = ((event.target as HTMLInputElement).value) === '0' ? ColorTheme.Light: ColorTheme.Dark;
let value = ColorTheme.Light;
if ((event.target as HTMLInputElement).value === '1')
{
value = ColorTheme.Dark;
} else if ((event.target as HTMLInputElement).value === '2')
{
value = ColorTheme.System;
}
setSelectedTheme(value);
};
const handleClose = (): void => {
@@ -67,6 +74,7 @@ function SelectThemesDialog(props: SelectThemesDialogProps) {
>
<FormControlLabel value={ColorTheme.Light} control={<Radio size='small' />} label="Light" />
<FormControlLabel value={ColorTheme.Dark} control={<Radio size='small' />} label="Dark" />
<FormControlLabel value={ColorTheme.System} control={<Radio size='small' />} label="Use system setting" />
</RadioGroup>
</FormControl>
</DialogContent>
react/src/SettingsDialog.tsx
+4 -2
View File
@@ -23,7 +23,8 @@ import OkCancelDialog from './OkCancelDialog';
import ListSelectDialog from './ListSelectDialog';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import { PiPedalModel, PiPedalModelFactory, State, ColorTheme } from './PiPedalModel';
import { PiPedalModel, PiPedalModelFactory, State } from './PiPedalModel';
import {ColorTheme} from './DarkMode';
import ButtonBase from "@mui/material/ButtonBase";
import AppBar from '@mui/material/AppBar';
import Button from '@mui/material/Button';
@@ -749,7 +750,8 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
<Typography className={classes.primaryItem} display="block" variant="body2" color="textPrimary" noWrap>
Color Theme</Typography>
<Typography className={classes.secondaryItem} display="block" variant="caption" color="textSecondary" noWrap>
{ this.model.getTheme() === ColorTheme.Dark ? "Dark" :"Light"}
{ this.model.getTheme() === ColorTheme.Dark ? "Dark" :
(this.model.getTheme() === ColorTheme.Light ? "Light": "System")}
</Typography>
</div>
</ButtonBase>
react/src/TemporaryDrawer.tsx
+1 -2
View File
@@ -26,8 +26,7 @@ import IconButton from '@mui/material/Toolbar';
import Drawer from '@mui/material/Drawer';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import { Theme } from '@mui/material/styles';
import isDarkMode from './DarkMode';
import {isDarkMode} from './DarkMode';
const drawerStyles = (theme: Theme) => {
return createStyles({