adding dark mode, file reconfigure

TeselaGen · Sep 23, 2019 · 041ea40 · 041ea40
1 parent ff9c67c
commit 041ea40
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 78 deletions.
diff --git a/README.md b/README.md
@@ -9,15 +9,15 @@ yarn start
 
 # Releasing 
 1. Bump the package.json version number
-
-2. Build windows and mac 
+2. Commit your changes
+3. Build windows and mac 
 ```
 yarn deploy
 ```
 wait for it to finish
 
-3. Go to https://github.com/tnrich/ove-electron/releases 
-4. Edit the most recently pushed release to publish it
+4. Go to https://github.com/tnrich/ove-electron/releases 
+5. Edit the most recently pushed release to publish it
 
 How auto-updating works :
 https://medium.com/@johndyer24/creating-and-deploying-an-auto-updating-electron-app-for-mac-and-windows-using-electron-builder-6a3982c0cee6
diff --git a/index.html b/index.html
@@ -11,22 +11,12 @@
       type="text/css"
       href="node_modules/open-vector-editor/umd/main.css"
     />
-    <style>
-      #notification {
-        position: fixed;
-        bottom: 20px;
-        left: 20px;
-        width: 200px;
-        z-index: 1000000;
-        padding: 20px;
-        border-radius: 5px;
-        background-color: white;
-        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-      }
-      .hidden {
-        display: none;
-      }
-    </style>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="src/style.css"
+    />
+
     <div id="notification" class="hidden">
       <p id="message"></p>
       <button id="close-button" onClick="closeNotification()">
@@ -36,55 +26,14 @@
         Restart
       </button>
     </div>
+
+    <span title="Dark Mode" onclick="toggleDarkMode(); return false" class="darkModeBtn bp3-icon-standard bp3-icon-moon"></span>
     <script
       type="text/javascript"
       src="node_modules/open-vector-editor/umd/open-vector-editor.js"
     ></script>
     <script src="./src/renderer.js"></script>
-    <script>
-      const notification = document.getElementById("notification");
-      const message = document.getElementById("message");
-      const restartButton = document.getElementById("restart-button");
-      ipcRenderer.on("checking-for-update", () => {
-        ipcRenderer.removeAllListeners("checking-for-update");
-        message.innerText = "Checking for updates...";
-        notification.classList.remove("hidden");
-      });
-      // ipcRenderer.on("update-not-available", () => {
-      //   ipcRenderer.removeAllListeners("update-not-available");
-      //   message.innerText = "No updates available";
-      //   notification.classList.remove("hidden");
-      //   setTimeout(() => {
-      //     notification.classList.add("hidden");
-      //   }, 2000);
-      // });
-      ipcRenderer.on("download-progress", (e, text) => {
-        message.innerText = "Downloading: " + text;
-        notification.classList.remove("hidden"); //tnrtodo comment this out
-      });
-      ipcRenderer.on("error", (e, text) => {
-        ipcRenderer.removeAllListeners("error");
-        message.innerText = "Error updating: " + text;
-      });
-      ipcRenderer.on("update_available", () => {
-        ipcRenderer.removeAllListeners("update_available");
-        message.innerText = "A new update is available. Downloading now...";
-        notification.classList.remove("hidden");
-      });
-      ipcRenderer.on("update_downloaded", () => {
-        ipcRenderer.removeAllListeners("update_downloaded");
-        message.innerText =
-          "Update Downloaded. It will be installed on restart. Restart now?";
-        restartButton.classList.remove("hidden");
-        notification.classList.remove("hidden");
-      });
-
-      function closeNotification() {
-        notification.classList.add("hidden");
-      }
-      function restartApp() {
-        ipcRenderer.send("restart_app");
-      }
-    </script>
+    <script src="./src/renderer_utils/autoUpdate.js"></script>
+    <script src="./src/renderer_utils/darkMode.js"></script>
   </body>
 </html>
diff --git a/main.js b/main.js
@@ -4,7 +4,7 @@ const { app, BrowserWindow, ipcMain } = require("electron");
 const path = require("path");
 const bioParsers = require("bio-parsers");
 const fs = require("fs");
-const createMenu = require("./src/utils/menu");
+const createMenu = require("./src/main_utils/menu");
 const windowStateKeeper = require("electron-window-state");
 const { autoUpdater } = require("electron-updater");
 
