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
await hold_to_confirm(ctx, Text(
'WIPE DEVICE',
'Wipe device',
ui.ICON_WIPE,
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()

View File

@ -112,7 +112,7 @@ def header(title: str,
bg: int=BG,
ifg: int=BG):
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)

View File

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

View File

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

View File

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

View File

@ -7,11 +7,11 @@ from trezor import res
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.start_ticks_ms = None
self.normal_style = normal_style or ui.LDR_DEFAULT
self.active_style = active_style or ui.LDR_DEFAULT_ACTIVE
self.normal_style = style['normal'] or ui.LDR_DEFAULT['normal']
self.active_style = style['active'] or ui.LDR_DEFAULT['active']
def start(self):
self.start_ticks_ms = utime.ticks_ms()

View File

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