build: switch from yarn to npm to manage js dependencies and move js contents to root
yarn v1 is being deprecated and starts to have some issues Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
89
src/components/Report/ReportCard.vue
Normal file
89
src/components/Report/ReportCard.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div
|
||||
class="bg-mbz-yellow-alt-50 hover:bg-mbz-yellow-alt-100 dark:bg-zinc-700 hover:dark:bg-zinc-600 rounded"
|
||||
v-if="report"
|
||||
>
|
||||
<div class="flex justify-between gap-1 border-b p-2">
|
||||
<div class="flex gap-1">
|
||||
<figure class="" v-if="report.reported?.avatar">
|
||||
<img
|
||||
alt=""
|
||||
:src="report.reported.avatar.url"
|
||||
class="rounded-full"
|
||||
width="24"
|
||||
height="24"
|
||||
/>
|
||||
</figure>
|
||||
<AccountCircle v-else :size="24" />
|
||||
<div class="">
|
||||
<p class="" v-if="report.reported?.name">
|
||||
{{ report.reported.name }}
|
||||
</p>
|
||||
<p
|
||||
class="text-zinc-700 dark:text-zinc-100 text-sm"
|
||||
v-else-if="report.reported?.preferredUsername"
|
||||
>
|
||||
@{{ usernameWithDomain(report.reported) }}
|
||||
</p>
|
||||
<p v-else>{{ t("Unknown actor") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p v-if="report.reported?.suspended" class="text-red-700 font-bold">
|
||||
{{ t("Suspended") }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-2">
|
||||
<div class="">
|
||||
<span v-if="report.reporter?.type === ActorType.APPLICATION">
|
||||
{{
|
||||
t("Reported by someone on {domain}", {
|
||||
domain: report.reporter.domain,
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
<span
|
||||
v-if="
|
||||
report.reporter?.preferredUsername === 'anonymous' &&
|
||||
!report.reporter?.domain
|
||||
"
|
||||
>
|
||||
{{ t("Reported by someone anonymously") }}
|
||||
</span>
|
||||
<span v-else-if="report.reporter?.preferredUsername">
|
||||
{{
|
||||
t("Reported by {reporter}", {
|
||||
reporter: usernameWithDomain(report.reporter),
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ t("Reported by an unknown actor") }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="" v-if="report.content" v-html="report.content" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { IReport } from "@/types/report.model";
|
||||
import { ActorType } from "@/types/enums";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
|
||||
import { usernameWithDomain } from "@/types/actor";
|
||||
|
||||
defineProps<{
|
||||
report: IReport;
|
||||
}>();
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.content img.image {
|
||||
display: inline;
|
||||
height: 1.5em;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
</style>
|
||||
169
src/components/Report/ReportModal.vue
Normal file
169
src/components/Report/ReportModal.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<header v-if="title" class="mb-3">
|
||||
<h2 class="text-2xl">{{ title }}</h2>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<div
|
||||
class="flex gap-1 flex-row mb-3 bg-mbz-yellow p-3 rounded items-center"
|
||||
>
|
||||
<o-icon
|
||||
icon="alert"
|
||||
variant="warning"
|
||||
custom-size="48"
|
||||
class="hidden md:block flex-1"
|
||||
/>
|
||||
<p>
|
||||
{{
|
||||
t(
|
||||
"The report will be sent to the moderators of your instance. You can explain why you report this content below."
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<article v-if="comment">
|
||||
<div>
|
||||
<figure class="h-8 w-8" v-if="comment?.actor?.avatar">
|
||||
<img
|
||||
:src="comment.actor.avatar.url"
|
||||
alt=""
|
||||
width="48"
|
||||
height="48"
|
||||
/>
|
||||
</figure>
|
||||
<AccountCircle v-else :size="48" />
|
||||
</div>
|
||||
<div class="prose dark:prose-invert">
|
||||
<strong>{{ comment?.actor?.name }}</strong>
|
||||
<small v-if="comment.actor"
|
||||
>@{{ usernameWithDomain(comment?.actor) }}</small
|
||||
>
|
||||
<br />
|
||||
<p v-html="comment.text"></p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<o-field
|
||||
:label="t('Additional comments')"
|
||||
label-for="additional-comments"
|
||||
>
|
||||
<o-input
|
||||
v-model="content"
|
||||
type="textarea"
|
||||
id="additional-comments"
|
||||
autofocus
|
||||
ref="reportAdditionalCommentsInput"
|
||||
/>
|
||||
</o-field>
|
||||
|
||||
<div class="control" v-if="outsideDomain">
|
||||
<p>
|
||||
{{
|
||||
t(
|
||||
"The content came from another server. Transfer an anonymous copy of the report?"
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
<o-switch v-model="forward">{{
|
||||
t("Transfer to {outsideDomain}", { outsideDomain })
|
||||
}}</o-switch>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="flex gap-2 py-3">
|
||||
<o-button ref="cancelButton" outlined @click="close">
|
||||
{{ translatedCancelText }}
|
||||
</o-button>
|
||||
<o-button
|
||||
variant="primary"
|
||||
ref="confirmButton"
|
||||
@click="confirm"
|
||||
@keyup.enter="confirm"
|
||||
>
|
||||
{{ translatedConfirmText }}
|
||||
</o-button>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { IComment } from "../../types/comment.model";
|
||||
import { usernameWithDomain } from "@/types/actor";
|
||||
import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
|
||||
import { useFocus } from "@vueuse/core";
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
onConfirm: (content: string, forward: boolean) => void;
|
||||
title?: string;
|
||||
comment?: IComment;
|
||||
outsideDomain?: string | null;
|
||||
cancelText?: string;
|
||||
confirmText?: string;
|
||||
}>(),
|
||||
{
|
||||
outsideDomain: null,
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits(["close"]);
|
||||
|
||||
const content = ref("");
|
||||
|
||||
const forward = ref(false);
|
||||
|
||||
const reportAdditionalCommentsInput = ref();
|
||||
// https://github.com/oruga-ui/oruga/issues/339
|
||||
const reportAdditionalCommentsInputComp = computed(
|
||||
() => reportAdditionalCommentsInput.value?.$refs.textarea
|
||||
);
|
||||
useFocus(reportAdditionalCommentsInputComp, { initialValue: true });
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
const translatedCancelText = computed((): string => {
|
||||
return props.cancelText ?? (t("Cancel") as string);
|
||||
});
|
||||
|
||||
const translatedConfirmText = computed((): string => {
|
||||
return props.confirmText ?? (t("Send the report") as string);
|
||||
});
|
||||
|
||||
const confirm = (): void => {
|
||||
props.onConfirm(content.value, forward.value);
|
||||
close();
|
||||
};
|
||||
|
||||
/**
|
||||
* Close the Dialog.
|
||||
*/
|
||||
const close = (): void => {
|
||||
// isActive = false;
|
||||
emit("close");
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.modal-card .modal-card-foot {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.modal-card-body {
|
||||
.media-content {
|
||||
.box {
|
||||
.media {
|
||||
padding-top: 0;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
& > p {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user