Improve display of comment announcements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-06-10 10:02:43 +02:00
parent a39eb38b5f
commit 552467b523
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
2 changed files with 67 additions and 22 deletions

View file

@ -1,10 +1,13 @@
<template>
<li :class="{ reply: comment.inReplyToComment }">
<article
class="media"
:class="{ selected: commentSelected }"
:id="commentId"
<li
:class="{
reply: comment.inReplyToComment,
announcement: comment.isAnnouncement,
selected: commentSelected,
}"
class="comment-element"
>
<article class="media" :id="commentId">
<popover-actor-card
:actor="comment.actor"
:inline="true"
@ -33,14 +36,12 @@
<strong :class="{ organizer: commentFromOrganizer }">{{
comment.actor.name
}}</strong>
<small class="has-text-grey">{{
usernameWithDomain(comment.actor)
}}</small>
<small>{{ usernameWithDomain(comment.actor) }}</small>
</span>
<a v-else class="comment-link has-text-grey" :href="commentURL">
<a v-else class="comment-link" :href="commentURL">
<span>{{ $t("[deleted]") }}</span>
</a>
<a class="comment-link has-text-grey" :href="commentURL">
<a class="comment-link" :href="commentURL">
<small>{{
formatDistanceToNow(new Date(comment.updatedAt), {
locale: $dateFnsLocale,
@ -265,7 +266,7 @@ export default class Comment extends Vue {
}
get commentSelected(): boolean {
return this.commentId === this.$route.hash;
return `#${this.commentId}` === this.$route.hash;
}
get commentFromOrganizer(): boolean {
@ -276,13 +277,13 @@ export default class Comment extends Vue {
get commentId(): string {
if (this.comment.originComment)
return `#comment-${this.comment.originComment.uuid}-${this.comment.uuid}`;
return `#comment-${this.comment.uuid}`;
return `comment-${this.comment.originComment.uuid}-${this.comment.uuid}`;
return `comment-${this.comment.uuid}`;
}
get commentURL(): string {
if (!this.comment.local && this.comment.url) return this.comment.url;
return this.commentId;
return `#${this.commentId}`;
}
reportModal(): void {
@ -368,6 +369,7 @@ form.reply {
a.comment-link {
text-decoration: none;
margin-left: 5px;
color: $text;
&:hover {
text-decoration: underline;
}
@ -378,6 +380,41 @@ a.comment-link {
}
}
.comment-element {
padding: 0.25rem;
border-radius: 5px;
&.announcement {
background: $purple-2;
small {
color: hsl(0, 0%, 21%);
}
}
&.selected {
background-color: $violet-1;
color: $white;
.reply-btn,
small,
strong,
.icons button {
color: $white;
}
a.comment-link:hover {
text-decoration: underline;
text-decoration-color: $white;
small {
color: $purple-3;
}
}
}
.media-left {
margin-right: 0.5rem;
}
}
.root-comment .replies {
display: flex;
@ -402,6 +439,7 @@ a.comment-link {
}
.media .media-content {
overflow-x: initial;
.content .editor-line {
display: flex;
align-items: center;
@ -433,16 +471,12 @@ a.comment-link {
.level-item.reply-btn {
font-weight: bold;
color: $primary;
color: $violet-2;
}
article {
border-radius: 4px;
margin-bottom: 5px;
&.selected {
background-color: lighten($secondary, 30%);
}
}
.comment-replies {

View file

@ -74,7 +74,7 @@
@delete-comment="deleteComment"
/>
</transition-group>
<div class="no-comments" key="no-comments">
<div v-else class="no-comments" key="no-comments">
<span>{{ $t("No comments yet") }}</span>
</div>
</transition-group>
@ -311,7 +311,18 @@ export default class CommentTree extends Vue {
return this.comments
.filter((comment) => comment.inReplyToComment == null)
.sort((a, b) => {
if (a.updatedAt && b.updatedAt) {
if (a.isAnnouncement !== b.isAnnouncement) {
return (
(b.isAnnouncement === true ? 1 : 0) -
(a.isAnnouncement === true ? 1 : 0)
);
}
if (a.publishedAt && b.publishedAt) {
return (
new Date(b.publishedAt).getTime() -
new Date(a.publishedAt).getTime()
);
} else if (a.updatedAt && b.updatedAt) {
return (
new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
);