arno/trezor-firmware
1
0
Fork 0
mirror of https://github.com/trezor/trezor-firmware.git synced 2025-01-03 20:11:00 +00:00
Code Issues Releases Wiki Activity

feat(core/ui): T3T1 Frame additions

Browse Source 
This commit allows all combinations of Frame designs from Figma. This
includes adding icon_color to ButtonStyle and a small cleanup of
ButtonStyleSheets.
This commit is contained in:
obrusvit 2024-04-20 21:27:37 +02:00 committed by Martin Milata
parent fd96ae5548
commit 1882cc3a80
9 changed files with 148 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
core/embed/rust/src/ui/component/label.rs
View File

@ -53,6 +53,11 @@ impl<'a> Label<'a> {
self self
} }
pub fn styled(mut self, style: TextStyle) -> Self {
self.layout.style = style;
self
}
pub fn text(&self) -> &TString<'a> { pub fn text(&self) -> &TString<'a> {
&self.text &self.text
} }

14
core/embed/rust/src/ui/model_mercury/component/button.rs
View File

@ -222,7 +222,7 @@ impl Button {
icon.draw( icon.draw(
self.area.center(), self.area.center(),
Alignment2D::CENTER, Alignment2D::CENTER,
style.text_color, style.icon_color,
style.button_color, style.button_color,
); );
} }
@ -253,7 +253,7 @@ impl Button {
ButtonContent::Icon(icon) => { ButtonContent::Icon(icon) => {
shape::ToifImage::new(self.area.center(), icon.toif) shape::ToifImage::new(self.area.center(), icon.toif)
.with_align(Alignment2D::CENTER) .with_align(Alignment2D::CENTER)
.with_fg(style.text_color) .with_fg(style.icon_color)
.render(target); .render(target);
} }
ButtonContent::IconAndText(child) => { ButtonContent::IconAndText(child) => {
@ -267,7 +267,7 @@ impl Button {
.with_fg(style.button_color) .with_fg(style.button_color)
.render(target); .render(target);
shape::ToifImage::new(self.area.top_left() + *offset, fg.toif) shape::ToifImage::new(self.area.top_left() + *offset, fg.toif)
.with_fg(style.text_color) .with_fg(style.icon_color)
.render(target); .render(target);
} }
} }
@ -413,11 +413,13 @@ pub struct ButtonStyleSheet {
pub disabled: &'static ButtonStyle, pub disabled: &'static ButtonStyle,
} }
// TODO: radius and borders not needed in T3T1 - sync with BL
#[derive(PartialEq, Eq)] #[derive(PartialEq, Eq)]
pub struct ButtonStyle { pub struct ButtonStyle {
pub font: Font, pub font: Font,
pub text_color: Color, pub text_color: Color,
pub button_color: Color, pub button_color: Color,
pub icon_color: Color,
pub background_color: Color, pub background_color: Color,
pub border_color: Color, pub border_color: Color,
pub border_radius: u8, pub border_radius: u8,
@ -492,7 +494,7 @@ impl Button {
(matches!(msg, ButtonMsg::Clicked)).then(|| CancelInfoConfirmMsg::Confirmed) (matches!(msg, ButtonMsg::Clicked)).then(|| CancelInfoConfirmMsg::Confirmed)
}); });
let top = Button::with_text(info) let top = Button::with_text(info)
.styled(theme::button_moreinfo()) .styled(theme::button_default())
.map(|msg| (matches!(msg, ButtonMsg::Clicked)).then(|| CancelInfoConfirmMsg::Info)); .map(|msg| (matches!(msg, ButtonMsg::Clicked)).then(|| CancelInfoConfirmMsg::Info));
let left = Button::with_icon(theme::ICON_CANCEL).map(|msg| { let left = Button::with_icon(theme::ICON_CANCEL).map(|msg| {
(matches!(msg, ButtonMsg::Clicked)).then(|| CancelInfoConfirmMsg::Cancelled) (matches!(msg, ButtonMsg::Clicked)).then(|| CancelInfoConfirmMsg::Cancelled)
@ -583,7 +585,7 @@ impl IconText {
self.icon.draw( self.icon.draw(
icon_pos, icon_pos,
Alignment2D::CENTER, Alignment2D::CENTER,
style.text_color, style.icon_color,
style.button_color, style.button_color,
); );
} }
@ -629,7 +631,7 @@ impl IconText {
if use_icon { if use_icon {
shape::ToifImage::new(icon_pos, self.icon.toif) shape::ToifImage::new(icon_pos, self.icon.toif)
.with_align(Alignment2D::CENTER) .with_align(Alignment2D::CENTER)
.with_fg(style.text_color) .with_fg(style.icon_color)
.render(target); .render(target);
} }
} }

34
core/embed/rust/src/ui/model_mercury/component/frame.rs
View File

@ -11,7 +11,7 @@ use crate::{
}, },
}; };
use super::{constant::SPACING, Button, ButtonMsg, CancelInfoConfirmMsg, Footer}; use super::{constant::SPACING, Button, ButtonMsg, ButtonStyleSheet, CancelInfoConfirmMsg, Footer};
const TITLE_HEIGHT: i16 = 42; const TITLE_HEIGHT: i16 = 42;
@ -36,9 +36,10 @@ where
T: Component, T: Component,
{ {
pub fn new(alignment: Alignment, title: TString<'static>, content: T) -> Self { pub fn new(alignment: Alignment, title: TString<'static>, content: T) -> Self {
let style: TextStyle = theme::label_title_main();
Self { Self {
title: Child::new(Label::new(title, alignment, style).vertically_centered()), title: Child::new(
Label::new(title, alignment, theme::label_title_main()).vertically_centered(),
),
subtitle: None, subtitle: None,
border: theme::borders(), border: theme::borders(),
button: None, button: None,
@ -65,6 +66,11 @@ where
self self
} }
pub fn title_styled(mut self, style: TextStyle) -> Self {
self.title = Child::new(self.title.into_inner().styled(style));
self
}
pub fn with_subtitle(mut self, subtitle: TString<'static>) -> Self { pub fn with_subtitle(mut self, subtitle: TString<'static>) -> Self {
let style = theme::TEXT_SUB_GREY_LIGHT; let style = theme::TEXT_SUB_GREY_LIGHT;
self.title = Child::new(self.title.into_inner().top_aligned()); self.title = Child::new(self.title.into_inner().top_aligned());
@ -76,7 +82,7 @@ where
self self
} }
fn with_button(mut self, icon: Icon, msg: CancelInfoConfirmMsg) -> Self { fn with_button(mut self, icon: Icon, msg: CancelInfoConfirmMsg, enabled: bool) -> Self {
let touch_area = Insets { let touch_area = Insets {
left: self.border.left * 4, left: self.border.left * 4,
bottom: self.border.bottom * 4, bottom: self.border.bottom * 4,
@ -85,18 +91,30 @@ where
self.button = Some(Child::new( self.button = Some(Child::new(
Button::with_icon(icon) Button::with_icon(icon)
.with_expanded_touch_area(touch_area) .with_expanded_touch_area(touch_area)
.styled(theme::button_moreinfo()), .initially_enabled(enabled)
.styled(theme::button_default()),
)); ));
self.button_msg = msg; self.button_msg = msg;
self self
} }
pub fn with_cancel_button(self) -> Self { pub fn with_cancel_button(self) -> Self {
self.with_button(theme::ICON_CORNER_CANCEL, CancelInfoConfirmMsg::Cancelled) self.with_button(theme::ICON_CLOSE, CancelInfoConfirmMsg::Cancelled, true)
} }
pub fn with_info_button(self) -> Self { pub fn with_menu_button(self) -> Self {
self.with_button(theme::ICON_MENU, CancelInfoConfirmMsg::Info) self.with_button(theme::ICON_MENU, CancelInfoConfirmMsg::Info, true)
}
pub fn with_warning_button(self) -> Self {
self.with_button(theme::ICON_WARNING, CancelInfoConfirmMsg::Info, false)
}
pub fn button_styled(mut self, style: ButtonStyleSheet) -> Self {
if self.button.is_some() {
self.button = Some(Child::new(self.button.unwrap().into_inner().styled(style)));
}
self
} }
pub fn with_footer( pub fn with_footer(

9
core/embed/rust/src/ui/model_mercury/component/share_words.rs
View File

@ -1,6 +1,7 @@
use super::theme; use super::theme;
use crate::{ use crate::{
strutil::TString, strutil::TString,
translations::TR,
ui::{ ui::{
component::{Component, Event, EventCtx, PageMsg, Paginate}, component::{Component, Event, EventCtx, PageMsg, Paginate},
constant::SPACING, constant::SPACING,
@ -39,7 +40,7 @@ impl<'a> ShareWords<'a> {
page_index: 0, page_index: 0,
area_word: Rect::zero(), area_word: Rect::zero(),
swipe: Swipe::new().up().down(), swipe: Swipe::new().up().down(),
footer: Footer::new("Swipe up"), footer: Footer::new(TR::instructions__swipe_up),
} }
} }
@ -105,7 +106,11 @@ impl<'a> Component for ShareWords<'a> {
// the ordinal number of the current word // the ordinal number of the current word
let ordinal_val = self.page_index as u8 + 1; let ordinal_val = self.page_index as u8 + 1;
let ordinal_pos = self.area_word.top_left() let ordinal_pos = self.area_word.top_left()
+ Offset::y(theme::TEXT_SUB_GREY_LIGHT.text_font.visible_text_height("1")); + Offset::y(
theme::TEXT_SUB_GREY_LIGHT
.text_font
.visible_text_height("1"),
);
let ordinal = build_string!(3, inttostr!(ordinal_val), "."); let ordinal = build_string!(3, inttostr!(ordinal_val), ".");
shape::Text::new(ordinal_pos, &ordinal) shape::Text::new(ordinal_pos, &ordinal)
.with_font(theme::TEXT_SUB_GREY_LIGHT.text_font) .with_font(theme::TEXT_SUB_GREY_LIGHT.text_font)

6
core/embed/rust/src/ui/model_mercury/component/vertical_menu.rs
View File

@ -53,7 +53,7 @@ impl VerticalMenu {
pub fn select_word(words: [StrBuffer; 3]) -> Self { pub fn select_word(words: [StrBuffer; 3]) -> Self {
let mut buttons_vec = VerticalMenuButtons::new(); let mut buttons_vec = VerticalMenuButtons::new();
for word in words { for word in words {
let button = Button::with_text(word.into()).styled(theme::button_vertical_menu()); let button = Button::with_text(word.into()).styled(theme::button_default());
unwrap!(buttons_vec.push(button)); unwrap!(buttons_vec.push(button));
} }
Self::new(buttons_vec) Self::new(buttons_vec)
@ -67,10 +67,10 @@ impl VerticalMenu {
match opt.1 { match opt.1 {
// FIXME: might not be applicable everywhere // FIXME: might not be applicable everywhere
theme::ICON_CANCEL => { theme::ICON_CANCEL => {
button_theme = theme::button_vertical_menu_orange(); button_theme = theme::button_warning_high();
} }
_ => { _ => {
button_theme = theme::button_vertical_menu(); button_theme = theme::button_default();
} }
} }
unwrap!(buttons_vec.push( unwrap!(buttons_vec.push(

2
core/embed/rust/src/ui/model_mercury/flow/get_address.rs
View File

@ -115,7 +115,7 @@ impl GetAddress {
))), ))),
) )
.with_subtitle("address".into()) .with_subtitle("address".into())
.with_info_button(), .with_menu_button(),
|msg| matches!(msg, FrameMsg::Button(_)).then_some(FlowMsg::Info), |msg| matches!(msg, FrameMsg::Button(_)).then_some(FlowMsg::Info),
)? )?
.add( .add(

12
core/embed/rust/src/ui/model_mercury/layout.rs
View File

@ -537,7 +537,7 @@ impl ConfirmBlobParams {
frame = frame.with_subtitle(subtitle); frame = frame.with_subtitle(subtitle);
} }
if self.info_button { if self.info_button {
frame = frame.with_info_button(); frame = frame.with_menu_button();
} }
let obj = LayoutObj::new(frame)?; let obj = LayoutObj::new(frame)?;
Ok(obj.into()) Ok(obj.into())
@ -604,7 +604,7 @@ extern "C" fn new_confirm_address(n_args: usize, args: *const Obj, kwargs: *mut
.with_swipe_left() .with_swipe_left()
.with_cancel_confirm(None, Some(verb)), .with_cancel_confirm(None, Some(verb)),
) )
.with_info_button(), .with_menu_button(),
)?; )?;
Ok(obj.into()) Ok(obj.into())
}; };
@ -791,7 +791,7 @@ extern "C" fn new_confirm_total(n_args: usize, args: *const Obj, kwargs: *mut Ma
} }
let mut frame = Frame::left_aligned(title, page); let mut frame = Frame::left_aligned(title, page);
if info_button { if info_button {
frame = frame.with_info_button(); frame = frame.with_menu_button();
} }
let obj = LayoutObj::new(frame)?; let obj = LayoutObj::new(frame)?;
Ok(obj.into()) Ok(obj.into())
@ -867,7 +867,7 @@ extern "C" fn new_confirm_modify_fee(n_args: usize, args: *const Obj, kwargs: *m
.with_hold()? .with_hold()?
.with_swipe_left(), .with_swipe_left(),
) )
.with_info_button(), .with_menu_button(),
)?; )?;
Ok(obj.into()) Ok(obj.into())
}; };
@ -1290,7 +1290,7 @@ extern "C" fn new_show_share_words(n_args: usize, args: *const Obj, kwargs: *mut
let share_words_vec: Vec<TString, 33> = util::iter_into_vec(share_words_obj)?; let share_words_vec: Vec<TString, 33> = util::iter_into_vec(share_words_obj)?;
let share_words = ShareWords::new(share_words_vec); let share_words = ShareWords::new(share_words_vec);
let frame_with_share_words = Frame::left_aligned(title, share_words).with_info_button(); let frame_with_share_words = Frame::left_aligned(title, share_words);
let obj = LayoutObj::new(frame_with_share_words)?; let obj = LayoutObj::new(frame_with_share_words)?;
Ok(obj.into()) Ok(obj.into())
}; };
@ -1593,7 +1593,7 @@ extern "C" fn new_confirm_firmware_update(
Confirm::new(theme::BG, left, right, ConfirmTitle::Text(title), msg).with_info( Confirm::new(theme::BG, left, right, ConfirmTitle::Text(title), msg).with_info(
TR::firmware_update__title_fingerprint.into(), TR::firmware_update__title_fingerprint.into(),
fingerprint, fingerprint,
theme::button_moreinfo(), theme::button_default(),
), ),
)?; )?;
Ok(obj.into()) Ok(obj.into())

