diff --git a/android/app/src/main/assets/public/blah/en-us.json b/android/app/src/main/assets/public/blah/en-us.json index 4a2db461..43bce67b 100644 --- a/android/app/src/main/assets/public/blah/en-us.json +++ b/android/app/src/main/assets/public/blah/en-us.json @@ -61,11 +61,7 @@ "placeholder.create.group.input": "My group", "placeholder.create.space.input": "My space", "title.name": "Name", - "desc.create.space": "Create a space for your community", - "desc.join.space": "Join a community that fits you", - "title.join.space": "Join space", - "title.space.id": "Space id", - + "desc.create.space": "Create, a space for your community", "title.sign.up": "Sign Up", "title.sign.in": "Sign In", diff --git a/android/app/src/main/assets/public/index.html b/android/app/src/main/assets/public/index.html index af0c149f..0442796d 100644 --- a/android/app/src/main/assets/public/index.html +++ b/android/app/src/main/assets/public/index.html @@ -21,15 +21,22 @@ - + title.home @@ -61,29 +69,29 @@ - +
- + + title.splash +
+ + title.welcome.splash +

desc.welcome.splash. v1.0

+
-
- -
@@ -111,7 +122,6 @@ async function start() { updateLoadingStatus("loading.loading"); try { - switchRoomContent("title.splash", splashScreen, false, "", true); if (host != null) { await updateProtocolAndUrl(host); @@ -120,8 +130,9 @@ { await updateProtocolAndUrl(window.location.hostname); } + sidebarPfp.src = await getAvatarUrl(username); - + showAction("Authenticating...", "startauth"); let res = await Auth(username, password); clearAction("startauth"); @@ -144,12 +155,12 @@ async function refreshDms() { try { - - - showAction("Refreshing dms...", "dmrefresh"); - let res = await fetchEncrypted("user/dm/list", ""); - console.log(res); - clearAction("dmrefresh"); + + + showAction("Refreshing dms...", "dmrefresh"); + let res = await fetchEncrypted("user/dm/list", ""); + console.log(res); + clearAction("dmrefresh"); } catch (e) { clearAction("dmrefresh"); @@ -173,10 +184,11 @@ showBlahNotification("error:chat.add.failed"); } } - + async function createGroup() { - + } + \ No newline at end of file diff --git a/android/app/src/main/assets/public/main.js b/android/app/src/main/assets/public/main.js index 09363000..dfdf26fa 100644 --- a/android/app/src/main/assets/public/main.js +++ b/android/app/src/main/assets/public/main.js @@ -66,7 +66,6 @@ try { var sidebarInboxIndicator = sidebarInbox.children.item(0); - var fixedContextMenu = document.getElementById("fixed-context-menu"); } catch (e) { } @@ -654,86 +653,54 @@ password = localStorage.getItem('password'); host = localStorage.getItem('host'); mainJS(); - -function showFixedContextMenu(rect, html) { - let parser = new DOMParser(); - let doc = parser.parseFromString(html, "text/html"); - - let blahTags = doc.getElementsByTagName("blah"); - for (let i = 0; i < blahTags.length; i++) { - blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML); - } - blahTags = doc.getElementsByClassName("blah"); - for (let i = 0; i < blahTags.length; i++) { - blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML); - } - - let placeholders = doc.querySelectorAll("[placeholder]"); - for (let i = 0; i < placeholders.length; i++) { - if (placeholders[i].placeholder.startsWith("{blah(")) - { - let value = placeholders[i].placeholder.split("{blah(")[1].split(")}")[0]; - placeholders[i].placeholder = processBlah(value); - } - - } - - fixedContextMenu.innerHTML = doc.body.innerHTML; - - fixedContextMenu.style.left = `${rect.right + 10}px`; - fixedContextMenu.style.top = `${rect.top}px`; - - fixedContextMenu.classList.add("show"); -} -async function switchRoomContent(title, content, showRoomBar, icon = "", skipMobileSlide = false) -{ - roomContentMain.style.transform = "scale(0.85)"; - roomContentMain.style.opacity = "0"; - await delay(200); - let backBtnHtml = ``; - let detailsBtnHtml = showRoomBar ? `` : ''; - - roomTopBar.innerHTML = `${backBtnHtml}${icon}${processBlah(title)}
${detailsBtnHtml}`; - roomDetailsBar.style.display = showRoomBar ? "flex" : "none"; - - let parser = new DOMParser(); - let doc = parser.parseFromString(content, "text/html"); - - let blahTags = doc.getElementsByTagName("blah"); - for (let i = 0; i < blahTags.length; i++) { - blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML); - } - blahTags = doc.getElementsByClassName("blah"); - for (let i = 0; i < blahTags.length; i++) { - blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML); - } - - let placeholders = doc.querySelectorAll("[placeholder]"); - for (let i = 0; i < placeholders.length; i++) { - if (placeholders[i].placeholder.startsWith("{blah(")) - { - let value = placeholders[i].placeholder.split("{blah(")[1].split(")}")[0]; - placeholders[i].placeholder = processBlah(value); - } - } - - roomContentMain.innerHTML = doc.body.innerHTML; - - roomContentMain.style.transform = ""; - roomContentMain.style.opacity = ""; - - const rem = parseFloat(getComputedStyle(document.documentElement).fontSize); - if (window.innerWidth <= 52 * rem && !skipMobileSlide) { - mainScreen.classList.remove('mobile-details'); - mainScreen.classList.add('mobile-content'); - } -} collapseDmsBtn.addEventListener("click", () => { collapseDmsBtn.classList.toggle("collapsed"); }); collapseGroupsBtn.addEventListener("click", () => { collapseGroupsBtn.classList.toggle("collapsed"); }); + + +//Invite to dm, addDmScreen, false +async function switchRoomContent(title, content, showRoomBar) +{ + roomContentMain.style.transform = "scale(0.85)"; + roomContentMain.style.opacity = "0"; + await delay(200); + + roomTopBar.innerHTML = processBlah(title); + roomDetailsBar.style.display = showRoomBar ? "flex" : "none"; + + //content blah parsing + let parser = new DOMParser(); + let doc = parser.parseFromString(content, "text/html"); + + let blahTags = doc.getElementsByTagName("blah"); + for (let i = 0; i < blahTags.length; i++) { + blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML); + } + blahTags = doc.getElementsByClassName("blah"); + for (let i = 0; i < blahTags.length; i++) { + blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML); + } + + let placeholders = doc.querySelectorAll("[placeholder]"); + for (let i = 0; i < placeholders.length; i++) { + if (placeholders[i].placeholder.startsWith("{blah(")) + { + let value = placeholders[i].placeholder.split("{blah(")[1].split(")}")[0]; + placeholders[i].placeholder = processBlah(value); + } + + } + + roomContentMain.innerHTML = doc.body.innerHTML; + + + roomContentMain.style.transform = ""; + roomContentMain.style.opacity = ""; +} + addDmBtn.addEventListener("click", async () => { switchRoomContent("title.create.dm", addDmScreen, false); }); @@ -741,107 +708,47 @@ addGroupBtn.addEventListener("click", async () => { switchRoomContent("title.create.group", createGroupScreen, false); }); - -var indicatorBeforeFixedMenu; -sidebarAddButton.addEventListener("click", (e) => { - e.stopPropagation(); - if (fixedContextMenu.classList.contains("show")) { - fixedContextMenu.classList.remove("show"); - setActiveSidebarIndicator(indicatorBeforeFixedMenu); - } else { - setActiveSidebarIndicator(sidebarAddIndicator, true); - const rect = sidebarAddButton.getBoundingClientRect(); - showFixedContextMenu(rect, addSpaceMenu); - } -}); - -document.addEventListener("click", (e) => { - if (fixedContextMenu.classList.contains("show")) { - if (!fixedContextMenu.contains(e.target)) { - fixedContextMenu.classList.remove("show"); - setActiveSidebarIndicator(indicatorBeforeFixedMenu); - } - } -}); - - - function gotoSideProfilePopup() { } function gotoInbox() { - setActiveSidebarIndicator(sidebarInboxIndicator); + } -function gotoCreateSpace() { - fixedContextMenu.classList.remove("show"); - setActiveSidebarIndicator(sidebarAddIndicator); +async function gotoCreateSpace() { switchRoomContent("title.create.space", createSpaceScreen, false); } -function gotoJoinSpace() { - fixedContextMenu.classList.remove("show"); - setActiveSidebarIndicator(sidebarAddIndicator); - switchRoomContent("title.join.space", joinSpaceScreen, false); -} function gotoHome() { - setActiveSidebarIndicator(sidebarHomeIndicator); - switchRoomContent("title.splash", splashScreen, false); + } -function setActiveSidebarIndicator(element, skipDisabling = false) -{ - let indicators = document.getElementsByTagName("indicator"); - for (let i = 0; i < indicators.length; i++) { - if (indicators[i].classList.contains("active")) - { - indicatorBeforeFixedMenu = indicators[i]; - if (!skipDisabling) - { - indicators[i].classList.remove("active"); - } - } - } - - element.classList.add("active"); -} -function mobileNavBack() { - if(mainScreen.classList.contains('mobile-details')) { - mainScreen.classList.remove('mobile-details'); - mainScreen.classList.add('mobile-content'); - } else { - mainScreen.classList.remove('mobile-content'); - } -} -function mobileNavDetails() { - mainScreen.classList.add('mobile-details'); -} -let touchStartX = 0; -let touchEndX = 0; -let touchStartY = 0; -let touchEndY = 0; -document.addEventListener('touchstart', e => { - touchStartX = e.changedTouches[0].screenX; - touchStartY = e.changedTouches[0].screenY; + +/* replaced with css +sidebarHomeButton.addEventListener("mouseenter", () => { + sidebarHomeIndicator.classList.add("hover"); }); -document.addEventListener('touchend', e => { - touchEndX = e.changedTouches[0].screenX; - touchEndY = e.changedTouches[0].screenY; - handleMobileSwipe(); +sidebarHomeButton.addEventListener("mouseleave", () => { + sidebarHomeIndicator.classList.remove("hover"); }); -function handleMobileSwipe() { - const rem = parseFloat(getComputedStyle(document.documentElement).fontSize); - if (window.innerWidth > 52 * rem) return; - let diffX = touchEndX - touchStartX; - let diffY = touchEndY - touchStartY; +sidebarAddButton.addEventListener("mouseenter", () => { + sidebarAddIndicator.classList.add("hover"); +}); +sidebarAddButton.addEventListener("mouseleave", () => { + sidebarAddIndicator.classList.remove("hover"); +}); - if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 60) { - if (diffX > 0) { - mobileNavBack(); - } else { - if (mainScreen.classList.contains('mobile-content') && roomDetailsBar.style.display !== 'none') { - mobileNavDetails(); - } - } - } -} \ No newline at end of file +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"); +}); +*/ \ No newline at end of file diff --git a/android/app/src/main/assets/public/screens.js b/android/app/src/main/assets/public/screens.js index ed6c908c..d4c5c96d 100644 --- a/android/app/src/main/assets/public/screens.js +++ b/android/app/src/main/assets/public/screens.js @@ -1,11 +1,3 @@ -//room screens -var splashScreen = ` -
- - title.welcome.splash -

