Merge branch 'main', commit 'refs/pull/53/head' of https://github.com/MathMan05/JankClient

This commit is contained in:
MathMan05
2024-09-02 17:12:49 -05:00
6 changed files with 72 additions and 172 deletions

View File

@@ -99,9 +99,8 @@ class Channel {
let expires = 1800; let expires = 1800;
const copycontainer = document.createElement("div"); const copycontainer = document.createElement("div");
copycontainer.classList.add("copycontainer"); copycontainer.classList.add("copycontainer");
const copy = document.createElement("img"); const copy = document.createElement("span");
copy.src = "/icons/copy.svg"; copy.classList.add("copybutton", "svgtheme", "svg-copy");
copy.classList.add("copybutton", "svgtheme");
copycontainer.append(copy); copycontainer.append(copy);
copycontainer.onclick = _ => { copycontainer.onclick = _ => {
if (text.textContent) { if (text.textContent) {
@@ -365,9 +364,8 @@ class Channel {
this.sortchildren(); this.sortchildren();
const caps = document.createElement("div"); const caps = document.createElement("div");
const decdiv = document.createElement("div"); const decdiv = document.createElement("div");
const decoration = document.createElement("img"); const decoration = document.createElement("span");
decoration.src = "/icons/category.svg"; decoration.classList.add("svgtheme", "collapse-icon", "svg-category");
decoration.classList.add("svgtheme", "colaspeicon");
decdiv.appendChild(decoration); decdiv.appendChild(decoration);
const myhtml = document.createElement("p2"); const myhtml = document.createElement("p2");
myhtml.textContent = this.name; myhtml.textContent = this.name;
@@ -424,22 +422,19 @@ class Channel {
const myhtml = document.createElement("span"); const myhtml = document.createElement("span");
myhtml.textContent = this.name; myhtml.textContent = this.name;
if (this.type === 0) { if (this.type === 0) {
const decoration = document.createElement("img"); const decoration = document.createElement("span");
decoration.src = "/icons/channel.svg";
div.appendChild(decoration); div.appendChild(decoration);
decoration.classList.add("space", "svgtheme"); decoration.classList.add("space", "svgtheme", "svg-channel");
} }
else if (this.type === 2) { // else if (this.type === 2) { //
const decoration = document.createElement("img"); const decoration = document.createElement("span");
decoration.src = "/icons/voice.svg";
div.appendChild(decoration); div.appendChild(decoration);
decoration.classList.add("space", "svgtheme"); decoration.classList.add("space", "svgtheme", "svg-voice");
} }
else if (this.type === 5) { // else if (this.type === 5) { //
const decoration = document.createElement("img"); const decoration = document.createElement("span");
decoration.src = "/icons/announce.svg";
div.appendChild(decoration); div.appendChild(decoration);
decoration.classList.add("space", "svgtheme"); decoration.classList.add("space", "svgtheme", "svg-announce");
} }
else { else {
console.log(this.type); console.log(this.type);

View File

@@ -500,21 +500,20 @@ class Localuser {
buildservers() { buildservers() {
const serverlist = document.getElementById("servers"); // const serverlist = document.getElementById("servers"); //
const outdiv = document.createElement("div"); const outdiv = document.createElement("div");
const img = document.createElement("img"); const home = document.createElement("span");
const div = document.createElement("div"); const div = document.createElement("div");
div.classList.add("home", "servericon"); div.classList.add("home", "servericon");
img.src = "/icons/home.svg"; home.classList.add("svgtheme", "svgicon", "svg-home");
img.classList.add("svgtheme", "svgicon"); home["all"] = this.guildids.get("@me");
img["all"] = this.guildids.get("@me");
this.guildids.get("@me").html = outdiv; this.guildids.get("@me").html = outdiv;
const unread = document.createElement("div"); const unread = document.createElement("div");
unread.classList.add("unread"); unread.classList.add("unread");
outdiv.append(unread); outdiv.append(unread);
outdiv.append(div); outdiv.append(div);
div.appendChild(img); div.appendChild(home);
outdiv.classList.add("servernoti"); outdiv.classList.add("servernoti");
serverlist.append(outdiv); serverlist.append(outdiv);
img.onclick = function () { home.onclick = function () {
this["all"].loadGuild(); this["all"].loadGuild();
this["all"].loadChannel(); this["all"].loadChannel();
}; };
@@ -546,9 +545,8 @@ class Localuser {
this.createGuild(); this.createGuild();
}; };
const guilddsdiv = document.createElement("div"); const guilddsdiv = document.createElement("div");
const guildDiscoveryContainer = document.createElement("img"); const guildDiscoveryContainer = document.createElement("span");
guildDiscoveryContainer.src = "/icons/explore.svg"; guildDiscoveryContainer.classList.add("svgtheme", "svgicon", "svg-explore");
guildDiscoveryContainer.classList.add("svgtheme", "svgicon");
guilddsdiv.classList.add("home", "servericon"); guilddsdiv.classList.add("home", "servericon");
guilddsdiv.appendChild(guildDiscoveryContainer); guilddsdiv.appendChild(guildDiscoveryContainer);
serverlist.appendChild(guilddsdiv); serverlist.appendChild(guilddsdiv);
@@ -922,7 +920,6 @@ class Localuser {
{ {
const userinfos = getBulkInfo(); const userinfos = getBulkInfo();
tas.addColorInput("Accent color:", _ => { tas.addColorInput("Accent color:", _ => {
fixsvgtheme();
userinfos.accent_color = _; userinfos.accent_color = _;
localStorage.setItem("userinfos", JSON.stringify(userinfos)); localStorage.setItem("userinfos", JSON.stringify(userinfos));
document.documentElement.style.setProperty("--accent-color", userinfos.accent_color); document.documentElement.style.setProperty("--accent-color", userinfos.accent_color);
@@ -1437,60 +1434,3 @@ class Localuser {
} }
} }
export { Localuser }; export { Localuser };
let fixsvgtheme;
{
let last;
const dud = document.createElement("p");
dud.classList.add("svgtheme");
document.body.append(dud);
const css = window.getComputedStyle(dud);
function fixsvgtheme_() {
//console.log(things);
const color = css.color;
if (color === last) {
return;
}
last = color;
const thing = color.replace("rgb(", "").replace(")", "").split(",");
//sconsole.log(thing);
const r = Number(thing[0]) / 255;
const g = Number(thing[1]) / 255;
const b = Number(thing[2]) / 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const l = (max + min) / 2;
let s;
let h;
if (max !== min) {
if (l <= 0.5) {
s = (max - min) / (max + min);
}
else {
s = (max - min) / (2 - max - min);
}
if (r === max) {
h = (g - b) / (max - min);
}
else if (g === max) {
h = 2 + (b - r) / (max - min);
}
else {
h = 4 + (r - g) / (max - min);
}
}
else {
s = 0;
h = 0;
}
const rot = Math.floor(h * 60) + "deg";
const invert = 0.5 - (s / 2) + "";
const brightness = Math.floor((l * 200)) + "%";
document.documentElement.style.setProperty("--rot", rot);
document.documentElement.style.setProperty("--invert", invert);
document.documentElement.style.setProperty("--brightness", brightness);
}
fixsvgtheme = fixsvgtheme_;
setTimeout(fixsvgtheme_, 100);
fixsvgtheme_();
}
export { fixsvgtheme };

View File

@@ -113,9 +113,8 @@ class Channel{
let expires=1800; let expires=1800;
const copycontainer=document.createElement("div"); const copycontainer=document.createElement("div");
copycontainer.classList.add("copycontainer"); copycontainer.classList.add("copycontainer");
const copy=document.createElement("img"); const copy=document.createElement("span");
copy.src="/icons/copy.svg"; copy.classList.add("copybutton","svgtheme","svg-copy");
copy.classList.add("copybutton","svgtheme");
copycontainer.append(copy); copycontainer.append(copy);
copycontainer.onclick=_=>{ copycontainer.onclick=_=>{
if(text.textContent){ if(text.textContent){
@@ -376,9 +375,8 @@ class Channel{
const caps=document.createElement("div"); const caps=document.createElement("div");
const decdiv=document.createElement("div"); const decdiv=document.createElement("div");
const decoration=document.createElement("img"); const decoration=document.createElement("span");
decoration.src="/icons/category.svg"; decoration.classList.add("svgtheme","collapse-icon","svg-category");
decoration.classList.add("svgtheme","colaspeicon");
decdiv.appendChild(decoration); decdiv.appendChild(decoration);
const myhtml=document.createElement("p2"); const myhtml=document.createElement("p2");
@@ -437,20 +435,17 @@ class Channel{
const myhtml=document.createElement("span"); const myhtml=document.createElement("span");
myhtml.textContent=this.name; myhtml.textContent=this.name;
if(this.type===0){ if(this.type===0){
const decoration=document.createElement("img"); const decoration=document.createElement("span");
decoration.src="/icons/channel.svg";
div.appendChild(decoration); div.appendChild(decoration);
decoration.classList.add("space","svgtheme"); decoration.classList.add("space","svgtheme","svg-channel");
}else if(this.type===2){// }else if(this.type===2){//
const decoration=document.createElement("img"); const decoration=document.createElement("span");
decoration.src="/icons/voice.svg";
div.appendChild(decoration); div.appendChild(decoration);
decoration.classList.add("space","svgtheme"); decoration.classList.add("space","svgtheme","svg-voice");
}else if(this.type===5){// }else if(this.type===5){//
const decoration=document.createElement("img"); const decoration=document.createElement("span");
decoration.src="/icons/announce.svg";
div.appendChild(decoration); div.appendChild(decoration);
decoration.classList.add("space","svgtheme"); decoration.classList.add("space","svgtheme","svg-announce");
}else{ }else{
console.log(this.type); console.log(this.type);
} }

View File

@@ -45,7 +45,7 @@
</div> </div>
<div id="user-actions"> <div id="user-actions">
<img id="settings" class="svgtheme" src="/icons/settings.svg"></img> <span id="settings" class="svgtheme svg-settings"></span>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -503,23 +503,22 @@ class Localuser{
buildservers():void{ buildservers():void{
const serverlist=document.getElementById("servers") as HTMLDivElement;// const serverlist=document.getElementById("servers") as HTMLDivElement;//
const outdiv=document.createElement("div"); const outdiv=document.createElement("div");
const img=document.createElement("img"); const home=document.createElement("span");
const div=document.createElement("div"); const div=document.createElement("div");
div.classList.add("home","servericon"); div.classList.add("home","servericon");
img.src="/icons/home.svg"; home.classList.add("svgtheme","svgicon","svg-home");
img.classList.add("svgtheme","svgicon"); home["all"]=this.guildids.get("@me");
img["all"]=this.guildids.get("@me");
(this.guildids.get("@me") as Guild).html=outdiv; (this.guildids.get("@me") as Guild).html=outdiv;
const unread=document.createElement("div"); const unread=document.createElement("div");
unread.classList.add("unread"); unread.classList.add("unread");
outdiv.append(unread); outdiv.append(unread);
outdiv.append(div); outdiv.append(div);
div.appendChild(img); div.appendChild(home);
outdiv.classList.add("servernoti"); outdiv.classList.add("servernoti");
serverlist.append(outdiv); serverlist.append(outdiv);
img.onclick=function(){ home.onclick=function(){
this["all"].loadGuild(); this["all"].loadGuild();
this["all"].loadChannel(); this["all"].loadChannel();
}; };
@@ -553,9 +552,8 @@ class Localuser{
this.createGuild(); this.createGuild();
}; };
const guilddsdiv=document.createElement("div"); const guilddsdiv=document.createElement("div");
const guildDiscoveryContainer=document.createElement("img"); const guildDiscoveryContainer=document.createElement("span");
guildDiscoveryContainer.src="/icons/explore.svg"; guildDiscoveryContainer.classList.add("svgtheme","svgicon","svg-explore");
guildDiscoveryContainer.classList.add("svgtheme","svgicon");
guilddsdiv.classList.add("home","servericon"); guilddsdiv.classList.add("home","servericon");
guilddsdiv.appendChild(guildDiscoveryContainer); guilddsdiv.appendChild(guildDiscoveryContainer);
serverlist.appendChild(guilddsdiv); serverlist.appendChild(guilddsdiv);
@@ -931,7 +929,6 @@ class Localuser{
{ {
const userinfos=getBulkInfo(); const userinfos=getBulkInfo();
tas.addColorInput("Accent color:",_=>{ tas.addColorInput("Accent color:",_=>{
fixsvgtheme();
userinfos.accent_color=_; userinfos.accent_color=_;
localStorage.setItem("userinfos",JSON.stringify(userinfos)); localStorage.setItem("userinfos",JSON.stringify(userinfos));
document.documentElement.style.setProperty("--accent-color", userinfos.accent_color); document.documentElement.style.setProperty("--accent-color", userinfos.accent_color);
@@ -1450,59 +1447,4 @@ class Localuser{
dialog.show(); dialog.show();
} }
} }
export{Localuser}; export {Localuser};
let fixsvgtheme:Function;
{
let last:string;
const dud=document.createElement("p");
dud.classList.add("svgtheme");
document.body.append(dud);
const css=window.getComputedStyle(dud);
function fixsvgtheme_(){
//console.log(things);
const color=css.color;
if(color===last){
return;
}
last=color;
const thing=color.replace("rgb(","").replace(")","").split(",");
//sconsole.log(thing);
const r=Number(thing[0])/255;
const g=Number(thing[1])/255;
const b=Number(thing[2])/255;
const max=Math.max(r,g,b);
const min=Math.min(r,g,b);
const l=(max+min)/2;
let s:number;
let h:number;
if(max!==min){
if(l<=0.5){
s=(max-min)/(max+min);
}else{
s=(max-min)/(2-max-min);
}
if(r===max){
h=(g-b)/(max-min);
}else if(g===max){
h=2+(b-r)/(max-min);
}else{
h=4+(r-g)/(max-min);
}
}else{
s=0;
h=0;
}
const rot=Math.floor(h*60)+"deg";
const invert=0.5-(s/2)+"";
const brightness=Math.floor((l*200))+"%";
document.documentElement.style.setProperty("--rot", rot);
document.documentElement.style.setProperty("--invert", invert);
document.documentElement.style.setProperty("--brightness", brightness);
}
fixsvgtheme=fixsvgtheme_;
setTimeout(fixsvgtheme_,100);
fixsvgtheme_();
}
export{fixsvgtheme};

View File

@@ -336,6 +336,7 @@ p {
width: .175in; width: .175in;
padding-right: .026in; padding-right: .026in;
height: .175in; height: .175in;
vertical-align: text-bottom;
} }
@@ -674,7 +675,7 @@ textarea:focus-visible,
transition: height .2s ease-in-out; transition: height .2s ease-in-out;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
padding-left: .05in; padding: 0 .05in;
overflow-y: clip; overflow-y: clip;
} }
@@ -1555,22 +1556,47 @@ span {
form div{ form div{
width:100%; width:100%;
} }
.svgtheme{
color: var(--icon-color);
filter:hue-rotate(var(--rot)) invert(var(--invert)) brightness(var(--brightness));
}
.channels .channel{ .channels .channel{
margin-bottom: .03in; margin-bottom: .03in;
} }
.colaspeicon{ .collapse-icon{
height:.15in;
width:.15in; width:.15in;
padding-right: .025in; padding-right: .025in;
padding-left: .05in; margin-left: .05in;
transition:rotate .2s; transition:rotate .2s;
} }
.hiddencat{ .hiddencat{
rotate:-90deg; rotate:-90deg;
} }
.svg-announce{
mask: url(/icons/announce.svg);
}
.svg-category{
mask: url(/icons/category.svg);
}
.svg-channel{
mask: url(/icons/channel.svg);
}
.svg-copy{
mask: url(/icons/copy.svg);
}
.svg-explore{
mask: url(/icons/explore.svg);
}
.svg-home{
mask: url(/icons/home.svg);
}
.svg-settings{
mask: url(/icons/settings.svg);
}
.svg-voice{
mask: url(/icons/voice.svg);
}
.svgtheme{
background: var(--icon-color);
mask-repeat: no-repeat;
}
.svgicon{ .svgicon{
width:.5in; width:.5in;
height:.5in; height:.5in;
@@ -1725,6 +1751,7 @@ form div{
background: var(--settings-hover); background: var(--settings-hover);
} }
#settings{ #settings{
height:.225in;
width:.225in; width:.225in;
margin:.05in; margin:.05in;
} }
@@ -1791,7 +1818,8 @@ form div{
border:solid .03in var(--black); border:solid .03in var(--black);
} }
.copybutton{ .copybutton{
display:inline-block;
height:.2in;
width:.25in; width:.25in;
} }
.copycontainer{ .copycontainer{