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

accent color support

Browse Source
This commit is contained in:
MathMan05
2024-08-08 22:43:39 -05:00
parent 3c5cb3df6c
commit c27a9af9bd
8 changed files with 134 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
webpage/localuser.ts
View File

@@ -4,7 +4,7 @@ import {Direct} from "./direct.js";
import {Voice} from "./audio.js";
import {User} from "./user.js";
import {Fullscreen} from "./fullscreen.js";
import {setTheme, Specialuser} from "./login.js";
import {getBulkInfo, setTheme, Specialuser} from "./login.js";
import { SnowFlake } from "./snowflake.js";
import { Message } from "./message.js";
import { channeljson, guildjson, memberjson, readyjson, userjson } from "./jsontypes.js";
@@ -733,6 +733,15 @@ class Localuser{
Voice.noises(sounds[_]);
})
}
{
const userinfos=getBulkInfo();
tas.addColorInput("Accent color:",_=>{
userinfos.accent_color=_;
localStorage.setItem("userinfos",JSON.stringify(userinfos));
document.documentElement.style.setProperty('--accent-color', userinfos.accent_color);
},{initColor:userinfos.accent_color})
}
}
settings.show();
}

6
webpage/login.ts
View File

@@ -37,6 +37,10 @@ function setDefaults(){
if(userinfos.users===undefined){
userinfos.users={};
}
if(userinfos.accent_color===undefined){
userinfos.accent_color="#242443";
}
document.documentElement.style.setProperty('--accent-color', userinfos.accent_color);
if(userinfos.preferences===undefined){
userinfos.preferences={
theme:"Dark",
@@ -47,7 +51,7 @@ function setDefaults(){
if(userinfos.preferences&&(userinfos.preferences.notisound===undefined)){
userinfos.preferences.notisound="three";
}
localStorage.setItem("userinfos",JSON.stringify(userinfos));
localStorage.setItem("userinfos",JSON.stringify(userinfos))
}
setDefaults();
class Specialuser{

46
webpage/settings.ts
View File

@@ -175,6 +175,47 @@ class TextInput implements OptionsElement{
this.onSubmit(this.textContent);
}
}
class ColorInput implements OptionsElement{
readonly label:string;
readonly owner:Options;
readonly onSubmit:(str:string)=>void;
colorContent:string;
input:WeakRef<HTMLInputElement>
constructor(label:string,onSubmit:(str:string)=>void,owner:Options,{initColor=""}={}){
this.label=label;
this.colorContent=initColor;
this.owner=owner;
this.onSubmit=onSubmit;
}
generateHTML():HTMLDivElement{
const div=document.createElement("div");
const span=document.createElement("span");
span.textContent=this.label;
div.append(span);
const input=document.createElement("input");
input.value=this.colorContent;
input.type="color";
input.oninput=this.onChange.bind(this);
this.input=new WeakRef(input);
div.append(input);
return div;
}
private onChange(ev:Event){
this.owner.changed();
const value=this.input.deref().value as string;
this.onchange(value);
this.colorContent=value;
}
onchange:(str:string)=>void=_=>{};
watchForChange(func:(str:string)=>void){
this.onchange=func;
}
submit(){
this.onSubmit(this.colorContent);
}
}
class SelectInput implements OptionsElement{
readonly label:string;
readonly owner:Options;
@@ -390,6 +431,11 @@ class Options implements OptionsElement{
this.options.push(textInput);
return textInput;
}
addColorInput(label:string,onSubmit:(str:string)=>void,{initColor=""}={}){
const colorInput=new ColorInput(label,onSubmit,this,{initColor});
this.options.push(colorInput);
return colorInput;
}
addMDInput(label:string,onSubmit:(str:string)=>void,{initText=""}={}){
const mdInput=new MDInput(label,onSubmit,this,{initText});
this.options.push(mdInput);

3
webpage/style.css
View File

@@ -1598,9 +1598,6 @@ form div{
/* border-radius:.05in; */
padding-left: .02in;
padding-right: .05in;
}
.reactiondiv{
}
.flexgrow{
flex-grow:1;

31
webpage/themes.css
View File

@@ -4,36 +4,37 @@
--red: red;
--green: green;
--yellow:yellow;
--accent-color:#242443;
}
.Dark-theme { /* thanks to TomatoCake for the updated CSS vars and such*/
color-scheme: dark;
--primary-text: #FFF;
--primary-bg: #282832;
--primary-bg: color-mix(in srgb, #2f2f2f 70%, var(--accent-color));
--black: #000;
--shadow: #000;
--focus: #8888ff;
--message-bg-hover: #1e1e28;
--message-bg-hover: color-mix(in srgb, #191919 85%, var(--accent-color));
--typing-bg: #161616;
--timestamp-color: #a2a2a2;
--code-bg: #101014;
--user-info-bg: #323039;
--user-dock-bg: #1a1a23;
--channels-bg: #32323c;
--channel-hover: #1c1b25;
--code-bg: color-mix(in srgb, #121212 95%, var(--accent-color));
--user-info-bg: color-mix(in srgb,#383838 85%, var(--accent-color));
--user-dock-bg: color-mix(in srgb,#111111 90%, var(--accent-color));
--channels-bg: color-mix(in srgb,#3f3f3f 70%, var(--accent-color));
--channel-hover:color-mix(in srgb, #2c2c2c 70%, var(--accent-color));
--blank-bg: #1b1b1b;
--light-border: #92929B;
--settings-hover: #0e0d10;
--settings-hover: color-mix(in srgb, #000000 95%, var(--accent-color) 5%);
--quote-bg: #7a798e;
--button-bg: #1b1b28;
--button-bg: color-mix(in srgb, #303030 80%, var(--accent-color));
--button-hover: #282832;
--textarea-bg: #26272c;
--textarea-bg: color-mix(in srgb, #272727 85%, var(--accent-color));
--filename: #47bbff;
--mention-bg: #F00;
--pronouns: #797979;
--profile-bg: #2e2d33;
--profile-info-bg: #1a1a1e;
--server-border: #1b1b24;
--server-bg: #252530;
--profile-bg: color-mix(in srgb, #232323 90%, var(--accent-color));
--profile-info-bg: color-mix(in srgb, #121212 90%, var(--accent-color));
--server-border: color-mix(in srgb, #000000 80%, var(--accent-color));
--server-bg: color-mix(in srgb, #2a2a2a 80%, var(--accent-color));
--reply-border: #474b76;
--reply-bg: #0b0d20;
--reply-text: #acacac;
@@ -49,7 +50,7 @@
--scrollbar-thumb: #201f29;
--scrollbar-thumb-hover: #16161f;
--markdown-timestamp: #2f2f33;
--embed: #1a1823;
--embed: color-mix(in srgb, #131313 90%, var(--accent-color));
--link: #8888ff;
--discovery-bg: #37373b;
--message-jump:#7678b0;