diff --git a/src/webpage/channel.ts b/src/webpage/channel.ts index 4968268..ebb687b 100644 --- a/src/webpage/channel.ts +++ b/src/webpage/channel.ts @@ -120,13 +120,14 @@ class Channel extends SnowFlake{ const div = document.createElement("div"); div.classList.add("invitediv"); const text = document.createElement("span"); + text.classList.add("ellipsis"); div.append(text); let uses = 0; let expires = 1800; const copycontainer = document.createElement("div"); copycontainer.classList.add("copycontainer"); const copy = document.createElement("span"); - copy.classList.add("copybutton", "svgtheme", "svg-copy"); + copy.classList.add("copybutton", "svgicon", "svg-copy"); copycontainer.append(copy); copycontainer.onclick = _=>{ if(text.textContent){ @@ -489,18 +490,18 @@ class Channel extends SnowFlake{ const decdiv = document.createElement("div"); const decoration = document.createElement("span"); - decoration.classList.add("svgtheme", "collapse-icon", "svg-category"); + decoration.classList.add("svgicon", "collapse-icon", "svg-category"); decdiv.appendChild(decoration); const myhtml = document.createElement("p2"); + myhtml.classList.add("ellipsis"); myhtml.textContent = this.name; decdiv.appendChild(myhtml); caps.appendChild(decdiv); const childrendiv = document.createElement("div"); if(admin){ const addchannel = document.createElement("span"); - addchannel.textContent = "+"; - addchannel.classList.add("addchannel"); + addchannel.classList.add("addchannel","svgicon","svg-plus"); caps.appendChild(addchannel); addchannel.onclick = _=>{ this.guild.createchannels(this.createChannel.bind(this)); @@ -508,8 +509,8 @@ class Channel extends SnowFlake{ this.coatDropDiv(decdiv, childrendiv); } div.appendChild(caps); - caps.classList.add("capsflex"); - decdiv.classList.add("channeleffects"); + caps.classList.add("flexltr","capsflex"); + decdiv.classList.add("flexltr","channeleffects"); decdiv.classList.add("channel"); Channel.contextmenu.bindContextmenu(decdiv, this,undefined); @@ -554,29 +555,34 @@ class Channel extends SnowFlake{ } // @ts-ignore I dont wanna deal with this div.all = this; + const button = document.createElement("button"); + button.classList.add("channelbutton"); + div.append(button); const myhtml = document.createElement("span"); + myhtml.classList.add("ellipsis"); myhtml.textContent = this.name; if(this.type === 0){ const decoration = document.createElement("span"); - div.appendChild(decoration); - decoration.classList.add("space", "svgtheme", "svg-channel"); + button.appendChild(decoration); + decoration.classList.add("space", "svgicon", "svg-channel"); }else if(this.type === 2){ // const decoration = document.createElement("span"); - div.appendChild(decoration); - decoration.classList.add("space", "svgtheme", "svg-voice"); - + button.appendChild(decoration); + decoration.classList.add("space", "svgicon", "svg-voice"); }else if(this.type === 5){ // const decoration = document.createElement("span"); - div.appendChild(decoration); - decoration.classList.add("space", "svgtheme", "svg-announce"); + button.appendChild(decoration); + decoration.classList.add("space", "svgicon", "svg-announce"); }else{ console.log(this.type); } - div.appendChild(myhtml); - div.onclick = _=>{ + button.appendChild(myhtml); + button.onclick = _=>{ this.getHTML(); + const toggle = document.getElementById("maintoggle") as HTMLInputElement; + toggle.checked = true; }; if(this.type===2){ const voiceUsers=document.createElement("div"); @@ -617,6 +623,7 @@ class Channel extends SnowFlake{ return []; } const div=document.createElement("div"); + div.classList.add("voiceuser"); const span=document.createElement("span"); span.textContent=member.name; div.append(span); @@ -812,6 +819,7 @@ class Channel extends SnowFlake{ } makereplybox(){ const replybox = document.getElementById("replybox") as HTMLElement; + const typebox = document.getElementById("typebox") as HTMLElement; if(this.replyingto){ replybox.innerHTML = ""; const span = document.createElement("span"); @@ -824,14 +832,16 @@ class Channel extends SnowFlake{ replybox.classList.add("hideReplyBox"); this.replyingto = null; replybox.innerHTML = ""; + typebox.classList.remove("typeboxreplying"); }; replybox.classList.remove("hideReplyBox"); - X.textContent = "⦻"; - X.classList.add("cancelReply"); + X.classList.add("cancelReply","svgicon","svg-x"); replybox.append(span); replybox.append(X); + typebox.classList.add("typeboxreplying"); }else{ replybox.classList.add("hideReplyBox"); + typebox.classList.remove("typeboxreplying"); } } async getmessage(id: string): Promise{ diff --git a/src/webpage/contextmenu.ts b/src/webpage/contextmenu.ts index 67cafb0..56f2256 100644 --- a/src/webpage/contextmenu.ts +++ b/src/webpage/contextmenu.ts @@ -90,6 +90,13 @@ class Contextmenu{ this.makemenu(event.clientX, event.clientY, addinfo, other); }; obj.addEventListener("contextmenu", func); + obj.addEventListener("touchstart",(event: TouchEvent)=>{ + if(event.touches.length > 1){ + event.preventDefault(); + event.stopImmediatePropagation(); + this.makemenu(event.touches[0].clientX, event.touches[0].clientY, addinfo, other); + } + }); return func; } static keepOnScreen(obj: HTMLElement){ diff --git a/src/webpage/dialog.ts b/src/webpage/dialog.ts index 2e08c11..c97251e 100644 --- a/src/webpage/dialog.ts +++ b/src/webpage/dialog.ts @@ -197,11 +197,17 @@ class Dialog{ case"select": { const div = document.createElement("div"); const label = document.createElement("label"); + const selectSpan = document.createElement("span"); + selectSpan.classList.add("selectspan"); const select = document.createElement("select"); + const selectArrow = document.createElement("span"); + selectArrow.classList.add("svgicon","svg-category","selectarrow"); label.textContent = array[1]; + selectSpan.append(select); + selectSpan.append(selectArrow); div.append(label); - div.appendChild(select); + div.appendChild(selectSpan); for(const thing of array[2]){ const option = document.createElement("option"); option.textContent = thing; diff --git a/src/webpage/direct.ts b/src/webpage/direct.ts index 1678f76..db35334 100644 --- a/src/webpage/direct.ts +++ b/src/webpage/direct.ts @@ -153,8 +153,9 @@ class Group extends Channel{ const div = document.createElement("div"); Group.contextmenu.bindContextmenu(div, this,undefined); this.html = new WeakRef(div); - div.classList.add("channeleffects"); + div.classList.add("flexltr","memberinfo"); const myhtml = document.createElement("span"); + myhtml.classList.add("ellipsis"); myhtml.textContent = this.name; div.appendChild(this.user.buildpfp()); div.appendChild(myhtml); diff --git a/src/webpage/embed.ts b/src/webpage/embed.ts index 6683e6a..91804fc 100644 --- a/src/webpage/embed.ts +++ b/src/webpage/embed.ts @@ -157,13 +157,11 @@ Url.pathname.split("/")[Url.pathname.split("/").length - 1]; if(this.json?.footer?.text){ const span = document.createElement("span"); span.textContent = this.json.footer.text; - span.classList.add("spaceright"); footer.append(span); } if(this.json?.footer && this.json?.timestamp){ const span = document.createElement("span"); - span.textContent = "•"; - span.classList.add("spaceright"); + span.textContent = " • "; footer.append(span); } if(this.json?.timestamp){ @@ -288,7 +286,7 @@ json.guild; guild as invitejson["guild"] & { info: { cdn: string } } ); const iconrow = document.createElement("div"); - iconrow.classList.add("flexltr", "flexstart"); + iconrow.classList.add("flexltr"); iconrow.append(icon); { const guildinfo = document.createElement("div"); diff --git a/src/webpage/emoji.ts b/src/webpage/emoji.ts index 7756967..c605345 100644 --- a/src/webpage/emoji.ts +++ b/src/webpage/emoji.ts @@ -143,7 +143,7 @@ class Emoji{ title.classList.add("emojiTitle"); menu.append(title); const selection = document.createElement("div"); - selection.classList.add("flexltr", "dontshrink", "emojirow"); + selection.classList.add("flexltr", "emojirow"); const body = document.createElement("div"); body.classList.add("emojiBody"); diff --git a/src/webpage/file.ts b/src/webpage/file.ts index 20862ef..63969ca 100644 --- a/src/webpage/file.ts +++ b/src/webpage/file.ts @@ -83,7 +83,9 @@ class File{ div.append(contained); const controls = document.createElement("div"); const garbage = document.createElement("button"); - garbage.textContent = "🗑"; + const icon = document.createElement("span"); + icon.classList.add("svgicon","svg-delete"); + garbage.append(icon); garbage.onclick = _=>{ div.remove(); files.splice(files.indexOf(file), 1); diff --git a/src/webpage/home.html b/src/webpage/home.html index ae7f312..a45908c 100644 --- a/src/webpage/home.html +++ b/src/webpage/home.html @@ -9,8 +9,8 @@ - - + + @@ -19,20 +19,20 @@

Jank Client

-

Spacebar Guild

+ Spacebar Guild -

Github

+ Github + + + Open Client -
+
-
-

Welcome to Jank Client

-
+

Welcome to Jank Client

-

Jank Client is a spacebar compatible client seeking to be as good as it can be with many features including: -

+

Jank Client is a Spacebar-compatible client seeking to be as good as it can be with many features including:

  • Direct Messaging
  • Reactions support
    • @@ -44,16 +44,16 @@
-

Spacebar compatible Instances:

+

Spacebar-Compatible Instances:

Contribute to Jank Client

-

We always appreciate some help, wether that be in the form of bug reports, or code, or even just pointing out +

We always appreciate some help, whether that be in the form of bug reports, or code, or even just pointing out some typos.


- -

Github

+ + Github
diff --git a/src/webpage/home.ts b/src/webpage/home.ts index 669c0d1..9f41e77 100644 --- a/src/webpage/home.ts +++ b/src/webpage/home.ts @@ -37,11 +37,11 @@ login?: string; div.append(img); } const statbox = document.createElement("div"); - statbox.classList.add("flexttb"); + statbox.classList.add("flexttb","flexgrow"); { const textbox = document.createElement("div"); - textbox.classList.add("flexttb", "instatancetextbox"); + textbox.classList.add("flexttb", "instancetextbox"); const title = document.createElement("h2"); title.innerText = instance.name; if(instance.online !== undefined){ diff --git a/src/webpage/icons/plus.svg b/src/webpage/icons/plus.svg new file mode 100644 index 0000000..e487b7a --- /dev/null +++ b/src/webpage/icons/plus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/webpage/icons/x.svg b/src/webpage/icons/x.svg new file mode 100644 index 0000000..f7fb14d --- /dev/null +++ b/src/webpage/icons/x.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/webpage/index.html b/src/webpage/index.html index 016b98a..a3f5470 100644 --- a/src/webpage/index.html +++ b/src/webpage/index.html @@ -9,17 +9,17 @@ - - - + + + - +
-
+

Jank Client is loading

This shouldn't take long

@@ -27,15 +27,13 @@
-
-
-
+
-
-

Server Name

+
+

Server Name

-
+
@@ -43,39 +41,48 @@
-
+

USERNAME

STATUS

- +
-
-
- - Channel name - +
+
+ + + + Channel name + + + +
-
-
-
+
+
+
-
+
-