1
0
mirror of https://github.com/trezor/trezor-firmware.git synced 2025-07-29 01:48:23 +00:00

feat(eckhart): minor bld UI updates

- gradient for BldActionBar
- using icons and divider in BldActionBar of ConfirmPairingScreen

[no changelog]
This commit is contained in:
obrusvit 2025-07-15 19:11:24 +02:00 committed by Vít Obrusník
parent b8f1ec6f04
commit 11bad835f1
7 changed files with 37 additions and 29 deletions

View File

@ -1,10 +1,13 @@
use crate::ui::{
component::{Component, Event, EventCtx},
geometry::{Insets, Offset, Rect},
shape::Renderer,
geometry::{Alignment2D, Insets, Offset, Rect},
shape::{self, Renderer},
};
use super::super::component::{Button, ButtonMsg};
use super::super::{
component::{Button, ButtonMsg},
theme::{self, Gradient},
};
/// Component for control buttons in the bottom of the screen. Reduced variant
/// for Bootloader UI.
@ -15,6 +18,8 @@ pub struct BldActionBar {
right_button: Button,
/// Optional left button.
left_button: Option<Button>,
/// Whether to show divider between buttons
show_divider: bool,
area: Rect,
}
@ -34,7 +39,7 @@ enum Mode {
}
impl BldActionBar {
pub const ACTION_BAR_HEIGHT: i16 = 90; // [px]
pub const ACTION_BAR_HEIGHT: i16 = theme::ACTION_BAR_HEIGHT; // [px]
const SPACER_WIDTH: i16 = 4; // [px]
const BUTTON_CONTENT_OFFSET: Offset = Offset::x(12); // [px]
const BUTTON_EXPAND_TOUCH: Insets = Insets::top(Self::ACTION_BAR_HEIGHT);
@ -44,7 +49,9 @@ impl BldActionBar {
Self::new(
Mode::Single,
None,
button.with_expanded_touch_area(Self::BUTTON_EXPAND_TOUCH),
button
.with_expanded_touch_area(Self::BUTTON_EXPAND_TOUCH)
.with_gradient(Gradient::DefaultGrey),
)
}
@ -62,11 +69,17 @@ impl BldActionBar {
)
}
pub fn with_divider(mut self) -> Self {
self.show_divider = true;
self
}
fn new(mode: Mode, left_button: Option<Button>, right_button: Button) -> Self {
Self {
mode,
right_button,
left_button,
show_divider: false,
area: Rect::zero(),
}
}
@ -115,5 +128,11 @@ impl Component for BldActionBar {
fn render<'s>(&'s self, target: &mut impl Renderer<'s>) {
self.left_button.render(target);
self.right_button.render(target);
if self.show_divider {
shape::ToifImage::new(self.area.center(), theme::ICON_DASH_VERTICAL.toif)
.with_align(Alignment2D::CENTER)
.with_fg(theme::GREY_EXTRA_DARK)
.render(target);
}
}
}

View File

@ -33,18 +33,14 @@ pub struct ConfirmPairingScreen<'a> {
impl<'a> ConfirmPairingScreen<'a> {
pub fn new(code: u32) -> Self {
let (left, right) = (
Button::with_icon(theme::ICON_CROSS)
.styled(theme::bootloader::button_cancel())
.with_text_align(Alignment::Center),
Button::with_text("Confirm".into())
.styled(theme::button_default())
.with_text_align(Alignment::Center),
Button::with_icon(theme::ICON_CROSS),
Button::with_icon(theme::ICON_CHECKMARK),
);
Self {
header: BldHeader::new("Bluetooth pairing".into()),
instruction: Label::left_aligned("Pairing code match?".into(), theme::TEXT_NORMAL),
action_bar: BldActionBar::new_double(left, right),
action_bar: BldActionBar::new_double(left, right).with_divider(),
screen_border: None,
code_formatted: format_pairing_code(code, PAIRING_CODE_LEN),
}

View File

@ -29,7 +29,7 @@ pub struct ConnectScreen {
impl ConnectScreen {
pub fn new() -> Self {
let btn = Button::with_text("Cancel".into()).styled(theme::button_default());
let btn = Button::with_text("Cancel".into());
Self {
header: None,
message: Label::left_aligned("Waiting for host...".into(), theme::TEXT_NORMAL),

View File

@ -27,7 +27,7 @@ pub struct PairingFinalizationScreen {
impl PairingFinalizationScreen {
pub fn new() -> Self {
let btn = Button::with_text("Cancel".into()).styled(theme::button_default());
let btn = Button::with_text("Cancel".into());
Self {
header: BldHeader::new("Bluetooth pairing".into()),
message: Label::left_aligned(

View File

@ -48,10 +48,9 @@ impl WirelessSetupScreen {
"Get the Trezor Suite app to begin setup.".into(),
theme::TEXT_NORMAL,
);
let btn = Button::with_text("More info".into()).styled(theme::button_default());
let btn_more_info = Button::with_text("More at trezor.io/start".into())
.styled(theme::button_default())
.initially_enabled(false);
let btn = Button::with_text("More info".into());
let btn_more_info =
Button::with_text("More at trezor.io/start".into()).initially_enabled(false);
let more_info = MoreInfo {
header: BldHeader::new(TString::empty())
.with_fuel_gauge(Some(FuelGauge::always()))

View File

@ -61,7 +61,7 @@ enum Mode {
}
impl ActionBar {
pub const ACTION_BAR_HEIGHT: i16 = 90; // [px]
pub const ACTION_BAR_HEIGHT: i16 = theme::ACTION_BAR_HEIGHT; // [px]
const SPACER_WIDTH: i16 = 4; // [px]
const LEFT_SMALL_BUTTON_WIDTH: i16 = 120; // [px]
/// offset for button content to move it towards center

View File

@ -252,10 +252,8 @@ impl BootloaderUI for UIEckhart {
TEXT_NORMAL,
));
let header = BldHeader::new(title_str.into()).with_right_button(
Button::with_icon(theme::ICON_INFO).styled(theme::button_default()),
BldHeaderMsg::Info,
);
let header = BldHeader::new(title_str.into())
.with_right_button(Button::with_icon(theme::ICON_INFO), BldHeaderMsg::Info);
let (left, right) = if should_keep_seed {
let l = Button::with_text("Cancel".into())
.styled(button_cancel())
@ -265,12 +263,8 @@ impl BootloaderUI for UIEckhart {
.with_text_align(Alignment::Center);
(l, r)
} else {
let l = Button::with_icon(ICON_CROSS)
.styled(button_cancel())
.with_text_align(Alignment::Center);
let r = Button::with_icon(ICON_CHECKMARK)
.styled(button_confirm())
.with_text_align(Alignment::Center);
let l = Button::with_icon(ICON_CROSS).styled(button_cancel());
let r = Button::with_icon(ICON_CHECKMARK);
(l, r)
};