Andromeda/jank-client-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

use mask instead of filter

Browse source
This commit is contained in:
ygg2 2024-08-29 10:26:10 -04:00
parent 28ded9ed7c
commit 3a6f400cc4
6 changed files with 62 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

20
webpage/channel.ts
View file

@ -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)
}

2
webpage/index.html
View file

@ -45,7 +45,7 @@
</div>
<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>

73
webpage/localuser.ts
View file

@ -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};

34
webpage/style.css
View file

@ -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;
}