@@ -220,15 +220,8 @@ autoUpdater.on("error", err => {
   sendStatusToWindow("error", err);
 });
 autoUpdater.on("download-progress", progressObj => {
-  let log_message = "Download speed: " + progressObj.bytesPerSecond;
-  log_message = log_message + " - Downloaded " + progressObj.percent + "%";
-  log_message =
-    log_message +
-    " (" +
-    progressObj.transferred +
-    "/" +
-    progressObj.total +
-    ")";
+  let log_message =
+    "Download in progress: " + Math.round(progressObj.percent) + "%";
   sendStatusToWindow("download-progress", log_message);
 });
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ove-electron",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "An open source vector/plasmid editor",
   "main": "main.js",
   "scripts": {

diff --git a/src/utils/menu.js → src/main_utils/menu.js b/src/utils/menu.js → src/main_utils/menu.js
diff --git a/src/preload.js b/src/preload.js
@@ -1,4 +1,5 @@
 const electron = require("electron");
+
 const currentWindow = electron.remote.getCurrentWindow();
 const { ipcRenderer } = require("electron");
 Object.assign(window, {

diff --git a/src/renderer.js b/src/renderer.js
@@ -1,3 +1,4 @@
+
 const { currentWindow } = window;
 const seqDataToUse = currentWindow.initialSeqJson || { circular: true };
 // export default generateSequenceData()
@@ -148,6 +149,7 @@ const editor = window.createVectorEditor("createDomNodeForMe", {
   }
 }); /* createDomNodeForMe will make a dom node for you and append it to the document.body*/
 
+const isCircular = seqDataToUse && seqDataToUse.circular
 editor.updateEditor({
   sequenceData: seqDataToUse,
   sequenceDataHistory: {}, //clear the sequenceDataHistory if there is any left over from a previous sequence
@@ -160,13 +162,14 @@ editor.updateEditor({
     [
       {
         // fullScreen: true,
-        active: true,
+        active: !!isCircular,
         id: "circular",
         name: "Circular Map"
       },
       {
         id: "rail",
-        name: "Linear Map"
+        name: "Linear Map",
+        active: !isCircular
       }
     ],
     [

diff --git a/src/renderer_utils/autoUpdate.js b/src/renderer_utils/autoUpdate.js
@@ -0,0 +1,43 @@
+const notification = document.getElementById("notification");
+const message = document.getElementById("message");
+const restartButton = document.getElementById("restart-button");
+window.ipcRenderer.on("checking-for-update", () => {
+  window.ipcRenderer.removeAllListeners("checking-for-update");
+  message.innerText = "Checking for updates...";
+  notification.classList.remove("hidden");
+});
+// window.ipcRenderer.on("update-not-available", () => {
+//   window.ipcRenderer.removeAllListeners("update-not-available");
+//   message.innerText = "No updates available";
+//   notification.classList.remove("hidden");
+//   setTimeout(() => {
+//     notification.classList.add("hidden");
+//   }, 2000);
+// });
+window.ipcRenderer.on("download-progress", (e, text) => {
+  message.innerText = text;
+  notification.classList.remove("hidden"); //tnrtodo comment this out
+});
+window.ipcRenderer.on("error", (e, text) => {
+  window.ipcRenderer.removeAllListeners("error");
+  message.innerText = "Error updating: " + text;
+});
+window.ipcRenderer.on("update_available", () => {
+  window.ipcRenderer.removeAllListeners("update_available");
+  message.innerText = "A new update is available. Downloading now...";
+  notification.classList.remove("hidden");
+});
+window.ipcRenderer.on("update_downloaded", () => {
+  window.ipcRenderer.removeAllListeners("update_downloaded");
+  message.innerText =
+    "Update Downloaded. It will be installed on restart. Restart now?";
+  restartButton.classList.remove("hidden");
+  notification.classList.remove("hidden");
+});
+
+window.closeNotification = function closeNotification() {
+  notification.classList.add("hidden");
+};
+window.restartApp = function restartApp() {
+  window.ipcRenderer.send("restart_app");
+};
diff --git a/src/renderer_utils/darkMode.js b/src/renderer_utils/darkMode.js
@@ -0,0 +1,15 @@
+//run once per window initialization
+if (window.localStorage.getItem("isDarkMode") === "true") {
+  document.body.classList.add("bp3-dark");
+}
+
+window.toggleDarkMode = () => {
+  if (document.body.classList.contains("bp3-dark")) {
+    window.localStorage.setItem("isDarkMode", "false");
+    document.body.classList.remove("bp3-dark");
+  } else {
+    window.localStorage.setItem("isDarkMode", "true");
+
+    document.body.classList.add("bp3-dark");
+  }
+};
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,20 @@
+#notification {
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  width: 200px;
+  z-index: 100000;
+  padding: 20px;
+  border-radius: 5px;
+  background-color: white;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+}
+.hidden {
+  display: none;
+}
+.darkModeBtn {
+  z-index: 100000;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+}