From 8402564b2874603fa8a4a8b07f46ab6122c32922 Mon Sep 17 00:00:00 2001 From: olcxja Date: Wed, 13 May 2026 12:39:10 +0200 Subject: [PATCH] Fix sidebar jitter & improve ui --- webroot/index.html | 15 ++++++-- webroot/main.js | 82 +++++++++++++++++++++++++++++++++++++++++-- webroot/pfpexamp.png | Bin 0 -> 4698 bytes webroot/style.css | 15 ++++++++ 4 files changed, 107 insertions(+), 5 deletions(-) create mode 100644 webroot/pfpexamp.png diff --git a/webroot/index.html b/webroot/index.html index 41dc0412..4f7e103f 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -12,7 +12,7 @@ - + @@ -158,6 +165,10 @@ showBlahNotification("error:chat.add.failed"); } } + + async function createGroup() { + + } start(); diff --git a/webroot/main.js b/webroot/main.js index f046bf40..c7572d02 100644 --- a/webroot/main.js +++ b/webroot/main.js @@ -49,6 +49,18 @@ try { var roomContentBar = roomContent.children[0]; + var roomTopBar = document.getElementsByTagName("roomtopbar")[1]; + + var sidebarProfile = document.getElementById("sidebar-profile"); + var sidebarProfileButton = sidebarProfile.children.item(1); + var sidebarProfileIndicator = sidebarProfile.children.item(0); + + var sidebarInbox = document.getElementById("sidebar-inbox"); + var sidebarInboxButton = sidebarInbox.children.item(1); + var sidebarInboxIndicator = sidebarInbox.children.item(0); + + + } catch (e) { } @@ -519,6 +531,8 @@ collapseGroupsBtn.addEventListener("click", () => { }); addDmBtn.addEventListener("click", () => { + roomTopBar.innerHTML = "Invite to dm"; + roomDetailsBar.style.display = "none"; roomContentMain.innerHTML = `
@@ -528,7 +542,7 @@ addDmBtn.addEventListener("click", () => {
- +
- ` + `; }); addGroupBtn.addEventListener("click", () => { - + roomTopBar.innerHTML = "Create group"; + roomDetailsBar.style.display = "none"; + roomContentMain.innerHTML = + ` +
+ + Create Group +

Create a private, encrypted group

+
+
+ + +
+
+ +
+
+ `; }); @@ -557,3 +590,46 @@ sidebarAddButton.addEventListener("mouseleave", () => { sidebarAddIndicator.classList.remove("hover"); }); +sidebarProfileButton.addEventListener("mouseenter", () => { + sidebarProfileIndicator.classList.add("hover"); +}); +sidebarProfileButton.addEventListener("mouseleave", () => { + sidebarProfileIndicator.classList.remove("hover"); +}); + +sidebarInboxButton.addEventListener("mouseenter", () => { + sidebarInboxIndicator.classList.add("hover"); +}); +sidebarInboxButton.addEventListener("mouseleave", () => { + sidebarInboxIndicator.classList.remove("hover"); +}); + + +function gotoSideProfilePopup() { + +} +function gotoCreateSpace() { + roomTopBar.innerHTML = "Create space"; + roomDetailsBar.style.display = "none"; + roomContentMain.innerHTML = + ` +
+ + Create Space +

Create a space for your community

+
+
+ + +
+
+ +
+
+ `; +} +function gotoHome() { + +} diff --git a/webroot/pfpexamp.png b/webroot/pfpexamp.png new file mode 100644 index 0000000000000000000000000000000000000000..416243bbb3641ff83ee7a8af7af77ebbe7db2ac5 GIT binary patch literal 4698 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 literal 0 HcmV?d00001 diff --git a/webroot/style.css b/webroot/style.css index 663eea28..934879a8 100644 --- a/webroot/style.css +++ b/webroot/style.css @@ -68,6 +68,11 @@ button, input { align-items: center; justify-content: flex-start; border: var(--border-width) solid var(--light-border-color); + + backface-visibility: hidden; + transform: translateZ(0); + will-change: transform; + transform-origin: center center; } input { padding-left: calc(var(--button-margin) * 2); @@ -120,11 +125,16 @@ indicator.active { height: var(--icon-button-height); width: var(--icon-button-height); justify-content: center; + overflow: hidden; } .icon-button svg { width: var(--icon-button-size); height: var(--icon-button-size); } +.icon-button img { + width: calc(var(--icon-button-height) - (var(--border-width) * 2)); + height: calc(var(--icon-button-height) - (var(--border-width) * 2)); +} button:hover, input:hover { background-color: rgba(255, 255, 255, 0.1); } @@ -340,4 +350,9 @@ herotitle { .submit-button:hover { background-color: rgba(255, 255, 255, 0.5); +} + + +.bottom-element { + margin-top: auto; } \ No newline at end of file