1
0
mirror of https://github.com/trezor/trezor-firmware.git synced 2025-06-21 07:28:46 +00:00

apps/managment/wipe: style btns and elements

This commit is contained in:
Peter Jensen 2018-01-23 14:18:13 +01:00 committed by Jan Pochyla
parent dc5049a3d6
commit b64be539d4
7 changed files with 173 additions and 125 deletions

View File

@ -8,10 +8,13 @@ async def layout_wipe_device(ctx, msg):
from ..common import storage from ..common import storage
await hold_to_confirm(ctx, Text( await hold_to_confirm(ctx, Text(
'WIPE DEVICE', 'Wipe device',
ui.ICON_WIPE, ui.ICON_WIPE,
ui.NORMAL, 'Do you really want to', 'wipe the device?', ui.NORMAL, 'Do you really want to', 'wipe the device?',
ui.NORMAL, '', 'All data will be lost.')) ui.NORMAL, '', 'All data will be lost.',
icon_color=ui.RED),
button_style=ui.BTN_CANCEL,
loader_style=ui.LDR_DANGER)
storage.wipe() storage.wipe()

View File

@ -112,7 +112,7 @@ def header(title: str,
bg: int=BG, bg: int=BG,
ifg: int=BG): ifg: int=BG):
if icon is not None: if icon is not None:
display.icon(14, 18, res.load(icon), ifg, bg) display.icon(14, 16, res.load(icon), ifg, bg)
display.text(44, 35, title, BOLD, fg, bg) display.text(44, 35, title, BOLD, fg, bg)

View File

@ -21,16 +21,12 @@ BORDER = const(4) # border size in pixels
class Button(Widget): class Button(Widget):
def __init__(self, area, content, def __init__(self, area, content, style=ui.BTN_KEY, absolute=False):
normal_style=None,
active_style=None,
disabled_style=None,
absolute=False):
self.area = area self.area = area
self.content = content self.content = content
self.normal_style = normal_style or ui.BTN_KEY self.normal_style = style['normal'] or ui.BTN_KEY['normal']
self.active_style = active_style or ui.BTN_KEY_ACTIVE self.active_style = style['active'] or ui.BTN_KEY['active']
self.disabled_style = disabled_style or ui.BTN_KEY_DISABLED self.disabled_style = style['disabled'] or ui.BTN_KEY['disabled']
self.absolute = absolute self.absolute = absolute
self.state = BTN_DIRTY self.state = BTN_DIRTY

View File

@ -1,8 +1,7 @@
from micropython import const from micropython import const
from trezor import loop from trezor import loop, res, ui
from trezor import ui, res
from trezor.ui import Widget from trezor.ui import Widget
from trezor.ui.button import Button, BTN_CLICKED, BTN_STARTED, BTN_ACTIVE from trezor.ui.button import BTN_ACTIVE, BTN_CLICKED, BTN_STARTED, Button
from trezor.ui.loader import Loader from trezor.ui.loader import Loader
CONFIRMED = const(1) CONFIRMED = const(1)
@ -16,16 +15,13 @@ class ConfirmDialog(Widget):
def __init__(self, content, confirm=DEFAULT_CONFIRM, cancel=DEFAULT_CANCEL): def __init__(self, content, confirm=DEFAULT_CONFIRM, cancel=DEFAULT_CANCEL):
self.content = content self.content = content
if cancel is not None: if cancel is not None:
self.confirm = Button(ui.grid(9, n_x=2), confirm, self.confirm = Button(
normal_style=ui.BTN_CONFIRM, ui.grid(9, n_x=2), confirm, style=ui.BTN_CONFIRM)
active_style=ui.BTN_CONFIRM_ACTIVE) self.cancel = Button(
self.cancel = Button(ui.grid(8, n_x=2), cancel, ui.grid(8, n_x=2), cancel, style=ui.BTN_CANCEL)
normal_style=ui.BTN_CANCEL,
active_style=ui.BTN_CANCEL_ACTIVE)
else: else:
self.confirm = Button(ui.grid(4, n_x=1), confirm, self.confirm = Button(
normal_style=ui.BTN_CONFIRM, ui.grid(4, n_x=1), confirm, style=ui.BTN_CONFIRM)
active_style=ui.BTN_CONFIRM_ACTIVE)
self.cancel = None self.cancel = None
def render(self): def render(self):
@ -50,12 +46,14 @@ _STOPPED = const(-2)
class HoldToConfirmDialog(Widget): class HoldToConfirmDialog(Widget):
def __init__(self, content, hold='Hold to confirm', *args, **kwargs): def __init__(self,
content,
hold='Hold to confirm',
button_style=ui.BTN_CONFIRM,
loader_style=ui.LDR_DEFAULT):
self.content = content self.content = content
self.button = Button(ui.grid(4, n_x=1), hold, self.button = Button(ui.grid(4, n_x=1), hold, style=button_style)
normal_style=ui.BTN_CONFIRM, self.loader = Loader(style=loader_style)
active_style=ui.BTN_CONFIRM_ACTIVE)
self.loader = Loader(*args, **kwargs)
def render(self): def render(self):
self.button.render() self.button.render()

View File

@ -6,10 +6,10 @@ from trezor.ui.button import Button, BTN_CLICKED, ICON
def key_buttons(): def key_buttons():
keys = ['abc', 'def', 'ghi', 'jkl', 'mno', 'pqr', 'stu', 'vwx', 'yz'] keys = ['abc', 'def', 'ghi', 'jkl', 'mno', 'pqr', 'stu', 'vwx', 'yz']
return [Button(ui.grid(i + 3, n_y=4), k, return [
normal_style=ui.BTN_KEY, Button(ui.grid(i + 3, n_y=4), k, style=ui.BTN_KEY)
active_style=ui.BTN_KEY_ACTIVE, for i, k in enumerate(keys)
disabled_style=ui.BTN_KEY_DISABLED) for i, k in enumerate(keys)] ]
def compute_mask(text: str) -> int: def compute_mask(text: str) -> int:
@ -30,19 +30,19 @@ class Input(Button):
self.pending = False self.pending = False
def edit(self, content: str, word: str, pending: bool): def edit(self, content: str, word: str, pending: bool):
self.content = content
self.word = word self.word = word
self.content = content
self.pending = pending self.pending = pending
self.taint() self.taint()
if content == word: # confirm button if content == word: # confirm button
self.enable() self.enable()
self.normal_style = ui.BTN_CONFIRM self.normal_style = ui.BTN_CONFIRM['normal']
self.active_style = ui.BTN_CONFIRM_ACTIVE self.active_style = ui.BTN_CONFIRM['active']
self.icon = ui.ICON_CONFIRM self.icon = ui.ICON_CONFIRM
elif word: # auto-complete button elif word: # auto-complete button
self.enable() self.enable()
self.normal_style = ui.BTN_KEY self.normal_style = ui.BTN_KEY['normal']
self.active_style = ui.BTN_KEY_ACTIVE self.active_style = ui.BTN_KEY['active']
self.icon = ui.ICON_CLICK self.icon = ui.ICON_CLICK
else: # disabled button else: # disabled button
self.disable() self.disable()
@ -83,8 +83,7 @@ class MnemonicKeyboard(ui.Widget):
self.input = Input(ui.grid(1, n_x=4, n_y=4, cells_x=3), '', '') self.input = Input(ui.grid(1, n_x=4, n_y=4, cells_x=3), '', '')
self.back = Button(ui.grid(0, n_x=4, n_y=4), self.back = Button(ui.grid(0, n_x=4, n_y=4),
res.load(ui.ICON_BACK), res.load(ui.ICON_BACK),
normal_style=ui.BTN_CLEAR, style=ui.BTN_CLEAR)
active_style=ui.BTN_CLEAR_ACTIVE)
self.keys = key_buttons() self.keys = key_buttons()
self.pbutton = None # pending key button self.pbutton = None # pending key button
self.pindex = 0 # index of current pending char in pbutton self.pindex = 0 # index of current pending char in pbutton

View File

@ -7,11 +7,11 @@ from trezor import res
class Loader(ui.Widget): class Loader(ui.Widget):
def __init__(self, target_ms=1000, normal_style=None, active_style=None): def __init__(self, target_ms=1000, style=ui.LDR_DEFAULT):
self.target_ms = target_ms self.target_ms = target_ms
self.start_ticks_ms = None self.start_ticks_ms = None
self.normal_style = normal_style or ui.LDR_DEFAULT self.normal_style = style['normal'] or ui.LDR_DEFAULT['normal']
self.active_style = active_style or ui.LDR_DEFAULT_ACTIVE self.active_style = style['active'] or ui.LDR_DEFAULT['active']
def start(self): def start(self):
self.start_ticks_ms = utime.ticks_ms() self.start_ticks_ms = utime.ticks_ms()

View File

