nik/liana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: add heading and body text helpers

Browse Source
This commit is contained in:
edouard 2023-04-12 13:21:19 +02:00
parent 920e8bc330
commit 5bd88863f3
3 changed files with 141 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
gui/ui/examples/design-system/src/main.rs
View File

@ -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<Self::Message>) {
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<Self::Message> {
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<Message> {
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),

58
gui/ui/examples/design-system/src/section.rs
View File

@ -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<Message> {
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<Message> {
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<Message> {
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<Message> {
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<Message> {
column![
text(self.title()).bold().size(50),
h1(self.title()),
column![
button(
hw::supported_hardware_wallet(

82
gui/ui/src/component/text.rs
View File

@ -1,6 +1,88 @@
use crate::{font, theme::Theme};
use std::borrow::Cow;
pub fn h1<'a>(content: impl Into<Cow<'a, str>>) -> iced::widget::Text<'a, iced::Renderer<Theme>> {
iced::widget::Text::new(content).font(font::BOLD).size(40)
}
pub fn h2<'a>(content: impl Into<Cow<'a, str>>) -> iced::widget::Text<'a, iced::Renderer<Theme>> {
iced::widget::Text::new(content).font(font::BOLD).size(29)
}
pub fn h3<'a>(content: impl Into<Cow<'a, str>>) -> iced::widget::Text<'a, iced::Renderer<Theme>> {
iced::widget::Text::new(content).font(font::BOLD).size(24)
}
pub fn h4_bold<'a>(
content: impl Into<Cow<'a, str>>,
) -> iced::widget::Text<'a, iced::Renderer<Theme>> {
iced::widget::Text::new(content).font(font::BOLD).size(20)
}
pub fn h4_regular<'a>(
content: impl Into<Cow<'a, str>>,
) -> iced::widget::Text<'a, iced::Renderer<Theme>> {
iced::widget::Text::new(content)
.font(font::REGULAR)
.size(20)
}
pub fn h5_medium<'a>(
content: impl Into<Cow<'a, str>>,
) -> iced::widget::Text<'a, iced::Renderer<Theme>> {
iced::widget::Text::new(content).font(font::MEDIUM).size(18)
}
pub fn h5_regular<'a>(
content: impl Into<Cow<'a, str>>,
) -> iced::widget::Text<'a, iced::Renderer<Theme>> {
iced::widget::Text::new(content)
.font(font::REGULAR)
.size(18)
}
pub fn p1_bold<'a>(
content: impl Into<Cow<'a, str>>,
) -> iced::widget::Text<'a, iced::Renderer<Theme>> {
iced::widget::Text::new(content).font(font::BOLD).size(16)
}
pub fn p1_medium<'a>(
content: impl Into<Cow<'a, str>>,
) -> iced::widget::Text<'a, iced::Renderer<Theme>> {
iced::widget::Text::new(content).font(font::MEDIUM).size(16)
}
pub fn p1_regular<'a>(
content: impl Into<Cow<'a, str>>,
) -> iced::widget::Text<'a, iced::Renderer<Theme>> {
iced::widget::Text::new(content)
.font(font::REGULAR)
.size(16)
}
pub fn p2_medium<'a>(
content: impl Into<Cow<'a, str>>,
) -> iced::widget::Text<'a, iced::Renderer<Theme>> {
iced::widget::Text::new(content).font(font::MEDIUM).size(14)
}
pub fn p2_regular<'a>(
content: impl Into<Cow<'a, str>>,
) -> iced::widget::Text<'a, iced::Renderer<Theme>> {
iced::widget::Text::new(content)
.font(font::REGULAR)
.size(14)
}
pub fn caption<'a>(
content: impl Into<Cow<'a, str>>,
) -> iced::widget::Text<'a, iced::Renderer<Theme>> {
iced::widget::Text::new(content)
.font(font::REGULAR)
.size(12)
}
pub const TEXT_REGULAR_SIZE: u16 = 25;
pub fn text<'a>(content: impl Into<Cow<'a, str>>) -> iced::widget::Text<'a, iced::Renderer<Theme>> {