Add titlebar, update gitignore, add titlebar to Welcome page
This commit is contained in:
parent
a44d1fbb0a
commit
b2dbdf6931
|
@ -65,6 +65,7 @@ typings/
|
||||||
|
|
||||||
# Production dirs
|
# Production dirs
|
||||||
build/
|
build/
|
||||||
|
dist/
|
||||||
|
|
||||||
# Electron app files
|
# Electron app files
|
||||||
desktop/*.plist
|
desktop/*.plist
|
||||||
|
|
|
@ -41,7 +41,11 @@
|
||||||
"electrify": "npm run build; electron .",
|
"electrify": "npm run build; electron .",
|
||||||
"electrify-nobuild": "electron .",
|
"electrify-nobuild": "electron .",
|
||||||
"build": "react-scripts build",
|
"build": "react-scripts build",
|
||||||
"build-desktop": "build -mwl deb AppImage snap",
|
"build-desktop": "npm run build; build -mwl deb AppImage snap",
|
||||||
|
"build-desktop-win": "npm run build; build -w",
|
||||||
|
"build-desktop-darwin": "npm run build; build -m",
|
||||||
|
"build-desktop-linux": "npm run build, build -l deb AppImage snap",
|
||||||
|
"build-desktop-linux-select": "npm run build; build -l ",
|
||||||
"test": "react-scripts test",
|
"test": "react-scripts test",
|
||||||
"eject": "react-scripts eject"
|
"eject": "react-scripts eject"
|
||||||
},
|
},
|
||||||
|
|
|
@ -24,7 +24,7 @@ export const styles = (theme: Theme) => createStyles({
|
||||||
zIndex: 1000,
|
zIndex: 1000,
|
||||||
verticalAlign: 'middle',
|
verticalAlign: 'middle',
|
||||||
WebkitUserSelect: 'none',
|
WebkitUserSelect: 'none',
|
||||||
WebkitAppRegion: "drag"
|
WebkitAppRegion: "drag",
|
||||||
},
|
},
|
||||||
titleBarText: {
|
titleBarText: {
|
||||||
color: theme.palette.common.white,
|
color: theme.palette.common.white,
|
||||||
|
|
|
@ -300,6 +300,17 @@ class WelcomePage extends Component<IWelcomeProps, IWelcomeState> {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
titlebar() {
|
||||||
|
const { classes } = this.props;
|
||||||
|
if ((navigator.userAgent.includes(this.state.brandName || "Hyperspace") || navigator.userAgent.includes("Electron")) && navigator.userAgent.includes("Macintosh")) {
|
||||||
|
return (
|
||||||
|
<div className={classes.titleBarRoot}>
|
||||||
|
<Typography className={classes.titleBarText}>{this.state.brandName? this.state.brandName: "Hyperspace"}</Typography>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
showLanding() {
|
showLanding() {
|
||||||
const { classes } = this.props;
|
const { classes } = this.props;
|
||||||
return (
|
return (
|
||||||
|
@ -435,35 +446,38 @@ class WelcomePage extends Component<IWelcomeProps, IWelcomeState> {
|
||||||
render() {
|
render() {
|
||||||
const { classes } = this.props;
|
const { classes } = this.props;
|
||||||
return (
|
return (
|
||||||
<div className={classes.root} style={{ backgroundImage: `url(${this.state !== null? this.state.backgroundUrl: "background.png"})`}}>
|
<div>
|
||||||
<Paper className={classes.paper}>
|
{this.titlebar()}
|
||||||
<img className={classes.logo} alt={this.state? this.state.brandName: "Hyperspace"} src={this.state? this.state.logoUrl: "logo.png"}/>
|
<div className={classes.root} style={{ backgroundImage: `url(${this.state !== null? this.state.backgroundUrl: "background.png"})`}}>
|
||||||
<br/>
|
<Paper className={classes.paper}>
|
||||||
<Fade in={true}>
|
<img className={classes.logo} alt={this.state? this.state.brandName: "Hyperspace"} src={this.state? this.state.logoUrl: "logo.png"}/>
|
||||||
{
|
<br/>
|
||||||
this.state.authority?
|
<Fade in={true}>
|
||||||
this.showAuthority():
|
{
|
||||||
this.state.wantsToLogin?
|
this.state.authority?
|
||||||
this.showLoginAuth():
|
this.showAuthority():
|
||||||
this.showLanding()
|
this.state.wantsToLogin?
|
||||||
}
|
this.showLoginAuth():
|
||||||
</Fade>
|
this.showLanding()
|
||||||
<br/>
|
}
|
||||||
<Typography variant="caption">
|
</Fade>
|
||||||
© {new Date().getFullYear()} {this.state.brandName && this.state.brandName !== "Hyperspace"? `${this.state.brandName} developers and the `: ""} <Link className={classes.welcomeLink} href="https://hyperspace.marquiskurt.net" target="_blank" rel="noreferrer">Hyperspace</Link> developers. All rights reserved.
|
<br/>
|
||||||
</Typography>
|
<Typography variant="caption">
|
||||||
<Typography variant="caption">
|
© {new Date().getFullYear()} {this.state.brandName && this.state.brandName !== "Hyperspace"? `${this.state.brandName} developers and the `: ""} <Link className={classes.welcomeLink} href="https://hyperspace.marquiskurt.net" target="_blank" rel="noreferrer">Hyperspace</Link> developers. All rights reserved.
|
||||||
{ this.state.repo? <span>
|
</Typography>
|
||||||
<Link className={classes.welcomeLink} href={this.state.repo? this.state.repo: "https://github.com/hyperspacedev"} target="_blank" rel="noreferrer">Source code</Link> | </span>: null}
|
<Typography variant="caption">
|
||||||
<Link className={classes.welcomeLink} href={this.state.license? this.state.license: "https://www.apache.org/licenses/LICENSE-2.0"} target="_blank" rel="noreferrer">License</Link> |
|
{ this.state.repo? <span>
|
||||||
<Link className={classes.welcomeLink} href="https://github.com/hyperspacedev/hyperspace/issues/new" target="_blank" rel="noreferrer">File an Issue</Link>
|
<Link className={classes.welcomeLink} href={this.state.repo? this.state.repo: "https://github.com/hyperspacedev"} target="_blank" rel="noreferrer">Source code</Link> | </span>: null}
|
||||||
</Typography>
|
<Link className={classes.welcomeLink} href={this.state.license? this.state.license: "https://www.apache.org/licenses/LICENSE-2.0"} target="_blank" rel="noreferrer">License</Link> |
|
||||||
<Typography variant="caption" color="textSecondary">
|
<Link className={classes.welcomeLink} href="https://github.com/hyperspacedev/hyperspace/issues/new" target="_blank" rel="noreferrer">File an Issue</Link>
|
||||||
{this.state.brandName? this.state.brandName: "Hypersapce"} v.{this.state.version} {this.state.brandName && this.state.brandName !== "Hyperspace"? "(Hyperspace-like)": null}
|
</Typography>
|
||||||
</Typography>
|
<Typography variant="caption" color="textSecondary">
|
||||||
</Paper>
|
{this.state.brandName? this.state.brandName: "Hypersapce"} v.{this.state.version} {this.state.brandName && this.state.brandName !== "Hyperspace"? "(Hyperspace-like)": null}
|
||||||
{this.showAuthDialog()}
|
</Typography>
|
||||||
</div>
|
</Paper>
|
||||||
|
{this.showAuthDialog()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -21,6 +21,25 @@ export const styles = (theme: Theme) => createStyles({
|
||||||
paddingRight: '35%',
|
paddingRight: '35%',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
titleBarRoot: {
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
height: 24,
|
||||||
|
width: '100%',
|
||||||
|
backgroundColor: "rgba(0, 0, 0, 0.2)",
|
||||||
|
textAlign: 'center',
|
||||||
|
zIndex: 1000,
|
||||||
|
verticalAlign: 'middle',
|
||||||
|
WebkitUserSelect: 'none',
|
||||||
|
WebkitAppRegion: "drag",
|
||||||
|
position: "absolute"
|
||||||
|
},
|
||||||
|
titleBarText: {
|
||||||
|
color: theme.palette.common.white,
|
||||||
|
fontSize: 12,
|
||||||
|
paddingTop: 2,
|
||||||
|
paddingBottom: 1
|
||||||
|
},
|
||||||
paper: {
|
paper: {
|
||||||
height: '100%',
|
height: '100%',
|
||||||
[theme.breakpoints.up('sm')]: {
|
[theme.breakpoints.up('sm')]: {
|
||||||
|
|
Loading…
Reference in New Issue