15
core/embed/rust/src/ui/model_mercury/theme/bootloader.rs
View File

@ -75,6 +75,7 @@ pub fn button_confirm() -> ButtonStyleSheet {
font: Font::BOLD, font: Font::BOLD,
text_color: BLD_BG, text_color: BLD_BG,
button_color: WHITE, button_color: WHITE,
icon_color: BLD_BG,
background_color: BLD_BG, background_color: BLD_BG,
border_color: BLD_BG, border_color: BLD_BG,
border_radius: RADIUS, border_radius: RADIUS,
@ -84,6 +85,7 @@ pub fn button_confirm() -> ButtonStyleSheet {
font: Font::BOLD, font: Font::BOLD,
text_color: BLD_BG, text_color: BLD_BG,
button_color: BLD_INSTALL_BTN_COLOR_ACTIVE, button_color: BLD_INSTALL_BTN_COLOR_ACTIVE,
icon_color: BLD_BG,
background_color: BLD_BG, background_color: BLD_BG,
border_color: BLD_BG, border_color: BLD_BG,
border_radius: RADIUS, border_radius: RADIUS,
@ -93,6 +95,7 @@ pub fn button_confirm() -> ButtonStyleSheet {
font: Font::BOLD, font: Font::BOLD,
text_color: FG, text_color: FG,
button_color: GREY_DARK, button_color: GREY_DARK,
icon_color: BLD_BG,
background_color: FG, background_color: FG,
border_color: FG, border_color: FG,
border_radius: RADIUS, border_radius: RADIUS,
@ -107,6 +110,7 @@ pub fn button_wipe_cancel() -> ButtonStyleSheet {
font: Font::BOLD, font: Font::BOLD,
text_color: WHITE, text_color: WHITE,
button_color: BLD_WIPE_CANCEL_BTN_COLOR, button_color: BLD_WIPE_CANCEL_BTN_COLOR,
icon_color: WHITE,
background_color: BLD_WIPE_COLOR, background_color: BLD_WIPE_COLOR,
border_color: BLD_WIPE_COLOR, border_color: BLD_WIPE_COLOR,
border_radius: RADIUS, border_radius: RADIUS,
@ -116,6 +120,7 @@ pub fn button_wipe_cancel() -> ButtonStyleSheet {
font: Font::BOLD, font: Font::BOLD,
text_color: WHITE, text_color: WHITE,
button_color: BLD_WIPE_CANCEL_BTN_COLOR_ACTIVE, button_color: BLD_WIPE_CANCEL_BTN_COLOR_ACTIVE,
icon_color: WHITE,
background_color: BLD_WIPE_COLOR, background_color: BLD_WIPE_COLOR,
border_color: BLD_WIPE_COLOR, border_color: BLD_WIPE_COLOR,
border_radius: RADIUS, border_radius: RADIUS,
@ -125,6 +130,7 @@ pub fn button_wipe_cancel() -> ButtonStyleSheet {
font: Font::BOLD, font: Font::BOLD,
text_color: GREY_LIGHT, text_color: GREY_LIGHT,
button_color: GREY_DARK, button_color: GREY_DARK,
icon_color: GREY_LIGHT,
background_color: WHITE, background_color: WHITE,
border_color: WHITE, border_color: WHITE,
border_radius: RADIUS, border_radius: RADIUS,
@ -139,6 +145,7 @@ pub fn button_wipe_confirm() -> ButtonStyleSheet {
font: Font::BOLD, font: Font::BOLD,
text_color: BLD_WIPE_COLOR, text_color: BLD_WIPE_COLOR,
button_color: BLD_WIPE_BTN_COLOR, button_color: BLD_WIPE_BTN_COLOR,
icon_color: BLD_WIPE_COLOR,
background_color: BLD_WIPE_COLOR, background_color: BLD_WIPE_COLOR,
border_color: BLD_WIPE_COLOR, border_color: BLD_WIPE_COLOR,
border_radius: RADIUS, border_radius: RADIUS,
@ -148,6 +155,7 @@ pub fn button_wipe_confirm() -> ButtonStyleSheet {
font: Font::BOLD, font: Font::BOLD,
text_color: BLD_WIPE_COLOR, text_color: BLD_WIPE_COLOR,
button_color: BLD_WIPE_BTN_COLOR_ACTIVE, button_color: BLD_WIPE_BTN_COLOR_ACTIVE,
icon_color: BLD_WIPE_COLOR,
background_color: BLD_WIPE_COLOR, background_color: BLD_WIPE_COLOR,
border_color: BLD_WIPE_COLOR, border_color: BLD_WIPE_COLOR,
border_radius: RADIUS, border_radius: RADIUS,
@ -157,6 +165,7 @@ pub fn button_wipe_confirm() -> ButtonStyleSheet {
font: Font::BOLD, font: Font::BOLD,
text_color: FG, text_color: FG,
button_color: GREY_DARK, button_color: GREY_DARK,
icon_color: FG,
background_color: FG, background_color: FG,
border_color: FG, border_color: FG,
border_radius: RADIUS, border_radius: RADIUS,
@ -171,6 +180,7 @@ pub fn button_bld_menu() -> ButtonStyleSheet {
font: Font::BOLD, font: Font::BOLD,
text_color: BLD_FG, text_color: BLD_FG,
button_color: BLD_BG, button_color: BLD_BG,
icon_color: BLD_FG,
background_color: BLD_BG, background_color: BLD_BG,
border_color: BLD_BTN_COLOR, border_color: BLD_BTN_COLOR,
border_radius: 2, border_radius: 2,
@ -180,6 +190,7 @@ pub fn button_bld_menu() -> ButtonStyleSheet {
font: Font::BOLD, font: Font::BOLD,
text_color: BLD_FG, text_color: BLD_FG,
button_color: BLD_BG, button_color: BLD_BG,
icon_color: BLD_FG,
background_color: BLD_BG, background_color: BLD_BG,
border_color: BLD_BTN_COLOR_ACTIVE, border_color: BLD_BTN_COLOR_ACTIVE,
border_radius: 2, border_radius: 2,
@ -189,6 +200,7 @@ pub fn button_bld_menu() -> ButtonStyleSheet {
font: Font::BOLD, font: Font::BOLD,
text_color: GREY_LIGHT, text_color: GREY_LIGHT,
button_color: BLD_BG, button_color: BLD_BG,
icon_color: GREY_LIGHT,
background_color: BLD_BG, background_color: BLD_BG,
border_color: BLD_BG, border_color: BLD_BG,
border_radius: 2, border_radius: 2,
@ -203,6 +215,7 @@ pub fn button_bld() -> ButtonStyleSheet {
font: Font::BOLD, font: Font::BOLD,
text_color: BLD_FG, text_color: BLD_FG,
button_color: BLD_BTN_COLOR, button_color: BLD_BTN_COLOR,
icon_color: BLD_FG,
background_color: BLD_BG, background_color: BLD_BG,
border_color: BLD_BG, border_color: BLD_BG,
border_radius: 4, border_radius: 4,
@ -212,6 +225,7 @@ pub fn button_bld() -> ButtonStyleSheet {
font: Font::BOLD, font: Font::BOLD,
text_color: BLD_FG, text_color: BLD_FG,
button_color: BLD_BTN_COLOR_ACTIVE, button_color: BLD_BTN_COLOR_ACTIVE,
icon_color: BLD_FG,
background_color: BLD_BG, background_color: BLD_BG,
border_color: BLD_BG, border_color: BLD_BG,
border_radius: 4, border_radius: 4,
@ -221,6 +235,7 @@ pub fn button_bld() -> ButtonStyleSheet {
font: Font::BOLD, font: Font::BOLD,
text_color: GREY_LIGHT, text_color: GREY_LIGHT,
button_color: BLD_BTN_COLOR, button_color: BLD_BTN_COLOR,
icon_color: GREY_LIGHT,
background_color: BLD_BG, background_color: BLD_BG,
border_color: BLD_BG, border_color: BLD_BG,
border_radius: 4, border_radius: 4,

213
core/embed/rust/src/ui/model_mercury/theme/mod.rs
View File

@ -225,27 +225,30 @@ pub const fn label_coinjoin_progress() -> TextStyle {
pub const fn button_default() -> ButtonStyleSheet { pub const fn button_default() -> ButtonStyleSheet {
ButtonStyleSheet { ButtonStyleSheet {
normal: &ButtonStyle { normal: &ButtonStyle {
font: Font::BOLD, font: Font::DEMIBOLD,
text_color: FG, text_color: GREY_LIGHT,
button_color: GREY_DARK, button_color: BG,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: BG, border_color: BG,
border_radius: RADIUS, border_radius: RADIUS,
border_width: 0, border_width: 0,
}, },
active: &ButtonStyle { active: &ButtonStyle {
font: Font::BOLD, font: Font::DEMIBOLD,
text_color: FG, text_color: GREY_LIGHT,
button_color: GREY_MEDIUM, button_color: BG,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: FG, border_color: FG,
border_radius: RADIUS, border_radius: RADIUS,
border_width: 0, border_width: 0,
}, },
disabled: &ButtonStyle { disabled: &ButtonStyle {
font: Font::BOLD, font: Font::DEMIBOLD,
text_color: GREY_LIGHT, text_color: GREY_LIGHT,
button_color: GREY_DARK, button_color: BG,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: BG, border_color: BG,
border_radius: RADIUS, border_radius: RADIUS,
@ -254,12 +257,49 @@ pub const fn button_default() -> ButtonStyleSheet {
} }
} }
pub const fn button_warning_high() -> ButtonStyleSheet {
ButtonStyleSheet {
normal: &ButtonStyle {
font: Font::DEMIBOLD,
text_color: ORANGE_LIGHT,
button_color: BG,
icon_color: ORANGE_DIMMED,
background_color: BG,
border_color: BG,
border_radius: RADIUS,
border_width: 0,
},
active: &ButtonStyle {
font: Font::DEMIBOLD,
text_color: ORANGE_LIGHT,
button_color: BG,
icon_color: ORANGE_DIMMED,
background_color: BG,
border_color: BG,
border_radius: RADIUS,
border_width: 0,
},
disabled: &ButtonStyle {
font: Font::DEMIBOLD,
text_color: ORANGE_LIGHT,
button_color: BG,
icon_color: ORANGE_DIMMED,
background_color: BG,
border_color: BG,
border_radius: RADIUS,
border_width: 0,
},
}
}
// TODO: delete
pub const fn button_confirm() -> ButtonStyleSheet { pub const fn button_confirm() -> ButtonStyleSheet {
ButtonStyleSheet { ButtonStyleSheet {
normal: &ButtonStyle { normal: &ButtonStyle {
font: Font::BOLD, font: Font::BOLD,
text_color: FG, text_color: FG,
button_color: GREEN, button_color: GREEN,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: BG, border_color: BG,
border_radius: RADIUS, border_radius: RADIUS,
@ -269,6 +309,7 @@ pub const fn button_confirm() -> ButtonStyleSheet {
font: Font::BOLD, font: Font::BOLD,
text_color: FG, text_color: FG,
button_color: GREEN_DARK, button_color: GREEN_DARK,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: FG, border_color: FG,
border_radius: RADIUS, border_radius: RADIUS,
@ -278,6 +319,7 @@ pub const fn button_confirm() -> ButtonStyleSheet {
font: Font::BOLD, font: Font::BOLD,
text_color: GREY_LIGHT, text_color: GREY_LIGHT,
button_color: GREEN_DARK, button_color: GREEN_DARK,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: BG, border_color: BG,
border_radius: RADIUS, border_radius: RADIUS,
@ -286,12 +328,14 @@ pub const fn button_confirm() -> ButtonStyleSheet {
} }
} }
// TODO: delete
pub const fn button_cancel() -> ButtonStyleSheet { pub const fn button_cancel() -> ButtonStyleSheet {
ButtonStyleSheet { ButtonStyleSheet {
normal: &ButtonStyle { normal: &ButtonStyle {
font: Font::BOLD, font: Font::BOLD,
text_color: FG, text_color: FG,
button_color: RED, button_color: RED,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: BG, border_color: BG,
border_radius: RADIUS, border_radius: RADIUS,
@ -301,6 +345,7 @@ pub const fn button_cancel() -> ButtonStyleSheet {
font: Font::BOLD, font: Font::BOLD,
text_color: FG, text_color: FG,
button_color: RED_DARK, button_color: RED_DARK,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: FG, border_color: FG,
border_radius: RADIUS, border_radius: RADIUS,
@ -310,6 +355,7 @@ pub const fn button_cancel() -> ButtonStyleSheet {
font: Font::BOLD, font: Font::BOLD,
text_color: GREY_LIGHT, text_color: GREY_LIGHT,
button_color: RED, button_color: RED,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: BG, border_color: BG,
border_radius: RADIUS, border_radius: RADIUS,
@ -318,6 +364,7 @@ pub const fn button_cancel() -> ButtonStyleSheet {
} }
} }
// TODO: delete
pub const fn button_danger() -> ButtonStyleSheet { pub const fn button_danger() -> ButtonStyleSheet {
button_cancel() button_cancel()
} }
@ -328,6 +375,7 @@ pub const fn button_reset() -> ButtonStyleSheet {
font: Font::BOLD, font: Font::BOLD,
text_color: FG, text_color: FG,
button_color: YELLOW, button_color: YELLOW,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: BG, border_color: BG,
border_radius: RADIUS, border_radius: RADIUS,
@ -337,6 +385,7 @@ pub const fn button_reset() -> ButtonStyleSheet {
font: Font::BOLD, font: Font::BOLD,
text_color: FG, text_color: FG,
button_color: YELLOW_DARK, button_color: YELLOW_DARK,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: FG, border_color: FG,
border_radius: RADIUS, border_radius: RADIUS,
@ -346,6 +395,7 @@ pub const fn button_reset() -> ButtonStyleSheet {
font: Font::BOLD, font: Font::BOLD,
text_color: FG, text_color: FG,
button_color: YELLOW, button_color: YELLOW,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: BG, border_color: BG,
border_radius: RADIUS, border_radius: RADIUS,
@ -354,140 +404,13 @@ pub const fn button_reset() -> ButtonStyleSheet {
} }
} }
pub const fn button_moreinfo() -> ButtonStyleSheet {
ButtonStyleSheet {
normal: &ButtonStyle {
font: Font::BOLD,
text_color: FG,
button_color: BG,
background_color: BG,
border_color: BG,
border_radius: 0,
border_width: 1,
},
active: &ButtonStyle {
font: Font::BOLD,
text_color: FG,
button_color: BG,
background_color: BG,
border_color: GREY_DARK,
border_radius: 0,
border_width: 1,
},
disabled: &ButtonStyle {
font: Font::BOLD,
text_color: GREY_LIGHT,
button_color: BG,
background_color: BG,
border_color: BG,
border_radius: 0,
border_width: 1,
},
}
}
pub const fn button_info() -> ButtonStyleSheet {
ButtonStyleSheet {
normal: &ButtonStyle {
font: Font::BOLD,
text_color: FG,
button_color: BLUE,
background_color: BG,
border_color: BG,
border_radius: RADIUS,
border_width: 0,
},
active: &ButtonStyle {
font: Font::BOLD,
text_color: FG,
button_color: BLUE_DARK,
background_color: BG,
border_color: FG,
border_radius: RADIUS,
border_width: 0,
},
disabled: &ButtonStyle {
font: Font::BOLD,
text_color: GREY_LIGHT,
button_color: BLUE,
background_color: BG,
border_color: BG,
border_radius: RADIUS,
border_width: 0,
},
}
}
pub const fn button_vertical_menu() -> ButtonStyleSheet {
ButtonStyleSheet {
normal: &ButtonStyle {
font: Font::NORMAL,
text_color: GREY_EXTRA_LIGHT,
button_color: BG,
background_color: BG,
border_color: BG,
border_radius: RADIUS,
border_width: 0,
},
// TODO: change when figma done
active: &ButtonStyle {
font: Font::NORMAL,
text_color: FG,
button_color: GREEN_LIME,
background_color: GREY_EXTRA_DARK,
border_color: GREEN_LIME,
border_radius: RADIUS,
border_width: 0,
},
disabled: &ButtonStyle {
font: Font::NORMAL,
text_color: GREY_LIGHT,
button_color: GREEN_LIME,
background_color: GREY_EXTRA_DARK,
border_color: GREEN_LIME,
border_radius: RADIUS,
border_width: 0,
},
}
}
pub const fn button_vertical_menu_orange() -> ButtonStyleSheet {
ButtonStyleSheet {
normal: &ButtonStyle {
font: Font::NORMAL,
text_color: ORANGE_LIGHT,
button_color: BG,
background_color: BG,
border_color: BG,
border_radius: RADIUS,
border_width: 0,
},
active: &ButtonStyle {
font: Font::NORMAL,
text_color: FG,
button_color: GREEN_LIME,
background_color: GREY_EXTRA_DARK,
border_color: GREEN_LIME,
border_radius: RADIUS,
border_width: 0,
},
disabled: &ButtonStyle {
font: Font::NORMAL,
text_color: GREY_LIGHT,
button_color: GREEN_LIME,
background_color: GREY_EXTRA_DARK,
border_color: GREEN_LIME,
border_radius: RADIUS,
border_width: 0,
},
}
}
pub const fn button_pin() -> ButtonStyleSheet { pub const fn button_pin() -> ButtonStyleSheet {
ButtonStyleSheet { ButtonStyleSheet {
normal: &ButtonStyle { normal: &ButtonStyle {
font: Font::MONO, font: Font::MONO,
text_color: FG, text_color: FG,
button_color: GREY_DARK, button_color: GREY_DARK,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: BG, border_color: BG,
border_radius: RADIUS, border_radius: RADIUS,
@ -497,6 +420,7 @@ pub const fn button_pin() -> ButtonStyleSheet {
font: Font::MONO, font: Font::MONO,
text_color: FG, text_color: FG,
button_color: GREY_MEDIUM, button_color: GREY_MEDIUM,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: FG, border_color: FG,
border_radius: RADIUS, border_radius: RADIUS,
@ -506,6 +430,7 @@ pub const fn button_pin() -> ButtonStyleSheet {
font: Font::MONO, font: Font::MONO,
text_color: GREY_LIGHT, text_color: GREY_LIGHT,
button_color: BG, // so there is no "button" itself, just the text button_color: BG, // so there is no "button" itself, just the text
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: BG, border_color: BG,
border_radius: RADIUS, border_radius: RADIUS,
@ -520,6 +445,7 @@ pub const fn button_pin_confirm() -> ButtonStyleSheet {
font: Font::MONO, font: Font::MONO,
text_color: FG, text_color: FG,
button_color: GREEN, button_color: GREEN,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: BG, border_color: BG,
border_radius: RADIUS, border_radius: RADIUS,
@ -529,6 +455,7 @@ pub const fn button_pin_confirm() -> ButtonStyleSheet {
font: Font::MONO, font: Font::MONO,
text_color: FG, text_color: FG,
button_color: GREEN_DARK, button_color: GREEN_DARK,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: FG, border_color: FG,
border_radius: RADIUS, border_radius: RADIUS,
@ -538,6 +465,7 @@ pub const fn button_pin_confirm() -> ButtonStyleSheet {
font: Font::MONO, font: Font::MONO,
text_color: GREY_LIGHT, text_color: GREY_LIGHT,
button_color: GREY_DARK, button_color: GREY_DARK,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: BG, border_color: BG,
border_radius: RADIUS, border_radius: RADIUS,
@ -552,6 +480,7 @@ pub const fn button_pin_autocomplete() -> ButtonStyleSheet {
font: Font::MONO, font: Font::MONO,
text_color: FG, text_color: FG,
button_color: GREY_DARK, // same as PIN buttons button_color: GREY_DARK, // same as PIN buttons
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: BG, border_color: BG,
border_radius: RADIUS, border_radius: RADIUS,
@ -561,6 +490,7 @@ pub const fn button_pin_autocomplete() -> ButtonStyleSheet {
font: Font::MONO, font: Font::MONO,
text_color: FG, text_color: FG,
button_color: GREEN_DARK, button_color: GREEN_DARK,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: FG, border_color: FG,
border_radius: RADIUS, border_radius: RADIUS,
@ -570,6 +500,7 @@ pub const fn button_pin_autocomplete() -> ButtonStyleSheet {
font: Font::MONO, font: Font::MONO,
text_color: GREY_LIGHT, text_color: GREY_LIGHT,
button_color: BG, button_color: BG,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: BG, border_color: BG,
border_radius: RADIUS, border_radius: RADIUS,
@ -584,6 +515,7 @@ pub const fn button_suggestion_confirm() -> ButtonStyleSheet {
font: Font::MONO, font: Font::MONO,
text_color: GREEN_DARK, text_color: GREEN_DARK,
button_color: GREEN, button_color: GREEN,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: BG, border_color: BG,
border_radius: RADIUS, border_radius: RADIUS,
@ -593,6 +525,7 @@ pub const fn button_suggestion_confirm() -> ButtonStyleSheet {
font: Font::MONO, font: Font::MONO,
text_color: FG, text_color: FG,
button_color: GREEN_DARK, button_color: GREEN_DARK,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: FG, border_color: FG,
border_radius: RADIUS, border_radius: RADIUS,
@ -602,6 +535,7 @@ pub const fn button_suggestion_confirm() -> ButtonStyleSheet {
font: Font::MONO, font: Font::MONO,
text_color: GREY_LIGHT, text_color: GREY_LIGHT,
button_color: GREY_DARK, button_color: GREY_DARK,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: BG, border_color: BG,
border_radius: RADIUS, border_radius: RADIUS,
@ -616,6 +550,7 @@ pub const fn button_suggestion_autocomplete() -> ButtonStyleSheet {
font: Font::MONO, font: Font::MONO,
text_color: GREY_LIGHT, text_color: GREY_LIGHT,
button_color: GREY_DARK, // same as PIN buttons button_color: GREY_DARK, // same as PIN buttons
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: BG, border_color: BG,
border_radius: RADIUS, border_radius: RADIUS,
@ -625,6 +560,7 @@ pub const fn button_suggestion_autocomplete() -> ButtonStyleSheet {
font: Font::MONO, font: Font::MONO,
text_color: FG, text_color: FG,
button_color: GREEN_DARK, button_color: GREEN_DARK,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: FG, border_color: FG,
border_radius: RADIUS, border_radius: RADIUS,
@ -634,6 +570,7 @@ pub const fn button_suggestion_autocomplete() -> ButtonStyleSheet {
font: Font::MONO, font: Font::MONO,
text_color: GREY_LIGHT, text_color: GREY_LIGHT,
button_color: BG, button_color: BG,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: BG, border_color: BG,
border_radius: RADIUS, border_radius: RADIUS,
@ -648,6 +585,7 @@ pub const fn button_counter() -> ButtonStyleSheet {
font: Font::DEMIBOLD, font: Font::DEMIBOLD,
text_color: FG, text_color: FG,
button_color: GREY_DARK, button_color: GREY_DARK,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: BG, border_color: BG,
border_radius: RADIUS, border_radius: RADIUS,
@ -657,6 +595,7 @@ pub const fn button_counter() -> ButtonStyleSheet {
font: Font::DEMIBOLD, font: Font::DEMIBOLD,
text_color: FG, text_color: FG,
button_color: GREY_MEDIUM, button_color: GREY_MEDIUM,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: FG, border_color: FG,
border_radius: RADIUS, border_radius: RADIUS,
@ -666,6 +605,7 @@ pub const fn button_counter() -> ButtonStyleSheet {
font: Font::DEMIBOLD, font: Font::DEMIBOLD,
text_color: GREY_LIGHT, text_color: GREY_LIGHT,
button_color: GREY_DARK, button_color: GREY_DARK,
icon_color: GREY_LIGHT,
background_color: BG, background_color: BG,
border_color: BG, border_color: BG,
border_radius: RADIUS, border_radius: RADIUS,
@ -715,6 +655,7 @@ pub const TEXT_MAIN_GREY_LIGHT: TextStyle =
TextStyle::new(Font::NORMAL, GREY_LIGHT, BG, GREY, GREY); TextStyle::new(Font::NORMAL, GREY_LIGHT, BG, GREY, GREY);
pub const TEXT_SUB_GREY_LIGHT: TextStyle = TextStyle::new(Font::SUB, GREY_LIGHT, BG, GREY, GREY); pub const TEXT_SUB_GREY_LIGHT: TextStyle = TextStyle::new(Font::SUB, GREY_LIGHT, BG, GREY, GREY);
pub const TEXT_SUB_GREY: TextStyle = TextStyle::new(Font::SUB, GREY, BG, GREY, GREY); pub const TEXT_SUB_GREY: TextStyle = TextStyle::new(Font::SUB, GREY, BG, GREY, GREY);
pub const TEXT_WARNING: TextStyle = TextStyle::new(Font::NORMAL, ORANGE_LIGHT, BG, GREY, GREY);
pub const TEXT_MONO: TextStyle = TextStyle::new(Font::MONO, GREY_EXTRA_LIGHT, BG, GREY, GREY) pub const TEXT_MONO: TextStyle = TextStyle::new(Font::MONO, GREY_EXTRA_LIGHT, BG, GREY, GREY)
.with_line_breaking(LineBreaking::BreakWordsNoHyphen) .with_line_breaking(LineBreaking::BreakWordsNoHyphen)
.with_page_breaking(PageBreaking::CutAndInsertEllipsisBoth) .with_page_breaking(PageBreaking::CutAndInsertEllipsisBoth)