From 8e876352094e3fba211550254eea82ffa57ada11 Mon Sep 17 00:00:00 2001 From: MathMan05 Date: Mon, 9 Sep 2024 10:46:30 -0500 Subject: [PATCH] fixing up the dialog class with other bug fixes --- .dist/dialog.js | 46 +++++++++++++++----------------- .dist/direct.js | 1 - .dist/infiniteScroller.js | 4 +-- .dist/localuser.js | 6 ++--- webpage/dialog.ts | 53 +++++++++++++++++-------------------- webpage/direct.ts | 2 +- webpage/infiniteScroller.ts | 4 +-- webpage/localuser.ts | 4 +-- webpage/style.css | 1 + 9 files changed, 55 insertions(+), 66 deletions(-) diff --git a/.dist/dialog.js b/.dist/dialog.js index 562d6ec..c7ccdfe 100644 --- a/.dist/dialog.js +++ b/.dist/dialog.js @@ -32,27 +32,23 @@ class Dialog { } return img; case "hdiv": - const hdiv = document.createElement("table"); - const tr = document.createElement("tr"); - hdiv.appendChild(tr); + const hdiv = document.createElement("div"); + hdiv.classList.add("flexltr"); for (const thing of array) { if (thing === "hdiv") { continue; } - const td = document.createElement("td"); - td.appendChild(this.tohtml(thing)); - tr.appendChild(td); + hdiv.appendChild(this.tohtml(thing)); } return hdiv; case "vdiv": - const vdiv = document.createElement("table"); + const vdiv = document.createElement("div"); + vdiv.classList.add("flexttb"); for (const thing of array) { if (thing === "vdiv") { continue; } - const tr = document.createElement("tr"); - tr.appendChild(this.tohtml(thing)); - vdiv.appendChild(tr); + vdiv.appendChild(this.tohtml(thing)); } return vdiv; case "checkbox": @@ -192,34 +188,34 @@ class Dialog { return div; } case "tabs": { - const table = document.createElement("table"); - const tabs = document.createElement("tr"); + const table = document.createElement("div"); + table.classList.add("flexttb"); + const tabs = document.createElement("div"); + tabs.classList.add("flexltr"); tabs.classList.add("tabbed-head"); table.appendChild(tabs); - const td = document.createElement("td"); - tabs.appendChild(td); - const content = document.createElement("tr"); + const content = document.createElement("div"); content.classList.add("tabbed-content"); table.appendChild(content); let shown; for (const thing of array[1]) { const button = document.createElement("button"); button.textContent = thing[0]; - td.appendChild(button); - const tdcontent = document.createElement("td"); - tdcontent.colSpan = array[1].length; - tdcontent.appendChild(this.tohtml(thing[1])); - content.appendChild(tdcontent); + tabs.appendChild(button); + const html = this.tohtml(thing[1]); + content.append(html); if (!shown) { - shown = tdcontent; + shown = html; } else { - tdcontent.hidden = true; + html.style.display = "none"; } button.addEventListener("click", _ => { - shown.hidden = true; - tdcontent.hidden = false; - shown = tdcontent; + if (shown) { + shown.style.display = "none"; + } + html.style.display = ""; + shown = html; }); } return table; diff --git a/.dist/direct.js b/.dist/direct.js index 5b621be..cdcad07 100644 --- a/.dist/direct.js +++ b/.dist/direct.js @@ -6,7 +6,6 @@ import { Permissions } from "./permissions.js"; import { SnowFlake } from "./snowflake.js"; import { Contextmenu } from "./contextmenu.js"; class Direct extends Guild { - channelids; getUnixTime() { throw new Error("Do not call this for Direct, it does not make sense"); } diff --git a/.dist/infiniteScroller.js b/.dist/infiniteScroller.js index 039bc33..7d15e63 100644 --- a/.dist/infiniteScroller.js +++ b/.dist/infiniteScroller.js @@ -91,7 +91,7 @@ class InfiniteScroller { } currrunning = false; async addedBottom() { - this.updatestuff(); + await this.updatestuff(); const func = this.snapBottom(); await this.watchForChange(); func(); @@ -99,7 +99,7 @@ class InfiniteScroller { snapBottom() { const scrollBottom = this.scrollBottom; return () => { - if (this.div && scrollBottom < 10) { + if (this.div && scrollBottom < 4) { this.div.scrollTop = this.div.scrollHeight + 20; } }; diff --git a/.dist/localuser.js b/.dist/localuser.js index 5ebff49..55b6751 100644 --- a/.dist/localuser.js +++ b/.dist/localuser.js @@ -1252,8 +1252,7 @@ class Localuser { this.manageBot(appId); } ] - ] - ]); + ]]); appDialog.show(); } async manageBot(appId = "") { @@ -1319,8 +1318,7 @@ class Localuser { botDialog.hide(); } ] - ] - ]); + ]]); botDialog.show(); } //---------- resolving members code ----------- diff --git a/webpage/dialog.ts b/webpage/dialog.ts index 35e7853..417bbc4 100644 --- a/webpage/dialog.ts +++ b/webpage/dialog.ts @@ -28,12 +28,12 @@ type dialogjson=[ "tabs",[string,dialogjson][] ] class Dialog{ - layout; + layout:dialogjson; onclose: Function; onopen: Function; html:HTMLDivElement; background: HTMLDivElement; - constructor(layout,onclose=_=>{},onopen=_=>{}){ + constructor(layout:dialogjson,onclose=_=>{},onopen=_=>{}){ this.layout=layout; this.onclose=onclose; this.onopen=onopen; @@ -60,28 +60,24 @@ class Dialog{ } return img; case"hdiv": - const hdiv=document.createElement("table"); - const tr=document.createElement("tr"); - hdiv.appendChild(tr); + const hdiv=document.createElement("div"); + hdiv.classList.add("flexltr") for(const thing of array){ if(thing==="hdiv"){ continue; } - const td=document.createElement("td"); - td.appendChild(this.tohtml(thing)); - tr.appendChild(td); + hdiv.appendChild(this.tohtml(thing)); } return hdiv; case"vdiv": - const vdiv=document.createElement("table"); + const vdiv=document.createElement("div"); + vdiv.classList.add("flexttb"); for(const thing of array){ if(thing==="vdiv"){ continue; } - const tr=document.createElement("tr"); - tr.appendChild(this.tohtml(thing)); - vdiv.appendChild(tr); + vdiv.appendChild(this.tohtml(thing)); } return vdiv; case"checkbox": @@ -225,36 +221,35 @@ class Dialog{ return div; } case"tabs":{ - const table=document.createElement("table"); - const tabs=document.createElement("tr"); + const table=document.createElement("div"); + table.classList.add("flexttb"); + const tabs=document.createElement("div"); + tabs.classList.add("flexltr") tabs.classList.add("tabbed-head"); table.appendChild(tabs); - const td=document.createElement("td"); - tabs.appendChild(td); - const content=document.createElement("tr"); + const content=document.createElement("div"); content.classList.add("tabbed-content"); table.appendChild(content); - let shown; + let shown:HTMLElement|undefined; for(const thing of array[1]){ const button=document.createElement("button"); button.textContent=thing[0]; - td.appendChild(button); + tabs.appendChild(button); - - const tdcontent=document.createElement("td"); - tdcontent.colSpan=array[1].length; - tdcontent.appendChild(this.tohtml(thing[1])); - content.appendChild(tdcontent); + const html=this.tohtml(thing[1]); + content.append(html); if(!shown){ - shown=tdcontent; + shown=html; }else{ - tdcontent.hidden=true; + html.style.display="none"; } button.addEventListener("click",_=>{ - shown.hidden=true; - tdcontent.hidden=false; - shown=tdcontent; + if(shown){ + shown.style.display="none"; + } + html.style.display=""; + shown=html; }); } return table; diff --git a/webpage/direct.ts b/webpage/direct.ts index 029826b..caf13a2 100644 --- a/webpage/direct.ts +++ b/webpage/direct.ts @@ -9,7 +9,7 @@ import { SnowFlake } from "./snowflake.js"; import { Contextmenu } from "./contextmenu.js"; class Direct extends Guild{ - channelids:{[key:string]:Group}; + declare channelids:{[key:string]:Group}; getUnixTime(): number { throw new Error("Do not call this for Direct, it does not make sense"); } diff --git a/webpage/infiniteScroller.ts b/webpage/infiniteScroller.ts index 90e9bd2..a9bc076 100644 --- a/webpage/infiniteScroller.ts +++ b/webpage/infiniteScroller.ts @@ -92,7 +92,7 @@ class InfiniteScroller{ } currrunning:boolean=false; async addedBottom(){ - this.updatestuff(); + await this.updatestuff(); const func=this.snapBottom(); await this.watchForChange(); func(); @@ -100,7 +100,7 @@ class InfiniteScroller{ snapBottom(){ const scrollBottom=this.scrollBottom; return()=>{ - if(this.div&&scrollBottom<10){ + if(this.div&&scrollBottom<4){ this.div.scrollTop=this.div.scrollHeight+20; } }; diff --git a/webpage/localuser.ts b/webpage/localuser.ts index 259e53d..dd10616 100644 --- a/webpage/localuser.ts +++ b/webpage/localuser.ts @@ -1192,7 +1192,7 @@ class Localuser{ json.icon ? ["img", this.info.cdn+"/app-icons/" + appId + "/" + json.icon + ".png?size=128", [128, 128]] : ["text", "No icon"], ["fileupload", "Application icon:", event=>{ const reader=new FileReader(); - reader.readAsDataURL(event.target.files[0]); + reader.readAsDataURL((event.target as HTMLInputElement).files[0]); reader.onload=()=>{ fields.icon=reader.result; }; @@ -1280,7 +1280,7 @@ class Localuser{ fields.avatar ? ["img", fields.avatar, [128, 128]] : ["text", "No avatar"], ["fileupload", "Bot avatar:", event=>{ const reader=new FileReader(); - reader.readAsDataURL(event.target.files[0]); + reader.readAsDataURL((event.target as HTMLInputElement).files[0]); reader.onload=()=>{ fields.avatar=reader.result; }; diff --git a/webpage/style.css b/webpage/style.css index a8cdbfc..86f250c 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -1054,6 +1054,7 @@ span { } .tabbed-head{ background: var(--profile-info-bg); + width: 100%; } .tabbed-content td{ /* border-color: var(--textarea-bg); */