From 14f6aaf18a3311fee63b11d0ec9c12ba76b70fa1 Mon Sep 17 00:00:00 2001 From: cel 🌸 Date: Fri, 11 Apr 2025 20:08:05 +0100 Subject: feat: better fonts and colors --- assets/fonts/Diolce-Regular.otf | Bin 0 -> 37600 bytes assets/fonts/Diolce-Regular.ttf | Bin 0 -> 49224 bytes assets/fonts/K2D-Bold.ttf | Bin 0 -> 92876 bytes assets/fonts/K2D-BoldItalic.ttf | Bin 0 -> 97072 bytes assets/fonts/K2D-ExtraBold.ttf | Bin 0 -> 92920 bytes assets/fonts/K2D-ExtraBoldItalic.ttf | Bin 0 -> 97228 bytes assets/fonts/K2D-ExtraLight.ttf | Bin 0 -> 92112 bytes assets/fonts/K2D-ExtraLightItalic.ttf | Bin 0 -> 96264 bytes assets/fonts/K2D-Italic.ttf | Bin 0 -> 96444 bytes assets/fonts/K2D-Light.ttf | Bin 0 -> 92148 bytes assets/fonts/K2D-LightItalic.ttf | Bin 0 -> 96240 bytes assets/fonts/K2D-Medium.ttf | Bin 0 -> 92772 bytes assets/fonts/K2D-MediumItalic.ttf | Bin 0 -> 96888 bytes assets/fonts/K2D-Regular.ttf | Bin 0 -> 92352 bytes assets/fonts/K2D-SemiBold.ttf | Bin 0 -> 92912 bytes assets/fonts/K2D-SemiBoldItalic.ttf | Bin 0 -> 97032 bytes assets/fonts/K2D-Thin.ttf | Bin 0 -> 92276 bytes assets/fonts/K2D-ThinItalic.ttf | Bin 0 -> 96192 bytes src/main.rs | 85 ++++++++++++++++++++++++++++++---- src/message_view.rs | 69 +++++++++++++++++++++++---- 20 files changed, 134 insertions(+), 20 deletions(-) create mode 100644 assets/fonts/Diolce-Regular.otf create mode 100644 assets/fonts/Diolce-Regular.ttf create mode 100644 assets/fonts/K2D-Bold.ttf create mode 100644 assets/fonts/K2D-BoldItalic.ttf create mode 100644 assets/fonts/K2D-ExtraBold.ttf create mode 100644 assets/fonts/K2D-ExtraBoldItalic.ttf create mode 100644 assets/fonts/K2D-ExtraLight.ttf create mode 100644 assets/fonts/K2D-ExtraLightItalic.ttf create mode 100644 assets/fonts/K2D-Italic.ttf create mode 100644 assets/fonts/K2D-Light.ttf create mode 100644 assets/fonts/K2D-LightItalic.ttf create mode 100644 assets/fonts/K2D-Medium.ttf create mode 100644 assets/fonts/K2D-MediumItalic.ttf create mode 100644 assets/fonts/K2D-Regular.ttf create mode 100644 assets/fonts/K2D-SemiBold.ttf create mode 100644 assets/fonts/K2D-SemiBoldItalic.ttf create mode 100644 assets/fonts/K2D-Thin.ttf create mode 100644 assets/fonts/K2D-ThinItalic.ttf diff --git a/assets/fonts/Diolce-Regular.otf b/assets/fonts/Diolce-Regular.otf new file mode 100644 index 0000000..562e749 Binary files /dev/null and b/assets/fonts/Diolce-Regular.otf differ diff --git a/assets/fonts/Diolce-Regular.ttf b/assets/fonts/Diolce-Regular.ttf new file mode 100644 index 0000000..a7f0fd6 Binary files /dev/null and b/assets/fonts/Diolce-Regular.ttf differ diff --git a/assets/fonts/K2D-Bold.ttf b/assets/fonts/K2D-Bold.ttf new file mode 100644 index 0000000..6c07a9a Binary files /dev/null and b/assets/fonts/K2D-Bold.ttf differ diff --git a/assets/fonts/K2D-BoldItalic.ttf b/assets/fonts/K2D-BoldItalic.ttf new file mode 100644 index 0000000..be68508 Binary files /dev/null and b/assets/fonts/K2D-BoldItalic.ttf differ diff --git a/assets/fonts/K2D-ExtraBold.ttf b/assets/fonts/K2D-ExtraBold.ttf new file mode 100644 index 0000000..1065611 Binary files /dev/null and b/assets/fonts/K2D-ExtraBold.ttf differ diff --git a/assets/fonts/K2D-ExtraBoldItalic.ttf b/assets/fonts/K2D-ExtraBoldItalic.ttf new file mode 100644 index 0000000..fbd4804 Binary files /dev/null and b/assets/fonts/K2D-ExtraBoldItalic.ttf differ diff --git a/assets/fonts/K2D-ExtraLight.ttf b/assets/fonts/K2D-ExtraLight.ttf new file mode 100644 index 0000000..21273c3 Binary files /dev/null and b/assets/fonts/K2D-ExtraLight.ttf differ diff --git a/assets/fonts/K2D-ExtraLightItalic.ttf b/assets/fonts/K2D-ExtraLightItalic.ttf new file mode 100644 index 0000000..75a3ca3 Binary files /dev/null and b/assets/fonts/K2D-ExtraLightItalic.ttf differ diff --git a/assets/fonts/K2D-Italic.ttf b/assets/fonts/K2D-Italic.ttf new file mode 100644 index 0000000..ae77b56 Binary files /dev/null and b/assets/fonts/K2D-Italic.ttf differ diff --git a/assets/fonts/K2D-Light.ttf b/assets/fonts/K2D-Light.ttf new file mode 100644 index 0000000..48bf67d Binary files /dev/null and b/assets/fonts/K2D-Light.ttf differ diff --git a/assets/fonts/K2D-LightItalic.ttf b/assets/fonts/K2D-LightItalic.ttf new file mode 100644 index 0000000..8086fd7 Binary files /dev/null and b/assets/fonts/K2D-LightItalic.ttf differ diff --git a/assets/fonts/K2D-Medium.ttf b/assets/fonts/K2D-Medium.ttf new file mode 100644 index 0000000..667fefe Binary files /dev/null and b/assets/fonts/K2D-Medium.ttf differ diff --git a/assets/fonts/K2D-MediumItalic.ttf b/assets/fonts/K2D-MediumItalic.ttf new file mode 100644 index 0000000..177f863 Binary files /dev/null and b/assets/fonts/K2D-MediumItalic.ttf differ diff --git a/assets/fonts/K2D-Regular.ttf b/assets/fonts/K2D-Regular.ttf new file mode 100644 index 0000000..dce2033 Binary files /dev/null and b/assets/fonts/K2D-Regular.ttf differ diff --git a/assets/fonts/K2D-SemiBold.ttf b/assets/fonts/K2D-SemiBold.ttf new file mode 100644 index 0000000..d448629 Binary files /dev/null and b/assets/fonts/K2D-SemiBold.ttf differ diff --git a/assets/fonts/K2D-SemiBoldItalic.ttf b/assets/fonts/K2D-SemiBoldItalic.ttf new file mode 100644 index 0000000..8ec3713 Binary files /dev/null and b/assets/fonts/K2D-SemiBoldItalic.ttf differ diff --git a/assets/fonts/K2D-Thin.ttf b/assets/fonts/K2D-Thin.ttf new file mode 100644 index 0000000..4d68740 Binary files /dev/null and b/assets/fonts/K2D-Thin.ttf differ diff --git a/assets/fonts/K2D-ThinItalic.ttf b/assets/fonts/K2D-ThinItalic.ttf new file mode 100644 index 0000000..64191d8 Binary files /dev/null and b/assets/fonts/K2D-ThinItalic.ttf differ diff --git a/src/main.rs b/src/main.rs index e83f789..b785562 100644 --- a/src/main.rs +++ b/src/main.rs @@ -15,6 +15,7 @@ use filamento::files::Files; use filamento::presence::{Offline, Presence, PresenceType}; use filamento::{roster::Contact, user::User, UpdateMessage}; use iced::alignment::Horizontal::Right; +use iced::font::{Stretch, Weight}; use iced::futures::{SinkExt, Stream, StreamExt}; use iced::keyboard::{on_key_press, on_key_release, Key, Modifiers}; use iced::theme::palette::{Background, Danger, Extended, Pair, Primary, Secondary, Success}; @@ -26,7 +27,7 @@ use iced::widget::{ scrollable, stack, text, text_input, toggler, Column, Svg, Text, Toggler, }; use iced::Length::{self, Fill, Shrink}; -use iced::{color, stream, Color, Element, Subscription, Task, Theme}; +use iced::{color, stream, Color, Element, Font, Subscription, Task, Theme}; use icons::Icon; use indexmap::{indexmap, IndexMap}; use jid::JID; @@ -525,9 +526,31 @@ async fn main() -> iced::Result { ]) } }; + let mut font = Font::with_name("K2D"); + font.weight = Weight::Medium; + // font.stretch = Stretch::Condensed; iced::application("Macaw", Macaw::update, Macaw::view) + .font(include_bytes!("../assets/fonts/Diolce-Regular.ttf")) + .font(include_bytes!("../assets/fonts/K2D-Italic.ttf")) + .font(include_bytes!("../assets/fonts/K2D-Thin.ttf")) + .font(include_bytes!("../assets/fonts/K2D-ExtraBold.ttf")) + .font(include_bytes!("../assets/fonts/K2D-ExtraLightItalic.ttf")) + .font(include_bytes!("../assets/fonts/K2D-ExtraLight.ttf")) + .font(include_bytes!("../assets/fonts/K2D-Light.ttf")) + .font(include_bytes!("../assets/fonts/K2D-Light.ttf")) + .font(include_bytes!("../assets/fonts/K2D-BoldItalic.ttf")) + .font(include_bytes!("../assets/fonts/K2D-MediumItalic.ttf")) + .font(include_bytes!("../assets/fonts/K2D-ThinItalic.ttf")) + .font(include_bytes!("../assets/fonts/K2D-Medium.ttf")) + .font(include_bytes!("../assets/fonts/K2D-Bold.ttf")) + .font(include_bytes!("../assets/fonts/K2D-Regular.ttf")) + .font(include_bytes!("../assets/fonts/K2D-ExtraBoldItalic.ttf")) + .font(include_bytes!("../assets/fonts/K2D-LightItalic.ttf")) + .font(include_bytes!("../assets/fonts/K2D-SemiBoldItalic.ttf")) + .font(include_bytes!("../assets/fonts/K2D-SemiBold.ttf")) + .default_font(font) .subscription(subscription) - // .theme(Macaw::theme) + .theme(Macaw::theme) .run_with(|| { ( Macaw::new( @@ -549,9 +572,49 @@ async fn main() -> iced::Result { } else { if let Some(e) = client_creation_error { iced::application("Macaw", Macaw::update, Macaw::view) + .font(include_bytes!("../assets/fonts/Diolce-Regular.otf")) + .font(include_bytes!("../assets/fonts/K2D-Italic.ttf")) + .font(include_bytes!("../assets/fonts/K2D-Thin.ttf")) + .font(include_bytes!("../assets/fonts/K2D-ExtraBold.ttf")) + .font(include_bytes!("../assets/fonts/K2D-ExtraLightItalic.ttf")) + .font(include_bytes!("../assets/fonts/K2D-ExtraLight.ttf")) + .font(include_bytes!("../assets/fonts/K2D-Light.ttf")) + .font(include_bytes!("../assets/fonts/K2D-Light.ttf")) + .font(include_bytes!("../assets/fonts/K2D-BoldItalic.ttf")) + .font(include_bytes!("../assets/fonts/K2D-MediumItalic.ttf")) + .font(include_bytes!("../assets/fonts/K2D-ThinItalic.ttf")) + .font(include_bytes!("../assets/fonts/K2D-Medium.ttf")) + .font(include_bytes!("../assets/fonts/K2D-Bold.ttf")) + .font(include_bytes!("../assets/fonts/K2D-Regular.ttf")) + .font(include_bytes!("../assets/fonts/K2D-ExtraBoldItalic.ttf")) + .font(include_bytes!("../assets/fonts/K2D-LightItalic.ttf")) + .font(include_bytes!("../assets/fonts/K2D-SemiBoldItalic.ttf")) + .font(include_bytes!("../assets/fonts/K2D-SemiBold.ttf")) + .default_font(Font::with_name("K2D")) + .theme(Macaw::theme) .run_with(|| (Macaw::new(None, cfg), Task::done(Message::Error(e)))) } else { iced::application("Macaw", Macaw::update, Macaw::view) + .font(include_bytes!("../assets/fonts/Diolce-Regular.otf")) + .font(include_bytes!("../assets/fonts/K2D-Italic.ttf")) + .font(include_bytes!("../assets/fonts/K2D-Thin.ttf")) + .font(include_bytes!("../assets/fonts/K2D-ExtraBold.ttf")) + .font(include_bytes!("../assets/fonts/K2D-ExtraLightItalic.ttf")) + .font(include_bytes!("../assets/fonts/K2D-ExtraLight.ttf")) + .font(include_bytes!("../assets/fonts/K2D-Light.ttf")) + .font(include_bytes!("../assets/fonts/K2D-Light.ttf")) + .font(include_bytes!("../assets/fonts/K2D-BoldItalic.ttf")) + .font(include_bytes!("../assets/fonts/K2D-MediumItalic.ttf")) + .font(include_bytes!("../assets/fonts/K2D-ThinItalic.ttf")) + .font(include_bytes!("../assets/fonts/K2D-Medium.ttf")) + .font(include_bytes!("../assets/fonts/K2D-Bold.ttf")) + .font(include_bytes!("../assets/fonts/K2D-Regular.ttf")) + .font(include_bytes!("../assets/fonts/K2D-ExtraBoldItalic.ttf")) + .font(include_bytes!("../assets/fonts/K2D-LightItalic.ttf")) + .font(include_bytes!("../assets/fonts/K2D-SemiBoldItalic.ttf")) + .font(include_bytes!("../assets/fonts/K2D-SemiBold.ttf")) + .default_font(Font::with_name("K2D")) + .theme(Macaw::theme) .run_with(|| (Macaw::new(None, cfg), Task::none())) } } @@ -1185,15 +1248,15 @@ impl Macaw { let extended = Extended { background: Background { base: Pair { - color: color!(0x392c25), + color: color!(0x503e34), text: color!(0xdcdcdc), }, weak: Pair { - color: color!(0xdcdcdc), - text: color!(0x392c25), + color: color!(0x392c25), + text: color!(0xdcdcdc), }, strong: Pair { - color: color!(0x364b3b), + color: color!(0x293f2e), text: color!(0xdcdcdc), }, }, @@ -1214,15 +1277,15 @@ impl Macaw { secondary: Secondary { base: Pair { color: color!(0xffce07), - text: color!(0x000000), + text: color!(0xdcdcdc), }, weak: Pair { color: color!(0xffce07), - text: color!(0x000000), + text: color!(0xdcdcdc), }, strong: Pair { color: color!(0xffce07), - text: color!(0x000000), + text: color!(0xdcdcdc), }, }, success: Success { @@ -1395,10 +1458,12 @@ fn chat_list_item<'a>( .spacing(8) .width(Fill) ] + .spacing(8) ] + .spacing(8) .into() } else { - row![avatar_stack, text(name)].into() + row![avatar_stack, text(name)].spacing(8).into() }; let mut button = button(content).on_press(Message::ToggleChat(chat_list_item.correspondent().clone())); diff --git a/src/message_view.rs b/src/message_view.rs index 8378164..f5319bd 100644 --- a/src/message_view.rs +++ b/src/message_view.rs @@ -1,12 +1,13 @@ use std::{path::PathBuf, time::Duration}; use chrono::{NaiveDate, NaiveDateTime, TimeDelta}; +use iced::color; +use iced::widget::text_editor; use iced::{ border::Radius, - widget::{ - button, column, container, image, row, scrollable, text, text_editor, text_editor::Content, - }, - Border, Color, Element, + font::{Style, Weight}, + widget::{button, column, container, image, row, scrollable, text, text_editor::Content}, + Border, Color, Element, Font, Length::{Fill, Shrink}, Theme, }; @@ -164,13 +165,26 @@ impl MessageView { let text_editor = text_editor(&self.new_message) .placeholder("new message") .on_action(Message::MessageCompose) - .wrapping(text::Wrapping::WordOrGlyph); + .wrapping(text::Wrapping::WordOrGlyph) + .style(|theme, status| text_editor::Style { + background: color!(0xdcdcdc).into(), + border: Border { + color: Color::BLACK, + width: 0.0, + radius: 0.into(), + }, + icon: color!(0x00000000), + placeholder: color!(0xacacac), + value: color!(0x000000), + selection: color!(0xffce07), + }); let message_send_input = row![ text_editor, - button(Icon::NewBubble24).on_press(Message::SendMessage(self.new_message.text())) + // button(Icon::NewBubble24).on_press(Message::SendMessage(self.new_message.text())) ] .padding(8); column![ + self.header(), scrollable(messages_view) .height(Fill) .width(Fill) @@ -181,6 +195,38 @@ impl MessageView { .into() } + pub fn header(&self) -> Element<'_, Message> { + // TODO: contact stored here for name + let mut bold = Font::with_name("K2D"); + bold.weight = Weight::Bold; + let mut sweet = Font::with_name("Diolce"); + sweet.style = Style::Italic; + let mut name_and_jid = column![]; + if let Some(nick) = &self.chat.user.nick { + name_and_jid = name_and_jid.push(text(nick).font(bold).size(20)); + } + let jid = self.chat.user.jid.as_bare().to_string(); + name_and_jid = name_and_jid.push(text(jid).font(sweet)); + let mut header = row![]; + if let Some(avatar) = &self.chat.user.avatar { + let mut path = self.file_root.join(avatar); + path.set_extension("jpg"); + header = header.push(container(image(path).width(48).height(48))); + } + header = header.push(name_and_jid); + container( + container(header.spacing(8).padding(8)) + .style(|theme: &Theme| { + container::Style::default() + .background(theme.extended_palette().background.strong.color) + }) + .width(Fill), + ) + .padding(8) + .width(Fill) + .into() + } + pub fn message<'a>(&'a self, message: &'a MacawMessage, major: bool) -> Element<'a, Message> { let timestamp = message.timestamp.naive_local(); let timestamp = timestamp.time().format("%H:%M").to_string(); @@ -191,7 +237,9 @@ impl MessageView { } else { message.from.jid.as_bare().to_string() }; - let mut header = row![text(nick), text(timestamp)]; + let mut bold = Font::with_name("K2D"); + bold.weight = Weight::Bold; + let mut header = row![text(nick).font(bold), text(timestamp)].spacing(8); if let Some(delivery) = message.delivery { let icon = match delivery { filamento::chat::Delivery::Sending => Some(Icon::Sending16), @@ -206,21 +254,22 @@ impl MessageView { header = header.push(icon); } } - let message_right = column![header, text(&message.body.body)]; + let message_right = column![header, text(&message.body.body)].spacing(8); let mut major_message = row([]); if let Some(avatar) = &message.from.avatar { let mut path = self.file_root.join(avatar); path.set_extension("jpg"); // info!("got avatar: {:?}", path); - major_message = major_message.push(image(path).width(48).height(48)); + major_message = major_message.push(container(image(path).width(48).height(48))); } major_message = major_message.push(message_right); - major_message.into() + major_message.spacing(8).into() } else { row![ container(text(timestamp)).width(48), text(&message.body.body) ] + .spacing(8) .into() } } -- cgit