From 3a6f400cc465943c55d7d198420331da9fc4214e Mon Sep 17 00:00:00 2001 From: ygg2 Date: Thu, 29 Aug 2024 10:26:10 -0400 Subject: [PATCH 1/5] use mask instead of filter --- .dist/channel.js | 20 +++++------- .dist/localuser.js | 75 +++++--------------------------------------- webpage/channel.ts | 20 +++++------- webpage/index.html | 2 +- webpage/localuser.ts | 73 +++++------------------------------------- webpage/style.css | 34 +++++++++++++++++--- 6 files changed, 62 insertions(+), 162 deletions(-) diff --git a/.dist/channel.js b/.dist/channel.js index 1946f1c..c11eee5 100644 --- a/.dist/channel.js +++ b/.dist/channel.js @@ -354,9 +354,8 @@ class Channel { this.sortchildren(); const caps = document.createElement("div"); const decdiv = document.createElement("div"); - const decoration = document.createElement("img"); - decoration.src = "/icons/category.svg"; - decoration.classList.add("svgtheme", "colaspeicon"); + const decoration = document.createElement("span"); + decoration.classList.add("svgtheme", "colaspeicon", "svg-category"); decdiv.appendChild(decoration); const myhtml = document.createElement("p2"); myhtml.textContent = this.name; @@ -411,22 +410,19 @@ class Channel { const myhtml = document.createElement("span"); myhtml.textContent = this.name; if (this.type === 0) { - const decoration = document.createElement("img"); - decoration.src = "/icons/channel.svg"; + const decoration = document.createElement("span"); div.appendChild(decoration); - decoration.classList.add("space", "svgtheme"); + decoration.classList.add("space", "svgtheme", "svg-channel"); } else if (this.type === 2) { // - const decoration = document.createElement("img"); - decoration.src = "/icons/voice.svg"; + const decoration = document.createElement("span"); div.appendChild(decoration); - decoration.classList.add("space", "svgtheme"); + decoration.classList.add("space", "svgtheme", "svg-voice"); } else if (this.type === 5) { // - const decoration = document.createElement("img"); - decoration.src = "/icons/announce.svg"; + const decoration = document.createElement("span"); div.appendChild(decoration); - decoration.classList.add("space", "svgtheme"); + decoration.classList.add("space", "svgtheme", "svg-announce"); } else { console.log(this.type); diff --git a/.dist/localuser.js b/.dist/localuser.js index 2a3fc87..1c7fc16 100644 --- a/.dist/localuser.js +++ b/.dist/localuser.js @@ -499,21 +499,20 @@ class Localuser { buildservers() { const serverlist = document.getElementById("servers"); // const outdiv = document.createElement("div"); - const img = document.createElement("img"); + const home = document.createElement("span"); const div = document.createElement("div"); div.classList.add("home", "servericon"); - img.src = "/icons/home.svg"; - img.classList.add("svgtheme", "svgicon"); - img["all"] = this.guildids.get("@me"); + home.classList.add("svgtheme", "svgicon", "svg-home"); + home["all"] = this.guildids.get("@me"); this.guildids.get("@me").html = outdiv; const unread = document.createElement("div"); unread.classList.add("unread"); outdiv.append(unread); outdiv.append(div); - div.appendChild(img); + div.appendChild(home); outdiv.classList.add("servernoti"); serverlist.append(outdiv); - img.onclick = function () { + home.onclick = function () { this["all"].loadGuild(); this["all"].loadChannel(); }; @@ -545,9 +544,8 @@ class Localuser { this.createGuild(); }; const guilddsdiv = document.createElement("div"); - const guildDiscoveryContainer = document.createElement("img"); - guildDiscoveryContainer.src = "/icons/explore.svg"; - guildDiscoveryContainer.classList.add("svgtheme", "svgicon"); + const guildDiscoveryContainer = document.createElement("span"); + guildDiscoveryContainer.classList.add("svgtheme", "svgicon", "svg-explore"); guilddsdiv.classList.add("home", "servericon"); guilddsdiv.appendChild(guildDiscoveryContainer); serverlist.appendChild(guilddsdiv); @@ -922,7 +920,6 @@ class Localuser { { const userinfos = getBulkInfo(); tas.addColorInput("Accent color:", _ => { - fixsvgtheme(); userinfos.accent_color = _; localStorage.setItem("userinfos", JSON.stringify(userinfos)); document.documentElement.style.setProperty('--accent-color', userinfos.accent_color); @@ -1426,61 +1423,3 @@ class 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 = +thing[0] / 255; - const g = +thing[1] / 255; - const b = +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 <= .5) { - s = (max - min) / (max + min); - } - else { - s = (max - min) / (2.0 - 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 = .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 }; diff --git a/webpage/channel.ts b/webpage/channel.ts index a6e8048..3784863 100644 --- a/webpage/channel.ts +++ b/webpage/channel.ts @@ -360,9 +360,8 @@ class Channel{ const caps=document.createElement("div"); const decdiv=document.createElement("div"); - const decoration=document.createElement("img"); - decoration.src="/icons/category.svg"; - decoration.classList.add("svgtheme","colaspeicon") + const decoration=document.createElement("span"); + decoration.classList.add("svgtheme","colaspeicon","svg-category") decdiv.appendChild(decoration) const myhtml=document.createElement("p2"); @@ -417,20 +416,17 @@ class Channel{ const myhtml=document.createElement("span"); myhtml.textContent=this.name; if(this.type===0){ - const decoration=document.createElement("img"); - decoration.src="/icons/channel.svg"; + const decoration=document.createElement("span"); div.appendChild(decoration) - decoration.classList.add("space","svgtheme"); + decoration.classList.add("space","svgtheme","svg-channel"); }else if(this.type===2){// - const decoration=document.createElement("img"); - decoration.src="/icons/voice.svg"; + const decoration=document.createElement("span"); div.appendChild(decoration) - decoration.classList.add("space","svgtheme"); + decoration.classList.add("space","svgtheme","svg-voice"); }else if(this.type===5){// - const decoration=document.createElement("img"); - decoration.src="/icons/announce.svg"; + const decoration=document.createElement("span"); div.appendChild(decoration) - decoration.classList.add("space","svgtheme"); + decoration.classList.add("space","svgtheme","svg-announce"); }else{ console.log(this.type) } diff --git a/webpage/index.html b/webpage/index.html index 989a773..5b47605 100644 --- a/webpage/index.html +++ b/webpage/index.html @@ -45,7 +45,7 @@
- +
diff --git a/webpage/localuser.ts b/webpage/localuser.ts index d004fed..784f650 100644 --- a/webpage/localuser.ts +++ b/webpage/localuser.ts @@ -501,23 +501,22 @@ class Localuser{ buildservers():void{ const serverlist=document.getElementById("servers") as HTMLDivElement;// const outdiv=document.createElement("div"); - const img=document.createElement("img"); + const home=document.createElement("span"); const div=document.createElement("div"); div.classList.add("home","servericon"); - img.src="/icons/home.svg"; - img.classList.add("svgtheme","svgicon") - img["all"]=this.guildids.get("@me"); + home.classList.add("svgtheme","svgicon","svg-home") + home["all"]=this.guildids.get("@me"); (this.guildids.get("@me") as Guild).html=outdiv; const unread=document.createElement("div"); unread.classList.add("unread"); outdiv.append(unread); outdiv.append(div); - div.appendChild(img); + div.appendChild(home); outdiv.classList.add("servernoti") serverlist.append(outdiv); - img.onclick=function(){ + home.onclick=function(){ this["all"].loadGuild(); this["all"].loadChannel(); } @@ -551,9 +550,8 @@ class Localuser{ this.createGuild(); } const guilddsdiv=document.createElement("div"); - const guildDiscoveryContainer=document.createElement("img"); - guildDiscoveryContainer.src="/icons/explore.svg"; - guildDiscoveryContainer.classList.add("svgtheme","svgicon"); + const guildDiscoveryContainer=document.createElement("span"); + guildDiscoveryContainer.classList.add("svgtheme","svgicon","svg-explore"); guilddsdiv.classList.add("home","servericon"); guilddsdiv.appendChild(guildDiscoveryContainer); serverlist.appendChild(guilddsdiv); @@ -933,7 +931,6 @@ class Localuser{ { const userinfos=getBulkInfo(); tas.addColorInput("Accent color:",_=>{ - fixsvgtheme(); userinfos.accent_color=_; localStorage.setItem("userinfos",JSON.stringify(userinfos)); document.documentElement.style.setProperty('--accent-color', userinfos.accent_color); @@ -1435,58 +1432,4 @@ class Localuser{ dialog.show(); } } -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=+thing[0]/255; - const g=+thing[1]/255; - const b=+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<=.5){ - s=(max-min)/(max+min); - }else{ - s=(max-min)/(2.0-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=.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}; +export {Localuser}; \ No newline at end of file diff --git a/webpage/style.css b/webpage/style.css index 03cac58..7919960 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -1556,14 +1556,11 @@ span { form div{ width:100%; } -.svgtheme{ - color: var(--icon-color); - filter:hue-rotate(var(--rot)) invert(var(--invert)) brightness(var(--brightness)); -} .channels .channel{ margin-bottom: .03in; } .colaspeicon{ + height:.15in; width:.15in; padding-right: .025in; padding-left: .05in; @@ -1572,6 +1569,34 @@ form div{ .hiddencat{ 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{ width:.5in; height:.5in; @@ -1726,6 +1751,7 @@ form div{ background: var(--settings-hover); } #settings{ + height:.225in; width:.225in; margin:.05in; } From d19a17bc3a40d22a5b9d50679a89659e493211a2 Mon Sep 17 00:00:00 2001 From: ygg2 Date: Thu, 29 Aug 2024 11:00:20 -0400 Subject: [PATCH 2/5] fix icons alignment --- webpage/style.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/webpage/style.css b/webpage/style.css index 7919960..7170c7e 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -339,6 +339,7 @@ p { width: .175in; padding-right: .026in; height: .175in; + vertical-align: text-bottom; } @@ -677,7 +678,7 @@ textarea:focus-visible, transition: height .2s ease-in-out; user-select: none; cursor: pointer; - padding-left: .05in; + padding: 0 .05in; overflow-y: clip; } @@ -1563,7 +1564,7 @@ form div{ height:.15in; width:.15in; padding-right: .025in; - padding-left: .05in; + margin-left: .05in; transition:rotate .2s; } .hiddencat{ From 20f5b7d24bf63f086d62c6f71677cc8c261fbfbc Mon Sep 17 00:00:00 2001 From: ygg2 Date: Thu, 29 Aug 2024 14:50:52 -0400 Subject: [PATCH 3/5] missed one icon --- .dist/channel.js | 5 ++--- webpage/channel.ts | 5 ++--- webpage/style.css | 3 ++- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/.dist/channel.js b/.dist/channel.js index c11eee5..2869308 100644 --- a/.dist/channel.js +++ b/.dist/channel.js @@ -95,9 +95,8 @@ class Channel { let expires = 1800; const copycontainer = document.createElement("div"); copycontainer.classList.add("copycontainer"); - const copy = document.createElement("img"); - copy.src = "/icons/copy.svg"; - copy.classList.add("copybutton", "svgtheme"); + const copy = document.createElement("span"); + copy.classList.add("copybutton", "svgtheme", "svg-copy"); copycontainer.append(copy); copycontainer.onclick = _ => { if (text.textContent) { diff --git a/webpage/channel.ts b/webpage/channel.ts index 3784863..9b1d727 100644 --- a/webpage/channel.ts +++ b/webpage/channel.ts @@ -109,9 +109,8 @@ class Channel{ let expires=1800; const copycontainer=document.createElement("div"); copycontainer.classList.add("copycontainer") - const copy=document.createElement("img"); - copy.src="/icons/copy.svg"; - copy.classList.add("copybutton","svgtheme"); + const copy=document.createElement("span"); + copy.classList.add("copybutton","svgtheme","svg-copy"); copycontainer.append(copy); copycontainer.onclick=_=>{ if(text.textContent){ diff --git a/webpage/style.css b/webpage/style.css index 7170c7e..41c3d23 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -1819,7 +1819,8 @@ form div{ border:solid .03in var(--black); } .copybutton{ - + display:inline-block; + height:.2in; width:.25in; } .copycontainer{ From f233961e6b5774b21c3031086263e0e6c29b1e09 Mon Sep 17 00:00:00 2001 From: ygg2 Date: Fri, 30 Aug 2024 05:22:25 -0400 Subject: [PATCH 4/5] rename colaspeicon to collapse-icon --- .dist/channel.js | 2 +- webpage/channel.ts | 2 +- webpage/style.css | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.dist/channel.js b/.dist/channel.js index 2869308..16bd513 100644 --- a/.dist/channel.js +++ b/.dist/channel.js @@ -354,7 +354,7 @@ class Channel { const caps = document.createElement("div"); const decdiv = document.createElement("div"); const decoration = document.createElement("span"); - decoration.classList.add("svgtheme", "colaspeicon", "svg-category"); + decoration.classList.add("svgtheme", "collapse-icon", "svg-category"); decdiv.appendChild(decoration); const myhtml = document.createElement("p2"); myhtml.textContent = this.name; diff --git a/webpage/channel.ts b/webpage/channel.ts index 9b1d727..3fc07ae 100644 --- a/webpage/channel.ts +++ b/webpage/channel.ts @@ -360,7 +360,7 @@ class Channel{ const decdiv=document.createElement("div"); const decoration=document.createElement("span"); - decoration.classList.add("svgtheme","colaspeicon","svg-category") + decoration.classList.add("svgtheme","collapse-icon","svg-category") decdiv.appendChild(decoration) const myhtml=document.createElement("p2"); diff --git a/webpage/style.css b/webpage/style.css index 81cac07..96a416f 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -1559,7 +1559,7 @@ form div{ .channels .channel{ margin-bottom: .03in; } -.colaspeicon{ +.collapse-icon{ height:.15in; width:.15in; padding-right: .025in; From 16cedd46c72e88dde611f49ddc8586ab5158251e Mon Sep 17 00:00:00 2001 From: ygg2 Date: Mon, 2 Sep 2024 18:05:51 -0400 Subject: [PATCH 5/5] fix hopefully --- webpage/channel.ts | 25 ++++++++++--------------- webpage/index.html | 2 +- webpage/localuser.ts | 17 +++++++---------- 3 files changed, 18 insertions(+), 26 deletions(-) diff --git a/webpage/channel.ts b/webpage/channel.ts index 174125c..a9b890b 100644 --- a/webpage/channel.ts +++ b/webpage/channel.ts @@ -113,9 +113,8 @@ class Channel{ let expires=1800; const copycontainer=document.createElement("div"); copycontainer.classList.add("copycontainer"); - const copy=document.createElement("img"); - copy.src="/icons/copy.svg"; - copy.classList.add("copybutton","svgtheme"); + const copy=document.createElement("span"); + copy.classList.add("copybutton","svgtheme","svg-copy"); copycontainer.append(copy); copycontainer.onclick=_=>{ if(text.textContent){ @@ -376,9 +375,8 @@ class Channel{ const caps=document.createElement("div"); const decdiv=document.createElement("div"); - const decoration=document.createElement("img"); - decoration.src="/icons/category.svg"; - decoration.classList.add("svgtheme","colaspeicon"); + const decoration=document.createElement("span"); + decoration.classList.add("svgtheme","collapse-icon","svg-category"); decdiv.appendChild(decoration); const myhtml=document.createElement("p2"); @@ -437,20 +435,17 @@ class Channel{ const myhtml=document.createElement("span"); myhtml.textContent=this.name; if(this.type===0){ - const decoration=document.createElement("img"); - decoration.src="/icons/channel.svg"; + const decoration=document.createElement("span"); div.appendChild(decoration); - decoration.classList.add("space","svgtheme"); + decoration.classList.add("space","svgtheme","svg-channel"); }else if(this.type===2){// - const decoration=document.createElement("img"); - decoration.src="/icons/voice.svg"; + const decoration=document.createElement("span"); div.appendChild(decoration); - decoration.classList.add("space","svgtheme"); + decoration.classList.add("space","svgtheme","svg-voice"); }else if(this.type===5){// - const decoration=document.createElement("img"); - decoration.src="/icons/announce.svg"; + const decoration=document.createElement("span"); div.appendChild(decoration); - decoration.classList.add("space","svgtheme"); + decoration.classList.add("space","svgtheme","svg-announce"); }else{ console.log(this.type); } diff --git a/webpage/index.html b/webpage/index.html index 8c9df93..6b466fa 100644 --- a/webpage/index.html +++ b/webpage/index.html @@ -45,7 +45,7 @@
- +
diff --git a/webpage/localuser.ts b/webpage/localuser.ts index 808818a..b104779 100644 --- a/webpage/localuser.ts +++ b/webpage/localuser.ts @@ -500,23 +500,22 @@ class Localuser{ buildservers():void{ const serverlist=document.getElementById("servers") as HTMLDivElement;// const outdiv=document.createElement("div"); - const img=document.createElement("img"); + const home=document.createElement("span"); const div=document.createElement("div"); div.classList.add("home","servericon"); - img.src="/icons/home.svg"; - img.classList.add("svgtheme","svgicon"); - img["all"]=this.guildids.get("@me"); + home.classList.add("svgtheme","svgicon","svg-home"); + home["all"]=this.guildids.get("@me"); (this.guildids.get("@me") as Guild).html=outdiv; const unread=document.createElement("div"); unread.classList.add("unread"); outdiv.append(unread); outdiv.append(div); - div.appendChild(img); + div.appendChild(home); outdiv.classList.add("servernoti"); serverlist.append(outdiv); - img.onclick=function(){ + home.onclick=function(){ this["all"].loadGuild(); this["all"].loadChannel(); }; @@ -550,9 +549,8 @@ class Localuser{ this.createGuild(); }; const guilddsdiv=document.createElement("div"); - const guildDiscoveryContainer=document.createElement("img"); - guildDiscoveryContainer.src="/icons/explore.svg"; - guildDiscoveryContainer.classList.add("svgtheme","svgicon"); + const guildDiscoveryContainer=document.createElement("span"); + guildDiscoveryContainer.classList.add("svgtheme","svgicon","svg-explore"); guilddsdiv.classList.add("home","servericon"); guilddsdiv.appendChild(guildDiscoveryContainer); serverlist.appendChild(guilddsdiv); @@ -928,7 +926,6 @@ class Localuser{ { const userinfos=getBulkInfo(); tas.addColorInput("Accent color:",_=>{ - fixsvgtheme(); userinfos.accent_color=_; localStorage.setItem("userinfos",JSON.stringify(userinfos)); document.documentElement.style.setProperty("--accent-color", userinfos.accent_color);