Merge branch 'release/0.1.2'

README.md

@@ -1,13 +1,15 @@
 # Hotelier
 
-Tray App for [Hotel](https://github.com/typicode/hotel) process manager which works on Windows, Mac and Linux.
+Tray App for [Hotel](https://github.com/typicode/hotel) process manager which works on Windows, Mac and (potentially) Linux.
 
 ## Install
 
 Download the [latest release](http://www.github.com/macav/hotelier/releases) and install it.
 
 ## About
 
+![windows_screenshot](public/assets/hotelier_windows.png)
+
 ### Description
 
 The main purpose of the app is allowing easy management of the servers directly from the tray / menu bar, without the need of opening the `Hotel` in the browser, or using the CLI.
@@ -22,7 +24,7 @@ I decided to create the app because all other alternatives didn't work properly
 
 ### Builds
 
-The builds are available for Mac (`.dmg`), Windows (32 & 64 bit) and Linux (`.deb`).
+The builds are available for Mac (`.dmg`) and Windows (32 & 64 bit).
 
 ## Features
 

package.json

@@ -6,7 +6,7 @@
   },
   "license": "MIT",
   "description": "Tray App for Hotel Process Manager",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "dependencies": {
     "is-electron": "^2.1.0",
     "react": "^16.3.2",
@@ -40,7 +40,8 @@
     "mac": {
       "extendInfo": {
         "LSUIElement": 1
-      }
+      },
+      "icon": "build/icon.icns"
     },
     "linux": {
       "target": [
@@ -51,7 +52,8 @@
           ]
         }
       ],
-      "category": "Development"
+      "category": "Development",
+      "icon": "build/icon.ico"
     },
     "win": {
       "target": [
@@ -62,11 +64,12 @@
             "ia32"
           ]
         }
-      ]
+      ],
+      "icon": "build/icon.ico"
     },
     "files": [
       "build/**/*",
-      "icon.*"
+      "build/icon.*"
     ]
   }
 }

public/electron.js

@@ -1,11 +1,14 @@
-const { app, BrowserWindow, ipcMain, Tray } = require('electron')
-const path = require('path')
+const electron = require('electron');
+const { app, BrowserWindow, ipcMain, Tray } = electron;
+const path = require('path');
 const url = require('url');
 
 const assetsDirectory = path.join(__dirname, './assets')
 
-let tray = undefined
-let window = undefined
+let tray = undefined;
+let window = undefined;
+// workaround for Windows, where blur event occured when clicking on a tray icon
+let blurredRecently = false;
 
 if (process.platform === 'darwin') {
   app.dock.hide()
@@ -21,9 +24,12 @@ app.on('window-all-closed', () => {
 })
 
 const createTray = () => {
-  tray = new Tray(path.join(assetsDirectory, 'hotelTemplate.png'))
+  if (process.platform === 'darwin') {
+    tray = new Tray(path.join(assetsDirectory, 'hotelTemplate.png'))
+  } else {
+    tray = new Tray(path.join(assetsDirectory, 'hotelTemplate_white.png'))
+  }
   tray.on('right-click', toggleWindow)
-  tray.on('double-click', toggleWindow)
   tray.on('click', function (event) {
     toggleWindow()
 
@@ -36,10 +42,15 @@ const createTray = () => {
 const getWindowPosition = () => {
   const windowBounds = window.getBounds()
   const trayBounds = tray.getBounds()
+  const { width, height } = electron.screen.getPrimaryDisplay().workAreaSize;
 
   const x = Math.round(trayBounds.x + (trayBounds.width / 2) - (windowBounds.width / 2))
 
-  const y = Math.round(trayBounds.y + trayBounds.height + 4)
+  let y = Math.round(trayBounds.y + trayBounds.height + 4)
+
+  if (height < y) {
+    y = Math.round(trayBounds.y - windowBounds.height - 4)
+  }
 
   return { x: x, y: y }
 }
@@ -66,14 +77,16 @@ const createWindow = () => {
   window.loadURL(startUrl);
 
   window.on('blur', () => {
+    blurredRecently = true;
+    setTimeout(() => blurredRecently = false, 100);
     if (!window.webContents.isDevToolsOpened()) {
       window.hide()
     }
   })
 }
 
 const toggleWindow = () => {
-  if (window.isVisible()) {
+  if (window.isVisible() || blurredRecently) {
     window.hide()
   } else {
     showWindow()

public/preload.js

@@ -1,2 +1,2 @@
-const { shell } = require('electron');
+const { shell, Tray } = require('electron');
 window.shell = shell;

src/app.css

@@ -0,0 +1,4 @@
+.window {
+  border: 1px solid #d2d2d2;
+  right: 1px;
+}

src/App.js → src/app.js

@@ -13,6 +13,7 @@ class App extends Component {
   }
 
   loadServers = () => {
+    this.setState({ loading: true });
     this.getServers().then(servers => {
       servers = Object.keys(servers).map(serverId => {
         const server = servers[serverId];
@@ -29,7 +30,11 @@ class App extends Component {
   getServers = () => {
     return window.fetch(`${this.getHotelUrl()}/_/servers`).then(response => {
       this.setState({ loading: false });
-      return response.json();
+      if (response.ok) {
+        return response.json();
+      } else {
+        return [];
+      }
     });
   };
 
@@ -153,8 +158,8 @@ class App extends Component {
 
           <footer className="toolbar toolbar-footer">
 
-            <div className="footer-link">
-              <a onClick={this.openHotel}>Hotel</a>
+            <div className="toolbar-actions pull-left">
+              <button className="btn btn-default" onClick={this.openHotel}>Hotel</button>
             </div>
 
             <div className="toolbar-actions pull-right">