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:
commit
b4c624de23
@ -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,9 +139,7 @@ article.comment {
|
|||||||
line-height: 1rem;
|
line-height: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
color: #3c376e;
|
||||||
color: #3c376e;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.icons {
|
.icons {
|
||||||
@ -144,46 +148,56 @@ article.comment {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
div.description-content {
|
.text-wrapper,
|
||||||
padding: 0 1rem 0.3rem;
|
.comment-deleted {
|
||||||
|
padding: 0 1rem;
|
||||||
|
|
||||||
/deep/ h1 {
|
& > p {
|
||||||
font-size: 2rem;
|
font-size: 0.85rem;
|
||||||
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/ h2 {
|
div.description-content {
|
||||||
font-size: 1.5rem;
|
padding-bottom: 0.3rem;
|
||||||
}
|
|
||||||
|
|
||||||
/deep/ h3 {
|
/deep/ h1 {
|
||||||
font-size: 1.25rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/ ul {
|
/deep/ h2 {
|
||||||
list-style-type: disc;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/ li {
|
/deep/ h3 {
|
||||||
margin: 10px auto 10px 2rem;
|
font-size: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/ blockquote {
|
/deep/ ul {
|
||||||
border-left: 0.2em solid #333;
|
list-style-type: disc;
|
||||||
display: block;
|
}
|
||||||
padding-left: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/deep/ p {
|
/deep/ li {
|
||||||
margin: 10px auto;
|
margin: 10px auto 10px 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
/deep/ blockquote {
|
||||||
display: inline-block;
|
border-left: 0.2em solid #333;
|
||||||
padding: 0.3rem;
|
display: block;
|
||||||
background: $secondary;
|
padding-left: 1em;
|
||||||
color: #111;
|
}
|
||||||
|
|
||||||
&:empty {
|
/deep/ p {
|
||||||
display: none;
|
margin: 10px auto;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.3rem;
|
||||||
|
background: $secondary;
|
||||||
|
color: #111;
|
||||||
|
|
||||||
|
&:empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -57,6 +57,7 @@ export const DISCUSSION_FIELDS_FRAGMENT = gql`
|
|||||||
lastComment {
|
lastComment {
|
||||||
id
|
id
|
||||||
text
|
text
|
||||||
|
insertedAt
|
||||||
updatedAt
|
updatedAt
|
||||||
}
|
}
|
||||||
actor {
|
actor {
|
||||||
|
@ -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]"
|
||||||
}
|
}
|
||||||
|
@ -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]"
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user