From f63f8dd77cc54a6edb775e5ce4838cffadd5ca01 Mon Sep 17 00:00:00 2001 From: olcxja Date: Tue, 19 May 2026 23:28:08 +0200 Subject: [PATCH] Add example notifications and invites tab and improve ux --- android/app/src/main/assets/public/index.html | 4 +- android/app/src/main/assets/public/main.js | 98 +++++++++++++++++-- android/app/src/main/assets/public/screens.js | 30 +++++- android/app/src/main/assets/public/style.css | 12 +++ webroot/index.html | 4 +- webroot/main.js | 98 +++++++++++++++++-- webroot/screens.js | 30 +++++- webroot/style.css | 12 +++ 8 files changed, 264 insertions(+), 24 deletions(-) diff --git a/android/app/src/main/assets/public/index.html b/android/app/src/main/assets/public/index.html index a2972ba4..bacb3e83 100644 --- a/android/app/src/main/assets/public/index.html +++ b/android/app/src/main/assets/public/index.html @@ -130,14 +130,12 @@ showBlahNotification("error:dm.refresh.failed"); } } - - + async function addDm() { try { showAction("Adding...", "dmadd"); let res = await fetchEncrypted("user/dm/invite", document.getElementById("addchat-username").value); console.log(res); - let ressplit = res.split(":"); clearAction("dmadd"); showBlahNotification(res); } diff --git a/android/app/src/main/assets/public/main.js b/android/app/src/main/assets/public/main.js index 418070ac..fd79db53 100644 --- a/android/app/src/main/assets/public/main.js +++ b/android/app/src/main/assets/public/main.js @@ -687,7 +687,15 @@ function showFixedContextMenu(rect, html) { fixedContextMenu.classList.add("show"); } + +var currentRoomsBarTitle = null; +var currentRoomsBarHtml = null; + async function switchRoomsBar(title, content) { + if (currentRoomsBarTitle === title && currentRoomsBarHtml === content) return; + currentRoomsBarTitle = title; + currentRoomsBarHtml = content; + let roomsTopBarTransition = roomsTopBar.children.item(0); roomsBar.style.transform = "scale(0.85)"; @@ -731,8 +739,23 @@ async function switchRoomsBar(title, content) { roomsTopBarTransition.style.transform = ""; roomsTopBarTransition.style.opacity = ""; } +var currentRoomContentTitle = null; +var currentRoomContentHtml = null; async function switchRoomContent(title, content, showRoomBar, icon = "", skipMobileSlide = false) { + if (currentRoomContentTitle === title && currentRoomContentHtml === content) { + const rem = parseFloat(getComputedStyle(document.documentElement).fontSize); + if (window.innerWidth <= 52 * rem && !skipMobileSlide) { + if (title != "title.splash") { //do not show splash on mobile + mainScreen.classList.remove('mobile-details'); + mainScreen.classList.add('mobile-content'); + } + } + return; + } + currentRoomContentTitle = title; + currentRoomContentHtml = content; + let roomsTopBarTransition = roomTopBar.children.item(0); roomContentMain.style.transform = "scale(0.85)"; @@ -791,8 +814,14 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob } +var currentDetailsContentTitle = null; +var currentDetailsContentHtml = null; async function switchDetailsContent(title, content) { + if (currentDetailsContentTitle === title && currentDetailsContentHtml === content) return; + currentDetailsContentTitle = title; + currentDetailsContentHtml = content; + let roomsTopBarTransition = detailsTopBar.children.item(0); roomDetailsMain.style.transform = "scale(0.85)"; @@ -925,11 +954,51 @@ function popstate() function gotoSideProfilePopup() { } -function gotoInbox() { +function setActiveRoombarItem(itemId) { + let items = document.querySelectorAll('.collapse-text-button'); + items.forEach(item => item.classList.remove('selected')); + + if (itemId) { + let activeItem = document.getElementById(itemId); + if (activeItem) activeItem.classList.add('selected'); + } +} + +function switchInvitesTab(tab) { + if (!document.getElementById(`tab-invites-${tab}`).classList.contains('tab-inactive')) return; + document.getElementById('tab-invites-received').classList.add('tab-inactive'); + document.getElementById('tab-invites-sent').classList.add('tab-inactive'); + document.getElementById(`tab-invites-${tab}`).classList.remove('tab-inactive'); +} + +function switchNotifisTab(tab) { + if (!document.getElementById(`tab-notifis-${tab}`).classList.contains('tab-inactive')) return; + document.getElementById('tab-notifis-all').classList.add('tab-inactive'); + document.getElementById('tab-notifis-unread').classList.add('tab-inactive'); + document.getElementById(`tab-notifis-${tab}`).classList.remove('tab-inactive'); +} + + +async function gotoInbox() { if (roomsBarContainer) roomsBarContainer.style.display = ""; //show roombar setActiveSidebarIndicator(sidebarInboxIndicator); - switchRoomsBar("title.inbox", inboxRoomBar); - gotoInvites(); + + await switchRoomsBar("title.inbox", inboxRoomBar); + + const rem = parseFloat(getComputedStyle(document.documentElement).fontSize); + if (window.innerWidth > 52 * rem) { + gotoInvites(); + } +} + +function gotoInvites() { + setActiveRoombarItem('collapse-invites'); + switchRoomContent("title.invites", invitesScreen, false); +} + +function gotoNotifis() { + setActiveRoombarItem('collapse-notifis'); + switchRoomContent("title.notifications", notifisScreen, false); } function gotoCreateSpace() { @@ -949,6 +1018,7 @@ function gotoHome() { setActiveSidebarIndicator(sidebarHomeIndicator); switchRoomContent("title.splash", splashScreen, false); switchRoomsBar("title.home", homeRoomBar); + setActiveRoombarItem(null); } function setActiveSidebarIndicator(element, isTemporary = false) { @@ -972,11 +1042,15 @@ function mobileNavBack() { setActiveSidebarIndicator(currentMainIndicator); } else { + setActiveRoombarItem(null); + if (roomsBarContainer) { + roomsBarContainer.style.display = ""; //restore roombar on mobile + void roomsBarContainer.offsetWidth; + } + mainScreen.classList.remove('mobile-content'); setActiveSidebarIndicator(currentMainIndicator); - - if (roomsBarContainer) roomsBarContainer.style.display = ""; //restore roombar on mobile } } function mobileNavDetails() { @@ -1026,10 +1100,18 @@ document.addEventListener('touchend', e => { activeTouchButton.classList.remove('is-pressed'); if (!touchMoved) { - if (e.cancelable) { - e.preventDefault(); + if (activeTouchButton.tagName !== 'INPUT') { + if (document.activeElement && document.activeElement.tagName === 'INPUT') { + document.activeElement.blur(); + } + + if (e.cancelable) { + e.preventDefault(); + } + activeTouchButton.click(); + } else { + activeTouchButton.focus(); } - activeTouchButton.click(); } activeTouchButton = null; } diff --git a/android/app/src/main/assets/public/screens.js b/android/app/src/main/assets/public/screens.js index 31c2ccd2..e5d4d527 100644 --- a/android/app/src/main/assets/public/screens.js +++ b/android/app/src/main/assets/public/screens.js @@ -73,6 +73,34 @@ var joinSpaceScreen = ` `; +var invitesScreen = ` +
+
+ + +
+
+ +
+

desc.no.invites

+
+
+`; + +var notifisScreen = ` +
+
+ + +
+
+ +
+

desc.no.notifications

+
+
+`; + //roombars var homeRoomBar = `
@@ -112,7 +140,7 @@ var homeRoomBar = ` var inboxRoomBar = `
- diff --git a/android/app/src/main/assets/public/style.css b/android/app/src/main/assets/public/style.css index a886ebfc..f60e7de1 100644 --- a/android/app/src/main/assets/public/style.css +++ b/android/app/src/main/assets/public/style.css @@ -40,6 +40,7 @@ html { } body { padding-top: env(safe-area-inset-top); + padding-bottom: env(safe-area-inset-bottom); background-color: var(--main-bg-color); overflow: hidden; display: flex; @@ -94,6 +95,8 @@ button, input { input { padding-left: calc(var(--button-margin) * 2); -webkit-touch-callout: default; + user-select: text !important; + -webkit-user-select: text !important; } @@ -541,4 +544,13 @@ space{ opacity: 1; pointer-events: auto; } +} + +.collapse-text-button.selected { + background-color: rgba(240, 240, 245, 0.1); +} + +.submit-button.tab-inactive { + background-color: transparent; + color: var(--text-color); } \ No newline at end of file diff --git a/webroot/index.html b/webroot/index.html index a2972ba4..bacb3e83 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -130,14 +130,12 @@ showBlahNotification("error:dm.refresh.failed"); } } - - + async function addDm() { try { showAction("Adding...", "dmadd"); let res = await fetchEncrypted("user/dm/invite", document.getElementById("addchat-username").value); console.log(res); - let ressplit = res.split(":"); clearAction("dmadd"); showBlahNotification(res); } diff --git a/webroot/main.js b/webroot/main.js index 418070ac..fd79db53 100644 --- a/webroot/main.js +++ b/webroot/main.js @@ -687,7 +687,15 @@ function showFixedContextMenu(rect, html) { fixedContextMenu.classList.add("show"); } + +var currentRoomsBarTitle = null; +var currentRoomsBarHtml = null; + async function switchRoomsBar(title, content) { + if (currentRoomsBarTitle === title && currentRoomsBarHtml === content) return; + currentRoomsBarTitle = title; + currentRoomsBarHtml = content; + let roomsTopBarTransition = roomsTopBar.children.item(0); roomsBar.style.transform = "scale(0.85)"; @@ -731,8 +739,23 @@ async function switchRoomsBar(title, content) { roomsTopBarTransition.style.transform = ""; roomsTopBarTransition.style.opacity = ""; } +var currentRoomContentTitle = null; +var currentRoomContentHtml = null; async function switchRoomContent(title, content, showRoomBar, icon = "", skipMobileSlide = false) { + if (currentRoomContentTitle === title && currentRoomContentHtml === content) { + const rem = parseFloat(getComputedStyle(document.documentElement).fontSize); + if (window.innerWidth <= 52 * rem && !skipMobileSlide) { + if (title != "title.splash") { //do not show splash on mobile + mainScreen.classList.remove('mobile-details'); + mainScreen.classList.add('mobile-content'); + } + } + return; + } + currentRoomContentTitle = title; + currentRoomContentHtml = content; + let roomsTopBarTransition = roomTopBar.children.item(0); roomContentMain.style.transform = "scale(0.85)"; @@ -791,8 +814,14 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob } +var currentDetailsContentTitle = null; +var currentDetailsContentHtml = null; async function switchDetailsContent(title, content) { + if (currentDetailsContentTitle === title && currentDetailsContentHtml === content) return; + currentDetailsContentTitle = title; + currentDetailsContentHtml = content; + let roomsTopBarTransition = detailsTopBar.children.item(0); roomDetailsMain.style.transform = "scale(0.85)"; @@ -925,11 +954,51 @@ function popstate() function gotoSideProfilePopup() { } -function gotoInbox() { +function setActiveRoombarItem(itemId) { + let items = document.querySelectorAll('.collapse-text-button'); + items.forEach(item => item.classList.remove('selected')); + + if (itemId) { + let activeItem = document.getElementById(itemId); + if (activeItem) activeItem.classList.add('selected'); + } +} + +function switchInvitesTab(tab) { + if (!document.getElementById(`tab-invites-${tab}`).classList.contains('tab-inactive')) return; + document.getElementById('tab-invites-received').classList.add('tab-inactive'); + document.getElementById('tab-invites-sent').classList.add('tab-inactive'); + document.getElementById(`tab-invites-${tab}`).classList.remove('tab-inactive'); +} + +function switchNotifisTab(tab) { + if (!document.getElementById(`tab-notifis-${tab}`).classList.contains('tab-inactive')) return; + document.getElementById('tab-notifis-all').classList.add('tab-inactive'); + document.getElementById('tab-notifis-unread').classList.add('tab-inactive'); + document.getElementById(`tab-notifis-${tab}`).classList.remove('tab-inactive'); +} + + +async function gotoInbox() { if (roomsBarContainer) roomsBarContainer.style.display = ""; //show roombar setActiveSidebarIndicator(sidebarInboxIndicator); - switchRoomsBar("title.inbox", inboxRoomBar); - gotoInvites(); + + await switchRoomsBar("title.inbox", inboxRoomBar); + + const rem = parseFloat(getComputedStyle(document.documentElement).fontSize); + if (window.innerWidth > 52 * rem) { + gotoInvites(); + } +} + +function gotoInvites() { + setActiveRoombarItem('collapse-invites'); + switchRoomContent("title.invites", invitesScreen, false); +} + +function gotoNotifis() { + setActiveRoombarItem('collapse-notifis'); + switchRoomContent("title.notifications", notifisScreen, false); } function gotoCreateSpace() { @@ -949,6 +1018,7 @@ function gotoHome() { setActiveSidebarIndicator(sidebarHomeIndicator); switchRoomContent("title.splash", splashScreen, false); switchRoomsBar("title.home", homeRoomBar); + setActiveRoombarItem(null); } function setActiveSidebarIndicator(element, isTemporary = false) { @@ -972,11 +1042,15 @@ function mobileNavBack() { setActiveSidebarIndicator(currentMainIndicator); } else { + setActiveRoombarItem(null); + if (roomsBarContainer) { + roomsBarContainer.style.display = ""; //restore roombar on mobile + void roomsBarContainer.offsetWidth; + } + mainScreen.classList.remove('mobile-content'); setActiveSidebarIndicator(currentMainIndicator); - - if (roomsBarContainer) roomsBarContainer.style.display = ""; //restore roombar on mobile } } function mobileNavDetails() { @@ -1026,10 +1100,18 @@ document.addEventListener('touchend', e => { activeTouchButton.classList.remove('is-pressed'); if (!touchMoved) { - if (e.cancelable) { - e.preventDefault(); + if (activeTouchButton.tagName !== 'INPUT') { + if (document.activeElement && document.activeElement.tagName === 'INPUT') { + document.activeElement.blur(); + } + + if (e.cancelable) { + e.preventDefault(); + } + activeTouchButton.click(); + } else { + activeTouchButton.focus(); } - activeTouchButton.click(); } activeTouchButton = null; } diff --git a/webroot/screens.js b/webroot/screens.js index 31c2ccd2..e5d4d527 100644 --- a/webroot/screens.js +++ b/webroot/screens.js @@ -73,6 +73,34 @@ var joinSpaceScreen = `
`; +var invitesScreen = ` +
+
+ + +
+
+ +
+

desc.no.invites

+
+
+`; + +var notifisScreen = ` +
+
+ + +
+
+ +
+

desc.no.notifications

+
+
+`; + //roombars var homeRoomBar = `
@@ -112,7 +140,7 @@ var homeRoomBar = ` var inboxRoomBar = `
- diff --git a/webroot/style.css b/webroot/style.css index a886ebfc..f60e7de1 100644 --- a/webroot/style.css +++ b/webroot/style.css @@ -40,6 +40,7 @@ html { } body { padding-top: env(safe-area-inset-top); + padding-bottom: env(safe-area-inset-bottom); background-color: var(--main-bg-color); overflow: hidden; display: flex; @@ -94,6 +95,8 @@ button, input { input { padding-left: calc(var(--button-margin) * 2); -webkit-touch-callout: default; + user-select: text !important; + -webkit-user-select: text !important; } @@ -541,4 +544,13 @@ space{ opacity: 1; pointer-events: auto; } +} + +.collapse-text-button.selected { + background-color: rgba(240, 240, 245, 0.1); +} + +.submit-button.tab-inactive { + background-color: transparent; + color: var(--text-color); } \ No newline at end of file