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

feat(core/ui): T3T1 mnemonic keyboard

Browse Source 
These are initial changes to the mnemonic keyboard designs. The designs
themselves from Figma are still WIP.
This commit is contained in:
obrusvit 2024-04-25 15:26:58 +02:00 committed by Martin Milata
parent 0566f0b7c3
commit 6486b03248
10 changed files with 53 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -196,7 +196,7 @@ impl Component for Bip39Input {
let icon_center = area.top_right().center(area.bottom_right()) - Offset::new(16 + 8, 0);
shape::ToifImage::new(icon_center, icon.toif)
.with_align(Alignment2D::CENTER)
.with_fg(style.text_color)
.with_fg(style.icon_color)
.render(target);
}
}
@ -227,7 +227,8 @@ impl Bip39Input {
// Styling the input to reflect already filled word
Self {
button: Button::with_icon(theme::ICON_LIST_CHECK).styled(theme::button_pin_confirm()),
button: Button::with_icon(theme::ICON_CONFIRM_INPUT)
.styled(theme::button_pin_confirm()),
textbox: TextBox::new(unwrap!(String::try_from(word))),
multi_tap: MultiTapKeyboard::new(),
options_num: bip39::options_num(word),
@ -293,7 +294,7 @@ impl Bip39Input {
self.button.enable(ctx);
self.button.set_stylesheet(ctx, theme::button_pin_confirm());
self.button
.set_content(ctx, ButtonContent::Icon(theme::ICON_LIST_CHECK));
.set_content(ctx, ButtonContent::Icon(theme::ICON_CONFIRM_INPUT));
self.button_suggestion
.set_stylesheet(ctx, theme::button_suggestion_confirm());
} else {
@ -302,7 +303,7 @@ impl Bip39Input {
self.button
.set_stylesheet(ctx, theme::button_pin_autocomplete());
self.button
.set_content(ctx, ButtonContent::Icon(theme::ICON_CLICK));
.set_content(ctx, ButtonContent::Icon(theme::ICON_AUTOFILL));
self.button_suggestion
.set_stylesheet(ctx, theme::button_suggestion_autocomplete());
}

47
core/embed/rust/src/ui/model_mercury/component/keyboard/mnemonic.rs
View File

@ -2,7 +2,7 @@ use crate::{
strutil::TString,
ui::{
component::{maybe::paint_overlapping, Child, Component, Event, EventCtx, Label, Maybe},
geometry::{Alignment2D, Grid, Offset, Rect},
geometry::{Alignment, Grid, Rect},
model_mercury::{
component::{Button, ButtonMsg, Swipe, SwipeDirection},
theme,
@ -44,23 +44,23 @@ where
Self {
prompt: Child::new(Maybe::new(
theme::BG,
Label::centered(prompt, theme::label_keyboard_prompt()),
Label::centered(prompt, theme::TEXT_MAIN_GREY_LIGHT),
prompt_visible,
)),
back: Child::new(Maybe::new(
theme::BG,
Button::with_icon_blend(
theme::IMAGE_BG_BACK_BTN_TALL,
theme::ICON_BACK,
Offset::new(30, 17),
)
.styled(theme::button_reset())
Button::with_icon(theme::ICON_DELETE)
.styled(theme::button_default())
.with_long_press(theme::ERASE_HOLD_DURATION),
!prompt_visible,
)),
input: Child::new(Maybe::new(theme::BG, input, !prompt_visible)),
keys: T::keys()
.map(|t| Button::with_text(t.into()).styled(theme::button_pin()))
.map(|t| {
Button::with_text(t.into())
.styled(theme::button_pin())
.with_text_align(Alignment::Center)
})
.map(Child::new),
swipe: Swipe::new().right(),
can_go_back,
@ -109,23 +109,27 @@ where
type Msg = MnemonicKeyboardMsg;
fn place(&mut self, bounds: Rect) -> Rect {
let (_, bounds) = bounds
.inset(theme::borders())
.split_bottom(4 * theme::MNEMONIC_BUTTON_HEIGHT + 3 * theme::KEYBOARD_SPACING);
let grid = Grid::new(bounds, 4, 3).with_spacing(theme::KEYBOARD_SPACING);
let back_area = grid.row_col(0, 0);
let input_area = grid.row_col(0, 1).union(grid.row_col(0, 3));
let height_input_area: i16 = 30;
let space_top: i16 = 8;
let (remaining, keyboard_area) =
bounds.split_bottom(3 * theme::BUTTON_HEIGHT + 2 * theme::KEYBOARD_SPACING);
let prompt_area = remaining
.split_top(space_top)
.1
.split_top(height_input_area)
.0;
assert!(prompt_area.height() == height_input_area);
let prompt_center = grid.row_col(0, 0).union(grid.row_col(0, 3)).center();
let prompt_size = self.prompt.inner().inner().max_size();
let prompt_area = Rect::snap(prompt_center, prompt_size, Alignment2D::CENTER);
let (back_btn_area, input_area) = prompt_area.split_left(30);
let keyboard_grid = Grid::new(keyboard_area, 3, 3).with_spacing(theme::KEYBOARD_SPACING);
self.swipe.place(bounds);
self.prompt.place(prompt_area);
self.back.place(back_area);
self.back.place(back_btn_area);
self.input.place(input_area);
for (key, btn) in self.keys.iter_mut().enumerate() {
btn.place(grid.cell(key + grid.cols)); // Start in the second row.
btn.place(keyboard_grid.cell(key));
}
bounds
}
@ -185,9 +189,12 @@ where
}
fn render<'s>(&'s self, target: &mut impl Renderer<'s>) {
if self.input.inner().inner().is_empty() {
self.prompt.render(target);
} else {
self.input.render(target);
self.back.render(target);
}
for btn in &self.keys {
btn.render(target);

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

@ -181,7 +181,7 @@ impl Component for Slip39Input {
icon.draw(
icon_center,
Alignment2D::CENTER,
style.text_color,
style.icon_color,
style.button_color,
);
}
@ -247,7 +247,7 @@ impl Component for Slip39Input {
let icon_center = area.top_right().center(area.bottom_right()) - Offset::new(16 + 8, 0);
shape::ToifImage::new(icon_center, icon.toif)
.with_align(Alignment2D::CENTER)
.with_fg(style.text_color)
.with_fg(style.icon_color)
.render(target);
}
}
@ -356,7 +356,7 @@ impl Slip39Input {
// Confirm button.
self.button.enable(ctx);
self.button
.set_content(ctx, ButtonContent::Icon(theme::ICON_LIST_CHECK));
.set_content(ctx, ButtonContent::Icon(theme::ICON_CONFIRM_INPUT));
} else {
// Disabled button.
self.button.disable(ctx);

BIN
core/embed/rust/src/ui/model_mercury/res/autofill30.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 542 B

After

Width:  |  Height:  |  Size: 534 B

BIN
core/embed/rust/src/ui/model_mercury/res/autofill30.toif
View File

Binary file not shown.

BIN
core/embed/rust/src/ui/model_mercury/res/confirm_input30.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 526 B

BIN
core/embed/rust/src/ui/model_mercury/res/confirm_input30.toif Normal file
View File

Binary file not shown.

BIN
core/embed/rust/src/ui/model_mercury/res/delete30.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 484 B

After

Width:  |  Height:  |  Size: 389 B

BIN
core/embed/rust/src/ui/model_mercury/res/delete30.toif
View File

Binary file not shown.

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

@ -88,6 +88,7 @@ include_icon!(ICON_WARNING, "model_mercury/res/warning24.toif");
// 30x30
include_icon!(ICON_AUTOFILL, "model_mercury/res/autofill30.toif");
include_icon!(ICON_CLOSE, "model_mercury/res/close30.toif");
include_icon!(ICON_CONFIRM_INPUT, "model_mercury/res/confirm_input30.toif");
include_icon!(ICON_DELETE, "model_mercury/res/delete30.toif");
include_icon!(ICON_MENU, "model_mercury/res/menu30.toif");
include_icon!(
@ -411,27 +412,29 @@ pub const fn button_pin() -> ButtonStyleSheet {
}
}
// TODO: will button_pin_xyz styles be the same for PIN and Mnemonic keyboard?
// Wait for Figma
pub const fn button_pin_confirm() -> ButtonStyleSheet {
ButtonStyleSheet {
normal: &ButtonStyle {
font: Font::MONO,
text_color: FG,
button_color: GREEN,
icon_color: GREY_LIGHT,
button_color: BG,
icon_color: GREEN_LIGHT,
background_color: BG,
},
active: &ButtonStyle {
font: Font::MONO,
text_color: FG,
button_color: GREEN_DARK,
icon_color: GREY_LIGHT,
button_color: GREY_DARK,
icon_color: GREEN_LIGHT,
background_color: BG,
},
disabled: &ButtonStyle {
font: Font::MONO,
text_color: GREY_LIGHT,
button_color: GREY_DARK,
icon_color: GREY_LIGHT,
text_color: FG,
button_color: BG,
icon_color: GREEN_LIGHT,
background_color: BG,
},
}
@ -442,20 +445,20 @@ pub const fn button_pin_autocomplete() -> ButtonStyleSheet {
normal: &ButtonStyle {
font: Font::MONO,
text_color: FG,
button_color: GREY_DARK, // same as PIN buttons
button_color: BG,
icon_color: GREY_LIGHT,
background_color: BG,
},
active: &ButtonStyle {
font: Font::MONO,
text_color: FG,
button_color: GREEN_DARK,
button_color: BG,
icon_color: GREY_LIGHT,
background_color: BG,
},
disabled: &ButtonStyle {
font: Font::MONO,
text_color: GREY_LIGHT,
text_color: FG,
button_color: BG,
icon_color: GREY_LIGHT,
background_color: BG,
@ -467,7 +470,7 @@ pub const fn button_suggestion_confirm() -> ButtonStyleSheet {
ButtonStyleSheet {
normal: &ButtonStyle {
font: Font::MONO,
text_color: GREEN_DARK,
text_color: GREY_LIGHT,
button_color: GREEN,
icon_color: GREY_LIGHT,
background_color: BG,