From 5bd88863f34c0b246527532b4cb020a538734d2e Mon Sep 17 00:00:00 2001 From: edouard Date: Wed, 12 Apr 2023 13:21:19 +0200 Subject: [PATCH] ui: add heading and body text helpers --- gui/ui/examples/design-system/src/main.rs | 41 ++-------- gui/ui/examples/design-system/src/section.rs | 58 ++++++++++++-- gui/ui/src/component/text.rs | 82 ++++++++++++++++++++ 3 files changed, 141 insertions(+), 40 deletions(-) diff --git a/gui/ui/examples/design-system/src/main.rs b/gui/ui/examples/design-system/src/main.rs index f54a08bb..a9171cf8 100644 --- a/gui/ui/examples/design-system/src/main.rs +++ b/gui/ui/examples/design-system/src/main.rs @@ -1,11 +1,13 @@ mod section; -use iced::widget::{button, column, container, radio, row, text, Space}; +use iced::widget::{button, column, container, row, text, Space}; use iced::{executor, Application, Command, Length, Settings, Subscription}; use liana_ui::{theme, widget::*}; pub fn main() -> iced::Result { - DesignSystem::run(Settings::with_flags(Config {})) + let mut settings = Settings::with_flags(Config {}); + settings.default_text_size = 19; + DesignSystem::run(settings) } struct Config {} @@ -17,16 +19,8 @@ struct DesignSystem { current: usize, } -#[derive(Debug, PartialEq, Eq, Clone, Copy)] -pub enum ThemeType { - Light, - Dark, - Legacy, -} - #[derive(Debug, Clone)] pub enum Message { - ThemeChanged(ThemeType), Event(iced_native::Event), Section(usize), Ignore, @@ -44,10 +38,11 @@ impl Application for DesignSystem { fn new(_config: Config) -> (Self, Command) { let app = Self { - theme: theme::Theme::Light, + theme: theme::Theme::Dark, sections: vec![ Box::new(section::Overview {}), Box::new(section::Colors {}), + Box::new(section::Typography {}), Box::new(section::Buttons {}), Box::new(section::HardwareWallets {}), ], @@ -75,13 +70,6 @@ impl Application for DesignSystem { fn update(&mut self, message: Message) -> Command { match message { - Message::ThemeChanged(theme) => { - self.theme = match theme { - ThemeType::Light => theme::Theme::Light, - ThemeType::Dark => theme::Theme::Dark, - ThemeType::Legacy => theme::Theme::Legacy, - } - } Message::Section(i) => { if self.sections.get(i).is_some() { self.current = i; @@ -112,23 +100,6 @@ impl Application for DesignSystem { fn view(&self) -> Element { let sidebar = container( column![ - [ThemeType::Light, ThemeType::Dark, ThemeType::Legacy] - .iter() - .fold( - column![text("Choose a theme:")].spacing(10), - |column, theme| { - column.push(radio( - format!("{theme:?}"), - *theme, - Some(match self.theme { - theme::Theme::Light => ThemeType::Light, - theme::Theme::Dark => ThemeType::Dark, - theme::Theme::Legacy => ThemeType::Legacy, - }), - Message::ThemeChanged, - )) - }, - ), Space::with_height(Length::Units(100)), self.sections.iter().enumerate().fold( Column::new().spacing(10), diff --git a/gui/ui/examples/design-system/src/section.rs b/gui/ui/examples/design-system/src/section.rs index f34233c6..058f0484 100644 --- a/gui/ui/examples/design-system/src/section.rs +++ b/gui/ui/examples/design-system/src/section.rs @@ -5,7 +5,7 @@ use iced::{ }; use liana_ui::{ color, - component::{hw, text::*}, + component::{hw, separation, text::*}, theme, widget::Element, }; @@ -21,7 +21,7 @@ impl Section for Overview { fn view(&self) -> Element { column![ - text("Hello").bold().size(50), + h1("Hello"), column![text( "This is the Liana design system for the Iced framework" )] @@ -41,7 +41,7 @@ impl Section for Colors { fn view(&self) -> Element { column![ - text(self.title()).bold().size(50), + h1(self.title()), column![ color_row(color::BLACK, "BLACK (0,0,0)"), color_row(color::LIGHT_BLACK, "LIGHT_BLACK #141414 original design"), @@ -59,6 +59,54 @@ impl Section for Colors { } } +pub struct Typography {} + +impl Section for Typography { + fn title(&self) -> &'static str { + "Typography" + } + + fn view(&self) -> Element { + column![ + h1(self.title()), + column![ + column![ + h2("Font-Family"), + separation().width(Length::Fill), + h1("IBM Plex Sans"), + ] + .spacing(10), + column![ + h2("Heading"), + separation().width(Length::Fill), + h1("H1. Heading 40 bold"), + h2("H2. Heading 29 bold"), + h3("H3. Heading 24 bold"), + h4_bold("H4. Heading 20 bold"), + h4_regular("H4. Heading 20 regular"), + h5_medium("H5. Heading 18 medium"), + h5_regular("H5. Heading 18 regular"), + ] + .spacing(10), + column![ + h2("Body"), + separation().width(Length::Fill), + p1_bold("P1. Body 16 bold"), + p1_medium("P1. Body 16 medium"), + p1_regular("P1. Body 16 regular"), + p2_medium("P2. Body 14 medium"), + p2_regular("P2. Body 14 regular"), + caption("Caption Body 12 regular"), + ] + .spacing(10), + ] + .spacing(50) + ] + .spacing(100) + .into() + } +} + fn color_row<'a, T: 'a>(color: iced::Color, label: &'static str) -> Element<'a, T> { row![ container(Space::with_width(Length::Units(100))) @@ -81,7 +129,7 @@ impl Section for Buttons { fn view(&self) -> Element { column![ - text(self.title()).bold().size(50), + h1(self.title()), column![ button_row(theme::Button::Primary, "Primary"), button_row(theme::Button::Secondary, "Secondary"), @@ -117,7 +165,7 @@ impl Section for HardwareWallets { fn view(&self) -> Element { column![ - text(self.title()).bold().size(50), + h1(self.title()), column![ button( hw::supported_hardware_wallet( diff --git a/gui/ui/src/component/text.rs b/gui/ui/src/component/text.rs index a131b188..b3a428d5 100644 --- a/gui/ui/src/component/text.rs +++ b/gui/ui/src/component/text.rs @@ -1,6 +1,88 @@ use crate::{font, theme::Theme}; use std::borrow::Cow; +pub fn h1<'a>(content: impl Into>) -> iced::widget::Text<'a, iced::Renderer> { + iced::widget::Text::new(content).font(font::BOLD).size(40) +} + +pub fn h2<'a>(content: impl Into>) -> iced::widget::Text<'a, iced::Renderer> { + iced::widget::Text::new(content).font(font::BOLD).size(29) +} + +pub fn h3<'a>(content: impl Into>) -> iced::widget::Text<'a, iced::Renderer> { + iced::widget::Text::new(content).font(font::BOLD).size(24) +} + +pub fn h4_bold<'a>( + content: impl Into>, +) -> iced::widget::Text<'a, iced::Renderer> { + iced::widget::Text::new(content).font(font::BOLD).size(20) +} + +pub fn h4_regular<'a>( + content: impl Into>, +) -> iced::widget::Text<'a, iced::Renderer> { + iced::widget::Text::new(content) + .font(font::REGULAR) + .size(20) +} + +pub fn h5_medium<'a>( + content: impl Into>, +) -> iced::widget::Text<'a, iced::Renderer> { + iced::widget::Text::new(content).font(font::MEDIUM).size(18) +} + +pub fn h5_regular<'a>( + content: impl Into>, +) -> iced::widget::Text<'a, iced::Renderer> { + iced::widget::Text::new(content) + .font(font::REGULAR) + .size(18) +} + +pub fn p1_bold<'a>( + content: impl Into>, +) -> iced::widget::Text<'a, iced::Renderer> { + iced::widget::Text::new(content).font(font::BOLD).size(16) +} + +pub fn p1_medium<'a>( + content: impl Into>, +) -> iced::widget::Text<'a, iced::Renderer> { + iced::widget::Text::new(content).font(font::MEDIUM).size(16) +} + +pub fn p1_regular<'a>( + content: impl Into>, +) -> iced::widget::Text<'a, iced::Renderer> { + iced::widget::Text::new(content) + .font(font::REGULAR) + .size(16) +} + +pub fn p2_medium<'a>( + content: impl Into>, +) -> iced::widget::Text<'a, iced::Renderer> { + iced::widget::Text::new(content).font(font::MEDIUM).size(14) +} + +pub fn p2_regular<'a>( + content: impl Into>, +) -> iced::widget::Text<'a, iced::Renderer> { + iced::widget::Text::new(content) + .font(font::REGULAR) + .size(14) +} + +pub fn caption<'a>( + content: impl Into>, +) -> iced::widget::Text<'a, iced::Renderer> { + iced::widget::Text::new(content) + .font(font::REGULAR) + .size(12) +} + pub const TEXT_REGULAR_SIZE: u16 = 25; pub fn text<'a>(content: impl Into>) -> iced::widget::Text<'a, iced::Renderer> {