Remove electron window frame

- Add HTML and CSS for custom title bar
mdyna · Mar 31, 2019 · d1ef414 · d1ef414
1 parent ed80948
commit d1ef414
Show file tree

Hide file tree

Showing 4 changed files with 154 additions and 38 deletions.
diff --git a/app/assets/SegMDL2.ttf b/app/assets/SegMDL2.ttf
diff --git a/app/components/App.scss b/app/components/App.scss
@@ -1,10 +1,21 @@
 @import "../style.scss";
 
+* {margin: 0; padding: 0; border: 0; vertical-align: baseline;}
+html {box-sizing: border-box;}
+*, *:before, *:after {box-sizing: inherit;}
+html, body {height: 100%; margin: 0;}
+
+h1 {margin: 0 0 10px 0; font-weight: 600; line-height: 1.2;}
+p {margin-top: 10px; color: rgba(255,255,255,0.4);}
+
 body {
   font-family: Roboto sans-serif;
   background-color: $background-color;
 }
-
+@font-face {
+  font-family: Segoe;
+  src: url(../assets/SegMDL2.ttf);
+}
 .split {
   display: flex;
   flex-flow: row nowrap;
@@ -29,10 +40,74 @@ body {
   background: $accent-color;
   border-radius: 10px;
 }
+#titlebar {
+  display: block;
+  position: fixed;
+  height: 32px;
+  width: calc(100% - 2px);
+  background-color: #0f1116;
+  padding: 4px;
+  color: $secondary-accent;
+  font-family: Metric;
+  #drag-region {
+
+    .title {
+      font-size: 1.2em;
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: center;
+      img {
+        margin-right: 12px;
+        height: 24px;
+      }
+    }
+    width: 100%;
+    height: 100%;
+    -webkit-app-region: drag;
+
+    #window-controls {
+      font-family: Segoe;
+      display: grid;
+      grid-template-columns: repeat(3, 46px);
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 100%;
+      font-size: 10px;
+      -webkit-app-region: no-drag;
+      .button {
+        grid-row: 1 / span 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        user-select: none;
+        cursor: default;
+        opacity: 0.8;
+        &:hover {
+          background: rgba(255,255,255,0.2);
+          opacity: 1;
+        }
+      }
+      #min-button {
+        grid-column: 1;
+      }
+      #max-button, #restore-button {
+        grid-column: 2;
+      }
+      #close-button {
+        background: #E81123;
+        grid-column: 3;
+      }
+    }
+  }
+}
 
 .mdyna-app {
   margin: 0;
   padding: 0;
+  padding-top: 32px;
   background-color: $background-color;
   min-height: 600px;
 

diff --git a/app/index.html b/app/index.html
@@ -1,34 +1,53 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" type="text/css">
-  <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon-16x16.png">
-  <link rel="shortcut icon" href="./assets/favicon.ico">
-  <meta name="apple-mobile-web-app-title" content="Mdyna">
-  <meta name="application-name" content="Mdyna">
-  <meta name="msapplication-TileColor" content="#00aba9">
-  <meta name="msapplication-config" content="./assets/browserconfig.xml">
-  <link rel="manifest" href="./manifest.json">
-  <meta name="theme-color" content="#ffffff">
-  <!--
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
+    <link
+      rel="stylesheet"
+      href="http://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700"
+      type="text/css"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="./assets/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="./assets/favicon-16x16.png"
+    />
+    <link rel="shortcut icon" href="./assets/favicon.ico" />
+    <meta name="apple-mobile-web-app-title" content="Mdyna" />
+    <meta name="application-name" content="Mdyna" />
+    <meta name="msapplication-TileColor" content="#00aba9" />
+    <meta name="msapplication-config" content="./assets/browserconfig.xml" />
+    <link rel="manifest" href="./manifest.json" />
+    <meta name="theme-color" content="#ffffff" />
+    <!--
     manifest.json provides metadata used when your web app is added to the
     homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
   -->
-  <link rel="manifest" href="./config/manifest.json">
-  <script>
-    if (window.require) {
-      var electron = require('electron');
-      var appVersion = electron.remote.getGlobal('appVersion');
-      var serverHost = electron.remote.getGlobal('serverHost');
-      var storage = electron.remote.getGlobal('storage');
-    }
-  </script>
-  <!--
+    <link rel="manifest" href="./config/manifest.json" />
+    <script>
+      if (window.require) {
+        var electron = require("electron");
+        var appVersion = electron.remote.getGlobal("appVersion");
+        var serverHost = electron.remote.getGlobal("serverHost");
+        var storage = electron.remote.getGlobal("storage");
+      }
+    </script>
+    <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -37,12 +56,34 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <title>Mdyna</title>
-</head>
+    <title>Mdyna</title>
+  </head>
 
-<body>
-  <div id="root"></div>
-  <!--
+  <body>
+    <header id="titlebar">
+      <div id="drag-region">
+        <span class="title">
+          <img src="../resources/MdynaLogoCircle.png" style="height:24px"/>
+          mdyna
+        </span>
+        <div id="window-controls">
+          <div class="button" id="min-button">
+            <span>&#xE921;</span>
+          </div>
+          <div class="button" id="max-button">
+            <span>&#xE922;</span>
+          </div>
+          <div class="button" id="restore-button">
+            <span>&#xE923;</span>
+          </div>
+          <div class="button" id="close-button">
+            <span>&#xE8BB;</span>
+          </div>
+        </div>
+      </div>
+    </header>
+    <div id="root"></div>
+    <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -52,7 +93,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-    <footer>
-    </footer>
-</body>
-</html>
+    <footer></footer>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -28,7 +28,8 @@ app.on('ready', () => {
     minHeight: 600,
     show: false,
     center: true,
-    title: 'Mdyna',
+    frame: false,
+    title: 'mdyna',
     nodeIntegrationInWorker: true,
     titleBarStyle: 'hidden',
     webPreferences: {