MockUI: Modified layout a little bit

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",

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()

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:

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)

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 = []

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),
         ]
 

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))

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,29 +47,30 @@ 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 = ""
         if state and state.active_wallet:
             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."""