Added button to see full changelog

BERNARDO31P · Sep 28, 2022 · 3497e12 · 3497e12
1 parent 6e98cb8
commit 3497e12
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 71 deletions.
diff --git a/app/assets/css/style.min.css b/app/assets/css/style.min.css
diff --git a/app/assets/css/style.min.css.map b/app/assets/css/style.min.css.map
diff --git a/app/assets/js/script.js b/app/assets/js/script.js
@@ -1,4 +1,4 @@
-const {ipcRenderer} = require('electron');
+const {ipcRenderer, shell} = require('electron');
 import * as tools from "./tools.js";
 
 // TODO: Comment
@@ -40,4 +40,9 @@ window.onload = async function () {
     });
 
     ipcRenderer.send("lang", tools.selectedLang ?? tools.getCookie("lang") ?? "en");
-}
+}
+
+// TODO: Comment
+tools.bindEvent("click", "button[data-href]", function () {
+    shell.openExternal(this.getAttribute("data-href"));
+})
diff --git a/app/assets/js/tools.js b/app/assets/js/tools.js
@@ -551,7 +551,7 @@ export async function getChildProcessRecursive(ppid) {
 // TODO: Comment
 export function selectOption(option) {
     let select = option.closest(".select");
-    let button = select.querySelector(".button");
+    let button = select.querySelector("div");
 
     let selected = select.querySelector("[aria-selected='true']");
     selected.ariaSelected = "false";
@@ -807,6 +807,7 @@ export function setTheme(themeSet) {
     setCookie("theme", themeSet);
 }
 
+// TODO: Comment
 function addLeadingZero(string, size) {
     let count = Number(size) - string.toString().length;
 

diff --git a/app/assets/scss/style.scss b/app/assets/scss/style.scss
@@ -164,6 +164,21 @@ progress::-webkit-progress-bar {
 }
 
 settings {
+  position: absolute;
+  left: 0;
+  top: 100%;
+  z-index: 1;
+
+  display: none;
+
+  & > div:not(.toggle) {
+    margin: 15px 0 0 0;
+  }
+
+  .audioSettings, .videoSettings {
+    display: none;
+  }
+
   #nav {
     margin: 0 !important;
     padding: 0 !important;
@@ -197,6 +212,11 @@ settings {
   }
 }
 
+#link-count {
+  font-size: 13px;
+  opacity: 0;
+}
+
 #contextMenu {
   position: absolute;
 
@@ -257,60 +277,6 @@ settings {
   }
 }
 
-#info {
-  background-color: var(--body-background);
-
-  z-index: 2;
-  overflow: auto;
-
-  display: none;
-  position: fixed;
-
-  width: 500px;
-  height: 450px;
-
-  left: 0;
-  right: 0;
-
-  margin: 5% auto;
-  padding: 0 20px;
-
-  border-top: 20px solid var(--body-background);
-  border-bottom: 20px solid var(--body-background);
-  border-radius: 5px;
-
-  box-shadow: 1px 1px 1px var(--shadow-dark), -1px -1px 1px var(--shadow-light);
-
-  #dynamic {
-    white-space: pre-wrap;
-  }
-
-  &.show {
-    display: initial;
-
-    & ~ settings {
-      filter: blur(2px);
-    }
-  }
-}
-
-.toggle {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-
-  position: absolute;
-  top: 10px;
-
-  border-radius: 20px;
-  height: 40px;
-  width: 40px;
-}
-
-.theme-toggler {
-  right: 25px;
-}
-
 #info-close {
   position: absolute;
 
@@ -355,26 +321,63 @@ settings {
   }
 }
 
-settings {
-  position: absolute;
-  left: 0;
-  top: 100%;
-  z-index: 1;
+#info {
+  background-color: var(--body-background);
+
+  z-index: 2;
+  overflow: auto;
 
   display: none;
+  position: fixed;
 
-  & > div:not(.toggle) {
-    margin: 15px 0 0 0;
+  width: 500px;
+  height: 450px;
+
+  left: 0;
+  right: 0;
+
+  margin: 5% auto;
+  padding: 0 20px;
+
+  border-top: 20px solid var(--body-background);
+  border-bottom: 20px solid var(--body-background);
+  border-radius: 5px;
+
+  box-shadow: 1px 1px 1px var(--shadow-dark), -1px -1px 1px var(--shadow-light);
+
+  #dynamic {
+    white-space: pre-wrap;
   }
 
-  .audioSettings, .videoSettings {
-    display: none;
+  &.show {
+    display: initial;
+
+    & ~ settings {
+      filter: blur(2px);
+    }
   }
 }
 
-#link-count {
-  font-size: 13px;
-  opacity: 0;
+.text-button {
+  padding: 5px 10px;
+  margin: 10px 0 5px 0;
+}
+
+.toggle {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  position: absolute;
+  top: 10px;
+
+  border-radius: 20px;
+  height: 40px;
+  width: 40px;
+}
+
+.theme-toggler {
+  right: 25px;
 }
 
 .divider {

diff --git a/app/index.html b/app/index.html
@@ -17,6 +17,7 @@
             <p>© 2022 BERNARDO.FM - All rights reserved</p>
         </div>
         <div id="dynamic"></div>
+        <button class="text-button" data-href="https://github.com/BERNARDO31P/FastDownloader/releases">See full changelog</button>
     </div>
     <main></main>
     <settings></settings>