desc.welcome.splash. v1.0

-
-`; var addDmScreen = `
@@ -14,7 +6,7 @@ var addDmScreen = `
- +
@@ -45,43 +37,11 @@ var createSpaceScreen = `

desc.create.space


- +
-`; -var joinSpaceScreen = ` -
- - title.join.space -

desc.join.space

-
-
- - -
-
- - -
-
- -
-
-`; - - -//context menus -var addSpaceMenu = ` - - `; \ No newline at end of file diff --git a/android/app/src/main/assets/public/style.css b/android/app/src/main/assets/public/style.css index 10742f6b..ec2c944a 100644 --- a/android/app/src/main/assets/public/style.css +++ b/android/app/src/main/assets/public/style.css @@ -5,7 +5,6 @@ :root { --main-bg-color: rgb(20, 20, 20); --text-color: rgb(240, 240, 245); - --darker-text-color: rgb(210, 210, 215); --icon-button-size: 2rem; --press-scale: scale(0.92); --light-border-color: rgba(255, 255, 255, 0.08); @@ -13,7 +12,7 @@ --icon-button-height: 3.4rem; --button-height: 2.4rem; --border-width: 0.09rem; - + --big-default: rgb(207 207 207); --big-red: rgb(202 0 0); --big-green: rgb(25 189 0); @@ -53,7 +52,7 @@ main, loading { overflow: hidden; } loading { - justify-content: center; + justify-content: center; align-items: center; width: 100%; } @@ -70,6 +69,7 @@ loading { user-select: none !important; -webkit-user-drag: none !important; } + button, input { border-radius: 0.8rem; background-color: rgba(255, 255, 255, 0.05); @@ -84,8 +84,8 @@ button, input { border: var(--border-width) solid var(--light-border-color); backface-visibility: hidden; - transform: translateZ(0); - will-change: transform; + transform: translateZ(0); + will-change: transform; transform-origin: center center; } input { @@ -149,7 +149,7 @@ button:active, input:active { roomcontent { display: flex; flex-direction: column; - + height: 100%; width: calc(100vw - (var(--icon-button-height) + (var(--button-margin) * 2) + var(--border-width)) - 17rem); border-right: var(--border-width) solid var(--light-border-color); @@ -157,7 +157,7 @@ roomcontent { roomcontent2 { display: flex; flex-direction: column; - + height: calc(100% - (var(--button-height) * 1.5)); width: 100%; } @@ -180,23 +180,27 @@ sidebar.second { align-items: center; justify-content: space-between; } + .collapse-text-button { padding-left: calc(var(--button-margin) + 0.2rem); flex-shrink: 0; - flex-grow: 1; + flex-grow: 1; border: none; background-color: transparent; height: 2rem; font-weight: 600; - gap: 0.3rem; + gap: 0.3rem; } + .collapse-text-button .chevron { width: 1.25rem; height: 1.25rem; } + .collapse-text-button.collapsed .chevron { transform: rotate(-90deg); } + .add-action-button { border: none; background-color: transparent; @@ -207,6 +211,7 @@ sidebar.second { justify-content: center; color: rgba(255, 255, 255, 0.5); } + .add-action-button svg { width: 1.25rem; height: 1.25rem; @@ -219,6 +224,8 @@ hr { width: 60%; margin-left: 20%; } + + #notification-container { padding-top: env(safe-area-inset-top); position: fixed; @@ -232,10 +239,12 @@ hr { pointer-events: none; align-items: center; } + .notification { background: rgba(255, 255, 255, 0.015); backdrop-filter: blur(1.2rem); -webkit-backdrop-filter: blur(1.2rem); + border: var(--border-width) solid var(--light-border-color); border-radius: 0.9rem; @@ -252,37 +261,43 @@ hr { transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), - background-color 0.2s ease; + background-color 0.2s ease; } + .notification.show { opacity: 1; transform: translateY(0); } + .notification.info { border-color: var(--big-default); } + .notification.error { border-color: var(--big-red); } + .notification.success { border-color: var(--big-green); } + roomtopbar { height: calc(var(--button-height) * 1.5); + display: flex; flex-direction: row; width: 100%; border-bottom: var(--border-width) solid var(--light-border-color); - + line-height: calc(var(--button-height) * 1.5); font-weight: bold; padding-left: calc(var(--button-margin) * 3); - padding-right: calc(var(--button-margin) * 3); font-size: 1.5rem; } sidebar.second#roomdetailsbar { height: calc(var(--button-height) * 1.5); + display: flex; flex-direction: row; @@ -296,24 +311,32 @@ herotitle { font-weight: bold; font-size: 1.6rem; } + + + + .input-group { text-align: left; display: flex; flex-direction: column; gap: 0.2rem; + width: 90%; max-width: 30rem; } + .input-group label { font-size: 0.75rem; font-weight: 800; margin-left: 0.6rem; margin-bottom: -0.2rem; opacity: 0.4; + letter-spacing: 0.05rem; position: relative; z-index: 1; } + .submit-button { justify-content: center; background-color: var(--text-color); @@ -322,9 +345,11 @@ herotitle { border: none; font-size: 1.05rem; } + .bottom-element { margin-top: auto; } + @media (hover: hover) { sidebarelement:hover indicator:not(.active) { content: ""; @@ -367,149 +392,11 @@ sidebarelement:has(.icon-button:active) indicator:not(.active) { border-radius: 0.8rem; transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.6rem)); } -blah, inherit, .inherit { + +blah { all: inherit; padding: 0; margin: 0; display: inline; opacity: 1; -} -space{ - margin-left: 0.4rem; -} -.context-menu { - position: fixed; - background: var(--main-bg-color); - border: var(--border-width) solid var(--light-border-color); - border-radius: 0.8rem; - padding: 0.4rem; - display: flex; - flex-direction: column; - gap: 0.2rem; - z-index: 2000; - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4); - opacity: 0; - transform: scale(0.95); - transform-origin: center left; - pointer-events: none; -} -.context-menu.show { - opacity: 1; - transform: scale(1); - pointer-events: auto; -} -.context-menu button { - margin: 0; - padding: 0.5rem 1rem; - border: none; - background: transparent; - width: 100%; - min-width: 10rem; - justify-content: flex-start; - gap: 0.5rem; - font-weight: 600; -} -.context-menu button:hover { - background-color: rgba(255, 255, 255, 0.08); -} -.mobile-nav-btn { - display: none; - background: transparent; - border: none; - height: 2.4rem; - width: 2.4rem; - padding: 0; - margin: 0; - margin-right: 0.8rem; - align-items: center; - justify-content: center; - flex-shrink: 0; - color: var(--text-color); - cursor: pointer; -} -.mobile-nav-btn:active { - background-color: rgba(255, 255, 255, 0.1); - border-radius: 0.8rem; -} -.mobile-nav-btn.right { - margin-right: 0; - margin-left: 0.8rem; -} -.mobile-nav-btn svg { - width: 1.5rem; - height: 1.5rem; -} -.flex-spacer { - flex-grow: 1; -} -@media (max-width: 52rem) { - .mobile-nav-btn { - display: flex; - } - - main { - position: relative; - width: 100vw; - overflow: hidden; - } - - sidebar, sidebar.second, roomcontent { - position: absolute !important; - height: 100%; - transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1); - } - - sidebar { - left: 0; - z-index: 1; - } - - #roomsbar { - left: calc(var(--icon-button-height) + (var(--button-margin) * 2) + var(--border-width)); - width: calc(100vw - (var(--icon-button-height) + (var(--button-margin) * 2) + var(--border-width))) !important; - min-width: unset !important; - max-width: none !important; - z-index: 1; - } - - roomcontent { - left: 0; - width: 100vw !important; - transform: translateX(100vw); - border-right: none !important; - z-index: 2; - background-color: var(--main-bg-color); - } - - #roomdetailsbar { - left: 0; - width: 100vw !important; - min-width: unset !important; - max-width: none !important; - transform: translateX(100vw); - z-index: 3; - background-color: var(--main-bg-color); - } - - main.mobile-content sidebar, - main.mobile-content #roomsbar { - transform: translateX(-30vw); - } - - main.mobile-content roomcontent { - transform: translateX(0); - } - - main.mobile-details sidebar, - main.mobile-details #roomsbar { - transform: translateX(-60vw); - } - - main.mobile-details roomcontent { - transform: translateX(-30vw); - } - - main.mobile-details #roomdetailsbar { - transform: translateX(0); - } } \ No newline at end of file diff --git a/electron/assets/icon.png b/electron/assets/icon.png index d0d33b15..eba3e9ad 100644 Binary files a/electron/assets/icon.png and b/electron/assets/icon.png differ diff --git a/icons/icon.png b/icons/icon.png index d0d33b15..eba3e9ad 100644 Binary files a/icons/icon.png and b/icons/icon.png differ diff --git a/webroot/blah/en-us.json b/webroot/blah/en-us.json index 4a2db461..43bce67b 100644 --- a/webroot/blah/en-us.json +++ b/webroot/blah/en-us.json @@ -61,11 +61,7 @@ "placeholder.create.group.input": "My group", "placeholder.create.space.input": "My space", "title.name": "Name", - "desc.create.space": "Create a space for your community", - "desc.join.space": "Join a community that fits you", - "title.join.space": "Join space", - "title.space.id": "Space id", - + "desc.create.space": "Create, a space for your community", "title.sign.up": "Sign Up", "title.sign.in": "Sign In", diff --git a/webroot/index.html b/webroot/index.html index af0c149f..0442796d 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -21,15 +21,22 @@ - + title.home @@ -61,29 +69,29 @@
- +
- + + title.splash +
+ + title.welcome.splash +

desc.welcome.splash. v1.0

+
-
- -
@@ -111,7 +122,6 @@ async function start() { updateLoadingStatus("loading.loading"); try { - switchRoomContent("title.splash", splashScreen, false, "", true); if (host != null) { await updateProtocolAndUrl(host); @@ -120,8 +130,9 @@ { await updateProtocolAndUrl(window.location.hostname); } + sidebarPfp.src = await getAvatarUrl(username); - + showAction("Authenticating...", "startauth"); let res = await Auth(username, password); clearAction("startauth"); @@ -144,12 +155,12 @@ async function refreshDms() { try { - - - showAction("Refreshing dms...", "dmrefresh"); - let res = await fetchEncrypted("user/dm/list", ""); - console.log(res); - clearAction("dmrefresh"); + + + showAction("Refreshing dms...", "dmrefresh"); + let res = await fetchEncrypted("user/dm/list", ""); + console.log(res); + clearAction("dmrefresh"); } catch (e) { clearAction("dmrefresh"); @@ -173,10 +184,11 @@ showBlahNotification("error:chat.add.failed"); } } - + async function createGroup() { - + } + \ No newline at end of file diff --git a/webroot/main.js b/webroot/main.js index 09363000..dfdf26fa 100644 --- a/webroot/main.js +++ b/webroot/main.js @@ -66,7 +66,6 @@ try { var sidebarInboxIndicator = sidebarInbox.children.item(0); - var fixedContextMenu = document.getElementById("fixed-context-menu"); } catch (e) { } @@ -654,86 +653,54 @@ password = localStorage.getItem('password'); host = localStorage.getItem('host'); mainJS(); - -function showFixedContextMenu(rect, html) { - let parser = new DOMParser(); - let doc = parser.parseFromString(html, "text/html"); - - let blahTags = doc.getElementsByTagName("blah"); - for (let i = 0; i < blahTags.length; i++) { - blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML); - } - blahTags = doc.getElementsByClassName("blah"); - for (let i = 0; i < blahTags.length; i++) { - blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML); - } - - let placeholders = doc.querySelectorAll("[placeholder]"); - for (let i = 0; i < placeholders.length; i++) { - if (placeholders[i].placeholder.startsWith("{blah(")) - { - let value = placeholders[i].placeholder.split("{blah(")[1].split(")}")[0]; - placeholders[i].placeholder = processBlah(value); - } - - } - - fixedContextMenu.innerHTML = doc.body.innerHTML; - - fixedContextMenu.style.left = `${rect.right + 10}px`; - fixedContextMenu.style.top = `${rect.top}px`; - - fixedContextMenu.classList.add("show"); -} -async function switchRoomContent(title, content, showRoomBar, icon = "", skipMobileSlide = false) -{ - roomContentMain.style.transform = "scale(0.85)"; - roomContentMain.style.opacity = "0"; - await delay(200); - let backBtnHtml = ``; - let detailsBtnHtml = showRoomBar ? `` : ''; - - roomTopBar.innerHTML = `${backBtnHtml}${icon}${processBlah(title)}
${detailsBtnHtml}`; - roomDetailsBar.style.display = showRoomBar ? "flex" : "none"; - - let parser = new DOMParser(); - let doc = parser.parseFromString(content, "text/html"); - - let blahTags = doc.getElementsByTagName("blah"); - for (let i = 0; i < blahTags.length; i++) { - blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML); - } - blahTags = doc.getElementsByClassName("blah"); - for (let i = 0; i < blahTags.length; i++) { - blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML); - } - - let placeholders = doc.querySelectorAll("[placeholder]"); - for (let i = 0; i < placeholders.length; i++) { - if (placeholders[i].placeholder.startsWith("{blah(")) - { - let value = placeholders[i].placeholder.split("{blah(")[1].split(")}")[0]; - placeholders[i].placeholder = processBlah(value); - } - } - - roomContentMain.innerHTML = doc.body.innerHTML; - - roomContentMain.style.transform = ""; - roomContentMain.style.opacity = ""; - - const rem = parseFloat(getComputedStyle(document.documentElement).fontSize); - if (window.innerWidth <= 52 * rem && !skipMobileSlide) { - mainScreen.classList.remove('mobile-details'); - mainScreen.classList.add('mobile-content'); - } -} collapseDmsBtn.addEventListener("click", () => { collapseDmsBtn.classList.toggle("collapsed"); }); collapseGroupsBtn.addEventListener("click", () => { collapseGroupsBtn.classList.toggle("collapsed"); }); + + +//Invite to dm, addDmScreen, false +async function switchRoomContent(title, content, showRoomBar) +{ + roomContentMain.style.transform = "scale(0.85)"; + roomContentMain.style.opacity = "0"; + await delay(200); + + roomTopBar.innerHTML = processBlah(title); + roomDetailsBar.style.display = showRoomBar ? "flex" : "none"; + + //content blah parsing + let parser = new DOMParser(); + let doc = parser.parseFromString(content, "text/html"); + + let blahTags = doc.getElementsByTagName("blah"); + for (let i = 0; i < blahTags.length; i++) { + blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML); + } + blahTags = doc.getElementsByClassName("blah"); + for (let i = 0; i < blahTags.length; i++) { + blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML); + } + + let placeholders = doc.querySelectorAll("[placeholder]"); + for (let i = 0; i < placeholders.length; i++) { + if (placeholders[i].placeholder.startsWith("{blah(")) + { + let value = placeholders[i].placeholder.split("{blah(")[1].split(")}")[0]; + placeholders[i].placeholder = processBlah(value); + } + + } + + roomContentMain.innerHTML = doc.body.innerHTML; + + + roomContentMain.style.transform = ""; + roomContentMain.style.opacity = ""; +} + addDmBtn.addEventListener("click", async () => { switchRoomContent("title.create.dm", addDmScreen, false); }); @@ -741,107 +708,47 @@ addGroupBtn.addEventListener("click", async () => { switchRoomContent("title.create.group", createGroupScreen, false); }); - -var indicatorBeforeFixedMenu; -sidebarAddButton.addEventListener("click", (e) => { - e.stopPropagation(); - if (fixedContextMenu.classList.contains("show")) { - fixedContextMenu.classList.remove("show"); - setActiveSidebarIndicator(indicatorBeforeFixedMenu); - } else { - setActiveSidebarIndicator(sidebarAddIndicator, true); - const rect = sidebarAddButton.getBoundingClientRect(); - showFixedContextMenu(rect, addSpaceMenu); - } -}); - -document.addEventListener("click", (e) => { - if (fixedContextMenu.classList.contains("show")) { - if (!fixedContextMenu.contains(e.target)) { - fixedContextMenu.classList.remove("show"); - setActiveSidebarIndicator(indicatorBeforeFixedMenu); - } - } -}); - - - function gotoSideProfilePopup() { } function gotoInbox() { - setActiveSidebarIndicator(sidebarInboxIndicator); + } -function gotoCreateSpace() { - fixedContextMenu.classList.remove("show"); - setActiveSidebarIndicator(sidebarAddIndicator); +async function gotoCreateSpace() { switchRoomContent("title.create.space", createSpaceScreen, false); } -function gotoJoinSpace() { - fixedContextMenu.classList.remove("show"); - setActiveSidebarIndicator(sidebarAddIndicator); - switchRoomContent("title.join.space", joinSpaceScreen, false); -} function gotoHome() { - setActiveSidebarIndicator(sidebarHomeIndicator); - switchRoomContent("title.splash", splashScreen, false); + } -function setActiveSidebarIndicator(element, skipDisabling = false) -{ - let indicators = document.getElementsByTagName("indicator"); - for (let i = 0; i < indicators.length; i++) { - if (indicators[i].classList.contains("active")) - { - indicatorBeforeFixedMenu = indicators[i]; - if (!skipDisabling) - { - indicators[i].classList.remove("active"); - } - } - } - - element.classList.add("active"); -} -function mobileNavBack() { - if(mainScreen.classList.contains('mobile-details')) { - mainScreen.classList.remove('mobile-details'); - mainScreen.classList.add('mobile-content'); - } else { - mainScreen.classList.remove('mobile-content'); - } -} -function mobileNavDetails() { - mainScreen.classList.add('mobile-details'); -} -let touchStartX = 0; -let touchEndX = 0; -let touchStartY = 0; -let touchEndY = 0; -document.addEventListener('touchstart', e => { - touchStartX = e.changedTouches[0].screenX; - touchStartY = e.changedTouches[0].screenY; + +/* replaced with css +sidebarHomeButton.addEventListener("mouseenter", () => { + sidebarHomeIndicator.classList.add("hover"); }); -document.addEventListener('touchend', e => { - touchEndX = e.changedTouches[0].screenX; - touchEndY = e.changedTouches[0].screenY; - handleMobileSwipe(); +sidebarHomeButton.addEventListener("mouseleave", () => { + sidebarHomeIndicator.classList.remove("hover"); }); -function handleMobileSwipe() { - const rem = parseFloat(getComputedStyle(document.documentElement).fontSize); - if (window.innerWidth > 52 * rem) return; - let diffX = touchEndX - touchStartX; - let diffY = touchEndY - touchStartY; +sidebarAddButton.addEventListener("mouseenter", () => { + sidebarAddIndicator.classList.add("hover"); +}); +sidebarAddButton.addEventListener("mouseleave", () => { + sidebarAddIndicator.classList.remove("hover"); +}); - if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 60) { - if (diffX > 0) { - mobileNavBack(); - } else { - if (mainScreen.classList.contains('mobile-content') && roomDetailsBar.style.display !== 'none') { - mobileNavDetails(); - } - } - } -} \ No newline at end of file +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"); +}); +*/ \ No newline at end of file diff --git a/webroot/screens.js b/webroot/screens.js index ed6c908c..d4c5c96d 100644 --- a/webroot/screens.js +++ b/webroot/screens.js @@ -1,11 +1,3 @@ -//room screens -var splashScreen = ` -
- - title.welcome.splash -

