Add switchDetailsContent function

android/app/src/main/assets/public/index.html

@@ -55,21 +55,21 @@
         </sidebar>
         <sidebar class="second" id="roomsbar">
             <roomtopbar>
-                <inherit></inherit>
+                <inherit style="display: flex;"></inherit>
             </roomtopbar>
             <roomcontent2>
             </roomcontent2>
         </sidebar>
         <roomcontent>
             <roomtopbar>
-                <inherit></inherit>
+                <inherit style="display: flex;"></inherit>
             </roomtopbar>
             <roomcontent2>
             </roomcontent2>
         </roomcontent>
         <sidebar class="second" id="roomdetailsbar" style="display: none;">
             <roomtopbar>
-                <inherit></inherit>
+                <inherit style="display: flex;"></inherit>
             </roomtopbar>
             <roomcontent2>
             </roomcontent2>

android/app/src/main/assets/public/main.js

@@ -47,10 +47,13 @@ try {
 
     var roomContentMain = document.getElementsByTagName("roomcontent2")[1];
 
+    var roomDetailsMain = document.getElementsByTagName("roomcontent2")[2];
+
     var roomContentBar = roomContent.children[0];
 
     var roomsTopBar = document.getElementsByTagName("roomtopbar")[0];
     var roomTopBar = document.getElementsByTagName("roomtopbar")[1];
+    var detailsTopBar = document.getElementsByTagName("roomtopbar")[2];
 
     var sidebarProfile = document.getElementById("sidebar-profile");
     var sidebarProfileButton = sidebarProfile.children.item(1);
@@ -786,6 +789,58 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob
     roomsTopBarTransition.style.opacity = "";
 
     
+}
+async function switchDetailsContent(title, content)
+{
+    let roomsTopBarTransition = detailsTopBar.children.item(0);
+
+    roomDetailsMain.style.transform = "scale(0.85)";
+    roomDetailsMain.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) {
+    }
+    else
+    {
+        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);
+        }
+    }
+
+    roomDetailsMain.innerHTML = doc.body.innerHTML;
+
+    roomDetailsMain.style.transform = "";
+    roomDetailsMain.style.opacity = "";
+
+    roomsTopBarTransition.style.transform = "";
+    roomsTopBarTransition.style.opacity = "";
+
+
 }
 function clickCollapseDms()
 {

android/app/src/main/assets/public/screens.js

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

android/app/src/main/assets/public/style.css

@@ -374,7 +374,7 @@ blah, inherit, .inherit {
     all: inherit;
     padding: 0;
     margin: 0;
-    display: flex;
+    display: inline;
     opacity: 1;
     border: none;
 }

webroot/main.js

@@ -47,10 +47,13 @@ try {
 
     var roomContentMain = document.getElementsByTagName("roomcontent2")[1];
 
+    var roomDetailsMain = document.getElementsByTagName("roomcontent2")[2];
+
     var roomContentBar = roomContent.children[0];
 
     var roomsTopBar = document.getElementsByTagName("roomtopbar")[0];
     var roomTopBar = document.getElementsByTagName("roomtopbar")[1];
+    var detailsTopBar = document.getElementsByTagName("roomtopbar")[2];
 
     var sidebarProfile = document.getElementById("sidebar-profile");
     var sidebarProfileButton = sidebarProfile.children.item(1);
@@ -786,6 +789,58 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob
     roomsTopBarTransition.style.opacity = "";
 
     
+}
+async function switchDetailsContent(title, content)
+{
+    let roomsTopBarTransition = detailsTopBar.children.item(0);
+
+    roomDetailsMain.style.transform = "scale(0.85)";
+    roomDetailsMain.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) {
+    }
+    else
+    {
+        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);
+        }
+    }
+
+    roomDetailsMain.innerHTML = doc.body.innerHTML;
+
+    roomDetailsMain.style.transform = "";
+    roomDetailsMain.style.opacity = "";
+
+    roomsTopBarTransition.style.transform = "";
+    roomsTopBarTransition.style.opacity = "";
+
+
 }
 function clickCollapseDms()
 {