From 45651d9a2b6359fca11acb8f0fe66de7baf388d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20RENIERS?= Date: Thu, 28 Aug 2025 11:22:13 +0200 Subject: [PATCH] button styling improved --- front/fonts/paper_plane.ttf | Bin 0 -> 5680 bytes front/src/buttons.rs | 29 +++++++++++++++++++ front/src/main.rs | 55 ++++++++++++++++++++++++++++++++---- 3 files changed, 79 insertions(+), 5 deletions(-) create mode 100644 front/fonts/paper_plane.ttf diff --git a/front/fonts/paper_plane.ttf b/front/fonts/paper_plane.ttf new file mode 100644 index 0000000000000000000000000000000000000000..50b214c08fa3b67496a26c138ca46f8b98d7a172 GIT binary patch literal 5680 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 literal 0 HcmV?d00001 diff --git a/front/src/buttons.rs b/front/src/buttons.rs index 585e56b..7780e6a 100644 --- a/front/src/buttons.rs +++ b/front/src/buttons.rs @@ -45,3 +45,32 @@ where }) .on_press(press_variant(id)) } + +// Utility to round a button border while keeping other default styling. +// Note: Applying a new .style(...) replaces any previous style closure. +// Use this helper early (or integrate its logic) if you also need custom colors. +pub fn round_button<'a, Message>(button: Button<'a, Message>, radius: f32) -> Button<'a, Message> +where + Message: 'a, +{ + button.style(move |_theme, status| { + // Start from default style for this status + let mut style = iced::widget::button::Style::default(); + + // Simple example tweak: lighter shadow when pressed + match status { + iced::widget::button::Status::Pressed => { + style.shadow.offset = iced::Vector { x: 1.0, y: 1.0 }; + } + _ => {} + } + + // Override only the radius, keep other border attributes + style.border = Border { + radius: radius.into(), + ..style.border + }; + + style + }) +} diff --git a/front/src/main.rs b/front/src/main.rs index 93a08e8..487a2c3 100644 --- a/front/src/main.rs +++ b/front/src/main.rs @@ -1,10 +1,11 @@ use iced::Length::{self, Fill, FillPortion}; -use iced::widget::container; use iced::widget::text_editor; +use iced::widget::{Container, container}; use iced::{ Background, Color, Element, Task, Theme, widget::{Image, column, container::Style, row, text}, }; +use iced::{Border, Font}; mod buttons; mod channels; @@ -16,6 +17,7 @@ use crate::channels::get_channels_buttons; fn main() -> Result<(), iced::Error> { iced::application(Liscord::title, Liscord::update, Liscord::view) + .font(include_bytes!("../fonts/paper_plane.ttf")) .theme(Liscord::theme) .run_with(Liscord::new) } @@ -32,6 +34,7 @@ enum Event { ServerPressed(i32), ChannelPressed(i32), MessageInput(text_editor::Action), + SendMessage, } impl Liscord { @@ -39,8 +42,8 @@ impl Liscord { ( Self { user: Some(User::default()), - selected_server: None, - selected_channel: None, + selected_server: Some(0), + selected_channel: Some(0), message_editor: text_editor::Content::new(), }, Task::none(), @@ -67,6 +70,7 @@ impl Liscord { Event::MessageInput(action) => { self.message_editor.perform(action); } + Event::SendMessage => println!("Message Sent !"), } Task::none() } @@ -152,7 +156,7 @@ impl Liscord { selection: Color::from_rgba8(0, 120, 255, 0.35), icon: Color::WHITE, background: Background::Color(Color::from_rgb8(30, 30, 30)), - border: iced::Border { + border: Border { color: if focused { Color::from_rgb8(0, 180, 120) } else { @@ -163,7 +167,12 @@ impl Liscord { }, } }); - column![messages_container, text_box].into() + let send_button = + round_button(iced::widget::button(container(send_icon()).center(30)), 15.) + .on_press(Event::SendMessage); + column![messages_container, row![text_box, send_button].spacing(10)] + .spacing(10) + .into() } fn messages_container<'a>(&self) -> Element<'a, Event> { @@ -174,3 +183,39 @@ impl Liscord { .into() } } + +fn icon<'a>(codepoint: char) -> Element<'a, Event> { + const ICON_FONT: Font = Font::with_name("editor-icons"); + + text(codepoint).font(ICON_FONT).into() +} + +fn send_icon<'a>() -> Element<'a, Event> { + icon('\u{F1D8}') +} + +pub fn round_button<'a, Message>( + button: iced::widget::Button<'a, Message>, + radius: f32, +) -> iced::widget::Button<'a, Message> +where + Message: 'a, +{ + button.style(move |_theme, status| { + let mut style = iced::widget::button::Style::default(); + let green = Color::from_rgb8(0, 255, 128); + if status == iced::widget::button::Status::Pressed { + style.shadow.offset = iced::Vector { x: 1.0, y: 1.0 }; + } + + style.background = Some(Background::Color(green)); + + style.border = Border { + radius: radius.into(), + color: green, + width: 4., + }; + + style + }) +}