From b65cb550e0e26b2cf290573248fe28e341fa4807 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Mon, 16 May 2022 00:33:10 +0200 Subject: general improvements Made the UI slightly bigger, and the mod elements aren't on their own line, this allows you to see more at once while it being bigger and more telligble, before it was kind of empty. --- src/app/main.css | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) (limited to 'src/app') diff --git a/src/app/main.css b/src/app/main.css index 99d806c..7b54ec7 100644 --- a/src/app/main.css +++ b/src/app/main.css @@ -120,9 +120,14 @@ button { 100% {opacity: 1.0} } +#browserEntries { + display: flex; + flex-wrap: wrap; +} + .popup .el, .popup .misc, .popup .loading { --spacing: calc(var(--padding) / 2); - --height: calc(var(--padding) * 3); + --height: calc(var(--padding) * 3.5); --mischeight: calc(var(--padding) * 1.5); animation-duration: 0.15s; @@ -144,7 +149,7 @@ button { padding: var(--spacing); background: var(--selbg); border-radius: var(--spacing); - width: calc(100% - var(--spacing) * 4); + width: calc(50% - var(--spacing) * 4); } .popup .misc, .popup #search, .option .actions input { @@ -196,6 +201,7 @@ button { width: 100%; color: white; display: flex; + position: absolute; text-align: center; align-items: center; justify-content: center; -- cgit v1.2.3 From 0b893f9f2b01196b583222df072ae51631457649 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Mon, 16 May 2022 20:09:43 +0200 Subject: a lot of stuff, but mainly a "Load more..." button In the past when more than 50 packages was loaded it'd simply display a "Maximum packages loaded" message, and it wasn't actually 50, as it just took the first 50 packages loaded, whether or not they were filtered out, so now that's fixed and a "Load more..." button has been added. With that comes some changes to the lang strings for "gui.browser.endoflist" and a new one "gui.browser.loadmore". I also fixed the filtered packages issue also occurring in searches. This will overall allow a user to more easily find the maximum amount of packages without loading literally over a hundred packages at once, not good for performance... --- src/app/browser.js | 89 +++++++++++++++++++++++++++++++++++++++++++++++++----- src/app/main.css | 4 +++ src/lang/en.json | 3 +- 3 files changed, 87 insertions(+), 9 deletions(-) (limited to 'src/app') diff --git a/src/app/browser.js b/src/app/browser.js index 5c943ba..0646ad1 100644 --- a/src/app/browser.js +++ b/src/app/browser.js @@ -2,9 +2,21 @@ const Fuse = require("fuse.js"); var fuse; var packages = []; +var packagecount = 0; + var Browser = { maxentries: 50, filters: { + getpkgs: () => { + let pkgs = []; + for (let i in packages) { + if (! Browser.filters.isfiltered(packages[i].categories)) { + pkgs.push(packages[i]); + } + } + + return pkgs; + }, get: () => { let filtered = []; let unfiltered = []; @@ -81,6 +93,8 @@ var Browser = { }, loadfront: async () => { Browser.loading(); + + packagecount = 0; if (packages.length < 1) { packages = await (await fetch("https://northstar.thunderstore.io/api/v1/package/")).json(); @@ -90,8 +104,15 @@ var Browser = { }) } - for (let i in packages) { - new BrowserElFromObj(packages[i]); + let pkgs = Browser.filters.getpkgs(); + for (let i in pkgs) { + if (packagecount >= Browser.maxentries) { + Browser.endoflist(); + break + } + + new BrowserElFromObj(pkgs[i]); + packagecount++; } }, loading: (string) => { @@ -107,9 +128,31 @@ var Browser = { browserEntries.innerHTML = `
${lang('gui.browser.loading')}
`; } }, - endoflist: () => { - if (browserEntries.querySelector(".message")) {return} - browserEntries.innerHTML += `
${lang('gui.browser.endoflist')}
` + endoflist: (isEnd) => { + let pkgs = []; + let filtered = Browser.filters.getpkgs(); + for (let i = 0; i < filtered.length; i++) { + if ([packagecount + i]) { + pkgs.push(filtered[packagecount + i]); + } else { + break + } + } + + if (browserEntries.querySelector(".message")) { + browserEntries.querySelector(".message").remove(); + } + + if (pkgs.length == 0 || isEnd) { + browserEntries.innerHTML += `
${lang('gui.browser.endoflist')}
` + return + } + + browserEntries.innerHTML += `
` + loadmore.addEventListener("click", () => { + Browser.loadpkgs(pkgs); + Browser.endoflist(pkgs); + }) }, search: (string) => { Browser.loading(); @@ -120,8 +163,14 @@ var Browser = { return } + packagecount = 0; + + let count = 0; for (let i = 0; i < res.length; i++) { + if (count >= Browser.maxentries) {break} + if (Browser.filters.isfiltered(res[i].item.categories)) {continue} new BrowserElFromObj(res[i].item); + count++; } }, setbutton: (mod, string) => { @@ -157,6 +206,33 @@ var Browser = { } }, 1501) } + }, + loadpkgs: (pkgs, clear) => { + if (clear) {packagecount = 0} + + if (browserEntries.querySelector(".message")) { + browserEntries.querySelector(".message").remove(); + } + + let count = 0; + for (let i in pkgs) { + if (count >= Browser.maxentries) { + if (pkgs[i] === undefined) { + Browser.endoflist(true); + } + + Browser.endoflist(); + console.log(pkgs) + break + } + + try { + new BrowserElFromObj(pkgs[i]) + }catch(e) {} + + count++; + packagecount++; + } } } @@ -179,9 +255,6 @@ function BrowserElFromObj(obj) { function BrowserEl(properties) { if (Browser.filters.isfiltered(properties.categories)) {return} - let entries = browser.querySelectorAll(".el").length; - if (entries == Browser.maxentries) {Browser.endoflist();return} - properties = { title: "No name", version: "1.0.0", diff --git a/src/app/main.css b/src/app/main.css index 7b54ec7..d7f8284 100644 --- a/src/app/main.css +++ b/src/app/main.css @@ -245,6 +245,10 @@ button { font-weight: 700; } +.popup .message #loadmore { + background: rgb(var(--blue2)); +} + .popup .el .description {font-size: 0.8em} .popup .el button { background: rgb(var(--blue)); diff --git a/src/lang/en.json b/src/lang/en.json index 024b44a..345a83c 100644 --- a/src/lang/en.json +++ b/src/lang/en.json @@ -77,7 +77,8 @@ "gui.browser.install": "Install", "gui.browser.reinstall": "Re-Install", "gui.browser.loading": "Loading mods...", - "gui.browser.endoflist": "Maximum packages has been loaded.
Use the search for finding other packages!", + "gui.browser.loadmore": "Load more...", + "gui.browser.endoflist": "All packages have been loaded.", "gui.browser.noresults": "No results...", "gui.browser.filter.mods": "Mods", "gui.browser.filter.skins": "Skins", -- cgit v1.2.3 From 716a05ed8673302129aecfc10f680cbf1fa882c7 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Mon, 16 May 2022 20:14:42 +0200 Subject: majorly improved performance Instead of setting the innerHTML every single time an element get added it now just appends them like you should be doing, but I was lazy when I wrote the original code I guess. Not only does this improve performance, but it also fixes the CSS fade animation not making every mod element/entry flicker, and instead now it only does it on the new ones, like intended. --- src/app/browser.js | 45 ++++++++++++++++++++++++++++----------------- 1 file changed, 28 insertions(+), 17 deletions(-) (limited to 'src/app') diff --git a/src/app/browser.js b/src/app/browser.js index 0646ad1..4d14885 100644 --- a/src/app/browser.js +++ b/src/app/browser.js @@ -144,11 +144,11 @@ var Browser = { } if (pkgs.length == 0 || isEnd) { - browserEntries.innerHTML += `
${lang('gui.browser.endoflist')}
` + Browser.msg(`${lang('gui.browser.endoflist')}`) return } - browserEntries.innerHTML += `
` + Browser.msg(``) loadmore.addEventListener("click", () => { Browser.loadpkgs(pkgs); Browser.endoflist(pkgs); @@ -233,6 +233,13 @@ var Browser = { count++; packagecount++; } + }, + msg: (html) => { + let msg = document.createElement("div"); + msg.classList.add("message"); + msg.innerHTML = html; + + browserEntries.appendChild(msg); } } @@ -304,23 +311,27 @@ function BrowserEl(properties) { } } } - - browserEntries.innerHTML += ` -
-
- - -
-
-
${properties.title}
-
${properties.description}
- - - - -
+ + let entry = document.createElement("div"); + entry.classList.add("el"); + entry.id = `mod-${normalize(properties.title)}`; + + entry.innerHTML = ` +
+ + +
+
+
${properties.title}
+
${properties.description}
+ + + +
` + + browserEntries.appendChild(entry); } ipcRenderer.on("removedmod", (event, mod) => { -- cgit v1.2.3 From 31545f96ac56e0bbc7d0ed59f86015d693d464d9 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Mon, 16 May 2022 23:51:26 +0200 Subject: added mod preview browser Instead of opening your normal web browser you can now just open the page inside Viper, many changes aren't finished yet, notably the webview.css file. At some point I'll split the main.css into more files so the folder makes sense even though there's currently only one file in there. --- src/app/browser.js | 29 ++++++++++++++++++++++++++--- src/app/css/webview.css | 1 + src/app/index.html | 8 ++++++++ src/app/main.css | 21 +++++++++++++++++++++ src/index.js | 1 + 5 files changed, 57 insertions(+), 3 deletions(-) create mode 100644 src/app/css/webview.css (limited to 'src/app') diff --git a/src/app/browser.js b/src/app/browser.js index 4d14885..b3b1b59 100644 --- a/src/app/browser.js +++ b/src/app/browser.js @@ -83,6 +83,7 @@ var Browser = { Browser.filters.toggle(false); overlay.classList.remove("shown") browser.classList.remove("shown") + preview.classList.remove("shown") return } } @@ -243,6 +244,20 @@ var Browser = { } } +var view = document.querySelector(".popup#preview webview"); +var Preview = { + show: () => { + preview.classList.add("shown") + }, + hide: () => { + preview.classList.remove("shown") + }, + set: (url, autoshow) => { + if (autoshow != false) {Preview.show()} + view.src = url; + } +} + function BrowserElFromObj(obj) { let pkg = {...obj, ...obj.versions[0]}; @@ -325,7 +340,7 @@ function BrowserEl(properties) {
${properties.title}
${properties.description}
- +
@@ -413,8 +428,16 @@ search.addEventListener("keyup", () => { } }) -browser.addEventListener("scroll", () => { - Browser.filters.toggle(false); +let events = ["scroll", "mousedown", "touchdown"]; +events.forEach((event) => { + browser.addEventListener(event, () => { + Preview.hide(); + Browser.filters.toggle(false); + }) +}); + +view.addEventListener("dom-ready", () => { + view.insertCSS(fs.readFileSync(__dirname + "/css/webview.css", "utf8")); }) let checks = document.querySelectorAll(".check"); diff --git a/src/app/css/webview.css b/src/app/css/webview.css new file mode 100644 index 0000000..4a3fd85 --- /dev/null +++ b/src/app/css/webview.css @@ -0,0 +1 @@ +/* this gets imported into the preview */ diff --git a/src/app/index.html b/src/app/index.html index 02a150f..b146ba3 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -133,6 +133,14 @@
%%gui.browser.loading%%
+