Siderus · kernelwhisperer · Aug 13, 2018 · Aug 11, 2018 · Aug 11, 2018 · Aug 11, 2018
diff --git a/app/components/ProgressBar.jsx b/app/components/ProgressBar.jsx
@@ -16,7 +16,7 @@ const ProgressBarRoot = styled.div`
   overflow: hidden;
 
   span {
-    width: ${props => props.percentage || 50}%;
+    width: ${props => props.percentage}%;
     display: block;
     height: 4px;
     background-color: rgb(127,127,127);
@@ -30,7 +30,7 @@ const ProgressBarRoot = styled.div`
 `
 
 const ProgressBar = ({ percentage = 0, indeterminate }) => (
-  <ProgressBarRoot percentage={percentage} indeterminate={indeterminate}>
+  <ProgressBarRoot percentage={indeterminate ? 50 : percentage} indeterminate={indeterminate}>
     <span></span>
   </ProgressBarRoot>
 )

diff --git a/app/menu.js b/app/menu.js
@@ -8,6 +8,7 @@ import ImportWindow from './windows/Import/window'
 import SettingsWindow from './windows/Settings/window'
 import ResolveIPNS from './windows/ResolveIPNS/window'
 import PublishToIPNS from './windows/PublishToIPNS/window'
+import AboutWindow from './windows/About/window'
 
 import { addFilesPaths } from './windows/Storage/fileIntegration'
 
@@ -206,14 +207,18 @@ function findReopenMenuItem () {
   return reopenMenuItem
 }
 
+const aboutOrion = {
+  label: 'About Orion',
+  click () {
+    AboutWindow.create(app)
+  }
+}
+
 if (process.platform === 'darwin') {
   const name = electron.app.getName()
   template.unshift({
     label: name,
-    submenu: [{
-      label: `About ${name}`,
-      role: 'about'
-    }, {
+    submenu: [aboutOrion, {
       type: 'separator'
     }, {
       label: 'Services',
@@ -260,6 +265,9 @@ if (process.platform === 'darwin') {
   })
 
   addUpdateMenuItems(template[0].submenu, 1)
+} else {
+  // on windows and linux this menu goes under Help
+  template[4].submenu.unshift(aboutOrion)
 }
 
 if (process.platform === 'win32') {

diff --git a/app/windows/About/index.html b/app/windows/About/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Siderus Orion</title>
+</head>
+
+<body>
+  <div id="host"></div>
+</body>
+
+<!-- Electron Javascript -->
+<script src="loader.js" charset="utf-8"></script>
+
+</html>
diff --git a/app/windows/About/loader.js b/app/windows/About/loader.js
@@ -0,0 +1,7 @@
+import Spinner from 'spin.js'
+
+var target = document.getElementById('host')
+new Spinner().spin(target)
+
+// After the spinner is rendered, we require the actual component
+setTimeout(() => require('./renderer.jsx'), 0)
diff --git a/app/windows/About/renderer.jsx b/app/windows/About/renderer.jsx
@@ -0,0 +1,63 @@
+import React from 'react'
+import ReactDom from 'react-dom'
+import { shell } from 'electron'
+import styled from 'styled-components'
+import 'react-photonkit'
+
+import { trackEvent } from '../../stats'
+import OrionLogo from '../../../docs/logo.svg'
+import SiderusLogo from '../../../docs/siderus-logo.svg'
+import pjson from '../../../package.json'
+
+const Window = styled.div`
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24px;
+`
+const Orion = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 30px;
+`
+
+const SiderusLink = styled.div`
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  margin: 10px 24px;
+
+  display: flex;
+  align-items: center;
+  svg {
+    margin-left: 5px;
+  }
+  &, svg, path, g {
+    cursor: pointer;
+  }
+`
+
+class AboutWindow extends React.Component {
+  componentDidMount () {
+    trackEvent('AboutWindowOpen')
+  }
+
+  render () {
+    return (
+      <Window>
+        <Orion>
+          <OrionLogo width='150px' />
+          <h2>Siderus Orion</h2>
+          <p>App version: {pjson.version}<br />IPFS version: {pjson.ipfsVersion} (go-ipfs)</p>
+        </Orion>
+        <SiderusLink onClick={event => shell.openExternal('https://siderus.io')}>
+          Copyright © 2018 {pjson.author.name} <SiderusLogo width='30px' height='30px' />
+        </SiderusLink>
+      </Window>
+    )
+  }
+}
+
+ReactDom.render(<AboutWindow />, document.querySelector('#host'))
diff --git a/app/windows/About/window.js b/app/windows/About/window.js
@@ -0,0 +1,61 @@
+import path from 'path'
+import url from 'url'
+
+import { BrowserWindow, remote } from 'electron'
+
+import isRenderer from 'is-electron-renderer'
+
+// Allow us to use create() in both electron windows and main process
+let BrowserWindowClass
+if (isRenderer) {
+  BrowserWindowClass = remote.BrowserWindow
+} else {
+  BrowserWindowClass = BrowserWindow
+}
+
+module.exports = {}
+
+module.exports.create = function createResolveIPNSWindow (app) {
+  // Create the browser modal window.
+  let thisWindow = new BrowserWindowClass({
+    width: 600,
+    minWidth: 600,
+    height: 400,
+    minHeight: 400,
+
+    maximizable: false,
+    resizable: false,
+    fullscreenable: false,
+    icon: path.join(__dirname, '../../../docs/logo.png'),
+
+    show: false,
+    webPreferences: {
+      preload: path.join(__dirname, '../../lib/report/preload.js')
+    }
+  })
+
+  // Show menu only on StorageList
+  thisWindow.setMenu(null)
+
+  // Show the window only when ready
+  thisWindow.once('ready-to-show', () => {
+    thisWindow.show()
+  })
+
+  // Load the index.html of the app.
+  thisWindow.loadURL(url.format({
+    pathname: path.join(__dirname, 'index.html'),
+    protocol: 'file:',
+    slashes: true
+  }))
+
+  // Emitted when the window is closed.
+  thisWindow.on('closed', () => {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    thisWindow = null
+  })
+
+  return thisWindow
+}