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

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

10
.dist/localuser.js
View file

@ -3,7 +3,7 @@ import { Direct } from "./direct.js";
import { Voice } from "./audio.js";
import { User } from "./user.js";
import { Fullscreen } from "./fullscreen.js";
import { setTheme } from "./login.js";
import { getBulkInfo, setTheme } from "./login.js";
import { SnowFlake } from "./snowflake.js";
import { Message } from "./message.js";
import { Member } from "./member.js";
@ -709,6 +709,14 @@ 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();
}

4
.dist/login.js
View file

@ -36,6 +36,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",

44
.dist/settings.js
View file

@ -175,6 +175,45 @@ class TextInput {
this.onSubmit(this.textContent);
}
}
class ColorInput {
label;
owner;
onSubmit;
colorContent;
input;
constructor(label, onSubmit, owner, { initColor = "" } = {}) {
this.label = label;
this.colorContent = initColor;
this.owner = owner;
this.onSubmit = onSubmit;
}
generateHTML() {
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;
}
onChange(ev) {
this.owner.changed();
const value = this.input.deref().value;
this.onchange(value);
this.colorContent = value;
}
onchange = _ => { };
watchForChange(func) {
this.onchange = func;
}
submit() {
this.onSubmit(this.colorContent);
}
}
class SelectInput {
label;
owner;
@ -389,6 +428,11 @@ class Options {
this.options.push(textInput);
return textInput;
}
addColorInput(label, onSubmit, { initColor = "" } = {}) {
const colorInput = new ColorInput(label, onSubmit, this, { initColor });
this.options.push(colorInput);
return colorInput;
}
addMDInput(label, onSubmit, { initText = "" } = {}) {
const mdInput = new MDInput(label, onSubmit, this, { initText });
this.options.push(mdInput);

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;