Merge #1113: Remove ui example
64370af843a6e7442b1c1813fc22c34be68a43d8 remove ui example (pythcoiner)
Pull request description:
closes #1072
ACKs for top commit:
jp1ac4:
ACK 64370af843.
Tree-SHA512: 6efa8d95a16060db5efcfcdc466dfaa41dab583f4faeb5ce7a3f3fd072da11139cbbb9447a6b78813d65f6a48c5b400a0bca1f8cdb4993ad8af560340101bba0
This commit is contained in:
edouardparis
commit
dddd62b31e
@ -1,14 +0,0 @@
|
||||
[package]
|
||||
name = "design-system"
|
||||
version = "0.1.0"
|
||||
edition = "2021"
|
||||
|
||||
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||
|
||||
[dependencies]
|
||||
iced = "0.10"
|
||||
web-sys = "0.3.61"
|
||||
chrono = "0.4"
|
||||
liana_ui = { path = "../.." }
|
||||
|
||||
[workspace]
|
||||
@ -1,7 +0,0 @@
|
||||
## Use WASM
|
||||
|
||||
`trunk serve`
|
||||
|
||||
to build for a directory on a distant server
|
||||
|
||||
`trunk build --public-url /design-system`
|
||||
@ -1,18 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Liana design system</title>
|
||||
<base data-trunk-public-url />
|
||||
<style>
|
||||
body {
|
||||
margin:0px;
|
||||
overflow:hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<link data-trunk rel="rust" href="Cargo.toml" data-wasm-opt="z" data-bin="design-system" />
|
||||
</body>
|
||||
</html>
|
||||
@ -1,153 +0,0 @@
|
||||
mod section;
|
||||
|
||||
use iced::widget::{button, column, container, row, scrollable, text, Space};
|
||||
use iced::{executor, Application, Command, Length, Settings, Subscription};
|
||||
use liana_ui::{component::text::*, font, image, theme, widget::*};
|
||||
|
||||
pub fn main() -> iced::Result {
|
||||
let mut settings = Settings::with_flags(Config {});
|
||||
settings.default_text_size = P1_SIZE.into();
|
||||
settings.default_font = font::REGULAR;
|
||||
DesignSystem::run(settings)
|
||||
}
|
||||
|
||||
struct Config {}
|
||||
|
||||
#[derive(Default)]
|
||||
struct DesignSystem {
|
||||
theme: theme::Theme,
|
||||
sections: Vec<Box<dyn Section>>,
|
||||
current: usize,
|
||||
}
|
||||
|
||||
#[derive(Debug, Clone)]
|
||||
pub enum Message {
|
||||
FontLoaded(Result<(), iced::font::Error>),
|
||||
Event(iced::Event),
|
||||
Section(usize),
|
||||
Ignore,
|
||||
}
|
||||
|
||||
impl From<Result<(), iced::font::Error>> for Message {
|
||||
fn from(res: Result<(), iced::font::Error>) -> Message {
|
||||
Message::FontLoaded(res)
|
||||
}
|
||||
}
|
||||
|
||||
impl Application for DesignSystem {
|
||||
type Message = Message;
|
||||
type Theme = theme::Theme;
|
||||
type Flags = Config;
|
||||
type Executor = executor::Default;
|
||||
|
||||
fn title(&self) -> String {
|
||||
String::from("Liana - Design System")
|
||||
}
|
||||
|
||||
fn new(_config: Config) -> (Self, Command<Self::Message>) {
|
||||
let app = Self {
|
||||
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 {}),
|
||||
Box::new(section::Events {}),
|
||||
],
|
||||
current: 0,
|
||||
};
|
||||
#[allow(unused_mut)]
|
||||
let mut cmds: Vec<Command<Self::Message>> = font::loads();
|
||||
|
||||
#[cfg(target_arch = "wasm32")]
|
||||
{
|
||||
use iced_native::{command, window};
|
||||
let window = web_sys::window().unwrap();
|
||||
let (width, height) = (
|
||||
(window.inner_width().unwrap().as_f64().unwrap()) as u32,
|
||||
(window.inner_height().unwrap().as_f64().unwrap()) as u32,
|
||||
);
|
||||
cmds.push(Command::single(command::Action::Window(
|
||||
window::Action::Resize { width, height },
|
||||
)));
|
||||
}
|
||||
|
||||
(app, Command::batch(cmds))
|
||||
}
|
||||
|
||||
fn update(&mut self, message: Message) -> Command<Self::Message> {
|
||||
match message {
|
||||
Message::Section(i) => {
|
||||
if self.sections.get(i).is_some() {
|
||||
self.current = i;
|
||||
}
|
||||
}
|
||||
Message::Event(iced::Event::Window(iced::window::Event::Resized { width, height })) => {
|
||||
#[cfg(target_arch = "wasm32")]
|
||||
{
|
||||
use iced_native::{command, window};
|
||||
return Command::single(command::Action::Window(window::Action::Resize {
|
||||
width,
|
||||
height,
|
||||
}));
|
||||
}
|
||||
}
|
||||
_ => {}
|
||||
}
|
||||
Command::none()
|
||||
}
|
||||
|
||||
fn subscription(&self) -> Subscription<Self::Message> {
|
||||
iced::subscription::events().map(Self::Message::Event)
|
||||
}
|
||||
|
||||
fn view(&self) -> Element<Message> {
|
||||
let sidebar = container(
|
||||
column![
|
||||
image::liana_grey_logo(),
|
||||
Space::with_height(Length::Fixed(100.0)),
|
||||
self.sections.iter().enumerate().fold(
|
||||
Column::new().spacing(10),
|
||||
|col, (i, section)| col.push(
|
||||
button(
|
||||
container(text(section.title()))
|
||||
.width(Length::Fill)
|
||||
.padding(10)
|
||||
)
|
||||
.style(theme::Button::Menu(i == self.current))
|
||||
.on_press(Message::Section(i))
|
||||
.width(Length::Fixed(200.0))
|
||||
)
|
||||
)
|
||||
]
|
||||
.spacing(20),
|
||||
)
|
||||
.padding(20)
|
||||
.style(theme::Container::Foreground)
|
||||
.height(Length::Fill);
|
||||
|
||||
container(row![
|
||||
sidebar.width(Length::FillPortion(2)),
|
||||
Space::with_width(Length::FillPortion(1)),
|
||||
container(scrollable(column![
|
||||
Space::with_height(Length::Fixed(150.0)),
|
||||
container(self.sections[self.current].view()).width(Length::Fill)
|
||||
]))
|
||||
.width(Length::FillPortion(8)),
|
||||
Space::with_width(Length::FillPortion(1)),
|
||||
])
|
||||
.width(Length::Fill)
|
||||
.height(Length::Fill)
|
||||
.into()
|
||||
}
|
||||
|
||||
fn theme(&self) -> theme::Theme {
|
||||
self.theme.clone()
|
||||
}
|
||||
}
|
||||
|
||||
pub trait Section {
|
||||
fn title(&self) -> &'static str;
|
||||
fn view(&self) -> Element<Message>;
|
||||
}
|
||||
@ -1,287 +0,0 @@
|
||||
use iced::{
|
||||
alignment,
|
||||
widget::{button, column, container, row, Space},
|
||||
Alignment, Length,
|
||||
};
|
||||
use liana_ui::{
|
||||
color,
|
||||
component::{amount::Amount, event, hw, separation, text::*},
|
||||
theme,
|
||||
widget::Element,
|
||||
};
|
||||
|
||||
use super::{Message, Section};
|
||||
|
||||
pub struct Overview {}
|
||||
|
||||
impl Section for Overview {
|
||||
fn title(&self) -> &'static str {
|
||||
"Overview"
|
||||
}
|
||||
|
||||
fn view(&self) -> Element<Message> {
|
||||
column![
|
||||
h1("Hello"),
|
||||
column![text(
|
||||
"This is the Liana design system for the Iced framework"
|
||||
)]
|
||||
.spacing(10)
|
||||
]
|
||||
.spacing(100)
|
||||
.into()
|
||||
}
|
||||
}
|
||||
|
||||
pub struct Colors {}
|
||||
|
||||
impl Section for Colors {
|
||||
fn title(&self) -> &'static str {
|
||||
"Colors"
|
||||
}
|
||||
|
||||
fn view(&self) -> Element<Message> {
|
||||
column![
|
||||
h1(self.title()),
|
||||
column![
|
||||
color_row(color::BLACK, "BLACK (0,0,0)"),
|
||||
color_row(color::LIGHT_BLACK, "LIGHT_BLACK #141414 original design"),
|
||||
color_row(color::GREEN, "GREEN #00FF66 original design"),
|
||||
color_row(color::GREY_7, "GREY #3F3F3F"),
|
||||
color_row(color::GREY_6, "GREY #202020"),
|
||||
color_row(color::GREY_5, "GREY #272727"),
|
||||
color_row(color::GREY_4, "GREY #424242"),
|
||||
color_row(color::GREY_3, "GREY #717171"),
|
||||
color_row(color::GREY_2, "GREY #CCCCCC"),
|
||||
color_row(color::GREY_1, "GREY #E6E6E6"),
|
||||
color_row(color::WHITE, "WHITE #FFFFFF"),
|
||||
color_row(color::RED, "RED #F04359"),
|
||||
color_row(color::ORANGE, "ORANGE #FFa700")
|
||||
]
|
||||
.spacing(10)
|
||||
]
|
||||
.spacing(100)
|
||||
.into()
|
||||
}
|
||||
}
|
||||
|
||||
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::Fixed(100.0)))
|
||||
.height(Length::Fixed(100.0))
|
||||
.style(theme::Container::Custom(color)),
|
||||
text(label)
|
||||
]
|
||||
.spacing(10)
|
||||
.align_items(Alignment::Center)
|
||||
.spacing(10)
|
||||
.into()
|
||||
}
|
||||
|
||||
pub struct Buttons {}
|
||||
|
||||
impl Section for Buttons {
|
||||
fn title(&self) -> &'static str {
|
||||
"Buttons"
|
||||
}
|
||||
|
||||
fn view(&self) -> Element<Message> {
|
||||
column![
|
||||
h1(self.title()),
|
||||
column![
|
||||
button_row(theme::Button::Primary, "Primary"),
|
||||
button_row(theme::Button::Secondary, "Secondary"),
|
||||
button_row(theme::Button::Destructive, "Destructive"),
|
||||
button_row(theme::Button::Transparent, "Transparent"),
|
||||
button_row(theme::Button::TransparentBorder, "Transparent Border"),
|
||||
button_row(theme::Button::Border, "Border"),
|
||||
]
|
||||
.spacing(20)
|
||||
]
|
||||
.spacing(100)
|
||||
.into()
|
||||
}
|
||||
}
|
||||
|
||||
fn button_row(style: theme::Button, label: &'static str) -> Element<Message> {
|
||||
button(
|
||||
container(text(label))
|
||||
.width(Length::Fill)
|
||||
.align_x(alignment::Horizontal::Center),
|
||||
)
|
||||
.width(Length::Fixed(200.0))
|
||||
.padding(5)
|
||||
.style(style)
|
||||
.on_press(Message::Ignore)
|
||||
.into()
|
||||
}
|
||||
|
||||
pub struct HardwareWallets {}
|
||||
|
||||
impl Section for HardwareWallets {
|
||||
fn title(&self) -> &'static str {
|
||||
"Hardware wallets"
|
||||
}
|
||||
|
||||
fn view(&self) -> Element<Message> {
|
||||
column![
|
||||
h1(self.title()),
|
||||
column![
|
||||
button(
|
||||
hw::supported_hardware_wallet(
|
||||
"ledger",
|
||||
Some("v2.1.0"),
|
||||
"f123de",
|
||||
None::<String>
|
||||
)
|
||||
.width(Length::Fixed(500.0))
|
||||
)
|
||||
.on_press(Message::Ignore)
|
||||
.style(theme::Button::Border),
|
||||
button(
|
||||
hw::supported_hardware_wallet(
|
||||
"ledger",
|
||||
Some("v2.1.0"),
|
||||
"f123de",
|
||||
Some("Edouard key")
|
||||
)
|
||||
.width(Length::Fixed(500.0))
|
||||
)
|
||||
.on_press(Message::Ignore)
|
||||
.style(theme::Button::Border),
|
||||
button(
|
||||
hw::unregistered_hardware_wallet(
|
||||
"ledger",
|
||||
Some("v2.1.0"),
|
||||
"f123de",
|
||||
Some("Edouard key")
|
||||
)
|
||||
.width(Length::Fixed(500.0))
|
||||
)
|
||||
.on_press(Message::Ignore)
|
||||
.style(theme::Button::Border),
|
||||
button(
|
||||
hw::unsupported_hardware_wallet("ledger", Some("v2.1.0"))
|
||||
.width(Length::Fixed(500.0))
|
||||
)
|
||||
.on_press(Message::Ignore)
|
||||
.style(theme::Button::Border),
|
||||
button(
|
||||
hw::processing_hardware_wallet(
|
||||
"ledger",
|
||||
Some("v2.1.0"),
|
||||
"f123de",
|
||||
Some("Edouard key")
|
||||
)
|
||||
.width(Length::Fixed(500.0))
|
||||
)
|
||||
.on_press(Message::Ignore)
|
||||
.style(theme::Button::Border),
|
||||
button(
|
||||
hw::sign_success_hardware_wallet(
|
||||
"ledger",
|
||||
Some("v2.1.0"),
|
||||
"f123de",
|
||||
Some("Edouard key")
|
||||
)
|
||||
.width(Length::Fixed(500.0))
|
||||
)
|
||||
.on_press(Message::Ignore)
|
||||
.style(theme::Button::Border),
|
||||
button(
|
||||
hw::registration_success_hardware_wallet(
|
||||
"ledger",
|
||||
Some("v2.1.0"),
|
||||
"f123de",
|
||||
Some("Edouard key")
|
||||
)
|
||||
.width(Length::Fixed(500.0))
|
||||
)
|
||||
.on_press(Message::Ignore)
|
||||
.style(theme::Button::Border),
|
||||
]
|
||||
.spacing(20)
|
||||
]
|
||||
.spacing(100)
|
||||
.into()
|
||||
}
|
||||
}
|
||||
|
||||
pub struct Events {}
|
||||
|
||||
impl Section for Events {
|
||||
fn title(&self) -> &'static str {
|
||||
"Events "
|
||||
}
|
||||
fn view(&self) -> Element<Message> {
|
||||
let d = chrono::NaiveDate::from_ymd_opt(2015, 6, 3).unwrap();
|
||||
let t = chrono::NaiveTime::from_hms_milli_opt(12, 34, 56, 789).unwrap();
|
||||
column![
|
||||
h1(self.title()),
|
||||
column![
|
||||
event::unconfirmed_outgoing_event(&Amount::from_sat(32934234), Message::Ignore),
|
||||
event::confirmed_outgoing_event(
|
||||
chrono::NaiveDateTime::new(d, t),
|
||||
&Amount::from_sat(32934234),
|
||||
Message::Ignore
|
||||
),
|
||||
event::unconfirmed_incoming_event(&Amount::from_sat(32934234), Message::Ignore),
|
||||
event::confirmed_incoming_event(
|
||||
chrono::NaiveDateTime::new(d, t),
|
||||
&Amount::from_sat(32934234),
|
||||
Message::Ignore
|
||||
)
|
||||
]
|
||||
.spacing(20)
|
||||
]
|
||||
.spacing(100)
|
||||
.into()
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user