~vpzom/hitide

649d33ca68889669d62817765bf8d6a3441b6949 — Colin Reeder 1 year, 1 month ago 643eb3c
Use SVG icons instead of emoji
M Cargo.lock => Cargo.lock +24 -0
@@ 294,6 294,7 @@ dependencies = [
 "fluent-langneg",
 "futures-util",
 "ginger",
 "hitide_icons",
 "http",
 "hyper",
 "hyper-tls",


@@ 310,6 311,13 @@ dependencies = [
]

[[package]]
name = "hitide_icons"
version = "0.1.0"
dependencies = [
 "phf",
]

[[package]]
name = "html5ever"
version = "0.25.1"
source = "registry+https://github.com/rust-lang/crates.io-index"


@@ 662,7 670,9 @@ version = "0.8.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "3dfb61232e34fcb633f43d12c58f83c1df82962dcdfa565a4e866ffc17dafe12"
dependencies = [
 "phf_macros",
 "phf_shared",
 "proc-macro-hack",
]

[[package]]


@@ 686,6 696,20 @@ dependencies = [
]

[[package]]
name = "phf_macros"
version = "0.8.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "7f6fde18ff429ffc8fe78e2bf7f8b7a5a5a6e2a8b58bc5a9ac69198bbda9189c"
dependencies = [
 "phf_generator",
 "phf_shared",
 "proc-macro-hack",
 "proc-macro2",
 "quote",
 "syn",
]

[[package]]
name = "phf_shared"
version = "0.8.0"
source = "registry+https://github.com/rust-lang/crates.io-index"

M Cargo.toml => Cargo.toml +4 -0
@@ 1,3 1,6 @@
[workspace]
members = ["icons"]

[package]
name = "hitide"
version = "0.5.0-pre"


@@ 28,3 31,4 @@ fluent = "0.12.0"
lazy_static = "1.4.0"
unic-langid = { version = "0.9.0", features = ["macros"] }
futures-util = "0.3.5"
hitide_icons = { path = "./icons" }

A icons/Cargo.toml => icons/Cargo.toml +10 -0
@@ 0,0 1,10 @@
[package]
name = "hitide_icons"
version = "0.1.0"
authors = ["Colin Reeder <colin@vpzom.click>"]
edition = "2018"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
phf = { version = "0.8.0", features = ["macros"] }

A icons/res/notifications-some.svg => icons/res/notifications-some.svg +7 -0
@@ 0,0 1,7 @@
<?xml version="1.0"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FF8F00" stroke="#FF8F00">
	<path d="M 14 20 q -2 4 -4 0" />
	<path d="M 14 4 q 2 0 3 2 c 1 1 0 10 5 14 l -20 0 c 5 -4 4 -8 5 -14 q 1 -2 3 -2 c 1 -3 3 -3 4 0 z" stroke-linejoin="round" />
	<line x1="12" y1="7" x2="12" y2="12" stroke-linecap="round" stroke-width="3" stroke="white" />
	<circle cx="12" cy="16.5" r="1.5" stroke="none" fill="white" />
</svg>

A icons/res/notifications.svg => icons/res/notifications.svg +5 -0
@@ 0,0 1,5 @@
<?xml version="1.0"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" stroke="black">
	<path d="M 14 4 q 2 0 3 2 c 1 1 0 10 5 14 l -20 0 c 5 -4 4 -8 5 -14 q 1 -2 3 -2 c 1 -3 3 -3 4 0 z" stroke-linejoin="round" />
	<path d="M 14 20 q -2 4 -4 0" />
</svg>

A icons/res/person.svg => icons/res/person.svg +4 -0
@@ 0,0 1,4 @@
<?xml version="1.0"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" xmlns:xlink="http://www.w3.org/1999/xlink">
	<path stroke="black" stroke-linejoin="round" d="M 2 21 q 1 -6 9 -8 c -4 -2 -4 -10 1 -10 c 5 0 5 8 1 10 q 8 2 9 8 z" />
</svg>

A icons/src/lib.rs => icons/src/lib.rs +49 -0
@@ 0,0 1,49 @@
pub struct Icon {
    pub path: &'static str,
    pub content: &'static str,
}

macro_rules! icons_consts {
    ($i:ident => $p:expr) => {
        pub const $i: Icon = Icon {
            path: $p,
            content: include_str!(concat!("../res/", $p)),
        };
    };
    ($i1:ident => $p1:expr, $($i2:ident => $p2:expr),+) => {
        icons_consts! { $i1 => $p1 }
        icons_consts! { $($i2 => $p2),+ }
    }
}

macro_rules! icons_map {
    ($($i:ident => $p:expr),+) => {
        pub const ICONS_MAP: phf::Map<&'static str, &'static Icon> = phf::phf_map! {
            $($p => &icons::$i),+
        };
    }
}

macro_rules! icons {
    ($($i:ident => $p:expr),+) => {
        pub mod icons {
            use super::Icon;

            icons_consts! {
                $($i => $p),+
            }
        }

        icons_map! {
            $($i => $p),+
        }
    }
}

icons! {
    NOTIFICATIONS => "notifications.svg",
    NOTIFICATIONS_SOME => "notifications-some.svg",
    PERSON => "person.svg"
}

pub use icons::*;

M res/main.css => res/main.css +6 -4
@@ 53,10 53,6 @@ body {
	margin-bottom: 0;
}

.notification-indicator.unread {
	color: #FF8F00;
}

.notification-item.unread {
	border-left: 5px solid #FDD835;
	padding-left: 5px;


@@ 75,6 71,12 @@ body {
	border: 1px dashed black;
}

.icon {
	height: 1.2em;
	display: inline;
	vertical-align: text-bottom;
}

@media (max-width: 768px) {
	.communitySidebar {
		display: none; /* TODO still show this somewhere */

M src/components/mod.rs => src/components/mod.rs +20 -3
@@ 226,11 226,18 @@ pub fn HTPage<'a, Children: render::Render>(
                                        <>
                                            <a
                                                href={"/notifications"}
                                                class={if login.user.has_unread_notifications { "notification-indicator unread" } else { "notification-indicator" }}
                                            >
                                                {"🔔︎"}
                                                {
                                                    if login.user.has_unread_notifications {
                                                        hitide_icons::NOTIFICATIONS_SOME.img()
                                                    } else {
                                                        hitide_icons::NOTIFICATIONS.img()
                                                    }
                                                }
                                            </a>
                                            <a href={format!("/users/{}", login.user.id)}>
                                                {hitide_icons::PERSON.img()}
                                            </a>
                                            <a href={format!("/users/{}", login.user.id)}>{"👤︎"}</a>
                                        </>
                                    })
                                } else {


@@ 501,3 508,13 @@ impl<'a> render::Render for NotificationItem<'a> {
        write!(writer, "</li>")
    }
}

trait IconExt {
    fn img(&self) -> render::SimpleElement<()>;
}

impl IconExt for hitide_icons::Icon {
    fn img(&self) -> render::SimpleElement<()> {
        render::rsx! { <img src={format!("/static/{}", self.path)} class={"icon"} /> }
    }
}

M src/routes/static.rs => src/routes/static.rs +9 -0
@@ 1,3 1,4 @@
use hitide_icons::ICONS_MAP;
use std::sync::Arc;

const FILE_MAIN_CSS: &[u8] = include_bytes!("../../res/main.css");


@@ 20,6 21,14 @@ async fn handler_static_get(
        );

        Ok(resp)
    } else if let Some(icon) = ICONS_MAP.get(params.0.as_str()) {
        let mut resp = hyper::Response::new(icon.content.into());
        resp.headers_mut().insert(
            hyper::header::CONTENT_TYPE,
            hyper::header::HeaderValue::from_static("image/svg+xml"),
        );

        Ok(resp)
    } else {
        Err(crate::Error::RoutingError(trout::RoutingFailure::NotFound))
    }