From bdd260c2b5646819ce8389afd15fc9dbccac0e6a Mon Sep 17 00:00:00 2001 From: metacryst Date: Sat, 28 Feb 2026 04:56:19 -0600 Subject: [PATCH] nicer buttons --- ui/_/code/quill.js | 19 +++++++++++++--- ui/_/code/shared.css | 4 ++++ ui/desktop/apps/Dashboard/Dashboard.js | 3 ++- ui/desktop/components/AppMenu.js | 16 +++++++++----- ui/desktop/components/Sidebar.js | 30 +++++++++++++------------- 5 files changed, 48 insertions(+), 24 deletions(-) diff --git a/ui/_/code/quill.js b/ui/_/code/quill.js index e144543..094d439 100644 --- a/ui/_/code/quill.js +++ b/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); diff --git a/ui/_/code/shared.css b/ui/_/code/shared.css index 53f42bf..7435fc3 100644 --- a/ui/_/code/shared.css +++ b/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; diff --git a/ui/desktop/apps/Dashboard/Dashboard.js b/ui/desktop/apps/Dashboard/Dashboard.js index e0ba5d3..a35c0b9 100644 --- a/ui/desktop/apps/Dashboard/Dashboard.js +++ b/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)" diff --git a/ui/desktop/components/AppMenu.js b/ui/desktop/components/AppMenu.js index e418e12..5a3937c 100644 --- a/ui/desktop/components/AppMenu.js +++ b/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") diff --git a/ui/desktop/components/Sidebar.js b/ui/desktop/components/Sidebar.js index 94c47f2..be8f330 100644 --- a/ui/desktop/components/Sidebar.js +++ b/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)