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

PiPedal client theme matches web app theme.

Browse Source
This commit is contained in:
Robin Davies
2024-09-19 11:18:08 -04:00
parent f60ed1fe56
commit 7ecc3de10a
7 changed files with 91 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react/src/AndroidHost.tsx
+9
View File
@@ -29,6 +29,8 @@ export interface AndroidHostInterface {
chooseNewDevice() : void;
setDisconnected(isDisconnected: boolean): void;
launchExternalUrl(url:string): boolean;
setThemePreference(theme: number): void;
getThemePreference(): number;
};
export class FakeAndroidHost implements AndroidHostInterface
@@ -51,4 +53,11 @@ export class FakeAndroidHost implements AndroidHostInterface
{
return false;
}
private theme = 1;
setThemePreference(theme: number): void{
this.theme = theme;
}
getThemePreference(): number {
return this.theme;
}
}
react/src/App.tsx
+22
View File
@@ -56,6 +56,17 @@ const theme = createTheme(
{
components: {
MuiButton: {
styleOverrides: {
containedPrimary: {
borderRadius: '9999px',
paddingLeft: "14px", paddingRight: "16px"
},
containedSecondary: {
borderRadius: '9999px',
paddingLeft: "14px", paddingRight: "16px"
}
},
variants: [
{
props: { variant: 'dialogPrimary' },
@@ -89,6 +100,17 @@ const theme = createTheme(
{
components: {
MuiButton: {
styleOverrides: {
containedPrimary: {
borderRadius: '9999px',
paddingLeft: "14px", paddingRight: "16px"
},
containedSecondary: {
borderRadius: '9999px',
paddingLeft: "14px", paddingRight: "16px"
}
},
variants: [
{
props: { variant: 'dialogPrimary' },
react/src/AppThemed.tsx
+6 -4
View File
@@ -163,7 +163,6 @@ const appStyles = (theme: Theme) => createStyles({
loadingBox: {
position: "relative",
top: "20%",
width: "240px",
color: isDarkMode() ? theme.palette.text.secondary : "#888",
marginLeft: "auto",
marginRight: "auto",
@@ -525,9 +524,12 @@ const AppThemed = withStyles(appStyles)(class extends ResizeResponsiveComponent<
return undefined;
}
promptForUpdateHandler(newValue: boolean) {
if (this.state.updateDialogOpen !== newValue)
if (this.model_.enableAutoUpdate)
{
this.setState({updateDialogOpen: newValue});
if (this.state.updateDialogOpen !== newValue)
{
this.setState({updateDialogOpen: newValue});
}
}
}
componentDidMount() {
@@ -959,7 +961,7 @@ const AppThemed = withStyles(appStyles)(class extends ResizeResponsiveComponent<
</p>
</div>
<div style={{ paddingTop: 50, paddingLeft: 36, textAlign: "left" }}>
<Button variant='contained' color="primary" component='button'
<Button variant='contained' color="primary"
onClick={() => this.handleReload()} >
Reload
</Button>
react/src/DarkMode.tsx
+30 -7
View File
@@ -17,6 +17,8 @@
// 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.
import { AndroidHostInterface } from "./AndroidHost";
export enum ColorTheme {
Light,
Dark,
@@ -26,16 +28,20 @@ export enum ColorTheme {
export function getColorScheme(): ColorTheme {
const androidHosted = !!((window as any).AndroidHost);
let androidHost = (window as any).AndroidHost as AndroidHostInterface;
if (androidHost) {
switch (androidHost.getThemePreference() as number)
{
case 0: return ColorTheme.Light;
case 1: return ColorTheme.Dark;
default:
case 2: return ColorTheme.System;
}
}
switch (localStorage.getItem('colorScheme')) {
case null:
default:
if (androidHosted) {
return ColorTheme.System;
} else {
return ColorTheme.Light;
}
return ColorTheme.Light;
case "Light":
return ColorTheme.Light;
case "Dark":
@@ -45,6 +51,23 @@ export function getColorScheme(): ColorTheme {
}
}
export function setColorScheme(value: ColorTheme): void {
let androidHost = (window as any).AndroidHost as AndroidHostInterface;
if (androidHost) {
switch (value) {
case ColorTheme.Light:
androidHost.setThemePreference(0);
break;
case ColorTheme.Dark:
androidHost.setThemePreference(1);
break;
default:
case ColorTheme.System:
androidHost.setThemePreference(2);
break;
}
}
var storageValue;
switch (value) {
default:
react/src/PiPedalModel.tsx
+6 -1
View File
@@ -687,6 +687,10 @@ export class PiPedalModel //implements PiPedalModel
private lastCanUpdateNow: boolean = false;
private updatePromptForUpdate() {
this.clearPromptForUpdateTimer();
if (!this.enableAutoUpdate)
{
return;
}
let stateEnabled = true; // must be present to accept alerts. this.state.get() === State.Ready;
let timeEnabled = false;
@@ -909,7 +913,7 @@ export class PiPedalModel //implements PiPedalModel
maxFileUploadSize: number = 512 * 1024 * 1024;
maxPresetUploadSize: number = 1024 * 1024;
debug: boolean = false;
enableAutoUpdate: boolean = false;
requestConfig(): Promise<boolean> {
const myRequest = new Request(this.varRequest('config.json'));
@@ -920,6 +924,7 @@ export class PiPedalModel //implements PiPedalModel
}
)
.then(data => {
this.enableAutoUpdate = !!data.enable_auto_update;
if (data.max_upload_size) {
this.maxPresetUploadSize = data.max_upload_size;
}
react/src/SettingsDialog.tsx
+16 -10
View File
@@ -688,7 +688,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>
Wi-Fi auto hotspot</Typography>
Wi-Fi auto-hotspot</Typography>
<Typography display="block" variant="caption" noWrap color="textSecondary">
{this.state.wifiConfigSettings.getSummaryText()}
</Typography>
@@ -779,15 +779,21 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
</div>
</ButtonBase>
<ButtonBase
className={classes.setting}
onClick={() => { this.handleCheckForUpdates(); }} >
<SelectHoverBackground selected={false} showHover={true} />
<div style={{ width: "100%" }}>
<Typography className={classes.primaryItem} display="block" variant="body2" color="textPrimary" noWrap>
Check for updates...</Typography>
</div>
</ButtonBase>
{
this.model.enableAutoUpdate && (
<ButtonBase
className={classes.setting}
onClick={() => { this.handleCheckForUpdates(); }} >
<SelectHoverBackground selected={false} showHover={true} />
<div style={{ width: "100%" }}>
<Typography className={classes.primaryItem} display="block" variant="body2" color="textPrimary" noWrap>
Check for updates...</Typography>
</div>
</ButtonBase>
)
}
react/src/WifiConfigDialog.tsx
+2 -1
View File
@@ -338,7 +338,7 @@ const WifiConfigDialog = withStyles(styles, { withTheme: true })(
fullScreen={this.state.fullScreen}
>
{(this.state.fullScreen || !this.state.compactHeight) && (
<DialogTitle>Wi-fi Hotspot</DialogTitle>
<DialogTitle>Wi-fi Auto-Hotspot</DialogTitle>
)}
<DialogContent>
<div style={
@@ -514,6 +514,7 @@ const WifiConfigDialog = withStyles(styles, { withTheme: true })(
onChange={(event, value) => { if (value) { this.setState({ countryCode: value.id }) } }}
options={this.getCountryCodeOptions()}
renderInput={(params) => (<TextField {...params} variant="standard" label="Regulatory Domain" />)}
disabled={!enabled}
/>
{/*
<Select variant="standard" label="Regulatory Domain" id="countryCodeSelect"