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

Adaptive Update Dialog

Browse Source
This commit is contained in:
Robin Davies
2024-08-28 23:35:01 -04:00
parent 08464a16f0
commit 0cf322631c
1 changed files with 76 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react/src/UpdateDialog.tsx
+76 -52
View File
@@ -34,6 +34,7 @@ import { UpdateStatus, UpdateRelease, UpdatePolicyT, intToUpdatePolicyT } from '
import { PiPedalModelFactory, PiPedalModel } from './PiPedalModel'; import { PiPedalModelFactory, PiPedalModel } from './PiPedalModel';
import Select from '@mui/material/Select'; import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem'; import MenuItem from '@mui/material/MenuItem';
import ResizeResponsiveComponent from './ResizeResponsiveComponent';
const UPDATE_CHECK_DELAY = 86400000; // one day in ms. const UPDATE_CHECK_DELAY = 86400000; // one day in ms.
@@ -47,12 +48,12 @@ export interface UpdateDialogProps {
export interface UpdateDialogState { export interface UpdateDialogState {
updateStatus: UpdateStatus; updateStatus: UpdateStatus;
compactLandscape: boolean; compactWidth: boolean;
alertDialogOpen: boolean; alertDialogOpen: boolean;
alertDialogMessage: string; alertDialogMessage: string;
}; };
export default class UpdateDialog extends React.Component<UpdateDialogProps, UpdateDialogState> { export default class UpdateDialog extends ResizeResponsiveComponent<UpdateDialogProps, UpdateDialogState> {
private model: PiPedalModel; private model: PiPedalModel;
constructor(props: UpdateDialogProps) { constructor(props: UpdateDialogProps) {
@@ -61,12 +62,13 @@ export default class UpdateDialog extends React.Component<UpdateDialogProps, Upd
let updateStatus = this.model.updateStatus.get(); let updateStatus = this.model.updateStatus.get();
this.state = { this.state = {
updateStatus: updateStatus, updateStatus: updateStatus,
compactLandscape: false, compactWidth: this.isCompactWidth(),
alertDialogOpen: false, alertDialogOpen: false,
alertDialogMessage: "" alertDialogMessage: ""
}; };
this.onUpdateStatusChanged = this.onUpdateStatusChanged.bind(this); this.onUpdateStatusChanged = this.onUpdateStatusChanged.bind(this);
} }
isCompactWidth() { return this.windowSize.width < 420; }
onUpdateStatusChanged(newValue: UpdateStatus) { onUpdateStatusChanged(newValue: UpdateStatus) {
if (!newValue.equals(this.state.updateStatus)) { if (!newValue.equals(this.state.updateStatus)) {
@@ -77,15 +79,22 @@ export default class UpdateDialog extends React.Component<UpdateDialogProps, Upd
private mounted: boolean = false; private mounted: boolean = false;
componentDidMount() { componentDidMount() {
super.componentDidMount();
this.mounted = true; this.mounted = true;
this.model.updateStatus.addOnChangedHandler(this.onUpdateStatusChanged); this.model.updateStatus.addOnChangedHandler(this.onUpdateStatusChanged);
} }
componentWillUnmount() { componentWillUnmount() {
super.componentWillUnmount();
this.model.updateStatus.removeOnChangedHandler(this.onUpdateStatusChanged); this.model.updateStatus.removeOnChangedHandler(this.onUpdateStatusChanged);
this.mounted = false; this.mounted = false;
} }
onWindowSizeChanged(width: number, height: number): void {
super.onWindowSizeChanged(width, height);
if (this.isCompactWidth() !== this.state.compactWidth) {
this.setState({ compactWidth: this.isCompactWidth() });
}
}
private handleOK() { private handleOK() {
this.model.showUpdateDialog(false); this.model.showUpdateDialog(false);
@@ -152,35 +161,25 @@ export default class UpdateDialog extends React.Component<UpdateDialogProps, Upd
let updateRelease = updateStatus.getActiveRelease(); let updateRelease = updateStatus.getActiveRelease();
let upToDate = this.upToDate(); let upToDate = this.upToDate();
let canUpgrade = this.canUpgrade(); let canUpgrade = this.canUpgrade();
let compact = this.state.compactLandscape;
let showUpgradeVersion = !upToDate && updateStatus.isValid && updateRelease.upgradeVersionDisplayName !== ""; let showUpgradeVersion = !upToDate && updateStatus.isValid && updateRelease.upgradeVersionDisplayName !== "";
let compactWidth = this.state.compactWidth;
return ( return (
<DialogEx tag="update" open={this.props.open} onClose={() => { this.handleClose(); }} <DialogEx tag="update" open={this.props.open} onClose={() => { this.handleClose(); }}
style={{ userSelect: "none" }} style={{ userSelect: "none" }}
> >
{ <DialogTitle>
(!compact) && <div style={{ display: "flex", flexFlow: "row noWrap", alignItems: "center" }} >
( <Typography style={{ flexGrow: 1, flexShrink: 1, marginRight: 20 }} noWrap>Updates</Typography>
<DialogTitle> <Select style={{ opacity: 0.6 }} variant="standard" value={updateStatus.updatePolicy} onChange={(ev) => { this.onPolicySelected(ev.target.value); }}>
<div style={{ display: "flex", flexFlow: "row noWrap", alignItems: "center" }} > <MenuItem value={UpdatePolicyT.ReleaseOnly}>Release only</MenuItem>
<Typography style={{ flexGrow: 1, flexShrink: 1, marginRight: 20 }} noWrap>PiPedal Updates</Typography> <MenuItem value={UpdatePolicyT.ReleaseOrBeta}>Release or Beta</MenuItem>
<Select style={{ opacity: 0.6 }} variant="standard" value={updateStatus.updatePolicy} onChange={(ev) => { this.onPolicySelected(ev.target.value); }}> <MenuItem value={UpdatePolicyT.Development}>Development</MenuItem>
<MenuItem value={UpdatePolicyT.ReleaseOnly}>Release only</MenuItem> <MenuItem value={UpdatePolicyT.Disable}>Disable</MenuItem>
<MenuItem value={UpdatePolicyT.ReleaseOrBeta}>Release or Beta</MenuItem> </Select>
<MenuItem value={UpdatePolicyT.Development}>Development</MenuItem> </div>
<MenuItem value={UpdatePolicyT.Disable}>Disable</MenuItem>
</Select>
</div>
</DialogTitle> </DialogTitle>
) <Divider />
}
{
(!compact) &&
(
<Divider />
)
}
<DialogContent> <DialogContent>
{(upToDate) && ( {(upToDate) && (
@@ -197,31 +196,56 @@ export default class UpdateDialog extends React.Component<UpdateDialogProps, Upd
) )
} }
{
(compactWidth) ? (
<div>
<Typography noWrap variant="body2" color="textSecondary" >
Current version:
</Typography>
<Typography noWrap variant="body2" color="textSecondary" style={{ marginLeft: 16 }} >
{updateStatus.currentVersionDisplayName}
</Typography>
{(showUpgradeVersion) && (
<div style={{marginTop: 4}}>
<Typography noWrap variant="body2" color="textSecondary" >
Update version:
</Typography>
<Typography noWrap variant="body2" color="textSecondary" >
{updateRelease.upgradeVersionDisplayName}
</Typography>
</div>
)}
</div>
) : (
<div style={{ display: "flex", flexFlow: "row noWrap" }}>
<div>
<Typography noWrap variant="body2" color="textSecondary" >
Current version:
</Typography>
{(showUpgradeVersion) && (
<Typography noWrap variant="body2" color="textSecondary" style={{ marginTop: 4 }} >
Update version:
</Typography>
)
}
</div>
<div style={{ flexShrink: 1, flexGrow: 1, marginLeft: 12 }}>
<Typography noWrap variant="body2" color="textSecondary" >
{updateStatus.currentVersionDisplayName}
</Typography>
{(showUpgradeVersion) && (
<Typography noWrap variant="body2" color="textSecondary" style={{ marginTop: 4 }} >
{updateRelease.upgradeVersionDisplayName}
</Typography>
)
}
</div>
</div>
)
}
<div style={{ display: "flex", flexFlow: "row noWrap" }}>
<div>
<Typography noWrap variant="body2" color="textSecondary" >
Current version:
</Typography>
{(showUpgradeVersion) && (
<Typography noWrap variant="body2" color="textSecondary" style={{ marginTop: 4 }} >
Update version:
</Typography>
)
}
</div>
<div style={{ flexShrink: 1, flexGrow: 1, marginLeft: 12 }}>
<Typography noWrap variant="body2" color="textSecondary" >
{updateStatus.currentVersionDisplayName}
</Typography>
{(showUpgradeVersion) && (
<Typography noWrap variant="body2" color="textSecondary" style={{ marginTop: 4 }} >
{updateRelease.upgradeVersionDisplayName}
</Typography>
)
}
</div>
</div>
{ {
(updateStatus.errorMessage.length !== 0) && (updateStatus.errorMessage.length !== 0) &&
( (
@@ -233,7 +257,7 @@ export default class UpdateDialog extends React.Component<UpdateDialogProps, Upd
) )
} }
<Button style={{ marginLeft: 16, marginTop: 12 }} onClick={() => { this.onViewReleaseNotes(); }}>View release notes</Button> <Button style={{ marginLeft: 8, marginTop: 12 }} onClick={() => { this.onViewReleaseNotes(); }}>View release notes</Button>
</DialogContent> </DialogContent>
<Divider /> <Divider />
<DialogActions> <DialogActions>