Use big <div> to hide user menu in a more intuitive fashion.
This commit is contained in:
parent
681c3ef19d
commit
6380ea699d
1 changed files with 17 additions and 1 deletions
|
|
@ -19,15 +19,31 @@ when defined(js):
|
||||||
onLogout: onLogout
|
onLogout: onLogout
|
||||||
)
|
)
|
||||||
|
|
||||||
|
proc onClick(e: Event, n: VNode, state: UserMenu) =
|
||||||
|
state.shown = not state.shown
|
||||||
|
|
||||||
proc render*(state: UserMenu, user: User): VNode =
|
proc render*(state: UserMenu, user: User): VNode =
|
||||||
result = buildHtml():
|
result = buildHtml():
|
||||||
tdiv():
|
tdiv():
|
||||||
figure(class="avatar c-hand",
|
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)
|
img(src=user.avatarUrl, title=user.name)
|
||||||
if user.isOnline:
|
if user.isOnline:
|
||||||
italic(class="avatar-presense online")
|
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(
|
ul(class="menu menu-right", style=style(
|
||||||
StyleAttr.display, if state.shown: "inherit" else: "none"
|
StyleAttr.display, if state.shown: "inherit" else: "none"
|
||||||
)):
|
)):
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue