Merge pull request #504 from trezor/tsusanka/numpad-improve

ui: add back button to NumPad

src/trezor/ui/num_pad.py

@@ -1,8 +1,10 @@
-from trezor import ui
+from trezor import res, ui
 from trezor.ui import display
 from trezor.ui.button import BTN_CLICKED, Button
 
-ITEMS_PER_PAGE = 11
+ITEMS_PER_PAGE = 10
+PLUS_BUTTON_POSITION = 11
+BACK_BUTTON_POSITION = 9
 
 
 def digit_area(i):
@@ -34,6 +36,9 @@ class NumPad(ui.Widget):
                 if "+" in btn.content:
                     self.page += 1
                     self._generate_buttons()
+                elif isinstance(btn.content, bytes):
+                    self.page -= 1
+                    self._generate_buttons()
                 else:
                     return btn.content
 
@@ -41,7 +46,24 @@ class NumPad(ui.Widget):
         display.clear()  # we need to clear old buttons
         start = self.start + (ITEMS_PER_PAGE + 1) * self.page - self.page
         end = min(self.end, (ITEMS_PER_PAGE + 1) * (self.page + 1) - self.page)
+
         digits = list(range(start, end))
-        if len(digits) == ITEMS_PER_PAGE:
-            digits.append(str(end) + "+")
         self.buttons = [Button(digit_area(i), str(d)) for i, d in enumerate(digits)]
+        if len(digits) == ITEMS_PER_PAGE:
+            more = Button(
+                digit_area(PLUS_BUTTON_POSITION), str(end) + "+", style=ui.BTN_KEY_DARK
+            )
+            self.buttons.append(more)
+            # move the tenth button to its proper place and make place for the back button
+            self.buttons[BACK_BUTTON_POSITION].area = digit_area(
+                BACK_BUTTON_POSITION + 1
+            )
+
+        back = Button(
+            digit_area(BACK_BUTTON_POSITION),
+            res.load(ui.ICON_BACK),
+            style=ui.BTN_KEY_DARK,
+        )
+        if self.page == 0:
+            back.disable()
+        self.buttons.append(back)

src/trezor/ui/style.py

@@ -36,6 +36,8 @@ BLUE_GRAY = rgb(0x60, 0x7D, 0x8B)
 BLACK = rgb(0x00, 0x00, 0x00)
 WHITE = rgb(0xFA, 0xFA, 0xFA)
 BLACKISH = rgb(0x30, 0x30, 0x30)
+DARK_BLACK = rgb(0x10, 0x10, 0x10)
+DARK_WHITE = rgb(0xE8, 0xE8, 0xE8)
 
 TITLE_GREY = rgb(0x9B, 0x9B, 0x9B)
 ORANGE_ICON = rgb(0xF5, 0xA6, 0x23)
@@ -186,6 +188,30 @@ BTN_KEY = {
     },
 }
 
+BTN_KEY_DARK = {
+    "normal": {
+        "bg-color": DARK_BLACK,
+        "fg-color": DARK_WHITE,
+        "text-style": MONO,
+        "border-color": BG,
+        "radius": RADIUS,
+    },
+    "active": {
+        "bg-color": FG,
+        "fg-color": DARK_BLACK,
+        "text-style": MONO,
+        "border-color": FG,
+        "radius": RADIUS,
+    },
+    "disabled": {
+        "bg-color": DARK_BLACK,
+        "fg-color": GREY,
+        "text-style": MONO,
+        "border-color": BG,
+        "radius": RADIUS,
+    },
+}
+
 BTN_KEY_CONFIRM = {
     "normal": {
         "bg-color": GREEN,