Skip to content

Commit

Permalink
feat(core/mercury): passphrase confirm empty btn
Browse files Browse the repository at this point in the history
[no changelog]
  • Loading branch information
obrusvit committed Aug 7, 2024
1 parent ebc297f commit 55633a7
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 43 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,8 @@ pub struct PassphraseKeyboard {
input_prompt: Label<'static>,
erase_btn: Maybe<Button>,
cancel_btn: Maybe<Button>,
confirm_btn: Button,
confirm_btn: Maybe<Button>,
confirm_empty_btn: Maybe<Button>,
next_btn: Button,
keypad_area: Rect,
keys: [Button; KEY_COUNT],
Expand All @@ -101,13 +102,25 @@ const KEYBOARD: [[&str; KEY_COUNT]; PAGE_COUNT] = [

const MAX_LENGTH: usize = 50;

const CONFIRM_BTN_INSETS: Insets = Insets::new(5, 0, 5, 0);
const CONFIRM_EMPTY_BTN_INSETS: Insets = Insets::new(5, 7, 5, 0);

impl PassphraseKeyboard {
pub fn new() -> Self {
let active_layout = KeyboardLayout::LettersLower;

let confirm_btn = Button::with_icon(theme::ICON_SIMPLE_CHECKMARK24)
.styled(theme::button_passphrase_confirm())
.with_radius(15);
.with_radius(14)
.with_expanded_touch_area(CONFIRM_BTN_INSETS)
.initially_enabled(false);
let confirm_btn = Maybe::hidden(theme::BG, confirm_btn);

let confirm_empty_btn = Button::with_icon(theme::ICON_SIMPLE_CHECKMARK24)
.styled(theme::button_passphrase_confirm_empty())
.with_radius(14)
.with_expanded_touch_area(CONFIRM_EMPTY_BTN_INSETS);
let confirm_empty_btn = Maybe::visible(theme::BG, confirm_empty_btn);

let next_btn = Button::new(active_layout.next().into())
.styled(theme::button_passphrase_next())
Expand All @@ -133,6 +146,7 @@ impl PassphraseKeyboard {
erase_btn,
cancel_btn,
confirm_btn,
confirm_empty_btn,
next_btn,
keypad_area: Rect::zero(),
keys: KEYBOARD[active_layout.to_usize().unwrap()].map(|text| {
Expand Down Expand Up @@ -199,6 +213,10 @@ impl PassphraseKeyboard {
// When the input is empty, enable cancel button. Otherwise show erase and
// confirm button.
let is_empty = self.input.textbox.is_empty();
self.confirm_btn.show_if(ctx, !is_empty);
self.confirm_btn.inner_mut().enable_if(ctx, !is_empty);
self.confirm_empty_btn.show_if(ctx, is_empty);
self.confirm_empty_btn.inner_mut().enable_if(ctx, is_empty);
self.erase_btn.show_if(ctx, !is_empty);
self.erase_btn.inner_mut().enable_if(ctx, !is_empty);
self.cancel_btn.show_if(ctx, is_empty);
Expand Down Expand Up @@ -253,18 +271,20 @@ impl Component for PassphraseKeyboard {

fn place(&mut self, bounds: Rect) -> Rect {
const CONFIRM_BTN_WIDTH: i16 = 78;
const CONFIRM_EMPTY_BTN_WIDTH: i16 = 32 + 5;
const INPUT_INSETS: Insets = Insets::new(10, 2, 10, 4);
const CONFIRM_BTN_INSETS: Insets = Insets::new(5, 0, 5, 0);

let bounds = bounds.inset(theme::borders());
let (top_area, keypad_area) =
bounds.split_bottom(4 * theme::PASSPHRASE_BUTTON_HEIGHT + 3 * theme::BUTTON_SPACING);
self.keypad_area = keypad_area;
let (input_area, confirm_btn_area) = top_area.split_right(CONFIRM_BTN_WIDTH);
let confirm_empty_btn_area = confirm_btn_area.split_right(CONFIRM_EMPTY_BTN_WIDTH).1;

let top_area = top_area.inset(INPUT_INSETS);
let input_area = input_area.inset(INPUT_INSETS);
let confirm_btn_area = confirm_btn_area.inset(CONFIRM_BTN_INSETS);
let confirm_empty_btn_area = confirm_empty_btn_area.inset(CONFIRM_EMPTY_BTN_INSETS);

let key_grid = Grid::new(keypad_area, 4, 3).with_spacing(theme::BUTTON_SPACING);
let next_btn_area = key_grid.cell(11);
Expand All @@ -276,6 +296,7 @@ impl Component for PassphraseKeyboard {

// control buttons
self.confirm_btn.place(confirm_btn_area);
self.confirm_empty_btn.place(confirm_empty_btn_area);
self.next_btn.place(next_btn_area);
self.erase_btn.place(erase_cancel_area);
self.cancel_btn.place(erase_cancel_area);
Expand Down Expand Up @@ -310,9 +331,17 @@ impl Component for PassphraseKeyboard {
if let Some(ButtonMsg::Clicked) = self.next_btn.event(ctx, event) {
self.on_page_change(ctx, SwipeDirection::Left);
}

// Confirm button was clicked, we're done.
if let Some(ButtonMsg::Clicked) = self.confirm_empty_btn.event(ctx, event) {
return Some(PassphraseKeyboardMsg::Confirmed(unwrap!(
ShortString::try_from(self.passphrase())
)));
}
if let Some(ButtonMsg::Clicked) = self.confirm_btn.event(ctx, event) {
// Confirm button was clicked, we're done.
return Some(PassphraseKeyboardMsg::Confirmed);
return Some(PassphraseKeyboardMsg::Confirmed(unwrap!(
ShortString::try_from(self.passphrase())
)));
}
if let Some(ButtonMsg::Clicked) = self.cancel_btn.event(ctx, event) {
// Cancel button is visible and clicked, cancel
Expand Down Expand Up @@ -365,12 +394,13 @@ impl Component for PassphraseKeyboard {
fn render<'s>(&'s self, target: &mut impl Renderer<'s>) {
self.input.render(target);
self.next_btn.render(target);
self.erase_btn.render(target);
self.confirm_btn.render(target);
if self.input.textbox.is_empty() {
self.confirm_empty_btn.render(target);
self.cancel_btn.render(target);
// FIXME: when prompt fixed in Figma
// self.input_prompt.render(target);
self.input_prompt.render(target);
} else {
self.confirm_btn.render(target);
self.erase_btn.render(target);
}
for btn in &self.keys {
btn.render(target);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ impl PromptScreen {
theme::GREEN,
theme::GREY_EXTRA_DARK,
theme::GREEN_LIGHT,
theme::ICON_SIMPLE_CHECKMARK,
theme::ICON_SIMPLE_CHECKMARK30,
))
}

Expand All @@ -40,7 +40,7 @@ impl PromptScreen {
theme::ORANGE_LIGHT,
theme::GREY_EXTRA_DARK,
theme::ORANGE_DIMMED,
theme::ICON_SIMPLE_CHECKMARK,
theme::ICON_SIMPLE_CHECKMARK30,
))
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ impl StatusScreen {

pub fn new_success(msg: TString<'static>) -> Self {
Self::new(
theme::ICON_SIMPLE_CHECKMARK,
theme::ICON_SIMPLE_CHECKMARK30,
theme::GREEN_LIME,
theme::GREEN_LIGHT,
DismissType::SwipeUp,
Expand All @@ -177,7 +177,7 @@ impl StatusScreen {

pub fn new_success_timeout(msg: TString<'static>) -> Self {
Self::new(
theme::ICON_SIMPLE_CHECKMARK,
theme::ICON_SIMPLE_CHECKMARK30,
theme::GREEN_LIME,
theme::GREEN_LIGHT,
DismissType::Timeout(Timeout::new(TIMEOUT_MS)),
Expand All @@ -187,7 +187,7 @@ impl StatusScreen {

pub fn new_neutral(msg: TString<'static>) -> Self {
Self::new(
theme::ICON_SIMPLE_CHECKMARK,
theme::ICON_SIMPLE_CHECKMARK30,
theme::GREY_EXTRA_LIGHT,
theme::GREY_DARK,
DismissType::SwipeUp,
Expand All @@ -197,7 +197,7 @@ impl StatusScreen {

pub fn new_neutral_timeout(msg: TString<'static>) -> Self {
Self::new(
theme::ICON_SIMPLE_CHECKMARK,
theme::ICON_SIMPLE_CHECKMARK30,
theme::GREY_EXTRA_LIGHT,
theme::GREY_DARK,
DismissType::Timeout(Timeout::new(TIMEOUT_MS)),
Expand Down
56 changes: 28 additions & 28 deletions core/embed/rust/src/ui/model_mercury/theme/mod.rs
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ 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!(
ICON_SIMPLE_CHECKMARK,
ICON_SIMPLE_CHECKMARK30,
"model_mercury/res/simple_checkmark30.toif"
);
include_icon!(ICON_SIGN, "model_mercury/res/sign30.toif");
Expand Down Expand Up @@ -301,33 +301,6 @@ pub const fn button_confirm() -> ButtonStyleSheet {
}
}

// TODO: delete
pub const fn button_cancel() -> ButtonStyleSheet {
ButtonStyleSheet {
normal: &ButtonStyle {
font: Font::BOLD,
text_color: FG,
button_color: ORANGE_LIGHT,
icon_color: GREY_LIGHT,
background_color: BG,
},
active: &ButtonStyle {
font: Font::BOLD,
text_color: FG,
button_color: ORANGE_DIMMED,
icon_color: GREY_LIGHT,
background_color: BG,
},
disabled: &ButtonStyle {
font: Font::BOLD,
text_color: GREY_LIGHT,
button_color: ORANGE_DIMMED,
icon_color: GREY_LIGHT,
background_color: BG,
},
}
}

pub const fn button_danger() -> ButtonStyleSheet {
ButtonStyleSheet {
normal: &ButtonStyle {
Expand Down Expand Up @@ -490,6 +463,33 @@ pub const fn button_passphrase_confirm() -> ButtonStyleSheet {
}
}

pub const fn button_passphrase_confirm_empty() -> ButtonStyleSheet {
ButtonStyleSheet {
normal: &ButtonStyle {
font: Font::DEMIBOLD,
text_color: GREY,
button_color: GREY_EXTRA_DARK,
icon_color: GREY,
background_color: BG,
},
active: &ButtonStyle {
font: Font::DEMIBOLD,
text_color: BG,
button_color: GREY_LIGHT,
icon_color: BG,
background_color: GREY_LIGHT,
},
// not used
disabled: &ButtonStyle {
font: Font::DEMIBOLD,
text_color: BG,
button_color: BG,
icon_color: BG,
background_color: BG,
},
}
}

pub const fn button_passphrase_next() -> ButtonStyleSheet {
ButtonStyleSheet {
normal: &ButtonStyle {
Expand Down

0 comments on commit 55633a7

Please sign in to comment.