zaaarf/upub
1
0
Fork 0
forked from alemi/upub
Code Pull requests Activity

feat(web): allow customizing accent color

Browse source
This commit is contained in:
əlemi 2024-05-20 08:18:15 +02:00
parent b8e03fe3c5
commit bf86e44b00
Signed by: alemi
GPG key ID: A4895B84D311642C
3 changed files with 35 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
web/src/config.rs
View file

@ -10,6 +10,9 @@ pub struct Config {
#[serde_inline_default(true)]
pub loop_videos: bool,
#[serde_inline_default("#BF616A".to_string())]
pub accent_color: String,
}
#[serde_inline_default::serde_inline_default]

1
web/src/lib.rs
View file

@ -15,6 +15,7 @@ pub const URL_PREFIX: &str = "/web";
pub const URL_SENSITIVE: &str = "https://cdn.alemi.dev/social/nsfw.png";
pub const DEFAULT_AVATAR_URL: &str = "https://cdn.alemi.dev/social/gradient.png";
pub const NAME: &str = "μ";
pub const DEFAULT_COLOR: &str = "#BF616A";
use std::sync::Arc;
use uriproxy::UriClass;

32
web/src/page/config.rs
View file

@ -1,9 +1,15 @@
use leptos::*;
use crate::prelude::*;
use crate::{prelude::*, DEFAULT_COLOR};
#[component]
pub fn ConfigPage(setter: WriteSignal<crate::Config>) -> impl IntoView {
let config = use_context::<Signal<crate::Config>>().expect("missing config context");
let (color, set_color) = leptos_use::use_css_var("--accent");
let (_color_rgb, set_color_rgb) = leptos_use::use_css_var("--accent-rgb");
let previous_color = config.get().accent_color;
set_color_rgb.set(parse_hex(&previous_color));
set_color.set(previous_color);
macro_rules! get_cfg {
(filter $field:ident) => {
@ -51,6 +57,22 @@ pub fn ConfigPage(setter: WriteSignal<crate::Config>) -> impl IntoView {
/> collapse content warnings
</span>
</p>
<p>
accent color
<input type="text" class="ma-1"
style="width: 8ch;"
placeholder=DEFAULT_COLOR
value=color
on:input=move|ev| {
let mut val = event_target_value(&ev);
if val.is_empty() { val = DEFAULT_COLOR.to_string() };
let mut mock = config.get();
mock.accent_color = val.clone();
setter.set(mock);
set_color_rgb.set(parse_hex(&val));
set_color.set(val);
} />
</p>
<hr />
<p><code title="unchecked elements won't show in timelines">filters</code></p>
<ul>
@ -65,3 +87,11 @@ pub fn ConfigPage(setter: WriteSignal<crate::Config>) -> impl IntoView {
</div>
}
}
fn parse_hex(hex: &str) -> String {
if hex.len() < 7 { return "0, 0, 0".into(); }
let r = i64::from_str_radix(&hex[1..3], 16).unwrap_or_default();
let g = i64::from_str_radix(&hex[3..5], 16).unwrap_or_default();
let b = i64::from_str_radix(&hex[5..7], 16).unwrap_or_default();
format!("{r}, {g}, {b}")
}