Typescript: Completed about app

.compilerc

@@ -0,0 +1,68 @@
+{
+  "env": {
+    "development": {
+      "text/jade": {
+        "isProduction": false
+      },
+      "text/less": {
+        "dumpLineNumbers": "comments"
+      },
+      "text/typescript": {
+        "removeComments": false,
+        "preserveConstEnums": true,
+        "declaration": true,
+        "noImplicitAny": true,
+        "noImplicitReturns": true,
+        "suppressImplicitAnyIndexErrors": true,
+        "strictNullChecks": true,
+        "noUnusedLocals": true,
+        "noImplicitThis": true,
+        "noUnusedParameters": true,
+        "inlineSourceMap": true,
+        "inlineSources": true,
+        "importHelpers": true,
+        "noEmitHelpers": true,
+        "module": "commonjs",
+        "target": "es2016",
+        "presets": ["es2016-node5", "react"],
+        "plugins": ["transform-class-properties", "transform-async-to-generator", "transform-runtime"],
+        "sourceMaps": "inline",
+        "jsx": "react",
+        "lib": [
+          "es2016",
+          "dom"
+        ]
+      }
+    },
+    "production": {
+      "text/jade": {
+        "isProduction": true
+      },
+      "text/typescript": {
+        "removeComments": false,
+        "preserveConstEnums": true,
+        "declaration": true,
+        "noImplicitAny": true,
+        "noImplicitReturns": true,
+        "suppressImplicitAnyIndexErrors": true,
+        "strictNullChecks": true,
+        "noUnusedLocals": true,
+        "noImplicitThis": true,
+        "noUnusedParameters": true,
+        "sourceMap": false,
+        "importHelpers": true,
+        "noEmitHelpers": true,
+        "module": "commonjs",
+        "target": "es2016",
+        "presets": ["es2016-node5", "react"],
+        "plugins": ["transform-class-properties", "transform-async-to-generator", "transform-runtime"],
+        "sourceMaps": false,
+        "jsx": "react",
+        "lib": [
+          "es2016",
+          "dom"
+        ]
+      }
+    }
+  }
+}

package.json

