Insert window controls when frameless

src/bootstrap.js

@@ -23,9 +23,10 @@ global.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {}
 
 
 const { verbose } = require('./common/log')(global.args.home)
+const { remote } = require('electron')
 const { basename } = require('path')
 const { release } = require('os')
-const { ready, append, stylesheet, toggle } = require('./dom')
+const { ready, append, stylesheet, create, on, toggle } = require('./dom')
 
 const PAGE = basename(window.location.pathname, '.html')
 
@@ -36,7 +37,28 @@ ready(() => {
     stylesheet(`../lib/stylesheets/${process.platform}/${PAGE}.css`),
     document.head)
 
-  if (!global.args.frame) {
+  if (global.args.frameless) {
+    const controls = create('div', { class: 'window-controls' })
+
+    const close = create('button', { tabindex: '-1', class: 'close' })
+    const min = create('button', { tabindex: '-1', class: 'minimize' })
+    const max = create('button', { tabindex: '-1', class: 'maximize' })
+
+    const win = (action) => {
+      return () => remote.BrowserWindow.getFocusedWindow()[action]()
+    }
+
+    on(close, 'click', win('close'))
+    append(close, controls)
+
+    on(min, 'click', win('minimize'))
+    append(min, controls)
+
+    on(max, 'click', win('maximize'))
+    append(max, controls)
+
+    append(controls, document.body)
+
     toggle(document.body, 'frameless', true)
   }
 
@@ -48,7 +70,6 @@ ready(() => {
 
 if (global.args.environment === 'development') {
   if (process.platform !== 'linux') {
-    const { remote } = require('electron')
     const props = Object.defineProperties
 
     props(process, {

src/browser/tropy.js

@@ -50,17 +50,17 @@ module.exports = class Tropy extends EventEmitter {
       .once('closed', () => { this.win = undefined })
       .open('project.html', this.hash)
 
-    this.dummy(os.platform() !== 'darwin')
+    this.dummy(os.platform() === 'darwin')
 
     return this
   }
 
-  dummy(frame = false) {
+  dummy(frameless = false) {
     if (this.dum) return this.dum.show(), this
 
     const options = { width: 1440, height: 878 }
 
-    if (!frame) {
+    if (frameless) {
       if (os.platform() === 'darwin' && os.release() > '15') {
         options.titleBarStyle = 'hidden-inset'
 
@@ -71,7 +71,7 @@ module.exports = class Tropy extends EventEmitter {
 
     this.dum = new Window(options)
       .once('closed', () => { this.dum = undefined })
-      .open('dummy.html', { frame, ...this.hash })
+      .open('dummy.html', { frameless, ...this.hash })
 
     return this
   }

src/browser/window.js

@@ -13,6 +13,7 @@ class Window extends BrowserWindow {
     return {
       title: app.getName(),
       show: false,
+      frame: true,
       webPreferences: {
         preload: resolve(__dirname, '..', 'bootstrap.js')
       }

src/stylesheets/_dummy.scss

@@ -81,12 +81,12 @@ body {
   -webkit-app-region: no-drag;
 }
 
-.toolbar-window-controls {
+.window-controls {
+  position: absolute;
+  left: 9px;
+  top: 9px;
   width: 60px;
-  margin: {
-    left: 9px;
-    top: 9px;
-  }
+  z-index: $zindex-draggable-region + 10;
 
   &:hover button {
     background-position-y: -12px;
@@ -119,8 +119,8 @@ body {
     .#{$action} {
       background-image:
         -webkit-image-set(
-          url("../../static/assets/images/application-frame/#{$action}@1x.svg") 1x,
-          url("../../static/assets/images/application-frame/#{$action}@2x.svg") 2x);
+          url("../../../static/assets/images/application-frame/#{$action}@1x.svg") 1x,
+          url("../../../static/assets/images/application-frame/#{$action}@2x.svg") 2x);
     }
   }
-}
+}

static/dummy.html

@@ -12,12 +12,6 @@
       <img src="assets/images/item-view.png" width="1440" height="878">
     </div>
   </div>
-  <div class="toolbar drag">
-    <div class="toolbar-window-controls">
-      <button tabindex="-1" class="close no-drag"></button><!--
-      --><button tabindex="-1" class="minimize no-drag"></button><!--
-      --><button tabindex="-1" class="maximize no-drag"></button>
-    </div>
-  </div>
+  <div class="toolbar drag"></div>
 </body>
 </html>