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

Post view improvements

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2022-11-02 17:45:58 +01:00
parent 7ee79a00e2
commit 30eb37e31b
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
1 changed files with 39 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
js/src/views/Posts/PostView.vue
View File

@ -6,17 +6,17 @@
</div> </div>
<div class="relative flex flex-col"> <div class="relative flex flex-col">
<div <div
class="px-2 py-3 flex flex-wrap justify-center items-center" class="px-2 py-3 flex flex-wrap gap-4 justify-center items-center"
dir="auto" dir="auto"
> >
<div class="flex-1"> <div class="flex-auto min-w-[300px] max-w-screen-lg">
<div class="inline"> <div class="inline">
<tag <tag
class="mr-2" class="mr-2"
variant="warning" variant="warning"
size="medium" size="medium"
v-if="post.draft" v-if="post.draft"
>{{ $t("Draft") }}</tag >{{ t("Draft") }}</tag
> >
<h1 class="inline" :lang="post.language"> <h1 class="inline" :lang="post.language">
{{ post.title }} {{ post.title }}
@ -52,7 +52,7 @@
> >
<Clock :size="16" /> <Clock :size="16" />
{{ {{
$t("Edited {relative_time} ago", { t("Edited {relative_time} ago", {
relative_time: formatDistanceToNowStrict( relative_time: formatDistanceToNowStrict(
new Date(post.updatedAt), new Date(post.updatedAt),
{ {
@ -64,7 +64,7 @@
</span> </span>
<span v-if="post.visibility === PostVisibility.UNLISTED" class=""> <span v-if="post.visibility === PostVisibility.UNLISTED" class="">
<o-icon icon="link" size="small" /> <o-icon icon="link" size="small" />
{{ $t("Accessible only by link") }} {{ t("Accessible only by link") }}
</span> </span>
<span <span
v-else-if="post.visibility === PostVisibility.PRIVATE" v-else-if="post.visibility === PostVisibility.PRIVATE"
@ -72,7 +72,7 @@
> >
<Lock :size="16" /> <Lock :size="16" />
{{ {{
$t("Accessible only to members", { t("Accessible only to members", {
group: post.attributedTo?.name, group: post.attributedTo?.name,
}) })
}} }}
@ -82,24 +82,27 @@
<o-dropdown position="bottom-left" aria-role="list"> <o-dropdown position="bottom-left" aria-role="list">
<template #trigger> <template #trigger>
<o-button role="button" icon-right="dots-horizontal"> <o-button role="button" icon-right="dots-horizontal">
{{ $t("Actions") }} {{ t("Actions") }}
</o-button> </o-button>
</template> </template>
<o-dropdown-item <o-dropdown-item
aria-role="listitem" aria-role="listitem"
has-link has-link
tabIndex="-1"
v-if=" v-if="
currentActor?.id === post?.author?.id || currentActor?.id === post?.author?.id ||
isCurrentActorAGroupModerator isCurrentActorAGroupModerator
" "
> >
<router-link <router-link class="flex gap-1 whitespace-nowrap"
:to="{ :to="{
name: RouteName.POST_EDIT, name: RouteName.POST_EDIT,
params: { slug: post.slug }, params: { slug: post.slug },
}" }"
>{{ $t("Edit") }} <o-icon icon="pencil" >
/></router-link> <Pencil />
{{ t("Edit") }}
</router-link>
</o-dropdown-item> </o-dropdown-item>
<o-dropdown-item <o-dropdown-item
aria-role="listitem" aria-role="listitem"
@ -107,11 +110,12 @@
currentActor?.id === post?.author?.id || currentActor?.id === post?.author?.id ||
isCurrentActorAGroupModerator isCurrentActorAGroupModerator
" "
@click="openDeletePostModal" tabIndex="-1"
@keyup.enter="openDeletePostModal"
> >
{{ $t("Delete") }} <button @click="openDeletePostModal" class="flex gap-1 whitespace-nowrap">
<o-icon icon="delete" /> <Delete />
{{ t("Delete") }}
</button>
</o-dropdown-item> </o-dropdown-item>
<hr <hr
@ -126,32 +130,30 @@
<o-dropdown-item <o-dropdown-item
aria-role="listitem" aria-role="listitem"
v-if="!post.draft" v-if="!post.draft"
@click="triggerShare()" tabIndex="-1"
@keyup.enter="triggerShare()"
> >
<span> <button @click="triggerShare()" class="flex gap-1 whitespace-nowrap">
{{ $t("Share this event") }} <Share />
<o-icon icon="share" /> {{ t("Share this event") }}
</span> </button>
</o-dropdown-item> </o-dropdown-item>
<o-dropdown-item <o-dropdown-item
aria-role="listitem" aria-role="listitem"
v-if="ableToReport" v-if="ableToReport"
@click="isReportModalActive = true" tabIndex="-1"
@keyup.enter="isReportModalActive = true"
> >
<span> <button @click="isReportModalActive = true" class="flex gap-1 whitespace-nowrap">
{{ $t("Report") }} <Flag />
<o-icon icon="flag" /> {{ t("Report") }}
</span> </button>
</o-dropdown-item> </o-dropdown-item>
</o-dropdown> </o-dropdown>
</div> </div>
</div> </div>
</header> </header>
<o-notification <o-notification
:title="$t('Members-only post')" :title="t('Members-only post')"
class="mx-4" class="mx-4"
variant="warning" variant="warning"
:closable="false" :closable="false"
@ -164,7 +166,7 @@
" "
> >
{{ {{
$t( t(
"This post is accessible only for members. You have access to it for moderation purposes only because you are an instance moderator." "This post is accessible only for members. You have access to it for moderation purposes only because you are an instance moderator."
) )
}} }}
@ -173,10 +175,10 @@
<section <section
v-html="post.body" v-html="post.body"
dir="auto" dir="auto"
class="px-1 prose lg:prose-xl prose-p:mt-6 dark:prose-invert" class="px-2 md:px-4 py-4 prose lg:prose-xl prose-p:mt-6 dark:prose-invert bg-white dark:bg-zinc-700 mx-auto"
:lang="post.language" :lang="post.language"
/> />
<section class="flex gap-2 my-6" dir="auto"> <section class="flex gap-2 my-6 justify-center" dir="auto">
<router-link <router-link
v-for="tag in post.tags" v-for="tag in post.tags"
:key="tag.title" :key="tag.title"
@ -186,14 +188,14 @@
</router-link> </router-link>
</section> </section>
<o-modal <o-modal
:close-button-aria-label="$t('Close')" :close-button-aria-label="t('Close')"
v-model:active="isReportModalActive" v-model:active="isReportModalActive"
has-modal-card has-modal-card
ref="reportModal" ref="reportModal"
> >
<ReportModal <ReportModal
:on-confirm="reportPost" :on-confirm="reportPost"
:title="$t('Report this post')" :title="t('Report this post')"
:outside-domain="groupDomain" :outside-domain="groupDomain"
@close="isReportModalActive = false" @close="isReportModalActive = false"
/> />
@ -202,7 +204,7 @@
v-model:active="isShareModalActive" v-model:active="isShareModalActive"
has-modal-card has-modal-card
ref="shareModal" ref="shareModal"
:close-button-aria-label="$t('Close')" :close-button-aria-label="t('Close')"
> >
<share-post-modal :post="post" /> <share-post-modal :post="post" />
</o-modal> </o-modal>
@ -241,6 +243,10 @@ import { useRouter } from "vue-router";
import { useCreateReport } from "@/composition/apollo/report"; import { useCreateReport } from "@/composition/apollo/report";
import Clock from "vue-material-design-icons/Clock.vue"; import Clock from "vue-material-design-icons/Clock.vue";
import Lock from "vue-material-design-icons/Lock.vue"; import Lock from "vue-material-design-icons/Lock.vue";
import Pencil from "vue-material-design-icons/Pencil.vue";
import Delete from "vue-material-design-icons/Delete.vue";
import Share from "vue-material-design-icons/Share.vue";
import Flag from "vue-material-design-icons/Flag.vue";
import { Dialog } from "@/plugins/dialog"; import { Dialog } from "@/plugins/dialog";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { Notifier } from "@/plugins/notifier"; import { Notifier } from "@/plugins/notifier";