diff --git a/scenarios/MockUI/basic/__init__.py b/scenarios/MockUI/basic/__init__.py index ee09fe38..8aa134d4 100644 --- a/scenarios/MockUI/basic/__init__.py +++ b/scenarios/MockUI/basic/__init__.py @@ -1,4 +1,4 @@ -from .ui_consts import BTN_HEIGHT, BTN_WIDTH, MENU_PCT, PAD_SIZE, SWITCH_HEIGHT, SWITCH_WIDTH, STATUS_BTN_HEIGHT, STATUS_BTN_WIDTH, BTC_ICON_WIDTH, ONE_LETTER_SYMBOL_WIDTH, TWO_LETTER_SYMBOL_WIDTH, THREE_LETTER_SYMBOL_WIDTH, GREEN, ORANGE, RED, GREEN_HEX, ORANGE_HEX, RED_HEX, WHITE_HEX, BLACK_HEX +from .ui_consts import BTN_HEIGHT, BTN_WIDTH, BACK_BTN_HEIGHT, BACK_BTN_WIDTH, MENU_PCT, PAD_SIZE, SWITCH_HEIGHT, SWITCH_WIDTH, STATUS_BTN_HEIGHT, STATUS_BTN_WIDTH, BTC_ICON_WIDTH, ONE_LETTER_SYMBOL_WIDTH, TWO_LETTER_SYMBOL_WIDTH, THREE_LETTER_SYMBOL_WIDTH, GREEN, ORANGE, RED, GREEN_HEX, ORANGE_HEX, RED_HEX, WHITE_HEX, BLACK_HEX, TITLE_PADDING from .main_menu import MainMenu from .locked_menu import LockedMenu from .status_bar import StatusBar @@ -7,9 +7,10 @@ from .navigation_controller import NavigationController from .symbol_lib import BTC_ICONS -__all__ = ["BTN_HEIGHT", "BTN_WIDTH", +__all__ = ["BTN_HEIGHT", "BTN_WIDTH", "BACK_BTN_HEIGHT", "BACK_BTN_WIDTH", "MENU_PCT", "PAD_SIZE", + "TITLE_PADDING", "SWITCH_HEIGHT", "SWITCH_WIDTH", "STATUS_BTN_HEIGHT", "STATUS_BTN_WIDTH", "BTC_ICON_WIDTH", diff --git a/scenarios/MockUI/basic/action_screen.py b/scenarios/MockUI/basic/action_screen.py index 343e32cb..81363e52 100644 --- a/scenarios/MockUI/basic/action_screen.py +++ b/scenarios/MockUI/basic/action_screen.py @@ -1,5 +1,5 @@ import lvgl as lv -from .ui_consts import BTN_HEIGHT, BTN_WIDTH +from .ui_consts import BTN_HEIGHT, BTN_WIDTH, BACK_BTN_WIDTH, BACK_BTN_HEIGHT from .symbol_lib import BTC_ICONS class ActionScreen(lv.obj): @@ -15,11 +15,15 @@ def __init__(self, title, parent, *args, **kwargs): # Fill parent self.set_width(lv.pct(100)) self.set_height(lv.pct(100)) + # Remove padding from base object to allow full-width content + self.set_style_pad_all(0, 0) + # Remove border + self.set_style_border_width(0, 0) # If ui_state has history, show back button to the left of the title if parent.ui_state and parent.ui_state.history and len(parent.ui_state.history) > 0: self.back_btn = lv.button(self) - self.back_btn.set_size(40, 28) + self.back_btn.set_size(BACK_BTN_HEIGHT, BACK_BTN_WIDTH) self.back_ico = lv.image(self.back_btn) BTC_ICONS.CARET_LEFT.add_to_parent(self.back_ico) self.back_ico.center() diff --git a/scenarios/MockUI/basic/menu.py b/scenarios/MockUI/basic/menu.py index 8cf0d56e..33593fab 100644 --- a/scenarios/MockUI/basic/menu.py +++ b/scenarios/MockUI/basic/menu.py @@ -1,5 +1,5 @@ import lvgl as lv -from .ui_consts import BTN_HEIGHT, BTN_WIDTH, MENU_PCT, PAD_SIZE +from .ui_consts import BACK_BTN_HEIGHT, BACK_BTN_WIDTH, BTN_HEIGHT, BTN_WIDTH, MENU_PCT, PAD_SIZE, TITLE_PADDING from .symbol_lib import Icon, BTC_ICONS @@ -33,7 +33,7 @@ def __init__(self, menu_id, title, menu_items, parent, *args, **kwargs): # If ui_state has history, show back button to the left of the title if parent.ui_state and parent.ui_state.history and len(parent.ui_state.history) > 0: self.back_btn = lv.button(self) - self.back_btn.set_size(40, 28) + self.back_btn.set_size(BACK_BTN_HEIGHT, BACK_BTN_WIDTH) self.back_ico = lv.image(self.back_btn) BTC_ICONS.CARET_LEFT.add_to_parent(self.back_ico) self.back_ico.center() @@ -46,7 +46,7 @@ def __init__(self, menu_id, title, menu_items, parent, *args, **kwargs): self.title.set_text(title) self.title.set_style_text_align(lv.TEXT_ALIGN.CENTER, 0) # reduce vertical space used by the title; center remains but offset horizontally - self.title.align(lv.ALIGN.TOP_MID, 0, 6) + self.title.align(lv.ALIGN.TOP_MID, 0, 18) # Container for buttons self.container = lv.obj(self) @@ -55,10 +55,10 @@ def __init__(self, menu_id, title, menu_items, parent, *args, **kwargs): self.container.set_layout(lv.LAYOUT.FLEX) self.container.set_flex_flow(lv.FLEX_FLOW.COLUMN) self.container.set_flex_align(lv.FLEX_ALIGN.START, lv.FLEX_ALIGN.CENTER, lv.FLEX_ALIGN.CENTER) - self.container.set_style_pad_all(PAD_SIZE, 0) + self.container.set_style_pad_all(0, 0) self.container.set_style_border_width(0, 0) # smaller gap between title and container - self.container.align_to(self.title, lv.ALIGN.OUT_BOTTOM_MID, 0, PAD_SIZE) + self.container.align_to(self.title, lv.ALIGN.OUT_BOTTOM_MID, 0, TITLE_PADDING) # Build items for icon, text, target_menu_id, color in menu_items: diff --git a/scenarios/MockUI/basic/ui_consts.py b/scenarios/MockUI/basic/ui_consts.py index e19dcadb..16bbe046 100644 --- a/scenarios/MockUI/basic/ui_consts.py +++ b/scenarios/MockUI/basic/ui_consts.py @@ -3,7 +3,10 @@ BTN_HEIGHT = const(50) BTN_WIDTH = const(100) # Percentage of container width +BACK_BTN_HEIGHT = const(50) +BACK_BTN_WIDTH = const(32) MENU_PCT = const(93) +TITLE_PADDING = const(30) STATUS_BTN_HEIGHT = const(30) STATUS_BTN_WIDTH = const(40) SWITCH_HEIGHT = const(55) diff --git a/scenarios/MockUI/device/interfaces_menu.py b/scenarios/MockUI/device/interfaces_menu.py index 46867c2e..cc605d00 100644 --- a/scenarios/MockUI/device/interfaces_menu.py +++ b/scenarios/MockUI/device/interfaces_menu.py @@ -1,5 +1,5 @@ import lvgl as lv -from ..basic import BTN_HEIGHT, BTN_WIDTH, MENU_PCT, PAD_SIZE, SWITCH_HEIGHT, SWITCH_WIDTH +from ..basic import BTN_HEIGHT, BTN_WIDTH, MENU_PCT, PAD_SIZE, SWITCH_HEIGHT, SWITCH_WIDTH, TITLE_PADDING from ..basic.symbol_lib import BTC_ICONS class InterfacesMenu(lv.obj): @@ -21,6 +21,10 @@ def __init__(self, parent, *args, **kwargs): # layout self.set_width(lv.pct(100)) self.set_height(lv.pct(100)) + # Remove padding from base menu object to allow full-width content + self.set_style_pad_all(0, 0) + # Remove border + self.set_style_border_width(0, 0) # If ui_state has history, show back button to the left of the title if parent.ui_state and parent.ui_state.history and len(parent.ui_state.history) > 0: @@ -36,7 +40,7 @@ def __init__(self, parent, *args, **kwargs): self.title = lv.label(self) self.title.set_text("Enable/Disable Interfaces") self.title.set_style_text_align(lv.TEXT_ALIGN.CENTER, 0) - self.title.align(lv.ALIGN.TOP_MID, 0, 6) + self.title.align(lv.ALIGN.TOP_MID, 0, 18) # Container for rows self.container = lv.obj(self) @@ -45,8 +49,9 @@ def __init__(self, parent, *args, **kwargs): self.container.set_layout(lv.LAYOUT.FLEX) self.container.set_flex_flow(lv.FLEX_FLOW.COLUMN) self.container.set_flex_align(lv.FLEX_ALIGN.START, lv.FLEX_ALIGN.CENTER, lv.FLEX_ALIGN.CENTER) - self.container.set_style_pad_all(PAD_SIZE, 0) - self.container.align_to(self.title, lv.ALIGN.OUT_BOTTOM_MID, 0, PAD_SIZE) + self.container.set_style_pad_all(0, 0) + self.container.set_style_border_width(0, 0) + self.container.align_to(self.title, lv.ALIGN.OUT_BOTTOM_MID, 0, TITLE_PADDING) # Build interface rows: list of tuples (icon, label_text, state_attr) rows = [] diff --git a/scenarios/MockUI/wallet/add_wallet_menu.py b/scenarios/MockUI/wallet/add_wallet_menu.py index 0f8686c5..d63894cd 100644 --- a/scenarios/MockUI/wallet/add_wallet_menu.py +++ b/scenarios/MockUI/wallet/add_wallet_menu.py @@ -15,7 +15,8 @@ def __init__(self, parent, *args, **kwargs): state = getattr(parent, "specter_state", None) menu_items = [ - (BTC_ICONS.MNEMONIC, "Generate New Seedphrase", "generate_seedphrase", None), + (None, "Generate Seedphrase", None, None), + (BTC_ICONS.MNEMONIC, "New", "generate_seedphrase", None), (None, "Import Seedphrase from", None, None), ] diff --git a/scenarios/MockUI/wallet/generate_seedphrase_menu.py b/scenarios/MockUI/wallet/generate_seedphrase_menu.py index eca59b64..6f4cbc69 100644 --- a/scenarios/MockUI/wallet/generate_seedphrase_menu.py +++ b/scenarios/MockUI/wallet/generate_seedphrase_menu.py @@ -11,7 +11,7 @@ class GenerateSeedMenu(GenericMenu): """ def __init__(self, parent, *args, **kwargs): - super().__init__("generate_seedphrase", lv.SYMBOL.LIST + " Generate New Seedphrase", [], parent, *args, **kwargs) + super().__init__("generate_seedphrase", "Generate New Seedphrase", [], parent, *args, **kwargs) self.parent = parent self.state = getattr(parent, "specter_state", None) @@ -24,6 +24,7 @@ def __init__(self, parent, *args, **kwargs): name_row.set_flex_flow(lv.FLEX_FLOW.ROW) name_row.set_flex_align(lv.FLEX_ALIGN.START, lv.FLEX_ALIGN.CENTER, lv.FLEX_ALIGN.CENTER) name_row.set_style_border_width(0, 0) + name_row.set_style_pad_all(0, 0) name_lbl = lv.label(name_row) name_lbl.set_text("Wallet name:") @@ -57,6 +58,7 @@ def __init__(self, parent, *args, **kwargs): ms_row.set_flex_flow(lv.FLEX_FLOW.ROW) ms_row.set_flex_align(lv.FLEX_ALIGN.CENTER, lv.FLEX_ALIGN.CENTER, lv.FLEX_ALIGN.CENTER) ms_row.set_style_border_width(0, 0) + ms_row.set_style_pad_all(0, 0) ms_left = lv.label(ms_row) ms_left.set_text("SingleSig") @@ -79,6 +81,7 @@ def __init__(self, parent, *args, **kwargs): net_row.set_flex_flow(lv.FLEX_FLOW.ROW) net_row.set_flex_align(lv.FLEX_ALIGN.CENTER, lv.FLEX_ALIGN.CENTER, lv.FLEX_ALIGN.CENTER) net_row.set_style_border_width(0, 0) + net_row.set_style_pad_all(0, 0) net_left = lv.label(net_row) net_left.set_text("mainnet") @@ -108,6 +111,7 @@ def __init__(self, parent, *args, **kwargs): create_row.set_flex_flow(lv.FLEX_FLOW.ROW) create_row.set_flex_align(lv.FLEX_ALIGN.CENTER, lv.FLEX_ALIGN.CENTER, lv.FLEX_ALIGN.CENTER) create_row.set_style_border_width(0, 0) + create_row.set_style_pad_all(0, 0) self.create_btn = lv.button(create_row) self.create_btn.set_width(lv.pct(BTN_WIDTH)) diff --git a/scenarios/MockUI/wallet/wallet_menu.py b/scenarios/MockUI/wallet/wallet_menu.py index a9c57e9f..3c49de96 100644 --- a/scenarios/MockUI/wallet/wallet_menu.py +++ b/scenarios/MockUI/wallet/wallet_menu.py @@ -1,4 +1,4 @@ -from ..basic import RED_HEX, GenericMenu, RED, ORANGE, PAD_SIZE +from ..basic import RED_HEX, GenericMenu, RED, ORANGE, TITLE_PADDING from ..basic.symbol_lib import BTC_ICONS import lvgl as lv @@ -35,8 +35,8 @@ def __init__(self, parent, *args, **kwargs): (BTC_ICONS.EXPORT, "Export Data", "export_wallet", None) ] - # Initialize GenericMenu with basic title (we'll customize it below) - title = "Manage Wallet" + # Initialize GenericMenu with basic title (we'll remove and customize it below) + title = "" super().__init__("manage_wallet", title, menu_items, parent, *args, **kwargs) # Remove the default title label and replace with editable text area + edit button @@ -47,22 +47,16 @@ def __init__(self, parent, *args, **kwargs): self.title_anchor = lv.label(self) self.title_anchor.set_text("") self.title_anchor.set_style_text_align(lv.TEXT_ALIGN.CENTER, 0) - self.title_anchor.align(lv.ALIGN.TOP_MID, 0, 6) # Same as GenericMenu + self.title_anchor.align(lv.ALIGN.TOP_MID, 0, 18) # Same as GenericMenu - # "Wallet: " label - position at same height as title in other menus - self.wallet_label = lv.label(self) - self.wallet_label.set_text("Wallet: ") - self.wallet_label.set_style_text_align(lv.TEXT_ALIGN.LEFT, 0) - self.wallet_label.align(lv.ALIGN.TOP_LEFT, 50, 6) # Same Y offset as title - - # Text area for wallet name (editable) - align bottom to label bottom + # Text area for wallet name (editable) - align to be centered (like title_anchor) self.name_textarea = lv.textarea(self) - self.name_textarea.set_width(150) # Fixed width - self.name_textarea.set_one_line(True) + self.name_textarea.set_width(200) # Fixed width + self.name_textarea.set_height(40) # Fixed height + #self.name_textarea.set_one_line(True) + self.name_textarea.set_accepted_chars("ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}|;:,.<>?/~ ") # No newlines self.name_textarea.set_style_text_align(lv.TEXT_ALIGN.CENTER, 0) - self.name_textarea.set_style_pad_top(2, 0) # Reduce internal padding - self.name_textarea.set_style_pad_bottom(2, 0) - self.name_textarea.align_to(self.wallet_label, lv.ALIGN.OUT_RIGHT_BOTTOM, 6, 0) # Align bottom edge + self.name_textarea.align(lv.ALIGN.TOP_MID, 0, 5) # Set initial text from active wallet wallet_name = "" @@ -70,6 +64,13 @@ def __init__(self, parent, *args, **kwargs): wallet_name = state.active_wallet.name self.name_textarea.set_text(wallet_name) + # "Wallet: " label - position to left of text area + self.wallet_label = lv.label(self) + self.wallet_label.set_text("Wallet: ") + self.wallet_label.set_style_text_align(lv.TEXT_ALIGN.RIGHT, 0) + self.wallet_label.align_to(self.name_textarea, lv.ALIGN.OUT_LEFT_MID, -6, 0) # Align vertical center + + # Edit button with icon - match height of text area, align bottom # Get the actual height of the text area self.edit_btn = lv.button(self) @@ -93,7 +94,7 @@ def __init__(self, parent, *args, **kwargs): # Position container using the anchor, not the title_container # This ensures menu buttons are centered like in GenericMenu - self.container.align_to(self.title_anchor, lv.ALIGN.OUT_BOTTOM_MID, 0, PAD_SIZE) + self.container.align_to(self.title_anchor, lv.ALIGN.OUT_BOTTOM_MID, 0, TITLE_PADDING) def show_keyboard(self, e): """Show keyboard for editing wallet name."""