Use big <div> to hide user menu in a more intuitive fashion.

This commit is contained in:
Dominik Picheta 2018-05-14 21:53:13 +01:00
commit 6380ea699d

View file

@ -19,15 +19,31 @@ when defined(js):
onLogout: onLogout
)
proc onClick(e: Event, n: VNode, state: UserMenu) =
state.shown = not state.shown
proc render*(state: UserMenu, user: User): VNode =
result = buildHtml():
tdiv():
figure(class="avatar c-hand",
onClick=(e: Event, n: VNode) => (state.shown = not state.shown)):
onClick=(e: Event, n: VNode) => onClick(e, n, state)):
img(src=user.avatarUrl, title=user.name)
if user.isOnline:
italic(class="avatar-presense online")
tdiv(style=style([
(StyleAttr.width, kstring"999999px"),
(StyleAttr.height, kstring"999999px"),
(StyleAttr.position, kstring"absolute"),
(StyleAttr.left, kstring"0"),
(StyleAttr.top, kstring"0"),
(
StyleAttr.display,
if state.shown: kstring"block" else: kstring"none"
)
]),
onClick=(e: Event, n: VNode) => (state.shown = false))
ul(class="menu menu-right", style=style(
StyleAttr.display, if state.shown: "inherit" else: "none"
)):