sugary/LarpixClient
1
0
Fork 0
forked from olcxjas-softworks/LarpixClient
Code Pull requests Activity

TopBar transitions

Browse source
This commit is contained in:
olcxja 2026-05-15 10:04:29 +02:00
commit bb736b26bd
24 changed files with 397 additions and 142 deletions
Download patch file Download diff file Expand all files Collapse all files

42
android/app/src/main/assets/public/index.html
View file

@ -55,51 +55,21 @@
</sidebar>
<sidebar class="second" id="roomsbar">
<roomtopbar>
<blah>title.home</blah>
<inherit></inherit>
</roomtopbar>
<div class="sidebar-section-header">
<button class="collapse-text-button" id="collapse-dms">
<span><blah>title.dms</blah></span>
<svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
stroke="var(--text-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
<button class="add-action-button" id="add-dm-btn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="var(--text-color)"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</button>
</div>
<div class="sidebar-section-header">
<button class="collapse-text-button" id="collapse-groups">
<span><blah>title.groups</blah></span>
<svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
stroke="var(--text-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
<button class="add-action-button" id="add-group-btn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="var(--text-color)"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</button>
</div>
<roomcontent2>
</roomcontent2>
</sidebar>
<roomcontent>
<roomtopbar>
<inherit></inherit>
</roomtopbar>
<roomcontent2>
</roomcontent2>
</roomcontent>
<sidebar class="second" id="roomdetailsbar" style="display: none;">
<roomtopbar>
<inherit></inherit>
</roomtopbar>
<roomcontent2>
</roomcontent2>
@ -115,7 +85,7 @@
async function start() {
updateLoadingStatus("loading.loading");
try {
switchRoomContent("title.splash", splashScreen, false, "", true);
gotoHome();
if (host != null)
{
await updateProtocolAndUrl(host);

150
android/app/src/main/assets/public/main.js
View file

@ -29,9 +29,6 @@ try {
var loadingStatus = document.getElementById("loadingstatus");
var collapseDmsBtn = document.getElementById("collapse-dms");
var collapseGroupsBtn = document.getElementById("collapse-groups");
var addDmBtn = document.getElementById("add-dm-btn");
var addGroupBtn = document.getElementById("add-group-btn");
@ -45,13 +42,14 @@ try {
var roomDetailsBar = document.getElementById("roomdetailsbar");
var roomContent = document.getElementsByTagName("roomcontent")[0];
var roomsBar = document.getElementById("roomsbar");
var roomsBar = document.getElementsByTagName("roomcontent2")[0];
var sideBar = document.getElementsByTagName("sidebar")[0];
var roomContentMain = document.getElementsByTagName("roomcontent2")[0];
var roomContentMain = document.getElementsByTagName("roomcontent2")[1];
var roomContentBar = roomContent.children[0];
var roomsTopBar = document.getElementsByTagName("roomtopbar")[0];
var roomTopBar = document.getElementsByTagName("roomtopbar")[1];
var sidebarProfile = document.getElementById("sidebar-profile");
@ -685,11 +683,60 @@ function showFixedContextMenu(rect, html) {
fixedContextMenu.classList.add("show");
}
async function switchRoomsBar(title, content) {
let roomsTopBarTransition = roomsTopBar.children.item(0);
roomsBar.style.transform = "scale(0.85)";
roomsBar.style.opacity = "0";
roomsTopBarTransition.style.transform = "scale(0.85)";
roomsTopBarTransition.style.opacity = "0";
await delay(200);
roomsTopBarTransition.innerHTML = processBlah(title);
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);
}
}
roomsBar.innerHTML = doc.body.innerHTML;
roomsBar.style.transform = "";
roomsBar.style.opacity = "";
roomsTopBarTransition.style.transform = "";
roomsTopBarTransition.style.opacity = "";
}
async function switchRoomContent(title, content, showRoomBar, icon = "", skipMobileSlide = false)
{
let roomsTopBarTransition = roomTopBar.children.item(0);
roomContentMain.style.transform = "scale(0.85)";
roomContentMain.style.opacity = "0";
roomsTopBarTransition.style.transform = "scale(0.85)";
roomsTopBarTransition.style.opacity = "0";
const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
if (window.innerWidth <= 52 * rem && !skipMobileSlide) {
if (title != "title.splash") //do not show splash on mobile
@ -706,7 +753,7 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob
let detailsBtnHtml = showRoomBar ? detailsBtn : '';
roomTopBar.innerHTML = `${backBtnHtml}${icon}<space></space><inherit>${processBlah(title)}</inherit><div class="flex-spacer"></div>${detailsBtnHtml}`;
roomsTopBarTransition.innerHTML = `${backBtnHtml}${icon}<space></space><inherit>${processBlah(title)}</inherit><div class="flex-spacer"></div>${detailsBtnHtml}`;
roomDetailsBar.style.display = showRoomBar ? "flex" : "none";
let parser = new DOMParser();
@ -735,25 +782,37 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob
roomContentMain.style.transform = "";
roomContentMain.style.opacity = "";
roomsTopBarTransition.style.transform = "";
roomsTopBarTransition.style.opacity = "";
}
collapseDmsBtn.addEventListener("click", () => {
function clickCollapseDms()
{
var collapseDmsBtn = document.getElementById("collapse-dms");
collapseDmsBtn.classList.toggle("collapsed");
});
collapseGroupsBtn.addEventListener("click", () => {
}
function clickCollapseGroups()
{
var collapseGroupsBtn = document.getElementById("collapse-groups");
collapseGroupsBtn.classList.toggle("collapsed");
});
addDmBtn.addEventListener("click", async () => {
switchRoomContent("title.create.dm", addDmScreen, false);
});
addGroupBtn.addEventListener("click", async () => {
}
function clickAddGroup()
{
switchRoomContent("title.create.group", createGroupScreen, false);
});
}
function clickAddDm()
{
switchRoomContent("title.create.dm", addDmScreen, false);
}
var indicatorBeforeFixedMenu;
sidebarAddButton.addEventListener("click", (e) => {
e.stopPropagation();
console.log("hi")
if (fixedContextMenu.classList.contains("show")) {
fixedContextMenu.classList.remove("show");
setActiveSidebarIndicator(indicatorBeforeFixedMenu);
@ -768,7 +827,9 @@ document.addEventListener("click", (e) => {
if (fixedContextMenu.classList.contains("show")) {
if (!fixedContextMenu.contains(e.target)) {
fixedContextMenu.classList.remove("show");
setActiveSidebarIndicator(indicatorBeforeFixedMenu);
if (!e.target.closest('sidebarelement')) {
setActiveSidebarIndicator(indicatorBeforeFixedMenu);
}
}
}
@ -803,6 +864,7 @@ function gotoJoinSpace() {
function gotoHome() {
setActiveSidebarIndicator(sidebarHomeIndicator);
switchRoomContent("title.splash", splashScreen, false);
switchRoomsBar("title.home", homeRoomBar);
}
function setActiveSidebarIndicator(element, skipDisabling = false)
@ -833,18 +895,70 @@ function mobileNavBack() {
function mobileNavDetails() {
mainScreen.classList.add('mobile-details');
}
let touchStartX = 0;
let touchEndX = 0;
let touchStartY = 0;
let touchEndY = 0;
let touchMoved = false;
document.addEventListener('touchstart', e => {
touchStartX = e.changedTouches[0].screenX;
touchStartY = e.changedTouches[0].screenY;
});
touchMoved = false;
activeTouchButton = e.target.closest('button, input');
if (activeTouchButton) {
activeTouchButton.classList.add('is-pressed');
}
}, { passive: true });
document.addEventListener('touchmove', e => {
if (!touchMoved) {
const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
let diffX = Math.abs(e.changedTouches[0].screenX - touchStartX);
let diffY = Math.abs(e.changedTouches[0].screenY - touchStartY);
if (diffX > rem || diffY > rem) {
touchMoved = true;
if (activeTouchButton) {
activeTouchButton.classList.remove('is-pressed');
activeTouchButton = null;
}
}
}
}, { passive: true });
document.addEventListener('touchend', e => {
touchEndX = e.changedTouches[0].screenX;
touchEndY = e.changedTouches[0].screenY;
handleMobileSwipe();
if (activeTouchButton) {
activeTouchButton.classList.remove('is-pressed');
if (!touchMoved) {
if (e.cancelable) {
e.preventDefault();
}
activeTouchButton.click();
}
activeTouchButton = null;
}
});
document.addEventListener('touchcancel', () => {
if (activeTouchButton) {
activeTouchButton.classList.remove('is-pressed');
activeTouchButton = null;
}
});
document.addEventListener('contextmenu', e => {
if (e.target.closest('button')) {
e.preventDefault();
}
});
function handleMobileSwipe() {
const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
@ -853,7 +967,7 @@ function handleMobileSwipe() {
let diffX = touchEndX - touchStartX;
let diffY = touchEndY - touchStartY;
if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 60) {
if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 4 * rem) {
if (diffX > 0) {
mobileNavBack();
} else {

39
android/app/src/main/assets/public/screens.js
View file

@ -73,6 +73,45 @@ var joinSpaceScreen = `
</div>
`;
//roombars
var homeRoomBar = `
<div class="sidebar-section-header">
<button class="collapse-text-button" id="collapse-dms" onclick="clickCollapseDms()">
<span><blah>title.dms</blah></span>
<svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
stroke="var(--text-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
<button class="add-action-button" id="add-dm-btn" onclick="clickAddDm()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="var(--text-color)"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</button>
</div>
<div class="sidebar-section-header">
<button class="collapse-text-button" id="collapse-groups" onclick="clickCollapseGroups()">
<span><blah>title.groups</blah></span>
<svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
stroke="var(--text-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
<button class="add-action-button" id="add-group-btn" onclick="clickAddGroup()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="var(--text-color)"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</button>
</div>
`;
//context menus
var addSpaceMenu = `

21
android/app/src/main/assets/public/style.css
View file

@ -87,9 +87,13 @@ button, input {
transform: translateZ(0);
will-change: transform;
transform-origin: center center;
touch-action: manipulation;
-webkit-touch-callout: none;
}
input {
padding-left: calc(var(--button-margin) * 2);
-webkit-touch-callout: default;
}
@ -143,9 +147,6 @@ indicator.active {
pointer-events: none !important;
}
button:active, input:active {
transform: var(--press-scale);
}
roomcontent {
display: flex;
flex-direction: column;
@ -348,13 +349,14 @@ herotitle {
color: var(--text-color);
}
}
button:active, input:active {
button:active, button.is-pressed, input:active, input.is-pressed {
background-color: rgba(255, 255, 255, 0.1);
transform: var(--press-scale);
}
.submit-button:active {
.submit-button:active, .submit-button.is-pressed {
background-color: rgba(255, 255, 255, 0.5);
}
.add-action-button:active {
.add-action-button:active, .add-action-button.is-pressed {
background-color: rgba(255, 255, 255, 0.1);
color: var(--text-color);
}
@ -372,8 +374,9 @@ blah, inherit, .inherit {
all: inherit;
padding: 0;
margin: 0;
display: inline;
display: flex;
opacity: 1;
border: none;
}
space{
margin-left: 0.4rem;
@ -428,9 +431,9 @@ space{
color: var(--text-color);
cursor: pointer;
}
.mobile-nav-btn:active {
.mobile-nav-btn:active, .mobile-nav-btn.is-pressed {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 0.8rem;
transform: var(--press-scale);
}
.mobile-nav-btn.right {
margin-right: 0;

BIN
android/app/src/main/res/drawable-land-hdpi/splash.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 9.7 KiB

Before After
Before After

BIN
android/app/src/main/res/drawable-land-ldpi/splash.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

Before After
Before After

BIN
android/app/src/main/res/drawable-land-mdpi/splash.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

Before After
Before After

BIN
android/app/src/main/res/drawable-land-xhdpi/splash.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Before After
Before After

BIN
android/app/src/main/res/drawable-land-xxhdpi/splash.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 79 KiB

After

Width:  |  Height:  |  Size: 25 KiB

Before After
Before After

BIN
android/app/src/main/res/drawable-land-xxxhdpi/splash.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 124 KiB

After

Width:  |  Height:  |  Size: 33 KiB

Before After
Before After

BIN
android/app/src/main/res/drawable-port-hdpi/splash.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

Before After
Before After

BIN
android/app/src/main/res/drawable-port-ldpi/splash.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.3 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

Before After
Before After

BIN
android/app/src/main/res/drawable-port-mdpi/splash.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

Before After
Before After

BIN
android/app/src/main/res/drawable-port-xhdpi/splash.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Before After
Before After

BIN
android/app/src/main/res/drawable-port-xxhdpi/splash.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 77 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Before After
Before After

BIN
android/app/src/main/res/drawable-port-xxxhdpi/splash.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 122 KiB

After

Width:  |  Height:  |  Size: 24 KiB

Before After
Before After

BIN
android/app/src/main/res/drawable/splash.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

Before After
Before After

31
assets/splash.svg
View file

@ -1,4 +1,4 @@
<svg width="1024" height="1024" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<svg width="1497" height="2656" viewBox="0 0 1497 2656" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#b870ff;stop-opacity:1" />
@ -9,21 +9,24 @@
<stop offset="100%" stop-color="#a64aff" />
</linearGradient>
</defs>
<rect width="1024" height="1024" fill="url(#bg_grad)" rx="190" />
<g transform="translate(112, 112) scale(1.55)">
<text x="256" y="320"
fill="#F0F0F5"
font-family="Nunito"
font-size="280"
font-weight="900"
text-anchor="middle"
letter-spacing="-5">MN</text>
<g transform="translate(748.5 1328) scale(0.4) translate(-512 -512)">
<rect width="1024" height="1024" fill="url(#bg_grad)" rx="190" />
<g transform="translate(112, 112) scale(1.55)">
<g opacity="0.6">
<circle cx="190" cy="405" r="15" fill="#F0F0F5" />
<circle cx="256" cy="405" r="15" fill="white" />
<circle cx="322" cy="405" r="15" fill="#F0F0F5" />
<text x="256" y="320"
fill="#F0F0F5"
font-family="Nunito"
font-size="280"
font-weight="900"
text-anchor="middle"
letter-spacing="-5">MN</text>
<g opacity="0.6">
<circle cx="190" cy="405" r="15" fill="#F0F0F5" />
<circle cx="256" cy="405" r="15" fill="white" />
<circle cx="322" cy="405" r="15" fill="#F0F0F5" />
</g>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

Before After
Before After

BIN
electron/assets/icon.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Before After
Before After

BIN
icons/icon.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Before After
Before After

42
webroot/index.html
View file

@ -55,51 +55,21 @@
</sidebar>
<sidebar class="second" id="roomsbar">
<roomtopbar>
<blah>title.home</blah>
<inherit></inherit>
</roomtopbar>
<div class="sidebar-section-header">
<button class="collapse-text-button" id="collapse-dms">
<span><blah>title.dms</blah></span>
<svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
stroke="var(--text-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
<button class="add-action-button" id="add-dm-btn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="var(--text-color)"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</button>
</div>
<div class="sidebar-section-header">
<button class="collapse-text-button" id="collapse-groups">
<span><blah>title.groups</blah></span>
<svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
stroke="var(--text-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
<button class="add-action-button" id="add-group-btn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="var(--text-color)"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</button>
</div>
<roomcontent2>
</roomcontent2>
</sidebar>
<roomcontent>
<roomtopbar>
<inherit></inherit>
</roomtopbar>
<roomcontent2>
</roomcontent2>
</roomcontent>
<sidebar class="second" id="roomdetailsbar" style="display: none;">
<roomtopbar>
<inherit></inherit>
</roomtopbar>
<roomcontent2>
</roomcontent2>
@ -115,7 +85,7 @@
async function start() {
updateLoadingStatus("loading.loading");
try {
switchRoomContent("title.splash", splashScreen, false, "", true);
gotoHome();
if (host != null)
{
await updateProtocolAndUrl(host);

150
webroot/main.js
View file

@ -29,9 +29,6 @@ try {
var loadingStatus = document.getElementById("loadingstatus");
var collapseDmsBtn = document.getElementById("collapse-dms");
var collapseGroupsBtn = document.getElementById("collapse-groups");
var addDmBtn = document.getElementById("add-dm-btn");
var addGroupBtn = document.getElementById("add-group-btn");
@ -45,13 +42,14 @@ try {
var roomDetailsBar = document.getElementById("roomdetailsbar");
var roomContent = document.getElementsByTagName("roomcontent")[0];
var roomsBar = document.getElementById("roomsbar");
var roomsBar = document.getElementsByTagName("roomcontent2")[0];
var sideBar = document.getElementsByTagName("sidebar")[0];
var roomContentMain = document.getElementsByTagName("roomcontent2")[0];
var roomContentMain = document.getElementsByTagName("roomcontent2")[1];
var roomContentBar = roomContent.children[0];
var roomsTopBar = document.getElementsByTagName("roomtopbar")[0];
var roomTopBar = document.getElementsByTagName("roomtopbar")[1];
var sidebarProfile = document.getElementById("sidebar-profile");
@ -685,11 +683,60 @@ function showFixedContextMenu(rect, html) {
fixedContextMenu.classList.add("show");
}
async function switchRoomsBar(title, content) {
let roomsTopBarTransition = roomsTopBar.children.item(0);
roomsBar.style.transform = "scale(0.85)";
roomsBar.style.opacity = "0";
roomsTopBarTransition.style.transform = "scale(0.85)";
roomsTopBarTransition.style.opacity = "0";
await delay(200);
roomsTopBarTransition.innerHTML = processBlah(title);
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);
}
}
roomsBar.innerHTML = doc.body.innerHTML;
roomsBar.style.transform = "";
roomsBar.style.opacity = "";
roomsTopBarTransition.style.transform = "";
roomsTopBarTransition.style.opacity = "";
}
async function switchRoomContent(title, content, showRoomBar, icon = "", skipMobileSlide = false)
{
let roomsTopBarTransition = roomTopBar.children.item(0);
roomContentMain.style.transform = "scale(0.85)";
roomContentMain.style.opacity = "0";
roomsTopBarTransition.style.transform = "scale(0.85)";
roomsTopBarTransition.style.opacity = "0";
const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
if (window.innerWidth <= 52 * rem && !skipMobileSlide) {
if (title != "title.splash") //do not show splash on mobile
@ -706,7 +753,7 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob
let detailsBtnHtml = showRoomBar ? detailsBtn : '';
roomTopBar.innerHTML = `${backBtnHtml}${icon}<space></space><inherit>${processBlah(title)}</inherit><div class="flex-spacer"></div>${detailsBtnHtml}`;
roomsTopBarTransition.innerHTML = `${backBtnHtml}${icon}<space></space><inherit>${processBlah(title)}</inherit><div class="flex-spacer"></div>${detailsBtnHtml}`;
roomDetailsBar.style.display = showRoomBar ? "flex" : "none";
let parser = new DOMParser();
@ -735,25 +782,37 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob
roomContentMain.style.transform = "";
roomContentMain.style.opacity = "";
roomsTopBarTransition.style.transform = "";
roomsTopBarTransition.style.opacity = "";
}
collapseDmsBtn.addEventListener("click", () => {
function clickCollapseDms()
{
var collapseDmsBtn = document.getElementById("collapse-dms");
collapseDmsBtn.classList.toggle("collapsed");
});
collapseGroupsBtn.addEventListener("click", () => {
}
function clickCollapseGroups()
{
var collapseGroupsBtn = document.getElementById("collapse-groups");
collapseGroupsBtn.classList.toggle("collapsed");
});
addDmBtn.addEventListener("click", async () => {
switchRoomContent("title.create.dm", addDmScreen, false);
});
addGroupBtn.addEventListener("click", async () => {
}
function clickAddGroup()
{
switchRoomContent("title.create.group", createGroupScreen, false);
});
}
function clickAddDm()
{
switchRoomContent("title.create.dm", addDmScreen, false);
}
var indicatorBeforeFixedMenu;
sidebarAddButton.addEventListener("click", (e) => {
e.stopPropagation();
console.log("hi")
if (fixedContextMenu.classList.contains("show")) {
fixedContextMenu.classList.remove("show");
setActiveSidebarIndicator(indicatorBeforeFixedMenu);
@ -768,7 +827,9 @@ document.addEventListener("click", (e) => {
if (fixedContextMenu.classList.contains("show")) {
if (!fixedContextMenu.contains(e.target)) {
fixedContextMenu.classList.remove("show");
setActiveSidebarIndicator(indicatorBeforeFixedMenu);
if (!e.target.closest('sidebarelement')) {
setActiveSidebarIndicator(indicatorBeforeFixedMenu);
}
}
}
@ -803,6 +864,7 @@ function gotoJoinSpace() {
function gotoHome() {
setActiveSidebarIndicator(sidebarHomeIndicator);
switchRoomContent("title.splash", splashScreen, false);
switchRoomsBar("title.home", homeRoomBar);
}
function setActiveSidebarIndicator(element, skipDisabling = false)
@ -833,18 +895,70 @@ function mobileNavBack() {
function mobileNavDetails() {
mainScreen.classList.add('mobile-details');
}
let touchStartX = 0;
let touchEndX = 0;
let touchStartY = 0;
let touchEndY = 0;
let touchMoved = false;
document.addEventListener('touchstart', e => {
touchStartX = e.changedTouches[0].screenX;
touchStartY = e.changedTouches[0].screenY;
});
touchMoved = false;
activeTouchButton = e.target.closest('button, input');
if (activeTouchButton) {
activeTouchButton.classList.add('is-pressed');
}
}, { passive: true });
document.addEventListener('touchmove', e => {
if (!touchMoved) {
const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
let diffX = Math.abs(e.changedTouches[0].screenX - touchStartX);
let diffY = Math.abs(e.changedTouches[0].screenY - touchStartY);
if (diffX > rem || diffY > rem) {
touchMoved = true;
if (activeTouchButton) {
activeTouchButton.classList.remove('is-pressed');
activeTouchButton = null;
}
}
}
}, { passive: true });
document.addEventListener('touchend', e => {
touchEndX = e.changedTouches[0].screenX;
touchEndY = e.changedTouches[0].screenY;
handleMobileSwipe();
if (activeTouchButton) {
activeTouchButton.classList.remove('is-pressed');
if (!touchMoved) {
if (e.cancelable) {
e.preventDefault();
}
activeTouchButton.click();
}
activeTouchButton = null;
}
});
document.addEventListener('touchcancel', () => {
if (activeTouchButton) {
activeTouchButton.classList.remove('is-pressed');
activeTouchButton = null;
}
});
document.addEventListener('contextmenu', e => {
if (e.target.closest('button')) {
e.preventDefault();
}
});
function handleMobileSwipe() {
const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
@ -853,7 +967,7 @@ function handleMobileSwipe() {
let diffX = touchEndX - touchStartX;
let diffY = touchEndY - touchStartY;
if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 60) {
if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 4 * rem) {
if (diffX > 0) {
mobileNavBack();
} else {

39
webroot/screens.js
View file

@ -73,6 +73,45 @@ var joinSpaceScreen = `
</div>
`;
//roombars
var homeRoomBar = `
<div class="sidebar-section-header">
<button class="collapse-text-button" id="collapse-dms" onclick="clickCollapseDms()">
<span><blah>title.dms</blah></span>
<svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
stroke="var(--text-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
<button class="add-action-button" id="add-dm-btn" onclick="clickAddDm()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="var(--text-color)"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</button>
</div>
<div class="sidebar-section-header">
<button class="collapse-text-button" id="collapse-groups" onclick="clickCollapseGroups()">
<span><blah>title.groups</blah></span>
<svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
stroke="var(--text-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
<button class="add-action-button" id="add-group-btn" onclick="clickAddGroup()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="var(--text-color)"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</button>
</div>
`;
//context menus
var addSpaceMenu = `

21
webroot/style.css
View file

@ -87,9 +87,13 @@ button, input {
transform: translateZ(0);
will-change: transform;
transform-origin: center center;
touch-action: manipulation;
-webkit-touch-callout: none;
}
input {
padding-left: calc(var(--button-margin) * 2);
-webkit-touch-callout: default;
}
@ -143,9 +147,6 @@ indicator.active {
pointer-events: none !important;
}
button:active, input:active {
transform: var(--press-scale);
}
roomcontent {
display: flex;
flex-direction: column;
@ -348,13 +349,14 @@ herotitle {
color: var(--text-color);
}
}
button:active, input:active {
button:active, button.is-pressed, input:active, input.is-pressed {
background-color: rgba(255, 255, 255, 0.1);
transform: var(--press-scale);
}
.submit-button:active {
.submit-button:active, .submit-button.is-pressed {
background-color: rgba(255, 255, 255, 0.5);
}
.add-action-button:active {
.add-action-button:active, .add-action-button.is-pressed {
background-color: rgba(255, 255, 255, 0.1);
color: var(--text-color);
}
@ -372,8 +374,9 @@ blah, inherit, .inherit {
all: inherit;
padding: 0;
margin: 0;
display: inline;
display: flex;
opacity: 1;
border: none;
}
space{
margin-left: 0.4rem;
@ -428,9 +431,9 @@ space{
color: var(--text-color);
cursor: pointer;
}
.mobile-nav-btn:active {
.mobile-nav-btn:active, .mobile-nav-btn.is-pressed {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 0.8rem;
transform: var(--press-scale);
}
.mobile-nav-btn.right {
margin-right: 0;