diff options
author | Colin Reeder <colin@vpzom.click> | 2020-08-08 16:32:21 -0600 |
---|---|---|
committer | Colin Reeder <colin@vpzom.click> | 2020-08-08 16:32:21 -0600 |
commit | 649d33ca68889669d62817765bf8d6a3441b6949 (patch) | |
tree | 2c6ef5db952b3a08112a3e62320ad502324250b3 | |
parent | 643eb3ca33122b094c30d4503b20e8e4d7069345 (diff) |
Use SVG icons instead of emoji
-rw-r--r-- | Cargo.lock | 24 | ||||
-rw-r--r-- | Cargo.toml | 4 | ||||
-rw-r--r-- | icons/Cargo.toml | 10 | ||||
-rw-r--r-- | icons/res/notifications-some.svg | 7 | ||||
-rw-r--r-- | icons/res/notifications.svg | 5 | ||||
-rw-r--r-- | icons/res/person.svg | 4 | ||||
-rw-r--r-- | icons/src/lib.rs | 49 | ||||
-rw-r--r-- | res/main.css | 10 | ||||
-rw-r--r-- | src/components/mod.rs | 23 | ||||
-rw-r--r-- | src/routes/static.rs | 9 |
10 files changed, 138 insertions, 7 deletions
@@ -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" @@ -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" } diff --git a/icons/Cargo.toml b/icons/Cargo.toml new file mode 100644 index 0000000..48bb80b --- /dev/null +++ b/icons/Cargo.toml @@ -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"] } diff --git a/icons/res/notifications-some.svg b/icons/res/notifications-some.svg new file mode 100644 index 0000000..5eef1fa --- /dev/null +++ b/icons/res/notifications-some.svg @@ -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> diff --git a/icons/res/notifications.svg b/icons/res/notifications.svg new file mode 100644 index 0000000..45a55d1 --- /dev/null +++ b/icons/res/notifications.svg @@ -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> diff --git a/icons/res/person.svg b/icons/res/person.svg new file mode 100644 index 0000000..78d7385 --- /dev/null +++ b/icons/res/person.svg @@ -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> diff --git a/icons/src/lib.rs b/icons/src/lib.rs new file mode 100644 index 0000000..355e674 --- /dev/null +++ b/icons/src/lib.rs @@ -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::*; diff --git a/res/main.css b/res/main.css index 2ff6a0c..1ce5be8 100644 --- a/res/main.css +++ b/res/main.css @@ -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 */ diff --git a/src/components/mod.rs b/src/components/mod.rs index e3cd604..9527972 100644 --- a/src/components/mod.rs +++ b/src/components/mod.rs @@ -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"} /> } + } +} diff --git a/src/routes/static.rs b/src/routes/static.rs index 60a0084..d319efe 100644 --- a/src/routes/static.rs +++ b/src/routes/static.rs @@ -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)) } |