Introduce group basic federation, event new page and notifications
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
@@ -4,39 +4,39 @@
|
||||
```
|
||||
</docs>
|
||||
<template>
|
||||
<div class="card" v-if="report">
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-48x48" v-if="report.reported.avatar">
|
||||
<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>
|
||||
<p class="subtitle is-6">@{{ report.reported.preferredUsername }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content columns">
|
||||
<div class="column is-one-quarter-desktop">
|
||||
<span v-if="report.reporter.type === ActorType.APPLICATION">
|
||||
{{ $t('Reported by someone on {domain}', { domain: report.reporter.domain}) }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('Reported by {reporter}', { reporter: report.reporter.preferredUsername}) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="column" v-if="report.content">{{ report.content }}</div>
|
||||
</div>
|
||||
<div class="card" v-if="report">
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-48x48" v-if="report.reported.avatar">
|
||||
<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>
|
||||
<p class="subtitle is-6">@{{ report.reported.preferredUsername }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content columns">
|
||||
<div class="column is-one-quarter-desktop">
|
||||
<span v-if="report.reporter.type === ActorType.APPLICATION">
|
||||
{{ $t("Reported by someone on {domain}", { domain: report.reporter.domain }) }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t("Reported by {reporter}", { reporter: report.reporter.preferredUsername }) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="column" v-if="report.content">{{ report.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import { IReport } from '@/types/report.model';
|
||||
import { ActorType } from '@/types/actor';
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import { IReport } from "@/types/report.model";
|
||||
import { ActorType } from "@/types/actor";
|
||||
|
||||
@Component
|
||||
export default class ReportCard extends Vue {
|
||||
@@ -46,9 +46,9 @@ export default class ReportCard extends Vue {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.content img.image {
|
||||
display: inline;
|
||||
height: 1.5em;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
</style>
|
||||
.content img.image {
|
||||
display: inline;
|
||||
height: 1.5em;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,77 +1,80 @@
|
||||
<template>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head" v-if="title">
|
||||
<p class="modal-card-title">{{ title }}</p>
|
||||
</header>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head" v-if="title">
|
||||
<p class="modal-card-title">{{ title }}</p>
|
||||
</header>
|
||||
|
||||
<section
|
||||
class="modal-card-body is-flex"
|
||||
:class="{ 'is-titleless': !title }">
|
||||
<div class="media">
|
||||
<div
|
||||
class="media-left">
|
||||
<b-icon
|
||||
icon="alert"
|
||||
type="is-warning"
|
||||
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">
|
||||
<b-input
|
||||
v-model="content"
|
||||
type="textarea"
|
||||
@keyup.enter="confirm"
|
||||
:placeholder="$t('Additional comments')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="control" v-if="outsideDomain">
|
||||
<p>{{ $t('The content came from another server. Transfer an anonymous copy of the report?') }}</p>
|
||||
<b-switch v-model="forward">{{ $t('Transfer to {outsideDomain}', { outsideDomain }) }}</b-switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="modal-card-foot">
|
||||
<button
|
||||
class="button"
|
||||
ref="cancelButton"
|
||||
@click="close">
|
||||
{{ translatedCancelText }}
|
||||
</button>
|
||||
<button
|
||||
class="button is-primary"
|
||||
ref="confirmButton"
|
||||
@click="confirm">
|
||||
{{ translatedConfirmText }}
|
||||
</button>
|
||||
</footer>
|
||||
<section class="modal-card-body is-flex" :class="{ 'is-titleless': !title }">
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<b-icon icon="alert" type="is-warning" 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">
|
||||
<b-input
|
||||
v-model="content"
|
||||
type="textarea"
|
||||
@keyup.enter="confirm"
|
||||
:placeholder="$t('Additional comments')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="control" v-if="outsideDomain">
|
||||
<p>
|
||||
{{
|
||||
$t(
|
||||
"The content came from another server. Transfer an anonymous copy of the report?"
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
<b-switch v-model="forward">{{
|
||||
$t("Transfer to {outsideDomain}", { outsideDomain })
|
||||
}}</b-switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="modal-card-foot">
|
||||
<button class="button" ref="cancelButton" @click="close">
|
||||
{{ translatedCancelText }}
|
||||
</button>
|
||||
<button class="button is-primary" ref="confirmButton" @click="confirm">
|
||||
{{ translatedConfirmText }}
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import { IComment } from '@/types/comment.model';
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import { IComment } from "../../types/comment.model";
|
||||
|
||||
@Component({
|
||||
mounted() {
|
||||
@@ -79,23 +82,30 @@ import { IComment } from '@/types/comment.model';
|
||||
},
|
||||
})
|
||||
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;
|
||||
@Prop({ type: Function }) onConfirm!: Function;
|
||||
|
||||
isActive: boolean = false;
|
||||
content: string = '';
|
||||
forward: boolean = false;
|
||||
@Prop({ type: String }) title!: string;
|
||||
|
||||
@Prop({ type: Object }) comment!: IComment;
|
||||
|
||||
@Prop({ type: String, default: "" }) outsideDomain!: string;
|
||||
|
||||
@Prop({ type: String }) cancelText!: string;
|
||||
|
||||
@Prop({ type: String }) confirmText!: string;
|
||||
|
||||
isActive = false;
|
||||
|
||||
content = "";
|
||||
|
||||
forward = false;
|
||||
|
||||
get translatedCancelText() {
|
||||
return this.cancelText || this.$t('Cancel');
|
||||
return this.cancelText || this.$t("Cancel");
|
||||
}
|
||||
|
||||
get translatedConfirmText() {
|
||||
return this.confirmText || this.$t('Send the report');
|
||||
return this.confirmText || this.$t("Send the report");
|
||||
}
|
||||
|
||||
confirm() {
|
||||
@@ -103,32 +113,32 @@ export default class ReportModal extends Vue {
|
||||
this.close();
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the Dialog.
|
||||
*/
|
||||
/**
|
||||
* Close the Dialog.
|
||||
*/
|
||||
close() {
|
||||
this.isActive = false;
|
||||
this.$emit('close');
|
||||
this.$emit("close");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.modal-card .modal-card-foot {
|
||||
justify-content: flex-end;
|
||||
.modal-card .modal-card-foot {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.modal-card-body {
|
||||
.media-content {
|
||||
.box {
|
||||
.media {
|
||||
padding-top: 0;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-card-body {
|
||||
.media-content {
|
||||
.box {
|
||||
.media {
|
||||
padding-top: 0;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
& > p {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
& > p {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user