2021-12-27 01:37:38 +00:00
|
|
|
# SPDX-License-Identifier: AGPL-3.0-only
|
2022-06-04 00:18:26 +00:00
|
|
|
import strutils, strformat
|
2019-11-12 09:57:28 +00:00
|
|
|
import karax/[karaxdsl, vdom, vstyles]
|
2020-06-01 00:22:22 +00:00
|
|
|
import ".."/[types, utils]
|
2019-07-10 22:42:31 +00:00
|
|
|
|
2023-01-08 23:29:59 +00:00
|
|
|
const smallWebp* = "?name=small&format=webp"
|
|
|
|
|
|
|
|
proc getSmallPic*(url: string): string =
|
|
|
|
result = url
|
|
|
|
if "?" notin url and not url.endsWith("placeholder.png"):
|
|
|
|
result &= smallWebp
|
|
|
|
result = getPicUrl(result)
|
|
|
|
|
2019-08-15 02:00:40 +00:00
|
|
|
proc icon*(icon: string; text=""; title=""; class=""; href=""): VNode =
|
|
|
|
var c = "icon-" & icon
|
2022-06-04 00:18:26 +00:00
|
|
|
if class.len > 0: c = &"{c} {class}"
|
2019-08-15 02:00:40 +00:00
|
|
|
buildHtml(tdiv(class="icon-container")):
|
|
|
|
if href.len > 0:
|
|
|
|
a(class=c, title=title, href=href)
|
|
|
|
else:
|
|
|
|
span(class=c, title=title)
|
|
|
|
|
|
|
|
if text.len > 0:
|
|
|
|
text " " & text
|
|
|
|
|
2022-01-23 06:04:50 +00:00
|
|
|
proc linkUser*(user: User, class=""): VNode =
|
2019-07-10 22:42:31 +00:00
|
|
|
let
|
|
|
|
isName = "username" notin class
|
2022-01-23 06:04:50 +00:00
|
|
|
href = "/" & user.username
|
|
|
|
nameText = if isName: user.fullname
|
|
|
|
else: "@" & user.username
|
2019-07-10 22:42:31 +00:00
|
|
|
|
|
|
|
buildHtml(a(href=href, class=class, title=nameText)):
|
|
|
|
text nameText
|
2022-01-23 06:04:50 +00:00
|
|
|
if isName and user.verified:
|
2019-08-15 02:00:40 +00:00
|
|
|
icon "ok", class="verified-icon", title="Verified account"
|
2022-01-23 06:04:50 +00:00
|
|
|
if isName and user.protected:
|
2019-08-15 02:00:40 +00:00
|
|
|
text " "
|
2020-11-08 00:32:17 +00:00
|
|
|
icon "lock", title="Protected account"
|
2019-07-10 22:42:31 +00:00
|
|
|
|
2019-08-12 01:32:27 +00:00
|
|
|
proc linkText*(text: string; class=""): VNode =
|
2021-12-30 03:18:40 +00:00
|
|
|
let url = if "http" notin text: https & text else: text
|
2019-08-12 01:32:27 +00:00
|
|
|
buildHtml():
|
|
|
|
a(href=url, class=class): text text
|
2019-09-05 20:40:36 +00:00
|
|
|
|
2019-09-17 19:01:44 +00:00
|
|
|
proc hiddenField*(name, value: string): VNode =
|
2019-09-05 20:53:23 +00:00
|
|
|
buildHtml():
|
2019-11-12 09:57:28 +00:00
|
|
|
input(name=name, style={display: "none"}, value=value)
|
2019-09-17 19:01:44 +00:00
|
|
|
|
|
|
|
proc refererField*(path: string): VNode =
|
|
|
|
hiddenField("referer", path)
|
2019-09-05 20:53:23 +00:00
|
|
|
|
|
|
|
proc buttonReferer*(action, text, path: string; class=""; `method`="post"): VNode =
|
|
|
|
buildHtml(form(`method`=`method`, action=action, class=class)):
|
|
|
|
refererField path
|
|
|
|
button(`type`="submit"):
|
|
|
|
text text
|
2019-09-17 19:01:44 +00:00
|
|
|
|
|
|
|
proc genCheckbox*(pref, label: string; state: bool): VNode =
|
2019-09-18 23:01:47 +00:00
|
|
|
buildHtml(label(class="pref-group checkbox-container")):
|
2019-09-18 23:11:35 +00:00
|
|
|
text label
|
2023-04-21 12:41:30 +00:00
|
|
|
input(name=pref, `type`="checkbox", checked=state)
|
2019-09-18 23:11:35 +00:00
|
|
|
span(class="checkbox")
|
2019-09-17 19:01:44 +00:00
|
|
|
|
2022-11-27 15:06:36 +00:00
|
|
|
proc genInput*(pref, label, state, placeholder: string; class=""; autofocus=true): VNode =
|
2019-11-26 04:45:05 +00:00
|
|
|
let p = placeholder
|
2019-09-17 19:01:44 +00:00
|
|
|
buildHtml(tdiv(class=("pref-group pref-input " & class))):
|
|
|
|
if label.len > 0:
|
|
|
|
label(`for`=pref): text label
|
2023-04-21 12:41:30 +00:00
|
|
|
input(name=pref, `type`="text", placeholder=p, value=state, autofocus=(autofocus and state.len == 0))
|
2019-09-17 19:01:44 +00:00
|
|
|
|
|
|
|
proc genSelect*(pref, label, state: string; options: seq[string]): VNode =
|
2019-10-23 10:05:08 +00:00
|
|
|
buildHtml(tdiv(class="pref-group pref-input")):
|
2019-09-17 19:01:44 +00:00
|
|
|
label(`for`=pref): text label
|
|
|
|
select(name=pref):
|
|
|
|
for opt in options:
|
2023-04-21 12:41:30 +00:00
|
|
|
option(value=opt, selected=(opt == state)):
|
|
|
|
text opt
|
2019-09-19 20:11:38 +00:00
|
|
|
|
|
|
|
proc genDate*(pref, state: string): VNode =
|
2019-09-19 21:36:21 +00:00
|
|
|
buildHtml(span(class="date-input")):
|
2019-11-12 09:57:28 +00:00
|
|
|
input(name=pref, `type`="date", value=state)
|
2019-09-19 20:11:38 +00:00
|
|
|
icon "calendar"
|
2019-09-20 23:08:30 +00:00
|
|
|
|
|
|
|
proc genImg*(url: string; class=""): VNode =
|
|
|
|
buildHtml():
|
2020-06-16 22:20:34 +00:00
|
|
|
img(src=getPicUrl(url), class=class, alt="")
|
2019-09-20 23:08:30 +00:00
|
|
|
|
|
|
|
proc getTabClass*(query: Query; tab: QueryKind): string =
|
2023-04-21 12:41:30 +00:00
|
|
|
if query.kind == tab: "tab-item active"
|
|
|
|
else: "tab-item"
|
2022-01-14 02:16:09 +00:00
|
|
|
|
|
|
|
proc getAvatarClass*(prefs: Prefs): string =
|
2023-04-21 12:41:30 +00:00
|
|
|
if prefs.squareAvatars: "avatar"
|
|
|
|
else: "avatar round"
|