From b2dbdf69317d95fff846ce98401160b7a6da7672 Mon Sep 17 00:00:00 2001
From: Marquis Kurt <software@marquiskurt.net>
Date: Sun, 12 May 2019 14:11:21 -0400
Subject: [PATCH] Add titlebar, update gitignore, add titlebar to Welcome page

---
 .gitignore                                    |  1 +
 package.json                                  |  6 +-
 src/components/AppLayout/AppLayout.styles.tsx |  2 +-
 src/pages/Welcome.tsx                         | 72 +++++++++++--------
 src/pages/WelcomePage.styles.tsx              | 19 +++++
 5 files changed, 69 insertions(+), 31 deletions(-)

diff --git a/.gitignore b/.gitignore
index cf51ca7..062f611 100644
--- a/.gitignore
+++ b/.gitignore
@@ -65,6 +65,7 @@ typings/
 
 # Production dirs
 build/
+dist/
 
 # Electron app files
 desktop/*.plist
diff --git a/package.json b/package.json
index 0b4419c..ba27de6 100644
--- a/package.json
+++ b/package.json
@@ -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"
   },
diff --git a/src/components/AppLayout/AppLayout.styles.tsx b/src/components/AppLayout/AppLayout.styles.tsx
index 5cf0c0f..e06d80e 100644
--- a/src/components/AppLayout/AppLayout.styles.tsx
+++ b/src/components/AppLayout/AppLayout.styles.tsx
@@ -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,
diff --git a/src/pages/Welcome.tsx b/src/pages/Welcome.tsx
index 108a8fc..df93f50 100644
--- a/src/pages/Welcome.tsx
+++ b/src/pages/Welcome.tsx
@@ -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>
         );
     }
 }
diff --git a/src/pages/WelcomePage.styles.tsx b/src/pages/WelcomePage.styles.tsx
index c7975ac..c1c7f8c 100644
--- a/src/pages/WelcomePage.styles.tsx
+++ b/src/pages/WelcomePage.styles.tsx
@@ -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')]: {