beta v3.0.1

ModuleArt · Oct 1, 2019 · 002fb0f · 002fb0f
1 parent 2a56fb3
commit 002fb0f
Show file tree

Hide file tree

Showing 15 changed files with 465 additions and 89 deletions.
diff --git a/css/modules/titlebar.css b/css/modules/titlebar.css
@@ -0,0 +1,128 @@
+/*
+.########.####.########.##.......########.########.....###....########.
+....##.....##.....##....##.......##.......##.....##...##.##...##.....##
+....##.....##.....##....##.......##.......##.....##..##...##..##.....##
+....##.....##.....##....##.......######...########..##.....##.########.
+....##.....##.....##....##.......##.......##.....##.#########.##...##..
+....##.....##.....##....##.......##.......##.....##.##.....##.##....##.
+....##....####....##....########.########.########..##.....##.##.....##
+*/
+
+#titlebar-icon {
+    float: left;
+    padding: 8px;
+  }
+
+  #titlebar-title {
+    position: absolute;
+    top: 6px;
+    left: 30px;
+  }
+
+  #drag-zone {
+    -webkit-app-region: drag;
+    position: absolute;
+    left: 4px;
+    right: 4px;
+    top: 4px;
+    bottom: calc(100% - 32px);
+    z-index: -100;
+  }
+
+  #titlebar {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    height: 33px;
+    border-bottom: 1px solid var(--color-border);
+    background-color: var(--color-element);
+  }
+
+  #titlebar-icon {
+    padding: 8px;
+  }
+
+  #window-controls #close-btn:hover {
+    background-color: #E81022;
+    color: white;
+    opacity: 1 !important;
+  }
+
+  #titlebar-label {
+    position: absolute;
+    top: 6px;
+    left: 34px;
+    font-size: var(--px-font);
+    color: var(--color-top);
+  }
+
+#titlebar.blur #titlebar-label {
+  opacity: 0.5;
+}
+
+  #titlebar.blur #window-controls .button, #titlebar.blur .theme-icon, #window-controls .button:active, #window-controls #close-btn:active {
+    opacity: 0.5 !important;
+  }
+
+  /*
+  .##......##.####.##....##.....######...#######..##....##.########.########...#######..##........######.
+  .##..##..##..##..###...##....##....##.##.....##.###...##....##....##.....##.##.....##.##.......##....##
+  .##..##..##..##..####..##....##.......##.....##.####..##....##....##.....##.##.....##.##.......##......
+  .##..##..##..##..##.##.##....##.......##.....##.##.##.##....##....########..##.....##.##........######.
+  .##..##..##..##..##..####....##.......##.....##.##..####....##....##...##...##.....##.##.............##
+  .##..##..##..##..##...###....##....##.##.....##.##...###....##....##....##..##.....##.##.......##....##
+  ..###..###..####.##....##.....######...#######..##....##....##....##.....##..#######..########..######.
+  */
+
+  #window-controls {
+    -webkit-app-region: no-drag;
+    float: right;
+    height: 32px;
+    display: grid;
+    grid-template-columns: repeat(3, 46px);
+  }
+
+  #window-controls.linux {
+    grid-template-columns: repeat(1, 32px);
+  }
+
+  #window-controls span {
+    font-family: SegMDL2;
+    font-size: 10px;
+  }
+
+  #window-controls .nav-btn {
+    grid-row: 1 / span 1;
+    border-radius: 0;
+    width: 34px;
+    height: 34px;
+    margin: -1px;
+    border: none;
+    background-color: transparent;
+    border: 1px solid transparent;
+  }
+
+  #window-controls .nav-btn:hover {
+    background-color: var(--color-second);
+    border-color: var(--color-border);
+  }
+
+  #window-controls .nav-btn:focus {
+    border-color: var(--color-border);
+  }
+
+  #window-controls .nav-btn:active {
+    background-color: var(--color-border);
+  }
+
+  #window-controls .button {
+    grid-row: 1 / span 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    color: var(--color-top);
+    transition: background-color 0.25s;
+  }
diff --git a/css/settings.css b/css/settings.css
@@ -57,7 +57,6 @@
 */
 
 body {
-    border-top: 1px solid var(--color-border);
     padding: 0;
     margin: 0;
     overflow: hidden;
@@ -76,11 +75,11 @@ body {
 .sidebar {
     position: absolute;
     left: 0;
-    top: 0;
+    top: 33px;
     bottom: 0;
-    width: 30%;
+    width: 35%;
     border-right: 1px solid var(--color-border);
-    padding: 2px;
+    padding: 16px;
 }
 
 .sidebar button {
@@ -106,9 +105,9 @@ hr {
 .container {
     position: absolute;
     right: 0;
-    top: 0;
+    top: 33px;
     bottom: 0;
-    width: 70%;
+    width: 65%;
     animation: append-center;
     animation-duration: 0.25s;
     display: none;

diff --git a/html/browser.html b/html/browser.html
@@ -40,44 +40,7 @@
       <button id="menu-btn" class='nav-btn' title="Menu" onclick="requestSideMenu()"><img name="menu-16" class="theme-icon"></button>
     </div>
 
-    <main>
-      <!-- <div id="sidebar" style="display: none;" class="hide">
-        <div id="sidebar-div">
-          <button class="nav-btn" title="Hide sidebar" onclick="hideSidebar()"><img name='forward-16' class='theme-icon'></button>
-          <hr>
-          <button id="bookmarks-btn" class="nav-btn tab-btn active" onclick="goToBookmarksTab()" title="Bookmarks">
-            <img class="theme-icon" name="bookmarks-16">
-            <label>Bookmarks</label>
-          </button>
-          <button id="history-btn" class="nav-btn tab-btn" onclick="goToHistoryTab()" title="History">
-            <img class="theme-icon" name="history-16">
-            <label>History</label>
-          </button>
-          <button id="downloads-btn" class="nav-btn tab-btn" onclick="goToDownloadsTab()" title="Downloads">
-            <img class="theme-icon" name="download-16">
-            <label>Downloads</label>
-          </button>
-          <hr>
-          <button id="certificate-btn" class="nav-btn tab-btn" onclick="goToCertificateTab()" title="Certificate">
-            <img class="theme-icon" name="license-16">
-            <label>Certificate</label>
-          </button>
-          <hr>
-          <button id="settings-btn" class="nav-btn tab-btn" onclick="goToSettingsTab()" title="Settings">
-            <img class="theme-icon" name="settings-16">
-            <label>Settings</label>
-          </button>
-          <button id="about-btn" class="nav-btn tab-btn" onclick="goToAboutTab()" title="About">
-            <img class="theme-icon" name="about-16">
-            <label>About</label>
-          </button>
-          <button id="pin-sidebar-btn" class='nav-btn' title="Toggle pin sidebar" onclick="pinSidebar()"><img name='pin-16' class='theme-icon'></button>
-          <button id="resize-sidebar-btn" class='nav-btn' title="Toggle collapse sidebar" onclick="collapseSidebar()"><img name='resize-horizontal-16' class='theme-icon'></button>
-        </div>
-        <webview id="sidebar-webview" nodeintegration src="../html/bookmarks.html"></webview>
-      </div> -->
-      <div id="notif-panel"></div>
-    </main>
+    <div id="notif-panel"></div>
 
     <!-- <center id="find-panel" style="display: none;" class="hide">
       <img name="search-16" class="theme-icon find-panel-icon">

diff --git a/html/overlay.html b/html/overlay.html
@@ -40,6 +40,7 @@
                         <button name="naver" class="nav-btn search-engine" title="Search with Naver"><img src="../imgs/engines/naver.png"></button>
                         <button name="qwant" class="nav-btn search-engine" title="Search with Qwant"><img src="../imgs/engines/qwant.png"></button>
                         <button name="youtube" class="nav-btn search-engine" title="Search with YouTube"><img src="../imgs/engines/youtube.png"></button>
+                        <button name="ecosia" class="nav-btn search-engine" title="Search with Ecosia"><img src="../imgs/engines/ecosia.png"></button>
                     </div>
                 </div>
             </div>

diff --git a/html/settings.html b/html/settings.html
@@ -8,9 +8,17 @@
         <link rel="stylesheet" href="../css/modules/checkbox.css">
         <link rel="stylesheet" href="../css/modules/radio.css">
         <link rel="stylesheet" href="../css/modules/link.css">
+        <link rel="stylesheet" href="../css/modules/titlebar.css">
         <link rel="stylesheet" href="../css/settings.css">
     </head>
     <body>
+        <div id="drag-zone"></div>
+        <div id="titlebar">
+            <img id="titlebar-icon" class="theme-icon" name="settings-16">
+            <label id="titlebar-label">Settings</label>
+            <div id="window-controls"></div>
+        </div>
+
         <div class="sidebar" id="sidebar">
             <button class="nav-btn active" onclick="showCategory('themes')">
                 <img name="theme-16" class="theme-icon">

diff --git a/imgs/engines/ecosia.png b/imgs/engines/ecosia.png
diff --git a/js/settings.js b/js/settings.js
@@ -17,6 +17,7 @@ const loadFileFromJsonFolder = require("../modules/loadFileFromJsonFolder.js");
 const loadTheme = require("../modules/loadTheme.js");
 const applyTheme = require("../modules/applyTheme.js");
 const bytesToSize = require("../modules/bytesToSize.js");
+const applyWinControls = require("../modules/applyWinControls.js");
 
 /*
  ###### #    # #    #  ####              ##### #    # ###### #    # ######  ####
@@ -94,6 +95,19 @@ function requestTheme(theme) {
   });
 }
 
+/*
+ ###### #    # #    #  ####              #    # # #    # #####   ####  #    #
+ #      #    # ##   # #    #             #    # # ##   # #    # #    # #    #
+ #####  #    # # #  # #         #####    #    # # # #  # #    # #    # #    #
+ #      #    # #  # # #                  # ## # # #  # # #    # #    # # ## #
+ #      #    # #   ## #    #             ##  ## # #   ## #    # #    # ##  ##
+ #       ####  #    #  ####              #    # # #    # #####   ####  #    #
+*/
+
+function closeWindow() {
+  ipcRenderer.send("settings-closeWindow");
+}
+
 /*
  ###### #    # #    #  ####              #####   ##   #####      ####  #       ####   ####  ###### #####
  #      #    # ##   # #    #               #    #  #  #    #    #    # #      #    # #      #      #    #
@@ -279,6 +293,23 @@ ipcRenderer.on("action-set-cache-size", (event, arg) => {
   document.getElementById("cache-size-label").innerHTML = "Cache size: " + bytesToSize(arg.cacheSize);
 });
 
+/*
+ # #####   ####              #    # # #    # #####   ####  #    #
+ # #    # #    #             #    # # ##   # #    # #    # #    #
+ # #    # #         #####    #    # # # #  # #    # #    # #    #
+ # #####  #                  # ## # # #  # # #    # #    # # ## #
+ # #      #    #             ##  ## # #   ## #    # #    # ##  ##
+ # #       ####              #    # # #    # #####   ####  #    #
+*/
+
+ipcRenderer.on("window-blur", (event) => {
+  document.getElementById("titlebar").classList.add("blur");
+});
+
+ipcRenderer.on("window-focus", (event) => {
+  document.getElementById("titlebar").classList.remove("blur");
+});
+
 /*
  # #    # # #####
  # ##   # #   #
@@ -289,6 +320,8 @@ ipcRenderer.on("action-set-cache-size", (event, arg) => {
 */
 
 function init() {
+  applyWinControls("only-close");
+
   updateTheme();
 
   loadThemesFromFolder();

diff --git a/main.js b/main.js
@@ -371,6 +371,10 @@ ipcMain.on("action-open-settings", (event) => {
   showSettingsWindow();
 });
 
+ipcMain.on("settings-closeWindow", (event) => {
+  settingsWindow.close();
+});
+
 /*
  # #####   ####               ####  #    # ###### #####  #        ##   #   #
  # #    # #    #             #    # #    # #      #    # #       #  #   # #
@@ -664,6 +668,7 @@ function showSettingsWindow() {
       settingsWindow = new BrowserWindow({
         title: "Settings",
         modal: true,
+        frame: false,
         parent: mainWindow,
         width: 640, height: 480,
         resizable: false,
@@ -677,6 +682,14 @@ function showSettingsWindow() {
 
       settingsWindow.loadFile(app.getAppPath() + "/html/settings.html");
 
+      settingsWindow.on("focus", () => {
+        settingsWindow.webContents.send("window-focus");
+      });
+
+      settingsWindow.on("blur", () => {
+        settingsWindow.webContents.send("window-blur");
+      });
+
       settingsWindow.once("ready-to-show", () => {
         settingsWindow.show();
         // settingsWindow.webContents.openDevTools();
@@ -747,22 +760,31 @@ function showMainWindow() {
       });
 
       mainWindow.on("resize", () => {
-        // overlay.refreshBounds();
+        setTimeout(() => {
+
+          overlay.refreshBounds();
+        }, 150);
+        if(tabManager.hasActiveTab()) {
+            tabManager.getActiveTab().activate();
+          }
       });
 
       mainWindow.on("maximize", () => {
         mainWindow.webContents.send("window-maximize");
-        if(tabManager.hasActiveTab()) {
-          tabManager.getActiveTab().activate();
-        }
+        // if(tabManager.hasActiveTab()) {
+        //   tabManager.getActiveTab().activate();
+        // }
+        // setTimeout(() => {
+        //   overlay.refreshBounds();
+        // }, 150);
         // overlay.refreshBounds();
       });
 
       mainWindow.on("unmaximize", () => {
         mainWindow.webContents.send("window-unmaximize");
-        if(tabManager.hasActiveTab()) {
-          tabManager.getActiveTab().activate();
-        }
+        // if(tabManager.hasActiveTab()) {
+        //   tabManager.getActiveTab().activate();
+        // }
         // overlay.refreshBounds();
       });