hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Introduce comments below events

Browse Source 
Also add tomstones

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2019-11-15 18:36:47 +01:00
parent 45155a3bde
commit dc07f34d78
71 changed files with 2642 additions and 879 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
js/src/components/Report/ReportCard.vue
View File

@@ -9,8 +9,9 @@
<div class="media">
<div class="media-left">
<figure class="image is-48x48" v-if="report.reported.avatar">
<img :src="report.reported.avatar.url" />
<img alt="" :src="report.reported.avatar.url" />
</figure>
<b-icon v-else size="is-large" icon="account-circle" />
</div>
<div class="media-content">
<p class="title is-4">{{ report.reported.name }}</p>
@@ -19,12 +20,8 @@
</div>
<div class="content columns">
<div class="column is-one-quarter box">Reported by <img v-if="report.reporter.avatar" class="image" :src="report.reporter.avatar.url" /> @{{ report.reporter.preferredUsername }}</div>
<div class="column box" v-if="report.event">
<img class="image" v-if="report.event.picture" :src="report.event.picture.url" />
<span>{{ report.event.title }}</span>
</div>
<div class="column box" v-if="report.reportContent">{{ report.reportContent }}</div>
<div class="column is-one-quarter-desktop">Reported by <img v-if="report.reporter.avatar" class="image" :src="report.reporter.avatar.url" /> @{{ report.reporter.preferredUsername }}</div>
<div class="column" v-if="report.content">{{ report.content }}</div>
</div>
</div>
</div>

39
js/src/components/Report/ReportModal.vue
View File

@@ -16,6 +16,23 @@
size="is-large"/>
</div>
<div class="media-content">
<div class="box" v-if="comment">
<article class="media">
<div class="media-left">
<figure class="image is-48x48" v-if="comment.actor.avatar">
<img :src="comment.actor.avatar.url" alt="Image">
</figure>
<b-icon class="media-left" v-else size="is-large" icon="account-circle" />
</div>
<div class="media-content">
<div class="content">
<strong>{{ comment.actor.name }}</strong> <small>@{{ comment.actor.preferredUsername }}</small>
<br>
<p v-html="comment.text"></p>
</div>
</div>
</article>
</div>
<p>{{ $t('The report will be sent to the moderators of your instance. You can explain why you report this content below.') }}</p>
<div class="control">
@@ -57,7 +74,7 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { removeElement } from 'buefy/src/utils/helpers';
import { IComment } from '@/types/comment.model';
@Component({
mounted() {
@@ -67,6 +84,7 @@ import { removeElement } from 'buefy/src/utils/helpers';
export default class ReportModal extends Vue {
@Prop({ type: Function, default: () => {} }) onConfirm;
@Prop({ type: String }) title;
@Prop({ type: Object }) comment!: IComment;
@Prop({ type: String, default: '' }) outsideDomain;
@Prop({ type: String }) cancelText;
@Prop({ type: String }) confirmText;
@@ -97,8 +115,23 @@ export default class ReportModal extends Vue {
}
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.modal-card .modal-card-foot {
justify-content: flex-end;
}
</style>
.modal-card-body {
.media-content {
.box {
.media {
padding-top: 0;
border-top: none;
}
}
& > p {
margin-bottom: 2rem;
}
}
}
</style>