desc.welcome.splash. v1.0

-
-`; var addDmScreen = `
@@ -14,7 +6,7 @@ var addDmScreen = `
- +
@@ -45,43 +37,11 @@ var createSpaceScreen = `

desc.create.space


- +
-`; -var joinSpaceScreen = ` -
- - title.join.space -

desc.join.space

-
-
- - -
-
- - -
-
- -
-
-`; - - -//context menus -var addSpaceMenu = ` - - `; \ No newline at end of file diff --git a/webroot/style.css b/webroot/style.css index 10742f6b..ec2c944a 100644 --- a/webroot/style.css +++ b/webroot/style.css @@ -5,7 +5,6 @@ :root { --main-bg-color: rgb(20, 20, 20); --text-color: rgb(240, 240, 245); - --darker-text-color: rgb(210, 210, 215); --icon-button-size: 2rem; --press-scale: scale(0.92); --light-border-color: rgba(255, 255, 255, 0.08); @@ -13,7 +12,7 @@ --icon-button-height: 3.4rem; --button-height: 2.4rem; --border-width: 0.09rem; - + --big-default: rgb(207 207 207); --big-red: rgb(202 0 0); --big-green: rgb(25 189 0); @@ -53,7 +52,7 @@ main, loading { overflow: hidden; } loading { - justify-content: center; + justify-content: center; align-items: center; width: 100%; } @@ -70,6 +69,7 @@ loading { user-select: none !important; -webkit-user-drag: none !important; } + button, input { border-radius: 0.8rem; background-color: rgba(255, 255, 255, 0.05); @@ -84,8 +84,8 @@ button, input { border: var(--border-width) solid var(--light-border-color); backface-visibility: hidden; - transform: translateZ(0); - will-change: transform; + transform: translateZ(0); + will-change: transform; transform-origin: center center; } input { @@ -149,7 +149,7 @@ button:active, input:active { roomcontent { display: flex; flex-direction: column; - + height: 100%; width: calc(100vw - (var(--icon-button-height) + (var(--button-margin) * 2) + var(--border-width)) - 17rem); border-right: var(--border-width) solid var(--light-border-color); @@ -157,7 +157,7 @@ roomcontent { roomcontent2 { display: flex; flex-direction: column; - + height: calc(100% - (var(--button-height) * 1.5)); width: 100%; } @@ -180,23 +180,27 @@ sidebar.second { align-items: center; justify-content: space-between; } + .collapse-text-button { padding-left: calc(var(--button-margin) + 0.2rem); flex-shrink: 0; - flex-grow: 1; + flex-grow: 1; border: none; background-color: transparent; height: 2rem; font-weight: 600; - gap: 0.3rem; + gap: 0.3rem; } + .collapse-text-button .chevron { width: 1.25rem; height: 1.25rem; } + .collapse-text-button.collapsed .chevron { transform: rotate(-90deg); } + .add-action-button { border: none; background-color: transparent; @@ -207,6 +211,7 @@ sidebar.second { justify-content: center; color: rgba(255, 255, 255, 0.5); } + .add-action-button svg { width: 1.25rem; height: 1.25rem; @@ -219,6 +224,8 @@ hr { width: 60%; margin-left: 20%; } + + #notification-container { padding-top: env(safe-area-inset-top); position: fixed; @@ -232,10 +239,12 @@ hr { pointer-events: none; align-items: center; } + .notification { background: rgba(255, 255, 255, 0.015); backdrop-filter: blur(1.2rem); -webkit-backdrop-filter: blur(1.2rem); + border: var(--border-width) solid var(--light-border-color); border-radius: 0.9rem; @@ -252,37 +261,43 @@ hr { transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), - background-color 0.2s ease; + background-color 0.2s ease; } + .notification.show { opacity: 1; transform: translateY(0); } + .notification.info { border-color: var(--big-default); } + .notification.error { border-color: var(--big-red); } + .notification.success { border-color: var(--big-green); } + roomtopbar { height: calc(var(--button-height) * 1.5); + display: flex; flex-direction: row; width: 100%; border-bottom: var(--border-width) solid var(--light-border-color); - + line-height: calc(var(--button-height) * 1.5); font-weight: bold; padding-left: calc(var(--button-margin) * 3); - padding-right: calc(var(--button-margin) * 3); font-size: 1.5rem; } sidebar.second#roomdetailsbar { height: calc(var(--button-height) * 1.5); + display: flex; flex-direction: row; @@ -296,24 +311,32 @@ herotitle { font-weight: bold; font-size: 1.6rem; } + + + + .input-group { text-align: left; display: flex; flex-direction: column; gap: 0.2rem; + width: 90%; max-width: 30rem; } + .input-group label { font-size: 0.75rem; font-weight: 800; margin-left: 0.6rem; margin-bottom: -0.2rem; opacity: 0.4; + letter-spacing: 0.05rem; position: relative; z-index: 1; } + .submit-button { justify-content: center; background-color: var(--text-color); @@ -322,9 +345,11 @@ herotitle { border: none; font-size: 1.05rem; } + .bottom-element { margin-top: auto; } + @media (hover: hover) { sidebarelement:hover indicator:not(.active) { content: ""; @@ -367,149 +392,11 @@ sidebarelement:has(.icon-button:active) indicator:not(.active) { border-radius: 0.8rem; transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.6rem)); } -blah, inherit, .inherit { + +blah { all: inherit; padding: 0; margin: 0; display: inline; opacity: 1; -} -space{ - margin-left: 0.4rem; -} -.context-menu { - position: fixed; - background: var(--main-bg-color); - border: var(--border-width) solid var(--light-border-color); - border-radius: 0.8rem; - padding: 0.4rem; - display: flex; - flex-direction: column; - gap: 0.2rem; - z-index: 2000; - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4); - opacity: 0; - transform: scale(0.95); - transform-origin: center left; - pointer-events: none; -} -.context-menu.show { - opacity: 1; - transform: scale(1); - pointer-events: auto; -} -.context-menu button { - margin: 0; - padding: 0.5rem 1rem; - border: none; - background: transparent; - width: 100%; - min-width: 10rem; - justify-content: flex-start; - gap: 0.5rem; - font-weight: 600; -} -.context-menu button:hover { - background-color: rgba(255, 255, 255, 0.08); -} -.mobile-nav-btn { - display: none; - background: transparent; - border: none; - height: 2.4rem; - width: 2.4rem; - padding: 0; - margin: 0; - margin-right: 0.8rem; - align-items: center; - justify-content: center; - flex-shrink: 0; - color: var(--text-color); - cursor: pointer; -} -.mobile-nav-btn:active { - background-color: rgba(255, 255, 255, 0.1); - border-radius: 0.8rem; -} -.mobile-nav-btn.right { - margin-right: 0; - margin-left: 0.8rem; -} -.mobile-nav-btn svg { - width: 1.5rem; - height: 1.5rem; -} -.flex-spacer { - flex-grow: 1; -} -@media (max-width: 52rem) { - .mobile-nav-btn { - display: flex; - } - - main { - position: relative; - width: 100vw; - overflow: hidden; - } - - sidebar, sidebar.second, roomcontent { - position: absolute !important; - height: 100%; - transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1); - } - - sidebar { - left: 0; - z-index: 1; - } - - #roomsbar { - left: calc(var(--icon-button-height) + (var(--button-margin) * 2) + var(--border-width)); - width: calc(100vw - (var(--icon-button-height) + (var(--button-margin) * 2) + var(--border-width))) !important; - min-width: unset !important; - max-width: none !important; - z-index: 1; - } - - roomcontent { - left: 0; - width: 100vw !important; - transform: translateX(100vw); - border-right: none !important; - z-index: 2; - background-color: var(--main-bg-color); - } - - #roomdetailsbar { - left: 0; - width: 100vw !important; - min-width: unset !important; - max-width: none !important; - transform: translateX(100vw); - z-index: 3; - background-color: var(--main-bg-color); - } - - main.mobile-content sidebar, - main.mobile-content #roomsbar { - transform: translateX(-30vw); - } - - main.mobile-content roomcontent { - transform: translateX(0); - } - - main.mobile-details sidebar, - main.mobile-details #roomsbar { - transform: translateX(-60vw); - } - - main.mobile-details roomcontent { - transform: translateX(-30vw); - } - - main.mobile-details #roomdetailsbar { - transform: translateX(0); - } } \ No newline at end of file