Merge branch 'show-comment-discussion-edited' into 'master'

Discussion improvements for groups

Closes #372

See merge request framasoft/mobilizon!547
This commit is contained in:
Thomas Citharel 2020-08-19 09:18:12 +02:00
commit b4c624de23
5 changed files with 70 additions and 51 deletions

View File

@ -4,7 +4,7 @@
<figure class="image is-48x48" v-if="comment.actor.avatar"> <figure class="image is-48x48" v-if="comment.actor.avatar">
<img class="is-rounded" :src="comment.actor.avatar.url" alt="" /> <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
</figure> </figure>
<b-icon v-else size="is-medium" icon="account-circle" /> <b-icon v-else size="is-large" icon="account-circle" />
</div> </div>
<div class="body"> <div class="body">
<div class="meta"> <div class="meta">
@ -12,10 +12,10 @@
<strong>{{ comment.actor.name }}</strong> <strong>{{ comment.actor.name }}</strong>
<small>@{{ usernameWithDomain(comment.actor) }}</small> <small>@{{ usernameWithDomain(comment.actor) }}</small>
</span> </span>
<a v-else class="name comment-link has-text-grey"> <span v-else class="name comment-link has-text-grey">
<span>{{ $t("[deleted]") }}</span> {{ $t("[deleted]") }}
</a> </span>
<span class="icons" v-if="!comment.deletedAt"> <span class="icons" v-if="!comment.deletedAt && comment.actor.id === currentActor.id">
<b-dropdown aria-role="list"> <b-dropdown aria-role="list">
<b-icon slot="trigger" role="button" icon="dots-horizontal" /> <b-icon slot="trigger" role="button" icon="dots-horizontal" />
@ -35,24 +35,30 @@
<b-icon icon="delete"></b-icon> <b-icon icon="delete"></b-icon>
{{ $t("Delete") }} {{ $t("Delete") }}
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item aria-role="listitem" @click="isReportModalActive = true"> <!-- <b-dropdown-item aria-role="listitem" @click="isReportModalActive = true">
<b-icon icon="flag" /> <b-icon icon="flag" />
{{ $t("Report") }} {{ $t("Report") }}
</b-dropdown-item> </b-dropdown-item> -->
</b-dropdown> </b-dropdown>
</span> </span>
<div class="post-infos"> <div class="post-infos">
<span :title="comment.updatedAt | formatDateTimeString"> <span :title="comment.insertedAt | formatDateTimeString">
{{ $timeAgo.format(new Date(comment.updatedAt), "twitter") || $t("Right now") }}</span {{ $timeAgo.format(new Date(comment.updatedAt), "twitter") || $t("Right now") }}</span
> >
</div> </div>
</div> </div>
<div <div v-if="!editMode && !comment.deletedAt" class="text-wrapper">
class="description-content" <div class="description-content" v-html="comment.text"></div>
v-html="comment.text" <p
v-if="!editMode && !comment.deletedAt" v-if="comment.insertedAt.getTime() !== comment.updatedAt.getTime()"
></div> :title="comment.updatedAt | formatDateTimeString"
<div v-else-if="!editMode">{{ $t("[This comment has been deleted]") }}</div> >
{{ $t("Edited {ago}", { ago: $timeAgo.format(new Date(comment.updatedAt)) }) }}
</p>
</div>
<div class="comment-deleted" v-else-if="!editMode">
{{ $t("[This comment has been deleted by it's author]") }}
</div>
<form v-else class="edition" @submit.prevent="updateComment"> <form v-else class="edition" @submit.prevent="updateComment">
<editor v-model="updatedComment" /> <editor v-model="updatedComment" />
<div class="buttons"> <div class="buttons">
@ -92,7 +98,7 @@ export default class DiscussionComment extends Vue {
usernameWithDomain = usernameWithDomain; usernameWithDomain = usernameWithDomain;
isReportModalActive: boolean = false; // isReportModalActive: boolean = false;
toggleEditMode() { toggleEditMode() {
this.updatedComment = this.comment.text; this.updatedComment = this.comment.text;
@ -133,10 +139,8 @@ article.comment {
line-height: 1rem; line-height: 1rem;
} }
span {
color: #3c376e; color: #3c376e;
} }
}
.icons { .icons {
display: inline; display: inline;
@ -144,8 +148,17 @@ article.comment {
} }
} }
.text-wrapper,
.comment-deleted {
padding: 0 1rem;
& > p {
font-size: 0.85rem;
font-style: italic;
}
div.description-content { div.description-content {
padding: 0 1rem 0.3rem; padding-bottom: 0.3rem;
/deep/ h1 { /deep/ h1 {
font-size: 2rem; font-size: 2rem;
@ -189,6 +202,7 @@ article.comment {
} }
} }
} }
}
div.avatar { div.avatar {
padding-top: 1rem; padding-top: 1rem;

View File

@ -57,6 +57,7 @@ export const DISCUSSION_FIELDS_FRAGMENT = gql`
lastComment { lastComment {
id id
text text
insertedAt
updatedAt updatedAt
} }
actor { actor {

View File

@ -762,5 +762,7 @@
"Leave group": "Leave group", "Leave group": "Leave group",
"Remove": "Remove", "Remove": "Remove",
"Update": "Update", "Update": "Update",
"Search…": "Search…" "Search…": "Search…",
"Edited {ago}": "Edited {ago}",
"[This comment has been deleted by it's author]": "[This comment has been deleted by it's author]"
} }

View File

@ -763,5 +763,7 @@
"{title} ({count} todos)": "{title} ({count} todos)", "{title} ({count} todos)": "{title} ({count} todos)",
"© The OpenStreetMap Contributors": "© Les Contributeur⋅ices OpenStreetMap", "© The OpenStreetMap Contributors": "© Les Contributeur⋅ices OpenStreetMap",
"Update": "Éditer", "Update": "Éditer",
"Search…": "Rechercher…" "Search…": "Rechercher…",
"Edited {ago}": "Édité {ago}",
"[This comment has been deleted by it's author]": "[Ce commentaire a été supprimé par son auteur]"
} }

View File

@ -59,7 +59,7 @@ export class CommentModel implements IComment {
this.actor = hash.actor ? new Actor(hash.actor) : new Actor(); this.actor = hash.actor ? new Actor(hash.actor) : new Actor();
this.event = new EventModel(hash.event); this.event = new EventModel(hash.event);
this.replies = hash.replies; this.replies = hash.replies;
this.updatedAt = hash.updatedAt; this.updatedAt = new Date(hash.updatedAt as string);
this.deletedAt = hash.deletedAt; this.deletedAt = hash.deletedAt;
this.insertedAt = new Date(hash.insertedAt as string); this.insertedAt = new Date(hash.insertedAt as string);
this.totalReplies = hash.totalReplies; this.totalReplies = hash.totalReplies;