@ -60,100 +60,152 @@ ICON_SWIPE = 'trezor/res/swipedown.toig'
# buttons # buttons
BTN_DEFAULT = { BTN_DEFAULT = {
'normal': {
'bg-color': BG, 'bg-color': BG,
'fg-color': FG, 'fg-color': FG,
'text-style': NORMAL, 'text-style': NORMAL,
'border-color': BG, 'border-color': BG,
'radius': RADIUS, 'radius': RADIUS,
} },
BTN_DEFAULT_ACTIVE = { 'active': {
'bg-color': FG, 'bg-color': FG,
'fg-color': BG, 'fg-color': BG,
'text-style': BOLD, 'text-style': BOLD,
'border-color': FG, 'border-color': FG,
'radius': RADIUS, 'radius': RADIUS,
} },
BTN_DEFAULT_DISABLED = { 'disabled': {
'bg-color': BG, 'bg-color': BG,
'fg-color': GREY, 'fg-color': GREY,
'text-style': NORMAL, 'text-style': NORMAL,
'border-color': BG, 'border-color': BG,
'radius': RADIUS, 'radius': RADIUS,
} }
}
BTN_CANCEL = { BTN_CANCEL = {
'normal': {
'bg-color': RED, 'bg-color': RED,
'fg-color': FG, 'fg-color': FG,
'text-style': BOLD, 'text-style': BOLD,
'border-color': BG, 'border-color': BG,
'radius': RADIUS, 'radius': RADIUS,
} },
BTN_CANCEL_ACTIVE = { 'active': {
'bg-color': FG, 'bg-color': FG,
'fg-color': RED, 'fg-color': RED,
'text-style': BOLD, 'text-style': BOLD,
'border-color': FG, 'border-color': FG,
'radius': RADIUS, 'radius': RADIUS,
},
'disabled': {
'bg-color': BG,
'fg-color': GREY,
'text-style': NORMAL,
'border-color': BG,
'radius': RADIUS,
} }
}
BTN_CONFIRM = { BTN_CONFIRM = {
'normal': {
'bg-color': GREEN, 'bg-color': GREEN,
'fg-color': FG, 'fg-color': FG,
'text-style': BOLD, 'text-style': BOLD,
'border-color': BG, 'border-color': BG,
'radius': RADIUS, 'radius': RADIUS,
} },
BTN_CONFIRM_ACTIVE = { 'active': {
'bg-color': FG, 'bg-color': FG,
'fg-color': GREEN, 'fg-color': GREEN,
'text-style': BOLD, 'text-style': BOLD,
'border-color': FG, 'border-color': FG,
'radius': RADIUS, 'radius': RADIUS,
},
'disabled': {
'bg-color': BG,
'fg-color': GREY,
'text-style': NORMAL,
'border-color': BG,
'radius': RADIUS,
} }
}
BTN_CLEAR = { BTN_CLEAR = {
'normal': {
'bg-color': ORANGE, 'bg-color': ORANGE,
'fg-color': FG, 'fg-color': FG,
'text-style': NORMAL, 'text-style': NORMAL,
'border-color': BG, 'border-color': BG,
'radius': RADIUS, 'radius': RADIUS,
} },
BTN_CLEAR_ACTIVE = { 'active': {
'bg-color': BG, 'bg-color': BG,
'fg-color': GREY, 'fg-color': GREY,
'text-style': NORMAL, 'text-style': NORMAL,
'border-color': BG, 'border-color': BG,
'radius': RADIUS, 'radius': RADIUS,
} },
BTN_KEY = { 'disabled': {
'bg-color': BLACKISH,
'fg-color': FG,
'text-style': MONO,
'border-color': BG,
'radius': RADIUS,
}
BTN_KEY_ACTIVE = {
'bg-color': FG,
'fg-color': BLACKISH,
'text-style': MONO,
'border-color': FG,
'radius': RADIUS,
}
BTN_KEY_DISABLED = {
'bg-color': BG, 'bg-color': BG,
'fg-color': GREY, 'fg-color': GREY,
'text-style': MONO, 'text-style': MONO,
'border-color': BG, 'border-color': BG,
'radius': RADIUS, 'radius': RADIUS,
} }
}
BTN_KEY = {
'normal': {
'bg-color': BLACKISH,
'fg-color': FG,
'text-style': MONO,
'border-color': BG,
'radius': RADIUS,
},
'active': {
'bg-color': FG,
'fg-color': BLACKISH,
'text-style': MONO,
'border-color': FG,
'radius': RADIUS,
},
'disabled': {
'bg-color': BG,
'fg-color': GREY,
'text-style': MONO,
'border-color': BG,
'radius': RADIUS,
}
}
# loader # loader
LDR_DEFAULT = { LDR_DEFAULT = {
'normal': {
'bg-color': BG, 'bg-color': BG,
'fg-color': GREEN, 'fg-color': GREEN,
'icon': None, 'icon': None,
'icon-fg-color': None, 'icon-fg-color': None,
} },
LDR_DEFAULT_ACTIVE = { 'active': {
'bg-color': BG, 'bg-color': BG,
'fg-color': GREEN, 'fg-color': GREEN,
'icon': ICON_SEND, 'icon': ICON_SEND,
'icon-fg-color': WHITE, 'icon-fg-color': WHITE,
} }
}
LDR_DANGER = {
'normal': {
'bg-color': BG,
'fg-color': RED,
'icon': None,
'icon-fg-color': None,
},
'active': {
'bg-color': BG,
'fg-color': RED,
'icon': ICON_SEND,
'icon-fg-color': WHITE,
}
}