nicer buttons

ui/_/code/quill.js

@@ -1,6 +1,8 @@
 /*
     Sam Russell
     Captured Sun
+    2.27.26 - Adding parentShadow() function
+    2.16.26 - Adding event objects to the onTouch callbacks
     1.16.26 - Moving nav event dispatch out of pushState, adding null feature to attr()
     1.5.26 - Switching verticalAlign and horizontalAlign names, adding borderVertical and Horizontal
     12.26.25 - State for arrays, nested objects. State for stacks (Shadow-only)
@@ -310,6 +312,17 @@ HTMLElement.prototype.rerender = function() {
     quill.rerender(this)
 }
 
+HTMLElement.prototype.parentShadow = function(selector) {
+    let el = this
+    while(el !== document.body) {
+        el = el.parentElement
+        if(el instanceof Shadow) {
+            return el
+        }
+    }
+    return null
+}
+
 /* Styling */
 
 window.pct = "%"
@@ -1066,9 +1079,9 @@ HTMLElement.prototype.onSubmit = function(cb) {
 };
 
 HTMLElement.prototype.onTouch = function(cb) {
-    const onStart = () => cb.call(this, true);
-    const onEnd = () => cb.call(this, false);
-    const onCancel = () => cb.call(this, null);
+    const onStart = (e) => cb.call(this, true, e);
+    const onEnd = (e) => cb.call(this, false, e);
+    const onCancel = (e) => cb.call(this, null, e);
     this._storeListener("touchstart", onStart);
     this._storeListener("touchend", onEnd);
     this._storeListener("touchcancel", onCancel);

ui/_/code/shared.css

@@ -111,6 +111,10 @@ body {
     border: 1px solid #7a6b55;
 }
 
+:root app-window {
+    border-bottom: 2px solid var(--window);
+}
+
 @media (max-width: 480px) {
     body, html{
         overflow-x: hidden;

ui/desktop/apps/Dashboard/Dashboard.js

@@ -15,7 +15,7 @@ class Dashboard extends Shadow {
             .width(this.COL[type], pct)
             .whiteSpace("nowrap")
             .overflowX("auto")
-            .overflowY("hidden");
+            .overflowY("hidden")
     }
 
     spawnModal(msg) {
@@ -25,6 +25,7 @@ class Dashboard extends Shadow {
         div.style.left = "50vw"
         div.style.top = "50vh"
         div.style.padding = "5em"
+        div.style.borderRadius = "12px"
         div.style.position = "fixed"
         div.style.backgroundColor = "var(--accent)"
         div.style.color = "var(--main)"

ui/desktop/components/AppMenu.js

@@ -14,7 +14,7 @@ class AppMenu extends Shadow {
                 .getPropertyValue("--" + value)
                 .trim();
             }
-
+            
             HStack(() => {
                 let currentNetwork = global.currentNetwork
                 if(!currentNetwork) return
@@ -27,16 +27,22 @@ class AppMenu extends Shadow {
                         .padding(0.3, em)
                         .paddingBottom(currentApp === app ? 4 : 5, px)
                         .borderBottom(currentApp === app ? "1px solid var(--accent)" : "")
-                        .onClick((done) => {
-                            if(done) global.openApp(app)
+                        .onClick(function (done) {
+                            if(!done) {
+                                this.style.transform = "translateY(10%)"
+                            } else {             
+                                this.style.transform = ""
+                                global.openApp(app)
+                            }
                         })
                         .onHover(function (hovering) {
                             if(hovering) {
-                                this.style.opacity = 0.8
+                                this.style.translateY = -0.1
                             } else {
-                                this.style.opacity = ""
+                                this.style.translateY = ""
                             }
                         })
+                        .cursor("pointer")
                 }
             })
             .justifyContent("center")

ui/desktop/components/Sidebar.js

@@ -21,12 +21,16 @@ class Sidebar extends Shadow {
                 .marginTop(6, vh)
                 .marginBottom(2, vh)
                 .attr({selected: selected ? "" : null})
-                .paddingRight(0.5, em)
                 .paddingLeft(selected ? 9 : 10, px)
                 .borderLeft(selected ? "1px solid var(--accent)" : "0")
-                .onClick((done, e) => {
-                    if(done) {
-                        this.toggleSelectedStyles(e.target)
+                .cursor("pointer")
+                .transition("transform .1s")
+                .onClick(function (done, e) {
+                    if(!done) {
+                        this.style.transform = "translateX(-10%)"
+                    } else {
+                        this.style.transform = ""
+                        this.parentShadow().toggleSelectedStyles(e.target)
                         window.navigateTo("/my")
                     }
                 })
@@ -38,23 +42,19 @@ class Sidebar extends Shadow {
                 img(`/db/images/${networks[i].logo}`, "2.25em", "2.25em")
                     .marginTop(3, vh)
                     .attr({selected: selected ? "" : null})
-                    .paddingRight(0.5, em)
                     .paddingLeft(selected ? 9 : 10, px)
                     .borderLeft(selected ? "1px solid var(--accent)" : "0")
-                    .onHover(function (hovering) {
-                        if(hovering) {
-                            this.style.opacity = 0.8
+                    .cursor("pointer")
+                    .transition("transform .1s")
+                    .onClick(function (done, e) {
+                        if(!done) {
+                            this.style.transform = "translateX(-10%)"
                         } else {
-                            this.style.opacity = ""
-                        }
-                    })
-                    .onClick((done, e) => {
-                        if(done) {
-                            this.toggleSelectedStyles(e.target)
+                            this.style.transform = ""
+                            this.parentShadow().toggleSelectedStyles(e.target)
                             window.navigateTo(`/${networks[i].abbreviation}`)
                         }
                     })
-                    .cursor("default")
             }
         })
         .paddingLeft(1.5, em)