Chapril/mobilizon.chapril.org-mobilizon
Chapril/mobilizon.chapril.org-mobilizon
26
0
Fork 0
Code Issues Pull Requests Releases Activity

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

Browse Source 
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 2f0b6ef416
5 changed files with 70 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
js/src/components/Discussion/DiscussionComment.vue
View File

@ -4,7 +4,7 @@
<figure class="image is-48x48" v-if="comment.actor.avatar">
<img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
</figure>
<b-icon v-else size="is-medium" icon="account-circle" />
<b-icon v-else size="is-large" icon="account-circle" />
</div>
<div class="body">
<div class="meta">
@ -12,10 +12,10 @@
<strong>{{ comment.actor.name }}</strong>
<small>@{{ usernameWithDomain(comment.actor) }}</small>
</span>
<a v-else class="name comment-link has-text-grey">
<span>{{ $t("[deleted]") }}</span>
</a>
<span class="icons" v-if="!comment.deletedAt">
<span v-else class="name comment-link has-text-grey">
{{ $t("[deleted]") }}
</span>
<span class="icons" v-if="!comment.deletedAt && comment.actor.id === currentActor.id">
<b-dropdown aria-role="list">
<b-icon slot="trigger" role="button" icon="dots-horizontal" />
@ -35,24 +35,30 @@
<b-icon icon="delete"></b-icon>
{{ $t("Delete") }}
</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" />
{{ $t("Report") }}
</b-dropdown-item>
</b-dropdown-item> -->
</b-dropdown>
</span>
<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
>
</div>
</div>
<div
class="description-content"
v-html="comment.text"
v-if="!editMode && !comment.deletedAt"
></div>
<div v-else-if="!editMode">{{ $t("[This comment has been deleted]") }}</div>
<div v-if="!editMode && !comment.deletedAt" class="text-wrapper">
<div class="description-content" v-html="comment.text"></div>
<p
v-if="comment.insertedAt.getTime() !== comment.updatedAt.getTime()"
:title="comment.updatedAt | formatDateTimeString"
>
{{ $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">
<editor v-model="updatedComment" />
<div class="buttons">
@ -92,7 +98,7 @@ export default class DiscussionComment extends Vue {
usernameWithDomain = usernameWithDomain;
isReportModalActive: boolean = false;
// isReportModalActive: boolean = false;
toggleEditMode() {
this.updatedComment = this.comment.text;
@ -133,9 +139,7 @@ article.comment {
line-height: 1rem;
}
span {
color: #3c376e;
}
color: #3c376e;
}
.icons {
@ -144,46 +148,56 @@ article.comment {
}
}
div.description-content {
padding: 0 1rem 0.3rem;
.text-wrapper,
.comment-deleted {
padding: 0 1rem;
/deep/ h1 {
font-size: 2rem;
& > p {
font-size: 0.85rem;
font-style: italic;
}
/deep/ h2 {
font-size: 1.5rem;
}
div.description-content {
padding-bottom: 0.3rem;
/deep/ h3 {
font-size: 1.25rem;
}
/deep/ h1 {
font-size: 2rem;
}
/deep/ ul {
list-style-type: disc;
}
/deep/ h2 {
font-size: 1.5rem;
}
/deep/ li {
margin: 10px auto 10px 2rem;
}
/deep/ h3 {
font-size: 1.25rem;
}
/deep/ blockquote {
border-left: 0.2em solid #333;
display: block;
padding-left: 1em;
}
/deep/ ul {
list-style-type: disc;
}
/deep/ p {
margin: 10px auto;
/deep/ li {
margin: 10px auto 10px 2rem;
}
a {
display: inline-block;
padding: 0.3rem;
background: $secondary;
color: #111;
/deep/ blockquote {
border-left: 0.2em solid #333;
display: block;
padding-left: 1em;
}
&:empty {
display: none;
/deep/ p {
margin: 10px auto;
a {
display: inline-block;
padding: 0.3rem;
background: $secondary;
color: #111;
&:empty {
display: none;
}
}
}
}

1
js/src/graphql/discussion.ts
View File

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

4
js/src/i18n/en_US.json
View File

@ -762,5 +762,7 @@
"Leave group": "Leave group",
"Remove": "Remove",
"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]"
}

4
js/src/i18n/fr_FR.json
View File

@ -763,5 +763,7 @@
"{title} ({count} todos)": "{title} ({count} todos)",
"© The OpenStreetMap Contributors": "© Les Contributeur⋅ices OpenStreetMap",
"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]"
}

2
js/src/types/comment.model.ts
View File

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