Typescript - Fix issues with about-app and add login to convert less to css

package.json

@@ -11,7 +11,8 @@
   "scripts": {
     "tsc": "git clean -xdf ./lib && npm run lint && tsc",
     "lint": "tslint --project tsconfig.json",
-    "start": "cross-env ELECTRON_DEV=true electron .",
+    "start": "npm run compile-css && cross-env ELECTRON_DEV=true electron .",
+    "compile-css": "lessc src/renderer/styles/main.less src/renderer/styles/main.css",
     "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",
@@ -108,6 +109,7 @@
     "glob": "7.1.3",
     "jest": "23.6.0",
     "jest-html-reporter": "2.4.2",
+    "less": "3.8.1",
     "ncp": "2.0.0",
     "react": "^16.6.0",
     "robotjs": "0.5.1",

src/browser/protocol-handler.ts

@@ -1,7 +1,7 @@
 import * as url from 'url';
 
 import { isMac } from '../common/env';
-import {logger} from '../common/logger';
+import { logger } from '../common/logger';
 import { getCommandLineArgs } from '../common/utils';
 import { windowHandler } from './window-handler';
 

src/browser/window-handler.ts

@@ -24,7 +24,7 @@ export class WindowHandler {
             webPreferences: {
                 nativeWindowOpen: true,
                 nodeIntegration: false,
-                preload: path.join(__dirname, '../renderer/preload'),
+                preload: path.join(__dirname, '../renderer/preload-main'),
                 sandbox: false,
             },
         };
@@ -134,7 +134,7 @@ export class WindowHandler {
         this.aboutAppWindow = createComponentWindow('about-app');
             this.aboutAppWindow.webContents.once('did-finish-load', () => {
                 if (this.aboutAppWindow) {
-                    this.aboutAppWindow.webContents.send('data', { buildNumber, clientVersion, version });
+                    this.aboutAppWindow.webContents.send('about-app-data', { buildNumber, clientVersion, version });
                 }
             });
     }

src/renderer/about-app.tsx

@@ -1,34 +1,60 @@
-import { remote } from 'electron';
+import { ipcRenderer, remote } from 'electron';
 import * as React from 'react';
 
-interface IProps {
-    appName: string | undefined;
-    copyWrite: string | undefined;
-    clientVersion: string | undefined;
-    buildNumber: string | undefined;
-    version: string | undefined;
+interface IState {
+    appName: string;
+    copyWrite?: string;
+    clientVersion: string;
+    buildNumber: string;
+    version: string;
 }
 
 /**
  * Window that display app version and copyright info
  */
-export default class AboutBox extends React.PureComponent<IProps, {}> {
+export default class AboutApp extends React.Component<{}, IState> {
 
+    constructor(props) {
+        super(props);
+        this.state = {
+            appName: 'Symphony',
+            buildNumber: '',
+            clientVersion: '0',
+            version: 'N/A',
+        };
+    }
     /**
      * main render function
      */
     public render() {
-        const { clientVersion, version, buildNumber } = this.props;
+        const { clientVersion, version, buildNumber } = this.state;
         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='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 className='AboutApp'>
+                <img className='AboutApp-logo' src='assets/symphony-logo.png'/>
+                <span className='AboutApp-name'>{appName}</span>
+                <span className='AboutApp-versionText'>{versionString}</span>
+                <span className='AboutApp-copyrightText'>{copyright}</span>
             </div>
         );
     }
+
+    public componentDidMount(): void {
+        ipcRenderer.on('about-app-data', this.updateState.bind(this));
+    }
+
+    public componentWillUnmount() {
+        ipcRenderer.removeListener('open-file-reply', this.updateState);
+    }
+
+    /**
+     * Sets the About app state
+     * @param _event
+     * @param data {Object} { buildNumber, clientVersion, version }
+     */
+    private updateState(_event, data) {
+        this.setState(data as IState);
+    }
 }

src/renderer/loading-screen.tsx

@@ -1,4 +1,4 @@
-import {remote} from 'electron';
+import { remote } from 'electron';
 import * as React from 'react';
 
 /**
@@ -12,11 +12,9 @@ export default class LoadingScreen extends React.PureComponent {
     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 className='LoadingScreen'>
+                <img className='LoadingScreen-logo' src='assets/symphony-logo.png' />
+                    <span id='LoadingScreen-appName' className='name'>{appName}</span>
             </div>
         );
     }

src/renderer/preload-component.ts

@@ -1,6 +1,8 @@
 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);
 
@@ -9,13 +11,16 @@ document.addEventListener('DOMContentLoaded', load);
  */
 export function load() {
     const query = new URL(window.location.href).searchParams;
-    const componentName = query.get('component');
+    const componentName = query.get('componentName');
 
     let component;
     switch (componentName) {
         case 'about-app':
             component = AboutBox;
             break;
+        case 'loading-screen':
+            component = LoadingScreen;
+            break;
     }
     const element = React.createElement(component);
     ReactDOM.render(element, document.getElementById('Root'));

src/renderer/react-window.html

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

src/renderer/styles/about-app.less

@@ -4,40 +4,35 @@
 @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 {
+.AboutApp {
   text-align: center;
   display: flex;
   flex-direction: column;
-  padding-top: 20px
+  padding-top: 20px;
+
+  &-name {
+    flex: 1;
+    font-size: 1.3em;
+    padding: @text-padding;
+    font-weight: bold;
+    color: white;
+  }
+
+  &-versionText {
+    flex: 1;
+    font-size: 1em;
+    color: @version-text-color;
+  }
+
+  &-copyrightText {
+    flex: 1;
+    padding: @text-padding;
+    font-size: 0.6em;
+    color: @copyright-text-color;
+  }
+
+  &-logo {
+    margin: auto;
+  }
 }
 
-.logo {
-  margin: auto;
-}

src/renderer/styles/loading-screen.less

@@ -1,45 +1,26 @@
-@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 {
+.LoadingScreen {
   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 {
+  background: url(../assets/symphony-background.jpg) no-repeat center center fixed;
+  background-size: cover;
   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;
+  &-name {
+    flex: 1;
+    font-size: 1.3em;
+    padding: @text-padding;
+    font-weight: bold;
+    color: white;
+  }
+
+  &-logo {
+    margin: auto;
+  }
 }

src/renderer/styles/main.less

@@ -0,0 +1,8 @@
+@import "about-app";
+@import "loading-screen";
+
+html, body {
+  margin: 0;
+  height: 100%;
+  font-family: @font-family;
+}

tslint.json

@@ -21,6 +21,7 @@
     "no-trailing-whitespace": true,
     "no-duplicate-variable": true,
     "no-var-keyword": true,
+    "variable-name": [true, "ban-keywords", "check-format", "allow-leading-underscore"],
     "no-empty": true,
     "no-unused-expression": true,
     "no-use-before-declare": true,
@@ -60,7 +61,8 @@
       "check-branch",
       "check-decl",
       "check-operator",
-      "check-type"
+      "check-type",
+      "check-module"
     ],
     "completed-docs": [true, "functions", "methods"]
   }