Add some new UI features

danieldieeins · Aug 27, 2024 · 2d82a8d · 2d82a8d
1 parent fe83d13
commit 2d82a8d
Show file tree

Hide file tree

Showing 17 changed files with 326 additions and 64 deletions.
diff --git a/application-main/src/main/java/com/zyneonstudios/application/frame/FrameConnector.java b/application-main/src/main/java/com/zyneonstudios/application/frame/FrameConnector.java
@@ -184,6 +184,9 @@ private void sync(String request) {
             request = request.replaceFirst("startPage.","");
             ApplicationStorage.startPage = request;
             ApplicationStorage.getSettings().set("settings.startPage",request);
+        } else if(request.startsWith("zoomLevel.")) {
+            double d = Double.parseDouble(request.replaceFirst("zoomLevel.",""));
+            ApplicationStorage.setZoomLevel(d);
         } else if(request.startsWith("language.")) {
             request = request.replaceFirst("language.","");
             ApplicationStorage.language = request;

diff --git a/application-main/src/main/java/com/zyneonstudios/application/frame/web/ApplicationFrame.java b/application-main/src/main/java/com/zyneonstudios/application/frame/web/ApplicationFrame.java
@@ -5,18 +5,25 @@
 import com.zyneonstudios.application.main.NexusApplication;
 import org.cef.CefSettings;
 import org.cef.browser.CefBrowser;
+import org.cef.browser.CefFrame;
 import org.cef.handler.CefDisplayHandlerAdapter;
+import org.cef.handler.CefLoadHandler;
+import org.cef.network.CefRequest;
 
 import java.awt.*;
+import java.awt.event.ComponentEvent;
+import java.awt.event.ComponentListener;
 import java.util.concurrent.CompletableFuture;
 
 @SuppressWarnings("unused")
-public class ApplicationFrame extends WebFrame {
+public class ApplicationFrame extends WebFrame implements ComponentListener {
 
     private final FrameConnector connector;
+    private final Dimension minSize = new Dimension(640,360);
 
     public ApplicationFrame(NexusApplication application, String url, String jcefPath) {
         super(url, jcefPath, application);
+        addComponentListener(this);
         this.connector = new FrameConnector(this,application);
         getClient().addDisplayHandler(new CefDisplayHandlerAdapter() {
             @Override
@@ -38,7 +45,38 @@ public boolean onConsoleMessage(CefBrowser browser, CefSettings.LogSeverity leve
                 return super.onConsoleMessage(browser, level, message, source, line);
             }
         });
-        setMinimumSize(new Dimension(840,500));
+        getClient().addLoadHandler(new CefLoadHandler() {
+            @Override
+            public void onLoadingStateChange(CefBrowser cefBrowser, boolean b, boolean b1, boolean b2) {
+
+            }
+
+            @Override
+            public void onLoadStart(CefBrowser cefBrowser, CefFrame cefFrame, CefRequest.TransitionType transitionType) {
+                double zoomLevel = ApplicationStorage.getZoomLevel();
+                if (getWidth() < 700 || getHeight() < 480) {
+                    zoomLevel -= 2;
+                } else if (getWidth() < 1080 || getHeight() < 720) {
+                    zoomLevel -= 1;
+                }
+                getBrowser().setZoomLevel(zoomLevel);
+            }
+
+            @Override
+            public void onLoadEnd(CefBrowser cefBrowser, CefFrame cefFrame, int i) {
+
+            }
+
+            @Override
+            public void onLoadError(CefBrowser cefBrowser, CefFrame cefFrame, ErrorCode errorCode, String s, String s1) {
+
+            }
+        });
+        setMinimumSize(minSize);
+    }
+
+    public Dimension getMinSize() {
+        return minSize;
     }
 
     public void setTitlebar(String title, Color background, Color foreground) {
@@ -64,4 +102,30 @@ public void executeJavaScript(String command) {
     public void openCustomPage(String title, String pageId, String url) {
         getBrowser().loadURL(ApplicationStorage.urlBase+ ApplicationStorage.language+"/custom.html?title="+title+"&id="+pageId+"&url="+url);
     }
+
+    @Override
+    public void componentResized(ComponentEvent e) {
+        double zoomLevel = ApplicationStorage.getZoomLevel();
+        if (getWidth() < 700 || getHeight() < 425) {
+            zoomLevel -= 2;
+        } else if (getWidth() < 1080 || getHeight() < 525) {
+            zoomLevel -= 1;
+        }
+        getBrowser().setZoomLevel(zoomLevel);
+    }
+
+    @Override
+    public void componentMoved(ComponentEvent e) {
+
+    }
+
+    @Override
+    public void componentShown(ComponentEvent e) {
+
+    }
+
+    @Override
+    public void componentHidden(ComponentEvent e) {
+
+    }
 }
diff --git a/...on-main/src/main/java/com/zyneonstudios/application/frame/web/CustomApplicationFrame.java b/...on-main/src/main/java/com/zyneonstudios/application/frame/web/CustomApplicationFrame.java
@@ -23,7 +23,7 @@ public CustomApplicationFrame(NexusApplication application, String url, String j
         getContentPane().add(customTitleBar, BorderLayout.NORTH);
         addDragAndDropFunctionality();
         setBorder(true);
-        setMinimumSize(new Dimension(1150,700));
+        setMinimumSize(getMinSize());
     }
 
     @Override

diff --git a/application-main/src/main/java/com/zyneonstudios/application/frame/web/WebFrame.java b/application-main/src/main/java/com/zyneonstudios/application/frame/web/WebFrame.java
@@ -90,12 +90,13 @@ public void stateHasChanged(CefApp.CefAppState state) {
         client = app.createClient();
         client.addDownloadHandler(new CefDownloadHandler() {
             @Override
-            public void onBeforeDownload(CefBrowser browser, CefDownloadItem item, String sourceURL, CefBeforeDownloadCallback callback) {
+            public boolean onBeforeDownload(CefBrowser browser, CefDownloadItem item, String sourceURL, CefBeforeDownloadCallback callback) {
                 if(Desktop.isDesktopSupported()) {
                     try {
                         Desktop.getDesktop().browse(new URI(item.getURL()));
                     } catch (Exception ignore) {}
                 }
+                return false;
             }
 
             @Override

diff --git a/application-main/src/main/java/com/zyneonstudios/application/main/ApplicationStorage.java b/application-main/src/main/java/com/zyneonstudios/application/main/ApplicationStorage.java
@@ -36,6 +36,7 @@ public record ApplicationStorage(String[] args, NexusApplication app) {
     private static String[] arguments = null;
     private static boolean driveAccess = false;
     private static NexusApplication application = null;
+    private static double zoomLevel = 0;
 
     public ApplicationStorage(String[] args, NexusApplication app) {
         this.app = app;
@@ -96,6 +97,9 @@ else if(arg.startsWith("--path:")) {
         if(getSettings().get("settings.theme")!=null) {
             theme = getSettings().getString("settings.theme");
         }
+
+        configuration.checkEntry("settings.general.appearance.zoomLevel",0);
+        zoomLevel = configuration.getDouble("settings.general.appearance.zoomLevel");
     }
 
     public static boolean hasDriveAccess() {
@@ -107,6 +111,22 @@ public static void enableDriveAccess() {
         driveAccess = true;
     }
 
+    public static double getZoomLevel() {
+        return zoomLevel;
+    }
+
+    public static void setZoomLevel(double zoomLevel) {
+        ApplicationStorage.zoomLevel = zoomLevel;
+        configuration.set("settings.general.appearance.zoomLevel",zoomLevel);
+        ApplicationFrame frame = (ApplicationFrame)application.getFrame();
+        if (frame.getWidth() < 700 || frame.getHeight() < 480) {
+            zoomLevel -= 2;
+        } else if (frame.getWidth() < 1080 || frame.getHeight() < 720) {
+            zoomLevel -= 1;
+        }
+        frame.getBrowser().setZoomLevel(zoomLevel);
+    }
+
     public static void disableDriveAccess() {
         driveAccess = false;
     }

diff --git a/application-main/src/main/java/com/zyneonstudios/application/main/NexusApplication.java b/application-main/src/main/java/com/zyneonstudios/application/main/NexusApplication.java
@@ -67,7 +67,7 @@ public NexusApplication(String[] args) {
             JFrame frame_ = null;
             try {
                 frame_ = new CustomApplicationFrame(this, ApplicationStorage.urlBase + ApplicationStorage.language + "/" + startPage, ApplicationStorage.getApplicationPath() + "libs/jcef/");
-                frame_.pack(); frame_.setSize(new Dimension(1150,700));
+                frame_.pack(); frame_.setSize(new Dimension(1080,660));
             } catch (Exception e) {
                 logger.error("[APP] Couldn't load custom Linux frame: "+e.getMessage());
                 logger.error("[APP] Disabling custom Linux frame and restarting...");

diff --git a/application-ui/content/assets/application/css/app-library.css b/application-ui/content/assets/application/css/app-library.css
@@ -119,10 +119,6 @@ body {
         box-shadow: 0 0 0.3rem var(--highlight);
         animation: wiggle 2s infinite;
         cursor: pointer;
-
-        i {
-            animation: rotate 10s infinite;
-        }
     }
 }
 
@@ -280,60 +276,6 @@ body {
     overflow: hidden;
     overflow-y: auto;
 
-    .overlay-tabs {
-        width: 100%;
-        border-radius: 0.5rem;
-        box-shadow: 0 0 0.4rem var(--shadow3);
-
-        h4 {
-            overflow: hidden;
-            text-align: center;
-            width: 100%;
-            padding: 0.5rem;
-            background: var(--foreground2);
-            color: var(--background5);
-            white-space: nowrap;
-            text-overflow: ellipsis;
-        }
-
-        h4:hover {
-            background: var(--highlight);
-            box-shadow: 0 0 0.8rem var(--highlight);
-            color: var(--background5);
-            z-index: 1;
-            cursor: pointer;
-            transition: all 0.25s ease;
-        }
-
-        h4.active {
-            background: linear-gradient(90deg, var(--accent), var(--accent2));
-            box-shadow: 0 0 0.8rem var(--accent);
-            color: var(--highlight);
-            z-index: 2;
-            cursor: unset;
-        }
-    }
-
-    .overlay-tabs.alt {
-        box-shadow: none;
-        margin-bottom: 1rem;
-
-        h4 {
-            background: var(--background);
-            color: var(--foreground2);
-            box-shadow: none;
-        }
-
-        h4:hover {
-            background: var(--background3);
-        }
-
-        h4.active {
-            color: var(--background5);
-            background: var(--highlight);
-        }
-    }
-
     .overlay-group {
         margin-top: 1rem;
         display: none;

diff --git a/application-ui/content/assets/application/css/app-settings.css b/application-ui/content/assets/application/css/app-settings.css
@@ -126,6 +126,17 @@
 .settings {
     .settings-content {
         h3 {
+            .slider {
+                input {
+                    accent-color: var(--accent2);
+                    opacity: 0.75;
+                }
+
+                input:hover {
+                    opacity: 1;
+                }
+            }
+
             .toggle {
                 position: absolute;
                 top: 0; right: 0;

diff --git a/application-ui/content/assets/application/css/app-shared.css b/application-ui/content/assets/application/css/app-shared.css
@@ -163,4 +163,53 @@ li:hover {
     top: 0.3rem !important;
     position: absolute !important;
     overflow: hidden !important;
+}
+
+h3.input-list {
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    background: var(--background2);
+
+    .list-input-content {
+        .list-input-item {
+            padding: 0.2rem 1.5rem 0.2rem 0.5rem;
+            border-radius: 0.5rem;
+            background: var(--background);
+            position: relative;
+            margin: 0 0.25rem 0 0;
+            line-height: 2.25rem;
+            transition: all 0.25s ease;
+
+            i {
+                opacity: 0.5;
+                position: absolute;
+                font-size: 1.5rem;
+                top: 0.25rem;
+                right: 0.25rem;
+                transition: all 0.25s ease;
+            }
+
+            i:hover {
+                opacity: 1;
+                color: var(--inactive);
+                cursor: pointer;
+                transition: all 0.1s ease;
+            }
+        }
+
+        .list-input-item:hover {
+            background: var(--background6);
+            color: var(--foreground);
+        }
+
+        .list-input-item.template {
+            display: none;
+        }
+    }
+
+    input.list {
+        margin: 0 0.15rem 0 0.2rem;
+        font-size: 1.25rem;
+        color: var(--foreground);
+    }
 }
diff --git a/application-ui/content/assets/application/javascript/app-shared.js b/application-ui/content/assets/application/javascript/app-shared.js
@@ -161,4 +161,56 @@ function openUrl(url) {
     } else {
         window.open(url, '_blank');
     }
+}
+
+const listInputs = new Map();
+
+function initializeListInput(id) {
+    const input = document.getElementById(id);
+    if(input) {
+        if (listInputs.has(id)) {
+            listInputs.delete(id);
+        }
+
+        const list = [];
+        listInputs.set(id, list);
+
+        input.addEventListener('keydown', (event) => {
+            if (event.keyCode === 13) {
+                event.preventDefault();
+                if(!list.includes(input.querySelector( "input").value)&&input.querySelector( "input").value !== "") {
+                    listInputs.get(id).push(input.querySelector("input").value);
+                    connector(id+".add."+input.querySelector("input").value);
+                }
+                input.querySelector("input").value = "";
+                syncListInput(id);
+            }
+        });
+    }
+}
+
+function syncListInput(id) {
+    const input = document.getElementById(id);
+    if(input) {
+        if(listInputs.has(id)) {
+            const list = listInputs.get(id);
+            input.querySelector(".list-input-content").innerHTML = "";
+            for (let i = 0; i < list.length; i++) {
+                input.querySelector(".list-input-content").innerHTML += "<span class='list-input-item'>" + list[i] + " <i onclick=\"removeStringFromListInput('"+id+"','"+list[i]+"');\" class='bx bx-x'></i></span>";
+            }
+        }
+    }
+}
+
+function removeStringFromListInput(id,string) {
+    if(listInputs.has(id)) {
+        for (let i = 0; i < listInputs.get(id).length; i++) {
+            if(listInputs.get(id)[i] === string) {
+                listInputs.get(id).splice(i, 1);
+                syncListInput(id);
+                connector(id+".remove."+string);
+                break;
+            }
+        }
+    }
 }