@@ -11,7 +11,7 @@
   "scripts": {
     "tsc": "git clean -xdf ./lib && npm run lint && tsc",
     "lint": "tslint --project tsconfig.json",
-    "start": "npm run tsc && cross-env ELECTRON_DEV=true electron .",
+    "start": "cross-env ELECTRON_DEV=true electron .",
     "prebuild": "npm run rebuild && npm run browserify-preload",
     "browserify-preload": "browserify -o js/preload/_preloadMain.js -x electron --insert-global-vars=__filename,__dirname js/preload/preloadMain.js  --exclude electron-spellchecker",
     "rebuild": "electron-rebuild -f",

src/browser/window-handler.ts

@@ -117,10 +117,13 @@ export class WindowHandler {
      * application is loaded
      */
     public showLoadingScreen() {
-        this.loadingWindow = new BrowserWindow(WindowHandler.getLoadingWindowOpts());
-        this.loadingWindow.once('ready-to-show', () => this.loadingWindow ? this.loadingWindow.show() : null);
-        this.loadingWindow.loadURL(`file://${path.join(__dirname, '../renderer/loading-screen.html')}`);
-        this.loadingWindow.setMenu(null as any);
+        this.loadingWindow = createComponentWindow('loading-screen', WindowHandler.getLoadingWindowOpts());
+        this.loadingWindow.webContents.once('did-finish-load', () => {
+            if (this.loadingWindow) {
+                this.loadingWindow.webContents.send('data');
+            }
+        });
+
         this.loadingWindow.once('closed', () => this.loadingWindow = null);
     }
 

src/renderer/about-app.tsx

@@ -1,7 +1,7 @@
-import { ipcRenderer, remote } from 'electron';
+import { remote } from 'electron';
 import * as React from 'react';
 
-interface IState {
+interface IProps {
     appName: string | undefined;
     copyWrite: string | undefined;
     clientVersion: string | undefined;
@@ -12,41 +12,22 @@ interface IState {
 /**
  * Window that display app version and copyright info
  */
-export default class AboutBox extends React.Component<{}, IState> {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            appName: remote.app.getName() || 'Symphony',
-            buildNumber: '',
-            clientVersion: '',
-            copyWrite: `Copyright \xA9 ${new Date().getFullYear()} Symphony`,
-            version: '',
-        };
-    }
-
-    /**
-     * comp
-     */
-    public componentWillMount() {
-        ipcRenderer.on('data', (_EVENT: Electron.Event, args: IState) => {
-            this.setState({
-                copyWrite: `Copyright \xA9 ${new Date().getFullYear()} ${this.state.appName}`,
-                version: `Version ${args.clientVersion}-${args.version} (${args.buildNumber})`,
-            });
-        });
-    }
+export default class AboutBox extends React.PureComponent<IProps, {}> {
 
     /**
      * main render function
      */
     public render() {
+        const { clientVersion, version, buildNumber } = this.props;
+        const appName = remote.app.getName() || 'Symphony';
+        const versionString = `Version ${clientVersion}-${version} (${buildNumber})`;
+        const copyright = `Copyright \xA9 ${new Date().getFullYear()} ${appName}`;
         return (
             <div className='content'>
-                <img className='logo' src='symphony-logo.png'/>
-                <span id='app-name' className='name'>{this.state.appName}</span>
-                <span id='version' className='version-text'>{this.state.version}</span>
-                <span id='copyright' className='copyright-text'>{this.state.copyWrite}</span>
+                <img className='logo' src='assets/symphony-logo.png'/>
+                <span id='app-name' className='name'>{appName}</span>
+                <span id='version' className='version-text'>{versionString}</span>
+                <span id='copyright' className='copyright-text'>{copyright}</span>
             </div>
         );
     }

src/renderer/loading-screen.html

@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>About Symphony</title>
-    <style>
-        html, body {
-            margin: 0;
-            height: 100%;
-            font-family: sans-serif;
-        }
-        .name {
-            flex: 1;
-            font-size: 1.3em;
-            padding: 10px;
-            font-weight: bold;
-            color: #ffffff;
-        }
-
-        .version-text {
-            flex: 1;
-            font-size: 1em;
-            color: #2f2f2f;
-        }
-
-        .copyright-text {
-            flex: 1;
-            padding: 10px;
-            font-size: 0.6em;
-            color: #7f7f7f;
-        }
-
-        .content {
-            text-align: center;
-            display: flex;
-            flex-direction: column;
-            padding-top: 20px;
-            background: url(symphony-background.jpg) no-repeat center center fixed;
-            background-size: cover;
-        }
-
-        .logo {
-            margin: auto;
-        }
-    </style>
-</head>
-<body>
-<div class="content">
-    <img class="logo" src="symphony-logo.png">
-    <span id="app-name" class="name">Symphony</span>
-    <span id="version" class="version-text"></span>
-    <span id="copyright" class="copyright-text"></span>
-</div>
-</body>
-</html>

src/renderer/loading-screen.tsx

@@ -0,0 +1,23 @@
+import {remote} from 'electron';
+import * as React from 'react';
+
+/**
+ * Window that display app version and copyright info
+ */
+export default class LoadingScreen extends React.PureComponent {
+
+    /**
+     * main render function
+     */
+    public render() {
+        const appName = remote.app.getName() || 'Symphony';
+        return (
+            <div className='content'>
+                <img className='logo' src='assets/symphony-logo.png' />
+                    <span id='app-name' className='name'>{appName}</span>
+                    <span id='version' className='version-text'/>
+                    <span id='copyright' className='copyright-text'/>
+            </div>
+        );
+    }
+}

src/renderer/preload-component.ts

@@ -1,6 +1,9 @@
+import { ipcRenderer } from 'electron';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+
 import AboutBox from './about-app';
+import LoadingScreen from './loading-screen';
 
 document.addEventListener('DOMContentLoaded', load);
 
@@ -16,7 +19,13 @@ export function load() {
         case 'about-app':
             component = AboutBox;
             break;
+        case 'loading-screen':
+            component = LoadingScreen;
+            break;
     }
-    const element = React.createElement(component);
-    ReactDOM.render(element, document.getElementById('Root'));
+
+    ipcRenderer.on('data', (__: Electron.Event, args) => {
+        const element = React.createElement(component, args);
+        ReactDOM.render(element, document.getElementById('Root'));
+    });
 }

src/renderer/react-window.html

@@ -18,7 +18,8 @@
 <head>
     <meta charset="UTF-8">
 
-    <link rel="stylesheet" type="text/css" href="../renderer/styles/about-app.css" />
+    <link rel="stylesheet" type="text/css" href="./styles/about-app.less" />
+    <link rel="stylesheet" type="text/css" href="./styles/loading-screen.less" />
 </head>
 <body style="overflow: hidden; background-color: white; margin: 0">
     <div id="Root"></div>

src/renderer/styles/about-app.css

@@ -1,35 +0,0 @@
-html, body {
-    margin: 0;
-    height: 100%;
-    font-family: sans-serif;
-}
-.name {
-    flex: 1;
-    font-size: 1.3em;
-    padding: 10px;
-    font-weight: bold;
-}
-
-.version-text {
-    flex: 1;
-    font-size: 1em;
-    color: #2f2f2f;
-}
-
-.copyright-text {
-    flex: 1;
-    padding: 10px;
-    font-size: 0.6em;
-    color: #7f7f7f;
-}
-
-.content {
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    padding-top: 20px
-}
-
-.logo {
-    margin: auto;
-}

src/renderer/styles/about-app.less

@@ -0,0 +1,43 @@
+@white: rgb(255, 255, 255, 1);
+@version-text-color: rgb(47, 47, 47, 1);
+@copyright-text-color: rgb(127, 127, 127, 1);
+@font-family: sans-serif;
+@text-padding: 10px;
+
+html, body {
+  margin: 0;
+  height: 100%;
+  font-family: @font-family;
+}
+
+.name {
+  flex: 1;
+  font-size: 1.3em;
+  padding: @text-padding;
+  font-weight: bold;
+  color: white;
+}
+
+.version-text {
+  flex: 1;
+  font-size: 1em;
+  color: @version-text-color;
+}
+
+.copyright-text {
+  flex: 1;
+  padding: @text-padding;
+  font-size: 0.6em;
+  color: @copyright-text-color;
+}
+
+.content {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  padding-top: 20px
+}
+
+.logo {
+  margin: auto;
+}

src/renderer/styles/loading-screen.less

@@ -0,0 +1,45 @@
+@white: rgb(255, 255, 255, 1);
+@version-text-color: rgb(47, 47, 47, 1);
+@copyright-text-color: rgb(127, 127, 127, 1);
+@font-family: sans-serif;
+@text-padding: 10px;
+
+html, body {
+  margin: 0;
+  height: 100%;
+  font-family: @font-family;
+}
+
+.name {
+  flex: 1;
+  font-size: 1.3em;
+  padding: @text-padding;
+  font-weight: bold;
+  color: white;
+}
+
+.version-text {
+  flex: 1;
+  font-size: 1em;
+  color: @version-text-color;
+}
+
+.copyright-text {
+  flex: 1;
+  padding: @text-padding;
+  font-size: 0.6em;
+  color: @copyright-text-color;
+}
+
+.content {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  padding-top: @text-padding;
+  background: url(../assets/symphony-background.jpg) no-repeat center center fixed;
+  background-size: cover;
+}
+
+.logo {
+  margin: auto;
+}