From e49537479c20ac2f992ae778e2e8206fb15301cc Mon Sep 17 00:00:00 2001 From: Kiran Niranjan Date: Mon, 5 Nov 2018 14:44:19 +0530 Subject: [PATCH] Typescript: Completed about app --- .compilerc | 68 ++++++++++++++++++ package.json | 2 +- src/browser/window-handler.ts | 11 +-- src/renderer/about-app.tsx | 41 +++-------- .../{ => assets}/symphony-background.jpg | Bin src/renderer/{ => assets}/symphony-logo.png | Bin src/renderer/loading-screen.html | 55 -------------- src/renderer/loading-screen.tsx | 23 ++++++ src/renderer/preload-component.ts | 13 +++- src/renderer/react-window.html | 3 +- src/renderer/styles/about-app.css | 35 --------- src/renderer/styles/about-app.less | 43 +++++++++++ src/renderer/styles/loading-screen.less | 45 ++++++++++++ 13 files changed, 211 insertions(+), 128 deletions(-) create mode 100644 .compilerc rename src/renderer/{ => assets}/symphony-background.jpg (100%) rename src/renderer/{ => assets}/symphony-logo.png (100%) delete mode 100644 src/renderer/loading-screen.html create mode 100644 src/renderer/loading-screen.tsx delete mode 100644 src/renderer/styles/about-app.css create mode 100644 src/renderer/styles/about-app.less create mode 100644 src/renderer/styles/loading-screen.less diff --git a/.compilerc b/.compilerc new file mode 100644 index 00000000..4b35f237 --- /dev/null +++ b/.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" + ] + } + } + } +} diff --git a/package.json b/package.json index 3d7725b7..e2b6088b 100644 --- a/package.json +++ b/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", diff --git a/src/browser/window-handler.ts b/src/browser/window-handler.ts index 518d68b0..9440e2ef 100644 --- a/src/browser/window-handler.ts +++ b/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); } diff --git a/src/renderer/about-app.tsx b/src/renderer/about-app.tsx index c090dcdd..35208774 100644 --- a/src/renderer/about-app.tsx +++ b/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 { /** * 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 (
- - {this.state.appName} - {this.state.version} - {this.state.copyWrite} + + {appName} + {versionString} + {copyright}
); } diff --git a/src/renderer/symphony-background.jpg b/src/renderer/assets/symphony-background.jpg similarity index 100% rename from src/renderer/symphony-background.jpg rename to src/renderer/assets/symphony-background.jpg diff --git a/src/renderer/symphony-logo.png b/src/renderer/assets/symphony-logo.png similarity index 100% rename from src/renderer/symphony-logo.png rename to src/renderer/assets/symphony-logo.png diff --git a/src/renderer/loading-screen.html b/src/renderer/loading-screen.html deleted file mode 100644 index db76841f..00000000 --- a/src/renderer/loading-screen.html +++ /dev/null @@ -1,55 +0,0 @@ - - - - - About Symphony - - - -
- - Symphony - - -
- - diff --git a/src/renderer/loading-screen.tsx b/src/renderer/loading-screen.tsx new file mode 100644 index 00000000..a0fe83f5 --- /dev/null +++ b/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 ( +
+ + {appName} + + +
+ ); + } +} \ No newline at end of file diff --git a/src/renderer/preload-component.ts b/src/renderer/preload-component.ts index 6840ca1b..dff0c2fb 100644 --- a/src/renderer/preload-component.ts +++ b/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')); + }); } \ No newline at end of file diff --git a/src/renderer/react-window.html b/src/renderer/react-window.html index 70c47e78..d19d1fcb 100644 --- a/src/renderer/react-window.html +++ b/src/renderer/react-window.html @@ -18,7 +18,8 @@ - + +
diff --git a/src/renderer/styles/about-app.css b/src/renderer/styles/about-app.css deleted file mode 100644 index f5238bfa..00000000 --- a/src/renderer/styles/about-app.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/renderer/styles/about-app.less b/src/renderer/styles/about-app.less new file mode 100644 index 00000000..0ffe3238 --- /dev/null +++ b/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; +} diff --git a/src/renderer/styles/loading-screen.less b/src/renderer/styles/loading-screen.less new file mode 100644 index 00000000..34b58399 --- /dev/null +++ b/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; +}