v3.0.3

ModuleArt · Oct 9, 2019 · ecc0b89 · ecc0b89
1 parent 209e439
commit ecc0b89
Show file tree

Hide file tree

Showing 20 changed files with 192 additions and 39 deletions.
diff --git a/css/about.css b/css/about.css
@@ -102,6 +102,7 @@ body {
   margin-top: 32px;
   border-bottom: 1px solid var(--color-border);
   padding: 4px;
+  padding-bottom: 8px;
 }
 
 .block-title img, .block-title label {
@@ -117,7 +118,7 @@ body {
   position: absolute;
   left: 0;
   top: 33px;
-  width: 40%;
+  width: 37%;
   bottom: 0;
   border-right: 1px solid var(--color-border);
 }
@@ -128,7 +129,7 @@ body {
   position: absolute;
   right: 0;
   top: 33px;
-  width: 60%;
+  width: 63%;
   bottom: 0;
   overflow-y: auto;
 }
@@ -137,10 +138,20 @@ label {
   color: var(--color-top);
 }
 
-.nav-btn, .link {
+.nav-btn {
   width: calc(100% - 4px);
 }
 
+.nav-label {
+  padding: 2px;
+  margin: 2px;
+  display: inline-block;
+}
+
+.nav-label.mini {
+  font-size: 12px;
+}
+
 /* theme icon */
 .theme-icon {
   opacity: 0;

diff --git a/css/modules/checkbox.css b/css/modules/checkbox.css
@@ -15,7 +15,7 @@ input[type=checkbox] {
   -webkit-appearance: none;
   appearance: none;
   outline: none;
-  border-radius: var(--px-radius);
+  border-radius: calc(var(--px-radius) + 4px);
   width: 40px;
   height: 24px;
   position: relative;
@@ -41,7 +41,7 @@ input[type=checkbox]::after {
   height: 14px;
   content: "";
   background-color: var(--color-border);
-  border-radius: calc(var(--px-radius) - 4px);
+  border-radius: var(--px-radius);
   transition: 0.25s;
 }
 

diff --git a/css/modules/radio.css b/css/modules/radio.css
@@ -4,7 +4,7 @@ input[type=radio] {
   -webkit-appearance: none;
   appearance: none;
   outline: none;
-  border-radius: var(--px-radius);
+  border-radius: calc(var(--px-radius) + 4px);
   width: 24px;
   height: 24px;
   position: relative;
@@ -30,7 +30,7 @@ input[type=radio]::after {
   height: 14px;
   content: "";
   background-color: var(--color-border);
-  border-radius: calc(var(--px-radius) - 4px);
+  border-radius: var(--px-radius);
   transition: 0.25s;
 }
 

diff --git a/css/overlay.css b/css/overlay.css
@@ -399,11 +399,11 @@ main {
 }
 
 .folder-editor {
-    margin-bottom: 4px;
+    margin-bottom: -1px;
     border: 1px solid var(--color-border);
     background-color: var(--color-back);
     padding: 2px;
-    border-radius: calc(var(--px-radius) + 4px);
+    border-radius: calc(var(--px-radius) + 4px) calc(var(--px-radius) + 4px) 0 0;
     text-align: center;
 }
 
@@ -581,7 +581,7 @@ main {
     outline: none;
     position: relative;
     text-align: left;
-    height: 46px;
+    height: 62px;
     display: inline-block;
     vertical-align: top;
     color: var(--color-top);
@@ -651,7 +651,20 @@ main {
     text-overflow: ellipsis;
     font-size: 10px;
     opacity: var(--opacity-over);
-    margin-bottom: 16px;
+    margin-bottom: 32px;
+}
+
+.history-time {
+    position: absolute;
+    top: 42px;
+    right: 7px;
+    left: 7px;
+    overflow: hidden;
+    white-space: nowrap;
+    word-break: keep-all;
+    text-overflow: ellipsis;
+    font-size: 10px;
+    opacity: var(--opacity-over);
 }
 
 .history-title {

diff --git a/html/about.html b/html/about.html
@@ -28,6 +28,16 @@
       <label id="about-app"></label>
     </div>
     <div class="column-right">
+      <div class="block-title">
+        <img name="info-16" class="theme-icon">
+        <label>Info</label>
+      </div>
+      <label class="nav-label mini">
+        Ferny is a privacy-focused, cross-platform, chromium-based web browser
+        with a greatfull user experience, built on top of Electron, JS and styled-components.
+        It aims to be fast, private, beautiful and functional.
+      </label>
+
       <div class="block-title">
         <img name="download-16" class="theme-icon">
         <label>Updates</label>
@@ -38,8 +48,10 @@
       </button>
       <button class="nav-btn" onclick="openPlannerPage()" title="Trello page">
         <img class="theme-icon" name="calendar-16">
-        <label>Trello planner</label>
+        <label>Updates planner</label>
       </button>
+      <label class="nav-label mini">Feature is missing?</label><button onclick="openIssuesPage()" class="link">Request feature</button>
+
       <div class="block-title">
         <img name="user-16" class="theme-icon">
         <label>Community</label>
@@ -48,6 +60,9 @@
         <img src="../imgs/discord16.png">
         <label>Discord chat</label>
       </button>
+      <label class="nav-label mini">Have a question?</label><button onclick="openDiscordPage()" class="link">Ask here</button>
+      <button onclick="openDiscordPage()" class="link">Help translate this app</button>
+
       <div class="block-title">
         <img name="code-16" class="theme-icon">
         <label>Created by</label>
@@ -58,8 +73,9 @@
       </button>
       <button class="nav-btn" onclick="openDonatePage()" title="Patreon page">
         <img class="theme-icon" name="coin-16">
-        <label>Donate</label>
+        <label>Buy me coffee</label>
       </button>
+      <label class="nav-label mini">Do you want to support?</label><button onclick="openDonatePage()" class="link">Donate</button>
       <div class="block-title">
         <img name="github-16" class="theme-icon">
         <label>GitHub</label>
@@ -72,15 +88,17 @@
         <img class="theme-icon" name="bug-report-16">
         <label>Issues</label>
       </button>
+      <label class="nav-label mini">Found a bug?</label><button class="link" onclick="openIssuesPage()" title="Create new issue on GitHub">Report</button>
       <div class="block-title">
         <img name="license-16" class="theme-icon">
         <label>License</label>
       </div>
-      <label>GPL-3.0</label>
-      <button class="nav-btn" onclick="openLicenseFile()" title="Open license file in new tab">
+      <button class="nav-btn" onclick="openLicensePage()" title="GitHub page">
         <img class="theme-icon" name="file-16">
-        <label>Open file</label>
+        <label>Show license</label>
       </button>
+      <label class="nav-label">GPL-3.0</label>
+      <button class="link" onclick="openLicenseFile()" title="Open license file in new tab">Open file</button>
       <div class="block-title">
         <img name="library-16" class="theme-icon">
         <label>Libraries</label>

diff --git a/html/browser.html b/html/browser.html
@@ -14,7 +14,7 @@
     <div id="drag-zone"></div>
 
     <div id="titlebar">
-      <button id="back-btn" class='nav-btn' title="Go back" onclick="goBack()"><img name="back-16" class="theme-icon"></button>
+      <button id="back-btn" class='nav-btn' title="Go back" onclick="goBack()" oncontextmenu="popupTabHistory()"><img name="back-16" class="theme-icon"></button>
       <button id="forward-btn" class='nav-btn' title="Go forward" onclick="goForward()"><img name="forward-16" class="theme-icon"></button>
       <button id="reload-btn" class='nav-btn' title="Reload this page" onclick="reload()"><img name="reload-16" class="theme-icon"></button>
       <button id="stop-btn" class='nav-btn' title="Stop loading this page" onclick="stop()"><img name="cancel-16" class="theme-icon"></button>

diff --git a/imgs/icons16/swipe-both.png b/imgs/icons16/swipe-both.png
diff --git a/js/about.js b/js/about.js
@@ -90,6 +90,10 @@ function openDiscordPage() {
   ipcRenderer.send("tabManager-addTab", "https://discord.gg/9q4D8SJ", true);
 }
 
+function openLicensePage() {
+  ipcRenderer.send("tabManager-addTab", "https://github.com/ModuleArt/ferny/blob/master/LICENSE", true);
+}
+
 function checkForUpdates() {
   ipcRenderer.send("main-checkForUpdates");
 }

diff --git a/js/browser.js b/js/browser.js
@@ -168,6 +168,10 @@ function bookmarkAllTabs() {
   // });
 }
 
+function popupTabHistory() {
+  ipcRenderer.send("tabManager-popupTabHistory");
+}
+
 /*
  ###### #    # #    #  ####               ####  #    # ###### #####  #        ##   #   #
  #      #    # ##   # #    #             #    # #    # #      #    # #       #  #   # #

diff --git a/main.js b/main.js
@@ -194,6 +194,7 @@ app.on("ready", function() {
   });
 
   loadDownloadCounter();
+  loadDownloadsFolder();
   showMainWindow();
   // loadWelcome();
 });
@@ -582,6 +583,12 @@ ipcMain.on("tabManager-zoomToActualSize", (event) => {
   }
 });
 
+ipcMain.on("tabManager-popupTabHistory", (event) => {
+  if(tabManager.hasActiveTab()) {
+    tabManager.getActiveTab().popupTabHistory();
+  }
+});
+
 /*
  ###### #    # #    #  ####               ####  #    # ###### #####  #        ##   #   #
  #      #    # ##   # #    #             #    # #    # #      #    # #       #  #   # #
@@ -686,6 +693,18 @@ function initTabManager() {
  #       ####  #    #  ####              #####   ####  #    # #    # ######  ####  #    # #####   ####
 */
 
+function loadDownloadsFolder() {
+  try {
+    fs.readFile(ppath + "/json/downloads/downloads-folder.json", (err, data) => {
+      if(!err) {
+        downloadsFolder = data.toString();
+      }      
+    });
+  } catch (e) {
+
+  }
+}
+
 function loadDownloadCounter() {
   try {
     fs.readFile(ppath + "/json/downloads/download-counter.json", (err, data) => {
@@ -1063,7 +1082,7 @@ function initMenu() {
           tabManager.getActiveTab().closeToTheRight(); 
         }
       } }, { 
-      label: "Close others", accelerator: "CmdOrCtrl+Shift+W", click: () => { 
+      label: "Close others", icon: app.getAppPath() + "/imgs/icons16/swipe-both.png", accelerator: "CmdOrCtrl+Shift+W", click: () => { 
         if(tabManager.hasActiveTab()) {
           tabManager.getActiveTab().closeOthers(); 
         }
@@ -1202,7 +1221,7 @@ function initMenu() {
       enabled: false, label: "Clear browsing data", icon: app.getAppPath() + "/imgs/icons16/broom.png", accelerator: "CmdOrCtrl+Shift+Delete", click: () => { 
         // overlay.openSettings('clear-browsing-data'); 
       } }, { type: "separator" }, { 
-      label: "Show overlay", icon: app.getAppPath() + "/imgs/icons16/details.png", accelerator: "F3", click: () => { 
+      label: "Show overlay", icon: app.getAppPath() + "/imgs/icons16/details.png", accelerator: "F1", click: () => { 
         overlay.show(); 
       } }, { 
       label: "Open search", icon: app.getAppPath() + "/imgs/icons16/zoom.png", accelerator: "F6", click: () => { 

diff --git a/modules/BookmarkManager/Bookmark.js b/modules/BookmarkManager/Bookmark.js
@@ -25,12 +25,24 @@ class Bookmark extends EventEmitter {
         this.node.name = id;
         this.node.position = position;
         this.node.innerHTML = `
-            <img class='bookmark-icon' src="http://www.google.com/s2/favicons?domain=` + url + `">
             <img title="Drag here" class="theme-icon bookmark-move" name="move-16">
             <label class='bookmark-name'>` + name + `</label>
             <label class='bookmark-preview'>` + url + `</label>
         `;
-        let color = new GetAvColor(this.node.getElementsByTagName("img")[0]);
+
+        let bookmarkIcon = document.createElement("img");
+        bookmarkIcon.classList.add("bookmark-icon");
+        bookmarkIcon.src = "http://www.google.com/s2/favicons?domain=" + url;
+        bookmarkIcon.onerror = () => {
+            bookmarkIcon.src = __dirname + "/../../imgs/icons16/star.png";
+            let color = new GetAvColor(bookmarkIcon);
+            color.mostUsed(result => {
+                this.node.style.backgroundColor = rgbToRgbaString(result[0]);
+            });
+        };
+        this.node.appendChild(bookmarkIcon);
+
+        let color = new GetAvColor(bookmarkIcon);
         color.mostUsed(result => {
             this.node.style.backgroundColor = rgbToRgbaString(result[0]);
         });

diff --git a/modules/BookmarkManager/BookmarkManager.js b/modules/BookmarkManager/BookmarkManager.js
@@ -56,7 +56,10 @@ class BookmarkManager extends EventEmitter {
     }
 
     addFolder(name) {
-        this.appendFolder(new Folder(this.folderCounter++, name, true));
+        let folder = new Folder(this.folderCounter++, name, true);
+        this.appendFolder(folder);
+        folder.toggleEditor();
+
         this.updateFoldersPositions().then(() => {
             this.saveFolders();
         });
@@ -178,7 +181,9 @@ class BookmarkManager extends EventEmitter {
     }
 
     addBookmarkToFolder(folder, bookmarkName, bookmarkURL) {
-        folder.appendBookmark(new Bookmark(this.bookmarkCounter++, bookmarkName, bookmarkURL));
+        let bookmark = new Bookmark(this.bookmarkCounter++, bookmarkName, bookmarkURL);
+        folder.appendBookmark(bookmark);
+        bookmark.toggleEditor();
     }
 
     moveBookmark(fromFolderId, toFolderId, bookmarkId) {

diff --git a/modules/BookmarkManager/Folder.js b/modules/BookmarkManager/Folder.js
@@ -156,7 +156,7 @@ class Folder extends EventEmitter {
 
     getBookmarkById(id) {
         for(let i = 0; i < this.bookmarks.length; i++) {
-            if(id === this.bookmarks[i].getId()) {
+            if(id == this.bookmarks[i].getId()) {
                 return this.bookmarks[i];
             }
         }
@@ -204,6 +204,8 @@ class Folder extends EventEmitter {
     toggleEditor() {
         let folderEditor = this.node.getElementsByClassName("folder-editor")[0];
         if(folderEditor == null) {
+            this.node.getElementsByClassName("folder-header")[0].style.display = "none";
+
             folderEditor = document.createElement("div");
             folderEditor.classList.add("folder-editor");
             this.node.insertBefore(folderEditor, this.node.firstChild);
@@ -240,6 +242,8 @@ class Folder extends EventEmitter {
             }
             folderEditor.appendChild(deleteBtn);
         } else {
+            this.node.getElementsByClassName("folder-header")[0].style.display = "";
+
             this.node.removeChild(folderEditor);
         }
 

diff --git a/modules/HistoryManager/HistoryItem.js b/modules/HistoryManager/HistoryItem.js
@@ -7,6 +7,8 @@ const fileExtension = require("file-extension");
 
 const extToImagePath = require(__dirname + "/../extToImagePath.js");
 const rgbToRgbaString = require(__dirname + "/../rgbToRgbaString.js");
+const epochToDate = require(__dirname + "/../epochToDate.js");
+const epochToTime = require(__dirname + "/../epochToTime.js");
 
 class HistoryItem extends EventEmitter {
     history = [];
@@ -29,8 +31,9 @@ class HistoryItem extends EventEmitter {
         this.node.name = id;
         this.node.id = "history-" + id;
         this.node.innerHTML = `
-            <label class='history-title'>` + title + `</label>
-            <label class='history-url'>` + url + `</label>
+            <label class='history-title'>${title}</label>
+            <label class='history-url'>${url}</label>
+            <label class="history-time">${epochToDate(time)} / ${epochToTime(time)}</label>
         `;        
         this.node.onclick = () => {
             this.open();