Add floating mode for MacOS

app/config.js

@@ -9,6 +9,7 @@ module.exports = new Config({
     shortcut: {
       toggleApp: null
     },
-    mode: 'dark'
+    mode: 'dark',
+    floating: false
   }
 })

app/index.js

@@ -75,7 +75,12 @@ function createMainWindow() {
       e.preventDefault()
 
       if (process.platform === 'darwin') {
-        app.hide()
+        if (config.get('floating')) {
+          // if app is floating, app.hide will not work
+          win.hide()
+        } else {
+          app.hide()
+        }
       } else {
         win.hide()
       }
@@ -108,10 +113,16 @@ app.on('ready', () => {
   Menu.setApplicationMenu(
     createMenu({
       toggleWindow
-    })
+    }, app)
   )
   mainWindow = createMainWindow()
-  tray.create(mainWindow)
+  if (config.get('floating') && process.platform === 'darwin') {
+    app.dock.hide()
+    mainWindow.setAlwaysOnTop(true, 'floating')
+    mainWindow.setVisibleOnAllWorkspaces(true)
+    mainWindow.setFullScreenable(false)
+  }
+  tray.create(mainWindow, app)
 
   mainWindow.once('ready-to-show', () => {
     mainWindow.show()

app/menu.js

@@ -25,7 +25,7 @@ function updateMenu(opts) {
   Menu.setApplicationMenu(createMenu(opts))
 }
 
-function createMenu(opts) {
+function createMenu(opts, app) {
   const toggleAppAccelerator =
     config.get('shortcut.toggleApp') || 'CmdOrCtrl+Shift+D'
   const toggleAppAcceleratorRegistered = globalShortcut.isRegistered(
@@ -48,6 +48,14 @@ function createMenu(opts) {
             shell.openItem(configDir('custom.js'))
           }
         },
+        {
+          label: 'Turn On Floating Mode',
+          click() {
+            config.set('floating', true)
+            app.relaunch()
+            app.exit()
+          }
+        },
         {
           label: `${
             toggleAppAcceleratorRegistered ? 'Disable' : 'Enable'

app/renderer/main.js

@@ -26,14 +26,33 @@ function ensureCustomFiles() {
 function createHeader() {
   const header = document.createElement('header')
   header.className = 'header'
-  header.innerHTML = '<h1 id="title" class="app-title">Loading DevDocs...</h1>'
+  header.innerHTML = `
+  <h1 id="title" class="app-title">Loading DevDocs...</h1>
+  <span id="pin" class="pin">
+    <svg width="24" height="24">
+    <path d="M8.946,12.595L12.407,8.662L12.026,8.282L13.029,6.733L17.267,10.971L15.77,12.026L15.338,11.593L11.454,15.102L12.032,15.68L11.196,16.517L9.759,15.08L7.223,17.267L6.733,16.777L8.872,14.192L7.579,12.9L8.416,12.064L8.946,12.595Z" />
+    </g>
+    </svg>
+  </span>
+  `
   header.addEventListener('dblclick', () => {
     win.maximize()
   })
   header.addEventListener('click', () => {
     webview.focus()
   })
 
+  const pin = header.querySelector('.pin')
+  if (config.get('floating')) {
+    pin.classList.add('pinned')
+  }
+  pin.addEventListener('click', () => {
+    const app = remote.app
+    config.set('floating', !config.get('floating'))
+    app.relaunch()
+    app.exit()
+  })
+
   document.body.append(header)
 }
 

app/renderer/style.css

@@ -72,9 +72,21 @@ body {
 .header .app-title {
   font-size: 12px;
   font-weight: 400;
+  text-align: center;
   margin: 0;
 }
 
+.header .pin {
+  font-size: 12px;
+  margin: 0;
+  margin-left: 3px;
+  fill: #666666;
+}
+
+.header .pin.pinned {
+  fill: #2C70F4;
+}
+
 .is-darwin .header {
   display: flex;
 }

app/tray.js

@@ -1,14 +1,24 @@
 const path = require('path')
 const { app, Menu, Tray } = require('electron')
+const config = require('./config')
 
 let tray = null
 
-exports.create = win => {
-  if (process.platform === 'darwin' || tray) {
+exports.create = (win, app) => {
+  if (tray) {
     return
   }
 
-  const iconPath = path.join(__dirname, 'static/tray.png')
+  let iconPath;
+  if (process.platform === 'darwin') {
+    if (config.get('floating')) {
+      iconPath = path.join(__dirname, 'static/tray-mac.png')
+    } else {
+      return
+    }
+  } else {
+    iconPath = path.join(__dirname, 'static/tray.png')
+  }
 
   const toggleWin = () => {
     if (win.isVisible()) {
@@ -18,13 +28,27 @@ exports.create = win => {
     }
   }
 
-  const contextMenu = Menu.buildFromTemplate([
+  let menuItems = [
     {
-      label: 'Toggle',
+      label: 'Toggle Window',
       click() {
         toggleWin()
       }
-    },
+    }
+  ];
+  if (process.platform === 'darwin') {
+    menuItems = menuItems.concat([
+      {
+        label: 'Turn Off Floating Mode',
+        click() {
+          config.set('floating', false)
+          app.relaunch()
+          app.exit()
+        }
+      },
+    ])
+  }
+  menuItems = menuItems.concat([
     {
       type: 'separator'
     },
@@ -33,6 +57,8 @@ exports.create = win => {
     }
   ])
 
+  const contextMenu = Menu.buildFromTemplate(menuItems)
+
   tray = new Tray(iconPath)
   tray.setToolTip(`${app.getName()}`)
   tray.setContextMenu(contextMenu)