Borderless

app.js

@@ -1,6 +1,7 @@
 import app from 'app';
 import BrowserWindow from 'browser-window';
 
+
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let mainWindow = null;
@@ -15,10 +16,9 @@ app.on('window-all-closed', () => {
 });
 
 app.on('ready', () => {
-  mainWindow = new BrowserWindow({width: 800, height: 600});
+  mainWindow = new BrowserWindow({width: 800, height: 600, frame:false, autoHideMenuBar: true, darkTheme: true});
 
   mainWindow.loadURL('file://' + __dirname + '/index.html');
-
   // Emitted when the window is closed.
   mainWindow.on('closed', function () {
     mainWindow = null;

src/components/Sidebar.jsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import { withStore } from 'fluorine-lib'
 import { Link } from 'react-router'
+//import ipcMain from 'electron'
+const ipcRenderer = require('electron').ipcRenderer;
 
 import {
   decoding
@@ -11,6 +13,10 @@ import dispatcher from '../dispatcher'
 
 const { generateTreeFromDatabase } = decoding
 
+var remote = require('remote');
+var BrowserWindow = remote.require('browser-window');
+var win = BrowserWindow.getFocusedWindow();
+
 @withStore(dispatcher
   .reduce(Database)
   .map(x => generateTreeFromDatabase(x))
@@ -28,13 +34,17 @@ const { generateTreeFromDatabase } = decoding
   .distinctUntilChanged(),
   'color')
 export default class Sidebar extends React.Component {
+  handleFullscreen() {
+    win.setFullScreen(!(win.isFullScreen()));
+  }
   render() {
     const styles = {
       container: {
         height: '100%',
         width: 200,
         padding: 10,
-        color: this.props.color
+        color: this.props.color,
+        "-webkit-app-region": "drag"
       },
       sidebar: {
         borderRight: `3px solid ${this.props.color}`,
@@ -45,7 +55,8 @@ export default class Sidebar extends React.Component {
       li: {
         width: '100%',
         marginBottom: 5,
-        textTransform: 'uppercase'
+        textTransform: 'uppercase',
+        "-webkit-app-region": "no-drag"
       },
       item: {
         base: {
@@ -82,6 +93,15 @@ export default class Sidebar extends React.Component {
                 About
               </Link>
             </li>
+
+            <li style={styles.li}>
+              <span
+                onClick={this.handleFullscreen}
+                activeStyle={styles.item.active}
+                style={styles.item.base}>
+                Fullscreen
+              </span>
+            </li>
           </ul>
         </div>
       </div>

src/views/About.jsx

@@ -1,9 +1,41 @@
 import React from 'react'
+import { withStore } from 'fluorine-lib'
 
+import {
+  decoding
+} from 'pipboylib'
+
+import Database from '../stores/Database'
+import dispatcher from '../dispatcher'
+
+const { generateTreeFromDatabase } = decoding
+
+@withStore(dispatcher
+  .reduce(Database)
+  .map(x => generateTreeFromDatabase(x))
+  .filter(x => x && x.Status)
+  .map(x => x.Status.EffectColor)
+  .map(effectColor => {
+    let effectColors = effectColor.map(x => Math.round(x*255) )
+    let effect = {
+      red: effectColors[0],
+      green: effectColors[1],
+      blue: effectColors[2]
+    }
+    return `rgb(${effect.red},${effect.green},${effect.blue})`
+  })
+  .distinctUntilChanged(),
+  'color')
 export default class About extends React.Component {
   render() {
+    const styles = {
+      about: {
+        color: this.props.color
+      }
+    }
+
     return (
-      <div>
+      <div style={styles.about}>
         <h1>RobCo Industries PipBoy</h1>
         <p>Fan built precision electronics</p>
       </div>