Mastodon
/
hyperspace-desktop-client-windows-linux-macos
mirror of https://github.com/hyperspacedev/hyperspace
1
0
Fork 0
Code Issues Releases Wiki Activity

Add titlebar, update gitignore, add titlebar to Welcome page

This commit is contained in:
Marquis Kurt 2019-05-12 14:11:21 -04:00
parent a44d1fbb0a
commit b2dbdf6931
5 changed files with 69 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -65,6 +65,7 @@ typings/
# Production dirs
build/
dist/
# Electron app files
desktop/*.plist

6
package.json
View File

@ -41,7 +41,11 @@
"electrify": "npm run build; electron .",
"electrify-nobuild": "electron .",
"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",
"eject": "react-scripts eject"
},

2
src/components/AppLayout/AppLayout.styles.tsx
View File

@ -24,7 +24,7 @@ export const styles = (theme: Theme) => createStyles({
zIndex: 1000,
verticalAlign: 'middle',
WebkitUserSelect: 'none',
WebkitAppRegion: "drag"
WebkitAppRegion: "drag",
},
titleBarText: {
color: theme.palette.common.white,

72
src/pages/Welcome.tsx
View File

@ -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() {
const { classes } = this.props;
return (
@ -435,35 +446,38 @@ class WelcomePage extends Component<IWelcomeProps, IWelcomeState> {
render() {
const { classes } = this.props;
return (
<div className={classes.root} style={{ backgroundImage: `url(${this.state !== null? this.state.backgroundUrl: "background.png"})`}}>
<Paper className={classes.paper}>
<img className={classes.logo} alt={this.state? this.state.brandName: "Hyperspace"} src={this.state? this.state.logoUrl: "logo.png"}/>
<br/>
<Fade in={true}>
{
this.state.authority?
this.showAuthority():
this.state.wantsToLogin?
this.showLoginAuth():
this.showLanding()
}
</Fade>
<br/>
<Typography variant="caption">
&copy; {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.
</Typography>
<Typography variant="caption">
{ this.state.repo? <span>
<Link className={classes.welcomeLink} href={this.state.repo? this.state.repo: "https://github.com/hyperspacedev"} target="_blank" rel="noreferrer">Source code</Link> | </span>: null}
<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> |
<Link className={classes.welcomeLink} href="https://github.com/hyperspacedev/hyperspace/issues/new" target="_blank" rel="noreferrer">File an Issue</Link>
</Typography>
<Typography variant="caption" color="textSecondary">
{this.state.brandName? this.state.brandName: "Hypersapce"} v.{this.state.version} {this.state.brandName && this.state.brandName !== "Hyperspace"? "(Hyperspace-like)": null}
</Typography>
</Paper>
{this.showAuthDialog()}
</div>
<div>
{this.titlebar()}
<div className={classes.root} style={{ backgroundImage: `url(${this.state !== null? this.state.backgroundUrl: "background.png"})`}}>
<Paper className={classes.paper}>
<img className={classes.logo} alt={this.state? this.state.brandName: "Hyperspace"} src={this.state? this.state.logoUrl: "logo.png"}/>
<br/>
<Fade in={true}>
{
this.state.authority?
this.showAuthority():
this.state.wantsToLogin?
this.showLoginAuth():
this.showLanding()
}
</Fade>
<br/>
<Typography variant="caption">
&copy; {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.
</Typography>
<Typography variant="caption">
{ this.state.repo? <span>
<Link className={classes.welcomeLink} href={this.state.repo? this.state.repo: "https://github.com/hyperspacedev"} target="_blank" rel="noreferrer">Source code</Link> | </span>: null}
<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> |
<Link className={classes.welcomeLink} href="https://github.com/hyperspacedev/hyperspace/issues/new" target="_blank" rel="noreferrer">File an Issue</Link>
</Typography>
<Typography variant="caption" color="textSecondary">
{this.state.brandName? this.state.brandName: "Hypersapce"} v.{this.state.version} {this.state.brandName && this.state.brandName !== "Hyperspace"? "(Hyperspace-like)": null}
</Typography>
</Paper>
{this.showAuthDialog()}
</div>
</div>
);
}
}

19
src/pages/WelcomePage.styles.tsx
View File

@ -21,6 +21,25 @@ export const styles = (theme: Theme) => createStyles({
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: {
height: '100%',
[theme.breakpoints.up('sm')]: {