forked from potsda.mn/mobilizon
Improve display of comment announcements
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
a39eb38b5f
commit
552467b523
|
@ -1,10 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<li :class="{ reply: comment.inReplyToComment }">
|
<li
|
||||||
<article
|
:class="{
|
||||||
class="media"
|
reply: comment.inReplyToComment,
|
||||||
:class="{ selected: commentSelected }"
|
announcement: comment.isAnnouncement,
|
||||||
:id="commentId"
|
selected: commentSelected,
|
||||||
>
|
}"
|
||||||
|
class="comment-element"
|
||||||
|
>
|
||||||
|
<article class="media" :id="commentId">
|
||||||
<popover-actor-card
|
<popover-actor-card
|
||||||
:actor="comment.actor"
|
:actor="comment.actor"
|
||||||
:inline="true"
|
:inline="true"
|
||||||
|
@ -33,14 +36,12 @@
|
||||||
<strong :class="{ organizer: commentFromOrganizer }">{{
|
<strong :class="{ organizer: commentFromOrganizer }">{{
|
||||||
comment.actor.name
|
comment.actor.name
|
||||||
}}</strong>
|
}}</strong>
|
||||||
<small class="has-text-grey">{{
|
<small>{{ usernameWithDomain(comment.actor) }}</small>
|
||||||
usernameWithDomain(comment.actor)
|
|
||||||
}}</small>
|
|
||||||
</span>
|
</span>
|
||||||
<a v-else class="comment-link has-text-grey" :href="commentURL">
|
<a v-else class="comment-link" :href="commentURL">
|
||||||
<span>{{ $t("[deleted]") }}</span>
|
<span>{{ $t("[deleted]") }}</span>
|
||||||
</a>
|
</a>
|
||||||
<a class="comment-link has-text-grey" :href="commentURL">
|
<a class="comment-link" :href="commentURL">
|
||||||
<small>{{
|
<small>{{
|
||||||
formatDistanceToNow(new Date(comment.updatedAt), {
|
formatDistanceToNow(new Date(comment.updatedAt), {
|
||||||
locale: $dateFnsLocale,
|
locale: $dateFnsLocale,
|
||||||
|
@ -265,7 +266,7 @@ export default class Comment extends Vue {
|
||||||
}
|
}
|
||||||
|
|
||||||
get commentSelected(): boolean {
|
get commentSelected(): boolean {
|
||||||
return this.commentId === this.$route.hash;
|
return `#${this.commentId}` === this.$route.hash;
|
||||||
}
|
}
|
||||||
|
|
||||||
get commentFromOrganizer(): boolean {
|
get commentFromOrganizer(): boolean {
|
||||||
|
@ -276,13 +277,13 @@ export default class Comment extends Vue {
|
||||||
|
|
||||||
get commentId(): string {
|
get commentId(): string {
|
||||||
if (this.comment.originComment)
|
if (this.comment.originComment)
|
||||||
return `#comment-${this.comment.originComment.uuid}-${this.comment.uuid}`;
|
return `comment-${this.comment.originComment.uuid}-${this.comment.uuid}`;
|
||||||
return `#comment-${this.comment.uuid}`;
|
return `comment-${this.comment.uuid}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
get commentURL(): string {
|
get commentURL(): string {
|
||||||
if (!this.comment.local && this.comment.url) return this.comment.url;
|
if (!this.comment.local && this.comment.url) return this.comment.url;
|
||||||
return this.commentId;
|
return `#${this.commentId}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
reportModal(): void {
|
reportModal(): void {
|
||||||
|
@ -368,6 +369,7 @@ form.reply {
|
||||||
a.comment-link {
|
a.comment-link {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
|
color: $text;
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: underline;
|
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 {
|
.root-comment .replies {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
|
@ -402,6 +439,7 @@ a.comment-link {
|
||||||
}
|
}
|
||||||
|
|
||||||
.media .media-content {
|
.media .media-content {
|
||||||
|
overflow-x: initial;
|
||||||
.content .editor-line {
|
.content .editor-line {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -433,16 +471,12 @@ a.comment-link {
|
||||||
|
|
||||||
.level-item.reply-btn {
|
.level-item.reply-btn {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $primary;
|
color: $violet-2;
|
||||||
}
|
}
|
||||||
|
|
||||||
article {
|
article {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
||||||
&.selected {
|
|
||||||
background-color: lighten($secondary, 30%);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-replies {
|
.comment-replies {
|
||||||
|
|
|
@ -74,7 +74,7 @@
|
||||||
@delete-comment="deleteComment"
|
@delete-comment="deleteComment"
|
||||||
/>
|
/>
|
||||||
</transition-group>
|
</transition-group>
|
||||||
<div class="no-comments" key="no-comments">
|
<div v-else class="no-comments" key="no-comments">
|
||||||
<span>{{ $t("No comments yet") }}</span>
|
<span>{{ $t("No comments yet") }}</span>
|
||||||
</div>
|
</div>
|
||||||
</transition-group>
|
</transition-group>
|
||||||
|
@ -311,7 +311,18 @@ export default class CommentTree extends Vue {
|
||||||
return this.comments
|
return this.comments
|
||||||
.filter((comment) => comment.inReplyToComment == null)
|
.filter((comment) => comment.inReplyToComment == null)
|
||||||
.sort((a, b) => {
|
.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 (
|
return (
|
||||||
new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
|
new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue