Improve comment threads and reply syntax
* On Forums and photo comment threads: display the poster's username below their display name, if their username differs. If they do not have a distinct display name, a small @ appears in front of their display name instead. * On Quote & Reply, wrap the @mention with a Markdown hyperlink to the specific comment ID.
This commit is contained in:
Noah Petherbridge
parent
c1cf5df70e
commit
39398a1f78
|
|
@ -109,7 +109,14 @@ func NewPost() http.HandlerFunc {
|
|||
if len(quoteCommentID) > 0 {
|
||||
if i, err := strconv.Atoi(quoteCommentID); err == nil {
|
||||
if comment, err := models.GetComment(uint64(i)); err == nil {
|
||||
message = markdown.Quotify(comment.Message) + "\n\n"
|
||||
|
||||
// Prefill the message with the @mention and quoted post.
|
||||
message = fmt.Sprintf(
|
||||
"[@%s](/go/comment?id=%d)\n\n%s\n\n",
|
||||
comment.User.Username,
|
||||
comment.ID,
|
||||
markdown.Quotify(comment.Message),
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,13 +8,20 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
// at the page header instead of going to the dedicated comment page.
|
||||
(document.querySelectorAll(".nonshy-quote-button") || []).forEach(node => {
|
||||
const message = node.dataset.quoteBody,
|
||||
replyTo = node.dataset.replyTo;
|
||||
replyTo = node.dataset.replyTo,
|
||||
commentID = node.dataset.commentId;
|
||||
|
||||
// If we have a comment ID, have the at-mention link to it.
|
||||
let atMention = "@" + replyTo;
|
||||
if (commentID) {
|
||||
atMention = `[@${replyTo}](/go/comment?id=${commentID})`;
|
||||
}
|
||||
|
||||
node.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (replyTo) {
|
||||
$message.value += "@" + replyTo + "\n\n";
|
||||
$message.value += atMention + "\n\n";
|
||||
}
|
||||
|
||||
// Prepare the quoted message.
|
||||
|
|
@ -30,11 +37,18 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
});
|
||||
|
||||
(document.querySelectorAll(".nonshy-reply-button") || []).forEach(node => {
|
||||
const replyTo = node.dataset.replyTo;
|
||||
const replyTo = node.dataset.replyTo,
|
||||
commentID = node.dataset.commentId;
|
||||
|
||||
// If we have a comment ID, have the at-mention link to it.
|
||||
let atMention = "@" + replyTo;
|
||||
if (commentID) {
|
||||
atMention = `[@${replyTo}](/go/comment?id=${commentID})`;
|
||||
}
|
||||
|
||||
node.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
$message.value += "@" + replyTo + "\n\n";
|
||||
$message.value += atMention + "\n\n";
|
||||
$message.scrollIntoView();
|
||||
$message.focus();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
{{define "title"}}Untitled{{end}}
|
||||
{{define "content"}}{{end}}
|
||||
{{define "scripts"}}{{end}}
|
||||
{{define "head-scripts"}}{{end}}
|
||||
{{define "base"}}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
|
@ -10,18 +9,17 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/bulma.min.css?build={{.BuildHash}}">
|
||||
<!-- Bulma theme CSS -->
|
||||
{{if eq .WebsiteTheme "light"}}
|
||||
{{- if eq .WebsiteTheme "light" -}}
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/bulma-no-dark-mode.min.css?build={{.BuildHash}}">
|
||||
{{else if eq .WebsiteTheme "dark"}}
|
||||
{{- else if eq .WebsiteTheme "dark" -}}
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/bulma-dark-theme.css?build={{.BuildHash}}">
|
||||
{{else}}
|
||||
{{- else -}}
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/nonshy-prefers-dark.css?build={{.BuildHash}}">
|
||||
{{end}}
|
||||
{{- end -}}
|
||||
<link rel="stylesheet" href="/static/fontawesome-free-6.6.0-web/css/all.css">
|
||||
<link rel="stylesheet" href="/static/css/theme.css?build={{.BuildHash}}">
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<title>{{template "title" .}} - {{ .Title }}</title>
|
||||
{{template "head-scripts" .}}
|
||||
</head>
|
||||
<body class="has-navbar-fixed-top">
|
||||
<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
|
||||
|
|
|
|||
|
|
@ -140,16 +140,29 @@
|
|||
</div>
|
||||
[unavailable]
|
||||
{{else}}
|
||||
<!-- User has no display name distinct from their username? -->
|
||||
{{ $NoDisplayName := eq $c.User.NameOrUsername $c.User.Username }}
|
||||
|
||||
<div>
|
||||
<a href="/u/{{$c.User.Username}}">
|
||||
{{template "avatar-96x96" $c.User}}
|
||||
</a>
|
||||
</div>
|
||||
<a href="/u/{{$c.User.Username}}">{{$c.User.NameOrUsername}}</a>
|
||||
<a href="/u/{{$c.User.Username}}">
|
||||
{{- if $NoDisplayName}}<small class="is-size-7">@</small>{{end -}}
|
||||
{{$c.User.NameOrUsername}}
|
||||
</a>
|
||||
|
||||
<!-- Username if the display name wasn't identical -->
|
||||
{{if not $NoDisplayName}}
|
||||
<div class="is-size-7">
|
||||
@{{$c.User.Username}}
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
{{if $c.User.IsAdmin}}
|
||||
<div class="is-size-7 mt-1">
|
||||
<div class="is-size-7 mt-2">
|
||||
<span class="tag is-danger is-light">
|
||||
<span class="icon"><i class="fa fa-peace"></i></span>
|
||||
<span>Admin</span>
|
||||
|
|
@ -306,14 +319,14 @@
|
|||
{{if not $Root.Thread.NoReply}}
|
||||
<div class="column is-narrow">
|
||||
<a href="/forum/post?to={{$Root.Forum.Fragment}}&thread={{$Root.Thread.ID}}"e={{.ID}}"
|
||||
class="has-text-dark nonshy-quote-button" data-quote-body="{{.Message}}" data-reply-to="{{.User.Username}}">
|
||||
class="has-text-dark nonshy-quote-button" data-quote-body="{{.Message}}" data-reply-to="{{.User.Username}}" data-comment-id="{{.ID}}">
|
||||
<span class="icon"><i class="fa fa-quote-right"></i></span>
|
||||
<span>Quote</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<a href="/forum/post?to={{$Root.Forum.Fragment}}&thread={{$Root.Thread.ID}}"
|
||||
class="has-text-dark nonshy-reply-button" data-reply-to="{{.User.Username}}">
|
||||
class="has-text-dark nonshy-reply-button" data-reply-to="{{.User.Username}}" data-comment-id="{{.ID}}">
|
||||
<span class="icon"><i class="fa fa-reply"></i></span>
|
||||
<span>Reply</span>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -280,12 +280,25 @@
|
|||
<div class="box has-background-link-light has-text-dark" id="p{{.ID}}">
|
||||
<div class="columns">
|
||||
<div class="column is-2 has-text-centered">
|
||||
<!-- User has no display name distinct from their username? -->
|
||||
{{ $NoDisplayName := eq .User.NameOrUsername .User.Username }}
|
||||
|
||||
<div>
|
||||
<a href="/u/{{.User.Username}}">
|
||||
{{template "avatar-96x96" .User}}
|
||||
</a>
|
||||
</div>
|
||||
<a href="/u/{{.User.Username}}">{{.User.NameOrUsername}}</a>
|
||||
<a href="/u/{{.User.Username}}">
|
||||
{{- if $NoDisplayName}}<small class="is-size-7">@</small>{{end -}}
|
||||
{{.User.NameOrUsername}}
|
||||
</a>
|
||||
|
||||
<!-- Username if the display name wasn't identical -->
|
||||
{{if not $NoDisplayName}}
|
||||
<div class="is-size-7">
|
||||
@{{.User.Username}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<div class="column content">
|
||||
|
|
@ -341,14 +354,14 @@
|
|||
|
||||
<div class="column is-narrow">
|
||||
<a href="#"
|
||||
class="has-text-dark nonshy-quote-button" data-quote-body="{{.Message}}" data-reply-to="{{.User.Username}}">
|
||||
class="has-text-dark nonshy-quote-button" data-quote-body="{{.Message}}" data-reply-to="{{.User.Username}}" data-comment-id="{{.ID}}">
|
||||
<span class="icon"><i class="fa fa-quote-right"></i></span>
|
||||
<span>Quote</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<a href="#"
|
||||
class="has-text-dark nonshy-reply-button" data-reply-to="{{.User.Username}}">
|
||||
class="has-text-dark nonshy-reply-button" data-reply-to="{{.User.Username}}" data-comment-id="{{.ID}}">
|
||||
<span class="icon"><i class="fa fa-reply"></i></span>
|
||||
<span>Reply</span>
|
||||
</a>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user