From d83baa78b0b029a5c25b781ee3f77ae3cbecf60d Mon Sep 17 00:00:00 2001 From: cel 🌸 Date: Wed, 7 May 2025 00:26:44 +0100 Subject: feat: message sent icons --- assets/icons/addcontact24.svg | 5 ++ assets/icons/attachment24.svg | 3 ++ assets/icons/away16.svg | 10 ++++ assets/icons/away16color.svg | 10 ++++ assets/icons/bubble16.svg | 3 ++ assets/icons/bubble16color.svg | 3 ++ assets/icons/bubble24.svg | 3 ++ assets/icons/contact24.svg | 4 ++ assets/icons/delivered16.svg | 4 ++ assets/icons/dnd16.svg | 3 ++ assets/icons/dnd16color.svg | 3 ++ assets/icons/error16color.svg | 10 ++++ assets/icons/forward24.svg | 10 ++++ assets/icons/heart24.svg | 3 ++ assets/icons/newbubble24.svg | 4 ++ assets/icons/reply24.svg | 10 ++++ assets/icons/sending16.svg | 5 ++ assets/icons/sent16.svg | 3 ++ assets/style.scss | 17 +++++++ src/lib.rs | 109 ++++++++++++++++++++++++++++++++++++++--- 20 files changed, 216 insertions(+), 6 deletions(-) create mode 100644 assets/icons/addcontact24.svg create mode 100644 assets/icons/attachment24.svg create mode 100644 assets/icons/away16.svg create mode 100644 assets/icons/away16color.svg create mode 100644 assets/icons/bubble16.svg create mode 100644 assets/icons/bubble16color.svg create mode 100644 assets/icons/bubble24.svg create mode 100644 assets/icons/contact24.svg create mode 100644 assets/icons/delivered16.svg create mode 100644 assets/icons/dnd16.svg create mode 100644 assets/icons/dnd16color.svg create mode 100644 assets/icons/error16color.svg create mode 100644 assets/icons/forward24.svg create mode 100644 assets/icons/heart24.svg create mode 100644 assets/icons/newbubble24.svg create mode 100644 assets/icons/reply24.svg create mode 100644 assets/icons/sending16.svg create mode 100644 assets/icons/sent16.svg diff --git a/assets/icons/addcontact24.svg b/assets/icons/addcontact24.svg new file mode 100644 index 0000000..3324996 --- /dev/null +++ b/assets/icons/addcontact24.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/icons/attachment24.svg b/assets/icons/attachment24.svg new file mode 100644 index 0000000..ee808e6 --- /dev/null +++ b/assets/icons/attachment24.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/away16.svg b/assets/icons/away16.svg new file mode 100644 index 0000000..5d78da1 --- /dev/null +++ b/assets/icons/away16.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/icons/away16color.svg b/assets/icons/away16color.svg new file mode 100644 index 0000000..e35da57 --- /dev/null +++ b/assets/icons/away16color.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/icons/bubble16.svg b/assets/icons/bubble16.svg new file mode 100644 index 0000000..8775127 --- /dev/null +++ b/assets/icons/bubble16.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/bubble16color.svg b/assets/icons/bubble16color.svg new file mode 100644 index 0000000..c3c01d8 --- /dev/null +++ b/assets/icons/bubble16color.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/bubble24.svg b/assets/icons/bubble24.svg new file mode 100644 index 0000000..b9e9414 --- /dev/null +++ b/assets/icons/bubble24.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/contact24.svg b/assets/icons/contact24.svg new file mode 100644 index 0000000..da03215 --- /dev/null +++ b/assets/icons/contact24.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/delivered16.svg b/assets/icons/delivered16.svg new file mode 100644 index 0000000..feec0c2 --- /dev/null +++ b/assets/icons/delivered16.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/dnd16.svg b/assets/icons/dnd16.svg new file mode 100644 index 0000000..d13d54b --- /dev/null +++ b/assets/icons/dnd16.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/dnd16color.svg b/assets/icons/dnd16color.svg new file mode 100644 index 0000000..e69cbe3 --- /dev/null +++ b/assets/icons/dnd16color.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/error16color.svg b/assets/icons/error16color.svg new file mode 100644 index 0000000..21e28fc --- /dev/null +++ b/assets/icons/error16color.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/icons/forward24.svg b/assets/icons/forward24.svg new file mode 100644 index 0000000..a2fdaba --- /dev/null +++ b/assets/icons/forward24.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/icons/heart24.svg b/assets/icons/heart24.svg new file mode 100644 index 0000000..dd63532 --- /dev/null +++ b/assets/icons/heart24.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/newbubble24.svg b/assets/icons/newbubble24.svg new file mode 100644 index 0000000..b1d72fd --- /dev/null +++ b/assets/icons/newbubble24.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/reply24.svg b/assets/icons/reply24.svg new file mode 100644 index 0000000..7136614 --- /dev/null +++ b/assets/icons/reply24.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/icons/sending16.svg b/assets/icons/sending16.svg new file mode 100644 index 0000000..a74179a --- /dev/null +++ b/assets/icons/sending16.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/icons/sent16.svg b/assets/icons/sent16.svg new file mode 100644 index 0000000..5b7f3fa --- /dev/null +++ b/assets/icons/sent16.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/style.scss b/assets/style.scss index b829501..9a47cb3 100644 --- a/assets/style.scss +++ b/assets/style.scss @@ -325,6 +325,7 @@ p { width: 16px; padding: 0 8px; flex: none; + align-self: end; } .message-info { @@ -373,6 +374,22 @@ p { opacity: 0; } +.light { + filter: invert(99%) sepia(1%) saturate(2689%) hue-rotate(208deg) brightness(106%) contrast(73%); +} + +.chat-message.final .message-delivery, .visible { + opacity: 100% !important; +} + +.chat-message.final { + margin-bottom: 8px; +} + +.chat-message:not(:hover) .message-delivery { + opacity: 0; +} + /* font-families */ /* thai */ diff --git a/src/lib.rs b/src/lib.rs index 7ff95d7..d45bfc3 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -13,7 +13,7 @@ use std::{ use chrono::{NaiveDateTime, TimeDelta}; use filamento::{ - chat::{Body, Chat, ChatStoreFields, Message, MessageStoreFields}, db::Db, error::{CommandError, ConnectionError, DatabaseError}, files::FilesMem, roster::{Contact, ContactStoreFields}, user::{User, UserStoreFields}, UpdateMessage + chat::{Body, Chat, ChatStoreFields, Delivery, Message, MessageStoreFields}, db::Db, error::{CommandError, ConnectionError, DatabaseError}, files::FilesMem, roster::{Contact, ContactStoreFields}, user::{User, UserStoreFields}, UpdateMessage }; use futures::stream::StreamExt; use indexmap::IndexMap; @@ -605,13 +605,110 @@ pub fn MessageHistoryBuffer(chat: MacawChat) -> impl IntoView { view! {
- +
} } +#[derive(Copy, Clone)] +pub enum Icon { + AddContact24, + Attachment24, + Away16, + Away16Color, + Bubble16, + Bubble16Color, + Bubble24, + Contact24, + Delivered16, + Dnd16, + Dnd16Color, + Error16Color, + Forward24, + Heart24, + NewBubble24, + Reply24, + Sending16, + Sent16, +} + +pub const ICONS_SRC: &str = "/assets/icons/"; + +impl Icon { + pub fn src(&self) -> String { + match self { + Icon::AddContact24 => format!("{}addcontact24.svg", ICONS_SRC), + Icon::Attachment24 => format!("{}attachment24.svg", ICONS_SRC), + Icon::Away16 => format!("{}away16.svg", ICONS_SRC), + Icon::Away16Color => format!("{}away16color.svg", ICONS_SRC), + Icon::Bubble16 => format!("{}bubble16.svg", ICONS_SRC), + Icon::Bubble16Color => format!("{}bubble16color.svg", ICONS_SRC), + Icon::Bubble24 => format!("{}bubble24.svg", ICONS_SRC), + Icon::Contact24 => format!("{}contact24.svg", ICONS_SRC), + Icon::Delivered16 => format!("{}delivered16.svg", ICONS_SRC), + Icon::Dnd16 => format!("{}dnd16.svg", ICONS_SRC), + Icon::Dnd16Color => format!("{}dnd16color.svg", ICONS_SRC), + Icon::Error16Color => format!("{}error16color.svg", ICONS_SRC), + Icon::Forward24 => format!("{}forward24.svg", ICONS_SRC), + Icon::Heart24 => format!("{}heart24.svg", ICONS_SRC), + Icon::NewBubble24 => format!("{}newbubble24.svg", ICONS_SRC), + Icon::Reply24 => format!("{}reply24.svg", ICONS_SRC), + Icon::Sending16 => format!("{}sending16.svg", ICONS_SRC), + Icon::Sent16 => format!("{}sent16.svg", ICONS_SRC), + } + } + + pub fn size(&self) -> isize { + match self { + Icon::AddContact24 => 24, + Icon::Attachment24 => 24, + Icon::Away16 => 16, + Icon::Away16Color => 16, + Icon::Bubble16 => 16, + Icon::Bubble16Color => 16, + Icon::Bubble24 => 24, + Icon::Contact24 => 24, + Icon::Delivered16 => 16, + Icon::Dnd16 => 16, + Icon::Dnd16Color => 16, + Icon::Error16Color => 16, + Icon::Forward24 => 24, + Icon::Heart24 => 24, + Icon::NewBubble24 => 24, + Icon::Reply24 => 24, + Icon::Sending16 => 16, + Icon::Sent16 => 16, + } + } +} + +#[component] +pub fn IconComponent(icon: Icon) -> impl IntoView { + view! { + + } +} + +#[component] +pub fn Delivery(delivery: Delivery) -> impl IntoView { + match delivery { + // TODO: proper icon coloring/theming + Delivery::Sending => view! { }.into_any(), + Delivery::Written => view! { }.into_any(), + // TODO: message receipts + // Delivery::Written => view! {}.into_any(), + Delivery::Sent => view! { }.into_any(), + Delivery::Delivered => view! { }.into_any(), + // TODO: check if there is also the icon class + Delivery::Read => view! { }.into_any(), + Delivery::Failed => view! { }.into_any(), + // TODO: queued icon + Delivery::Queued => view! { }.into_any(), + } +} + #[component] pub fn Message(message: MacawMessage, major: bool, r#final: bool) -> impl IntoView { let message_message = *message.message; @@ -624,7 +721,7 @@ pub fn Message(message: MacawMessage, major: bool, r#final: bool) -> impl IntoVi // {move || message_message.delivery().read().map(|delivery| delivery.to_string()).unwrap_or_default()} if major { view! { -
+
@@ -635,17 +732,17 @@ pub fn Message(message: MacawMessage, major: bool, r#final: bool) -> impl IntoVi {move || message_message.body().read().body.clone()}
-
+
{move || message_message.delivery().get().map(|delivery| view! { } ) }
}.into_any() } else { view! { -
+
{move || message_message.timestamp().read().format("%H:%M").to_string()}
{move || message_message.body().read().body.clone()}
-
+
{move || message_message.delivery().get().map(|delivery| view! { } ) }
}.into_any() } -- cgit