Improve group related UI

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-06-15 17:25:33 +02:00
parent 9639a066ff
commit 6cc233a6d3
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
22 changed files with 892 additions and 427 deletions

View File

@ -0,0 +1,48 @@
<template>
<div class="actor-inline">
<div class="actor-avatar">
<figure class="image is-24x24" v-if="actor.avatar">
<img class="is-rounded" :src="actor.avatar.url" alt="" />
</figure>
<b-icon v-else size="is-medium" icon="account-circle" />
</div>
<div class="actor-name">
<p>
{{ actor.name || `@${usernameWithDomain(actor)}` }}
</p>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { IActor, usernameWithDomain } from "../../types/actor";
@Component
export default class ActorInline extends Vue {
@Prop({ required: true, type: Object }) actor!: IActor;
usernameWithDomain = usernameWithDomain;
}
</script>
<style lang="scss" scoped>
div.actor-inline {
align-items: flex-start;
display: inline-flex;
text-align: inherit;
align-items: top;
div.actor-avatar {
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
margin-right: 0.5rem;
}
div.actor-name {
flex-basis: auto;
flex-grow: 1;
flex-shrink: 1;
text-align: inherit;
}
}
</style>

View File

@ -41,7 +41,7 @@
></popover-actor-card ></popover-actor-card
></i18n ></i18n
> >
<small class="has-text-grey activity-date">{{ <small class="has-text-grey-dark activity-date">{{
activity.insertedAt | formatTimeString activity.insertedAt | formatTimeString
}}</small> }}</small>
</div> </div>

View File

@ -27,7 +27,7 @@
></popover-actor-card ></popover-actor-card
></i18n ></i18n
> >
<small class="has-text-grey activity-date">{{ <small class="has-text-grey-dark activity-date">{{
activity.insertedAt | formatTimeString activity.insertedAt | formatTimeString
}}</small> }}</small>
</div> </div>

View File

@ -34,7 +34,7 @@
v-for="detail in details" v-for="detail in details"
:key="detail" :key="detail"
tag="p" tag="p"
class="has-text-grey" class="has-text-grey-dark"
> >
<popover-actor-card <popover-actor-card
:actor="activity.author" :actor="activity.author"
@ -63,7 +63,7 @@
subjectParams.old_group_name subjectParams.old_group_name
}}</b> }}</b>
</i18n> </i18n>
<small class="has-text-grey activity-date">{{ <small class="has-text-grey-dark activity-date">{{
activity.insertedAt | formatTimeString activity.insertedAt | formatTimeString
}}</small> }}</small>
</div> </div>

View File

@ -34,7 +34,7 @@
></popover-actor-card ></popover-actor-card
></i18n ></i18n
> >
<small class="has-text-grey activity-date">{{ <small class="has-text-grey-dark activity-date">{{
activity.insertedAt | formatTimeString activity.insertedAt | formatTimeString
}}</small> }}</small>
</div> </div>

View File

@ -27,7 +27,7 @@
></popover-actor-card ></popover-actor-card
></i18n ></i18n
> >
<small class="has-text-grey activity-date">{{ <small class="has-text-grey-dark activity-date">{{
activity.insertedAt | formatTimeString activity.insertedAt | formatTimeString
}}</small> }}</small>
</div> </div>

View File

@ -37,7 +37,7 @@
></popover-actor-card ></popover-actor-card
></i18n ></i18n
> >
<small class="has-text-grey activity-date">{{ <small class="has-text-grey-dark activity-date">{{
activity.insertedAt | formatTimeString activity.insertedAt | formatTimeString
}}</small> }}</small>
</div> </div>

View File

@ -32,10 +32,10 @@
}}</span }}</span
> >
</div> </div>
<div class="has-text-grey" v-if="!discussion.lastComment.deletedAt"> <div class="has-text-grey-dark" v-if="!discussion.lastComment.deletedAt">
{{ htmlTextEllipsis }} {{ htmlTextEllipsis }}
</div> </div>
<div v-else class="has-text-grey"> <div v-else class="has-text-grey-dark">
{{ $t("[This comment has been deleted]") }} {{ $t("[This comment has been deleted]") }}
</div> </div>
</div> </div>

View File

@ -55,20 +55,21 @@ section {
} }
div.group-section-title { div.group-section-title {
--title-color: $violet-2;
display: flex; display: flex;
align-items: stretch; align-items: stretch;
background: $secondary; background: $secondary;
color: #3a384c; color: var(--title-color);
&.privateSection { &.privateSection {
color: $violet-2; color: $purple-3;
background: $purple-2; background: $violet-2;
} }
::v-deep & > a { ::v-deep & > a {
align-self: center; align-self: center;
margin-right: 5px; margin-right: 5px;
color: $orange-3; color: var(--title-color);
} }
h2 { h2 {

View File

@ -0,0 +1,138 @@
<template>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">{{ $t("Share this group") }}</p>
</header>
<section class="modal-card-body is-flex" v-if="group">
<div class="container has-text-centered">
<b-notification
type="is-warning"
v-if="group.visibility !== GroupVisibility.PUBLIC"
:closable="false"
>
{{
$t(
"This group is accessible only through it's link. Be careful where you post this link."
)
}}
</b-notification>
<b-field>
<b-input ref="groupURLInput" :value="group.url" expanded />
<p class="control">
<b-tooltip
:label="$t('URL copied to clipboard')"
:active="showCopiedTooltip"
always
type="is-success"
position="is-left"
>
<b-button
type="is-primary"
icon-right="content-paste"
native-type="button"
@click="copyURL"
@keyup.enter="copyURL"
/>
</b-tooltip>
</p>
</b-field>
<div>
<!-- <b-icon icon="mastodon" size="is-large" type="is-primary" />-->
<a :href="twitterShareUrl" target="_blank" rel="nofollow noopener"
><b-icon icon="twitter" size="is-large" type="is-primary"
/></a>
<a :href="facebookShareUrl" target="_blank" rel="nofollow noopener"
><b-icon icon="facebook" size="is-large" type="is-primary"
/></a>
<a :href="linkedInShareUrl" target="_blank" rel="nofollow noopener"
><b-icon icon="linkedin" size="is-large" type="is-primary"
/></a>
<a
:href="diasporaShareUrl"
class="diaspora"
target="_blank"
rel="nofollow noopener"
>
<span data-v-5e15e80a="" class="icon has-text-primary is-large">
<DiasporaLogo alt="diaspora-logo" />
</span>
</a>
<a :href="emailShareUrl" target="_blank" rel="nofollow noopener"
><b-icon icon="email" size="is-large" type="is-primary"
/></a>
</div>
</div>
</section>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Ref } from "vue-property-decorator";
import { GroupVisibility } from "@/types/enums";
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import DiasporaLogo from "../../assets/diaspora-icon.svg?inline";
import { displayName, IGroup } from "@/types/actor";
@Component({
components: {
DiasporaLogo,
},
})
export default class ShareGroupModal extends Vue {
@Prop({ type: Object, required: true }) group!: IGroup;
@Ref("groupURLInput") readonly groupURLInput!: any;
GroupVisibility = GroupVisibility;
showCopiedTooltip = false;
get twitterShareUrl(): string {
return `https://twitter.com/intent/tweet?url=${encodeURIComponent(
this.group.url
)}&text=${displayName(this.group)}`;
}
get facebookShareUrl(): string {
return `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
this.group.url
)}`;
}
get linkedInShareUrl(): string {
return `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(
this.group.url
)}&title=${displayName(this.group)}`;
}
get emailShareUrl(): string {
return `mailto:?to=&body=${this.group.url}&subject=${displayName(
this.group
)}`;
}
get diasporaShareUrl(): string {
return `https://share.diasporafoundation.org/?title=${encodeURIComponent(
displayName(this.group)
)}&url=${encodeURIComponent(this.group.url)}`;
}
copyURL(): void {
this.groupURLInput.$refs.input.select();
document.execCommand("copy");
this.showCopiedTooltip = true;
setTimeout(() => {
this.showCopiedTooltip = false;
}, 2000);
}
}
</script>
<style lang="scss" scoped>
.diaspora span svg {
height: 2rem;
width: 2rem;
}
</style>

View File

@ -112,7 +112,12 @@
<span @click="setIdentity(identity)"> <span @click="setIdentity(identity)">
<div class="media-left"> <div class="media-left">
<figure class="image is-32x32" v-if="identity.avatar"> <figure class="image is-32x32" v-if="identity.avatar">
<img class="is-rounded" :src="identity.avatar.url" alt /> <img
class="is-rounded"
loading="lazy"
:src="identity.avatar.url"
alt
/>
</figure> </figure>
<b-icon v-else size="is-medium" icon="account-circle" /> <b-icon v-else size="is-medium" icon="account-circle" />
</div> </div>
@ -133,11 +138,6 @@
:to="{ name: RouteName.UPDATE_IDENTITY }" :to="{ name: RouteName.UPDATE_IDENTITY }"
>{{ $t("My account") }}</b-navbar-item >{{ $t("My account") }}</b-navbar-item
> >
<!-- <b-navbar-item tag="router-link" :to="{ name: RouteName.CREATE_GROUP }">-->
<!-- {{ $t('Create group') }}-->
<!-- </b-navbar-item>-->
<b-navbar-item <b-navbar-item
v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR" v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR"
tag="router-link" tag="router-link"

View File

@ -5,7 +5,7 @@
> >
<div class="title-info-wrapper"> <div class="title-info-wrapper">
<p class="post-minimalist-title">{{ post.title }}</p> <p class="post-minimalist-title">{{ post.title }}</p>
<small class="has-text-grey">{{ <small class="has-text-grey-dark">{{
formatDistanceToNow(new Date(post.publishAt || post.insertedAt), { formatDistanceToNow(new Date(post.publishAt || post.insertedAt), {
locale: $dateFnsLocale, locale: $dateFnsLocale,
addSuffix: true, addSuffix: true,

View File

@ -23,6 +23,7 @@
<div class="title-wrapper"> <div class="title-wrapper">
<img <img
class="favicon" class="favicon"
alt=""
v-if="resource.metadata && resource.metadata.faviconUrl" v-if="resource.metadata && resource.metadata.faviconUrl"
:src="resource.metadata.faviconUrl" :src="resource.metadata.faviconUrl"
/> />
@ -31,7 +32,8 @@
<div class="metadata-wrapper"> <div class="metadata-wrapper">
<span class="host" v-if="!inline || preview">{{ urlHostname }}</span> <span class="host" v-if="!inline || preview">{{ urlHostname }}</span>
<span <span
class="published-at is-hidden-mobile" class="published-at"
:class="{ 'is-hidden-mobile': !inline }"
v-if="resource.updatedAt || resource.publishedAt" v-if="resource.updatedAt || resource.publishedAt"
>{{ >{{
(resource.updatedAt || resource.publishedAt) (resource.updatedAt || resource.publishedAt)

View File

@ -80,10 +80,22 @@ export const GROUP_FIELDS_FRAGMENTS = gql`
avatar { avatar {
id id
url url
name
metadata {
width
height
blurhash
}
} }
banner { banner {
id id
url url
name
metadata {
width
height
blurhash
}
} }
organizedEvents( organizedEvents(
afterDatetime: $afterDateTime afterDatetime: $afterDateTime

View File

@ -41,6 +41,11 @@ export const POST_FRAGMENT = gql`
id id
url url
name name
metadata {
height
width
blurhash
}
} }
} }
${TAG_FRAGMENT} ${TAG_FRAGMENT}

View File

@ -1043,5 +1043,9 @@
"User settings": "User settings", "User settings": "User settings",
"You changed your email or password": "You changed your email or password", "You changed your email or password": "You changed your email or password",
"Organized by you": "Organized by you", "Organized by you": "Organized by you",
"Move resource to the root folder": "Move resource to the root folder" "Move resource to the root folder": "Move resource to the root folder",
"Share this group": "Share this group",
"This group is accessible only through it's link. Be careful where you post this link.": "This group is accessible only through it's link. Be careful where you post this link.",
"{count} members": "{count} members",
"Share": "Share"
} }

View File

@ -1134,5 +1134,9 @@
"{username} was invited to {group}": "{username} a été invité à {group}", "{username} was invited to {group}": "{username} a été invité à {group}",
"© The OpenStreetMap Contributors": "© Les Contributeur⋅ices OpenStreetMap", "© The OpenStreetMap Contributors": "© Les Contributeur⋅ices OpenStreetMap",
"Organized by you": "Organisé par vous", "Organized by you": "Organisé par vous",
"Move resource to the root folder": "Déplacer la resource dans le dossier racine" "Move resource to the root folder": "Déplacer la resource dans le dossier racine",
"Share this group": "Partager ce groupe",
"This group is accessible only through it's link. Be careful where you post this link.": "Ce groupe est accessible uniquement à travers son lien. Faites attention où vous le diffusez.",
"{count} members": "{count} membres",
"Share": "Partager"
} }

View File

@ -7,7 +7,7 @@ import type { IDiscussion } from "../discussions";
import type { IPost } from "../post.model"; import type { IPost } from "../post.model";
import type { IAddress } from "../address.model"; import type { IAddress } from "../address.model";
import { Address } from "../address.model"; import { Address } from "../address.model";
import { ActorType, Openness } from "../enums"; import { ActorType, GroupVisibility, Openness } from "../enums";
import type { IMember } from "./member.model"; import type { IMember } from "./member.model";
import type { ITodoList } from "../todolist"; import type { ITodoList } from "../todolist";
import { IActivity } from "../activity.model"; import { IActivity } from "../activity.model";
@ -20,6 +20,7 @@ export interface IGroup extends IActor {
organizedEvents: Paginate<IEvent>; organizedEvents: Paginate<IEvent>;
physicalAddress: IAddress; physicalAddress: IAddress;
openness: Openness; openness: Openness;
visibility: GroupVisibility;
manuallyApprovesFollowers: boolean; manuallyApprovesFollowers: boolean;
activity: Paginate<IActivity>; activity: Paginate<IActivity>;
} }
@ -43,6 +44,7 @@ export class Group extends Actor implements IGroup {
this.patch(hash); this.patch(hash);
} }
visibility: GroupVisibility = GroupVisibility.PUBLIC;
activity: Paginate<IActivity> = { elements: [], total: 0 }; activity: Paginate<IActivity> = { elements: [], total: 0 };
openness: Openness = Openness.INVITE_ONLY; openness: Openness = Openness.INVITE_ONLY;

View File

@ -45,104 +45,30 @@
}} }}
</b-message> </b-message>
<header class="block-container presentation"> <header class="block-container presentation">
<div class="block-column media"> <div class="banner-container">
<div class="media-left"> <lazy-image-wrapper :picture="group.picture" />
</div>
<div class="header">
<div class="avatar-container">
<figure class="image is-128x128" v-if="group.avatar"> <figure class="image is-128x128" v-if="group.avatar">
<img class="is-rounded" :src="group.avatar.url" alt="" /> <img class="is-rounded" :src="group.avatar.url" alt="" />
</figure> </figure>
<b-icon v-else size="is-large" icon="account-group" /> <b-icon v-else size="is-large" icon="account-group" />
</div> </div>
<div class="media-content"> <div class="title-container">
<h1 v-if="group.name">{{ group.name }}</h1> <h1 v-if="group.name">{{ group.name }}</h1>
<b-skeleton v-else :animated="true" /> <b-skeleton v-else :animated="true" />
<small class="has-text-grey" v-if="group.preferredUsername" <small class="has-text-grey-dark" v-if="group.preferredUsername"
>@{{ usernameWithDomain(group) }}</small >@{{ usernameWithDomain(group) }}</small
> >
<b-skeleton v-else :animated="true" /> <b-skeleton v-else :animated="true" />
<br /> <br />
<div class="buttons">
<b-button
outlined
icon-left="timeline-text"
v-if="isCurrentActorAGroupMember"
tag="router-link"
:to="{
name: RouteName.TIMELINE,
params: { preferredUsername: usernameWithDomain(group) },
}"
>{{ $t("Activity") }}</b-button
>
<b-button
outlined
icon-left="cog"
v-if="isCurrentActorAGroupAdmin"
tag="router-link"
:to="{
name: RouteName.GROUP_PUBLIC_SETTINGS,
params: { preferredUsername: usernameWithDomain(group) },
}"
>{{ $t("Group settings") }}</b-button
>
<b-dropdown
class="menu-dropdown"
aria-role="list"
v-if="isCurrentActorAGroupMember"
position="is-bottom-left"
>
<b-button
slot="trigger"
outlined
role="button"
icon-right="dots-horizontal"
>
</b-button>
<b-dropdown-item
aria-role="listitem"
v-if="ableToReport"
@click="isReportModalActive = true"
>
<span>
<b-icon icon="flag" />
{{ $t("Report") }}
</span>
</b-dropdown-item>
<b-dropdown-item
aria-role="listitem"
v-if="isCurrentActorAGroupMember"
@click="leaveGroup"
>
<span>
<b-icon icon="exit-to-app" />
{{ $t("Leave") }}
</span>
</b-dropdown-item>
<hr class="dropdown-divider" />
<b-dropdown-item has-link aria-role="listitem">
<a
:href="`@${preferredUsername}/feed/atom`"
:title="$t('Atom feed for events and posts')"
>
<b-icon icon="rss" />
{{ $t("RSS/Atom Feed") }}
</a>
</b-dropdown-item>
<b-dropdown-item has-link aria-role="listitem">
<a
:href="`@${preferredUsername}/feed/ics`"
:title="$t('ICS feed for events')"
>
<b-icon icon="calendar-sync" />
{{ $t("ICS/WebCal Feed") }}
</a>
</b-dropdown-item>
</b-dropdown>
</div>
</div>
</div> </div>
<div class="group-metadata">
<div class="block-column members" v-if="isCurrentActorAGroupMember"> <div class="block-column members" v-if="isCurrentActorAGroupMember">
<div> <div>
<figure <figure
class="image is-48x48" class="image is-32x32"
:title=" :title="
$t(`@{username} ({role})`, { $t(`@{username} ({role})`, {
username: usernameWithDomain(member.actor), username: usernameWithDomain(member.actor),
@ -158,11 +84,11 @@
v-if="member.actor.avatar" v-if="member.actor.avatar"
alt alt
/> />
<b-icon v-else size="is-large" icon="account-circle" /> <b-icon v-else size="is-medium" icon="account-circle" />
</figure> </figure>
</div> </div>
<p> <p>
{{ $t("{count} team members", { count: group.members.total }) }} {{ $t("{count} members", { count: group.members.total }) }}
<router-link <router-link
v-if="isCurrentActorAGroupAdmin" v-if="isCurrentActorAGroupAdmin"
:to="{ :to="{
@ -173,7 +99,7 @@
> >
</p> </p>
</div> </div>
<div class="block-column address" v-else> <!-- <div class="block-column address">
<address v-if="physicalAddress"> <address v-if="physicalAddress">
<p <p
class="addressDescription" class="addressDescription"
@ -257,12 +183,101 @@
</b-dropdown-item> </b-dropdown-item>
</b-dropdown> </b-dropdown>
</p> </p>
</div> </div> -->
<img <div class="buttons">
v-if="group.banner && group.banner.url" <b-button
:src="group.banner.url" outlined
alt="" icon-left="timeline-text"
v-if="isCurrentActorAGroupMember"
tag="router-link"
:to="{
name: RouteName.TIMELINE,
params: { preferredUsername: usernameWithDomain(group) },
}"
>{{ $t("Activity") }}</b-button
>
<b-button
outlined
icon-left="cog"
v-if="isCurrentActorAGroupAdmin"
tag="router-link"
:to="{
name: RouteName.GROUP_PUBLIC_SETTINGS,
params: { preferredUsername: usernameWithDomain(group) },
}"
>{{ $t("Group settings") }}</b-button
>
<b-button
outlined
icon-left="share"
@click="triggerShare()"
v-if="!isCurrentActorAGroupMember"
>
{{ $t("Share") }}
</b-button>
<b-dropdown
class="menu-dropdown"
v-if="isCurrentActorAGroupMember"
position="is-bottom-left"
aria-role="menu"
>
<b-button
slot="trigger"
outlined
role="button"
icon-left="dots-horizontal"
aria-label="Other actions"
/> />
<b-dropdown-item aria-role="menuitem" @click="triggerShare()">
<span>
<b-icon icon="share" />
{{ $t("Share") }}
</span>
</b-dropdown-item>
<hr class="dropdown-divider" />
<b-dropdown-item has-link aria-role="menuitem">
<a
:href="`@${preferredUsername}/feed/atom`"
:title="$t('Atom feed for events and posts')"
>
<b-icon icon="rss" />
{{ $t("RSS/Atom Feed") }}
</a>
</b-dropdown-item>
<b-dropdown-item has-link aria-role="menuitem">
<a
:href="`@${preferredUsername}/feed/ics`"
:title="$t('ICS feed for events')"
>
<b-icon icon="calendar-sync" />
{{ $t("ICS/WebCal Feed") }}
</a>
</b-dropdown-item>
<hr class="dropdown-divider" />
<b-dropdown-item
aria-role="menuitem"
v-if="ableToReport"
@click="isReportModalActive = true"
>
<span>
<b-icon icon="flag" />
{{ $t("Report") }}
</span>
</b-dropdown-item>
<b-dropdown-item
aria-role="menuitem"
v-if="isCurrentActorAGroupMember"
@click="leaveGroup"
>
<span>
<b-icon icon="exit-to-app" />
{{ $t("Leave") }}
</span>
</b-dropdown-item>
</b-dropdown>
</div>
</div>
</div>
</header> </header>
</div> </div>
<div v-if="isCurrentActorAGroupMember" class="block-container"> <div v-if="isCurrentActorAGroupMember" class="block-container">
@ -285,7 +300,7 @@
:discussion="discussion" :discussion="discussion"
/> />
</div> </div>
<div v-else class="content has-text-grey has-text-centered"> <div v-else class="content has-text-grey-dark has-text-centered">
<p>{{ $t("No discussions yet") }}</p> <p>{{ $t("No discussions yet") }}</p>
</div> </div>
</template> </template>
@ -330,7 +345,7 @@
</div> </div>
<div <div
v-else-if="group" v-else-if="group"
class="content has-text-grey has-text-centered" class="content has-text-grey-dark has-text-centered"
> >
<p>{{ $t("No resources yet") }}</p> <p>{{ $t("No resources yet") }}</p>
</div> </div>
@ -351,7 +366,7 @@
<div class="block-column"> <div class="block-column">
<!-- Events --> <!-- Events -->
<group-section <group-section
:title="$t('Upcoming events')" :title="$t('Events')"
icon="calendar" icon="calendar"
:privateSection="false" :privateSection="false"
:route="{ :route="{
@ -373,7 +388,7 @@
</div> </div>
<div <div
v-else-if="group" v-else-if="group"
class="content has-text-grey has-text-centered" class="content has-text-grey-dark has-text-centered"
> >
<p>{{ $t("No public upcoming events") }}</p> <p>{{ $t("No public upcoming events") }}</p>
</div> </div>
@ -411,7 +426,7 @@
</div> </div>
<div <div
v-else-if="group" v-else-if="group"
class="content has-text-grey has-text-centered" class="content has-text-grey-dark has-text-centered"
> >
<p>{{ $t("No posts yet") }}</p> <p>{{ $t("No posts yet") }}</p>
</div> </div>
@ -434,13 +449,54 @@
{{ $t("No group found") }} {{ $t("No group found") }}
</b-message> </b-message>
<div v-else class="public-container"> <div v-else class="public-container">
<aside class="group-metadata">
<div class="sticky">
<event-metadata-block
:title="$t('Location')"
:icon="
physicalAddress ? physicalAddress.poiInfos.poiIcon.icon : 'earth'
"
>
<div class="address-wrapper">
<span v-if="!physicalAddress">{{
$t("No address defined")
}}</span>
<div class="address" v-if="physicalAddress">
<div>
<address>
<p
class="addressDescription"
:title="physicalAddress.poiInfos.name"
>
{{ physicalAddress.poiInfos.name }}
</p>
<p class="has-text-grey-dark">
{{ physicalAddress.poiInfos.alternativeName }}
</p>
</address>
</div>
<span
class="map-show-button"
@click="showMap = !showMap"
v-if="physicalAddress.geom"
>{{ $t("Show map") }}</span
>
</div>
</div>
</event-metadata-block>
</div>
</aside>
<div class="main-content">
<section> <section>
<subtitle>{{ $t("About") }}</subtitle> <subtitle>{{ $t("About") }}</subtitle>
<div <div
v-html="group.summary" v-html="group.summary"
v-if="group.summary && group.summary !== '<p></p>'" v-if="group.summary && group.summary !== '<p></p>'"
/> />
<div v-else-if="group" class="content has-text-grey has-text-centered"> <div
v-else-if="group"
class="content has-text-grey-dark has-text-centered"
>
<p>{{ $t("This group doesn't have a description yet.") }}</p> <p>{{ $t("This group doesn't have a description yet.") }}</p>
</div> </div>
</section> </section>
@ -459,11 +515,14 @@
</div> </div>
<div <div
v-else-if="group && group.organizedEvents.elements.length == 0" v-else-if="group && group.organizedEvents.elements.length == 0"
class="content has-text-grey has-text-centered" class="content has-text-grey-dark has-text-centered"
> >
<p>{{ $t("No public upcoming events") }}</p> <p>{{ $t("No public upcoming events") }}</p>
</div> </div>
<div v-else-if="group" class="content has-text-grey has-text-centered"> <div
v-else-if="group"
class="content has-text-grey-dark has-text-centered"
>
<p>{{ $t("No public upcoming events") }}</p> <p>{{ $t("No public upcoming events") }}</p>
</div> </div>
<b-skeleton animated v-else-if="$apollo.loading"></b-skeleton> <b-skeleton animated v-else-if="$apollo.loading"></b-skeleton>
@ -486,7 +545,10 @@
:post="post" :post="post"
/> />
</div> </div>
<div v-else-if="group" class="content has-text-grey has-text-centered"> <div
v-else-if="group"
class="content has-text-grey-dark has-text-centered"
>
<p>{{ $t("No posts yet") }}</p> <p>{{ $t("No posts yet") }}</p>
</div> </div>
<b-skeleton animated v-else-if="$apollo.loading"></b-skeleton> <b-skeleton animated v-else-if="$apollo.loading"></b-skeleton>
@ -499,6 +561,7 @@
>{{ $t("View all posts") }}</router-link >{{ $t("View all posts") }}</router-link
> >
</section> </section>
</div>
<b-modal <b-modal
v-if="physicalAddress && physicalAddress.geom" v-if="physicalAddress && physicalAddress.geom"
:active.sync="showMap" :active.sync="showMap"
@ -526,13 +589,16 @@
@close="$refs.reportModal.close()" @close="$refs.reportModal.close()"
/> />
</b-modal> </b-modal>
<b-modal :active.sync="isShareModalActive" has-modal-card ref="shareModal">
<share-group-modal :group="group" />
</b-modal>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Watch } from "vue-property-decorator"; import { Component, Prop, Watch } from "vue-property-decorator";
import EventCard from "@/components/Event/EventCard.vue"; import EventCard from "@/components/Event/EventCard.vue";
import { IActor, usernameWithDomain } from "@/types/actor"; import { displayName, IActor, usernameWithDomain } from "@/types/actor";
import Subtitle from "@/components/Utils/Subtitle.vue"; import Subtitle from "@/components/Utils/Subtitle.vue";
import CompactTodo from "@/components/Todo/CompactTodo.vue"; import CompactTodo from "@/components/Todo/CompactTodo.vue";
import EventMinimalistCard from "@/components/Event/EventMinimalistCard.vue"; import EventMinimalistCard from "@/components/Event/EventMinimalistCard.vue";
@ -557,6 +623,8 @@ import GroupSection from "../../components/Group/GroupSection.vue";
import ReportModal from "../../components/Report/ReportModal.vue"; import ReportModal from "../../components/Report/ReportModal.vue";
import { PERSON_MEMBERSHIP_GROUP } from "@/graphql/actor"; import { PERSON_MEMBERSHIP_GROUP } from "@/graphql/actor";
import { LEAVE_GROUP } from "@/graphql/group"; import { LEAVE_GROUP } from "@/graphql/group";
import LazyImageWrapper from "../../components/Image/LazyImageWrapper.vue";
import EventMetadataBlock from "../../components/Event/EventMetadataBlock.vue";
@Component({ @Component({
apollo: { apollo: {
@ -574,8 +642,14 @@ import { LEAVE_GROUP } from "@/graphql/group";
GroupSection, GroupSection,
Invitations, Invitations,
ReportModal, ReportModal,
LazyImageWrapper,
EventMetadataBlock,
"map-leaflet": () => "map-leaflet": () =>
import(/* webpackChunkName: "map" */ "../../components/Map.vue"), import(/* webpackChunkName: "map" */ "../../components/Map.vue"),
ShareGroupModal: () =>
import(
/* webpackChunkName: "shareGroupModal" */ "../../components/Group/ShareGroupModal.vue"
),
}, },
metaInfo() { metaInfo() {
return { return {
@ -607,6 +681,8 @@ export default class Group extends mixins(GroupMixin) {
isReportModalActive = false; isReportModalActive = false;
isShareModalActive = false;
@Watch("currentActor") @Watch("currentActor")
watchCurrentActor(currentActor: IActor, oldActor: IActor): void { watchCurrentActor(currentActor: IActor, oldActor: IActor): void {
if (currentActor.id && oldActor && currentActor.id !== oldActor.id) { if (currentActor.id && oldActor && currentActor.id !== oldActor.id) {
@ -717,6 +793,27 @@ export default class Group extends mixins(GroupMixin) {
} }
} }
triggerShare(): void {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore-start
if (navigator.share) {
navigator
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
.share({
title: displayName(this.group),
url: this.group.url,
})
.then(() => console.log("Successful share"))
.catch((error: any) => console.log("Error sharing", error));
} else {
this.isShareModalActive = true;
// send popup
}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore-end
}
get groupTitle(): undefined | string { get groupTitle(): undefined | string {
if (!this.group) return undefined; if (!this.group) return undefined;
return this.group.name || this.group.preferredUsername; return this.group.name || this.group.preferredUsername;
@ -822,17 +919,31 @@ export default class Group extends mixins(GroupMixin) {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
div.container { div.container {
background: white;
margin-bottom: 3rem; margin-bottom: 3rem;
padding: 2rem 0;
.header, .header,
.public-container { .public-container {
margin: auto 1rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.header {
background: $white;
padding-top: 1rem;
}
.header .breadcrumb {
margin-bottom: 0.5rem;
margin-left: 0.5rem;
}
.public-container {
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
padding: 0;
}
.block-container { .block-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -840,8 +951,9 @@ div.container {
&.presentation { &.presentation {
border: 2px solid $purple-2; border: 2px solid $purple-2;
padding: 10px 0; padding: 0 0 10px;
position: relative; position: relative;
flex-direction: column;
h1 { h1 {
color: $purple-1; color: $purple-1;
@ -858,29 +970,17 @@ div.container {
z-index: 2; z-index: 2;
} }
& > img { & > .banner-container {
position: absolute; display: flex;
left: 0; justify-content: center;
top: 0; height: 30vh;
::v-deep img {
width: 100%; width: 100%;
height: 100%; height: 100%;
opacity: 0.3;
object-fit: cover; object-fit: cover;
object-position: 50% 50%; object-position: 50% 50%;
} }
} }
.members {
display: flex;
flex-direction: column;
div {
display: flex;
}
figure:not(:first-child) {
margin-left: -10px;
}
} }
div.address { div.address {
@ -925,9 +1025,19 @@ div.container {
.block-column { .block-column {
flex: 1; flex: 1;
margin: 0 1rem; margin: 0 0.5rem;
max-width: 576px;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
section { section {
background: $white;
.posts-wrapper { .posts-wrapper {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@ -965,9 +1075,95 @@ div.container {
} }
} }
} }
.header {
display: flex;
flex-wrap: wrap;
justify-content: center;
flex-direction: column;
flex: 1;
margin: 0;
align-items: center;
.avatar-container {
display: flex;
align-self: center;
height: 0;
margin-top: 16px;
align-items: flex-end;
figure {
position: relative;
img {
position: absolute;
background: #fff;
}
}
}
.title-container {
flex: 1;
display: flex;
flex-direction: column;
text-align: center;
h1 {
font-size: 32px;
line-height: 38px;
}
}
.group-metadata {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
& > .buttons {
justify-content: center;
}
.members {
display: flex;
flex-direction: column;
min-width: 300px;
align-items: center;
div {
display: flex;
}
figure:not(:first-child) {
margin-left: -10px;
}
}
}
}
} }
.public-container { .public-container {
.group-metadata {
min-width: 20rem;
flex: 1;
padding-left: 1rem;
margin: 2rem auto;
.sticky {
position: sticky;
background: white;
top: 50px;
padding: 1rem;
}
}
.main-content {
min-width: 20rem;
padding: 1rem;
flex: 2;
background: white;
margin: 2rem auto;
}
section { section {
margin-top: 2rem; margin-top: 2rem;
} }

View File

@ -37,10 +37,10 @@
> >
<form @submit.prevent="updateGroup"> <form @submit.prevent="updateGroup">
<b-field :label="$t('Group name')"> <b-field :label="$t('Group name')">
<b-input v-model="group.name" /> <b-input v-model="editableGroup.name" />
</b-field> </b-field>
<b-field :label="$t('Group short description')"> <b-field :label="$t('Group short description')">
<editor mode="basic" v-model="group.summary" :maxSize="500" <editor mode="basic" v-model="editableGroup.summary" :maxSize="500"
/></b-field> /></b-field>
<b-field :label="$t('Avatar')"> <b-field :label="$t('Avatar')">
<picture-upload <picture-upload
@ -62,7 +62,7 @@
<p class="label">{{ $t("Group visibility") }}</p> <p class="label">{{ $t("Group visibility") }}</p>
<div class="field"> <div class="field">
<b-radio <b-radio
v-model="group.visibility" v-model="editableGroup.visibility"
name="groupVisibility" name="groupVisibility"
:native-value="GroupVisibility.PUBLIC" :native-value="GroupVisibility.PUBLIC"
> >
@ -76,7 +76,7 @@
</div> </div>
<div class="field"> <div class="field">
<b-radio <b-radio
v-model="group.visibility" v-model="editableGroup.visibility"
name="groupVisibility" name="groupVisibility"
:native-value="GroupVisibility.PRIVATE" :native-value="GroupVisibility.PRIVATE"
>{{ $t("Only accessible through link") }}<br /> >{{ $t("Only accessible through link") }}<br />
@ -110,7 +110,7 @@
<p class="label">{{ $t("New members") }}</p> <p class="label">{{ $t("New members") }}</p>
<div class="field"> <div class="field">
<b-radio <b-radio
v-model="group.openness" v-model="editableGroup.openness"
name="groupOpenness" name="groupOpenness"
:native-value="Openness.OPEN" :native-value="Openness.OPEN"
> >
@ -124,7 +124,7 @@
</div> </div>
<div class="field"> <div class="field">
<b-radio <b-radio
v-model="group.openness" v-model="editableGroup.openness"
name="groupOpenness" name="groupOpenness"
:native-value="Openness.INVITE_ONLY" :native-value="Openness.INVITE_ONLY"
>{{ $t("Manually invite new members") }}<br /> >{{ $t("Manually invite new members") }}<br />
@ -140,14 +140,14 @@
:label="$t('Followers')" :label="$t('Followers')"
:message="$t('Followers will receive new public events and posts.')" :message="$t('Followers will receive new public events and posts.')"
> >
<b-checkbox v-model="group.manuallyApprovesFollowers"> <b-checkbox v-model="editableGroup.manuallyApprovesFollowers">
{{ $t("Manually approve new followers") }} {{ $t("Manually approve new followers") }}
</b-checkbox> </b-checkbox>
</b-field> </b-field>
<full-address-auto-complete <full-address-auto-complete
:label="$t('Group address')" :label="$t('Group address')"
v-model="group.physicalAddress" v-model="editableGroup.physicalAddress"
:value="currentAddress" :value="currentAddress"
/> />
@ -171,14 +171,13 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component } from "vue-property-decorator"; import { Component, Watch } from "vue-property-decorator";
import FullAddressAutoComplete from "@/components/Event/FullAddressAutoComplete.vue"; import FullAddressAutoComplete from "@/components/Event/FullAddressAutoComplete.vue";
import { Route } from "vue-router"; import { Route } from "vue-router";
import PictureUpload from "@/components/PictureUpload.vue"; import PictureUpload from "@/components/PictureUpload.vue";
import { mixins } from "vue-class-component"; import { mixins } from "vue-class-component";
import GroupMixin from "@/mixins/group"; import GroupMixin from "@/mixins/group";
import { GroupVisibility, Openness } from "@/types/enums"; import { GroupVisibility, Openness } from "@/types/enums";
import RouteName from "../../router/name";
import { UPDATE_GROUP, DELETE_GROUP } from "../../graphql/group"; import { UPDATE_GROUP, DELETE_GROUP } from "../../graphql/group";
import { IGroup, usernameWithDomain } from "../../types/actor"; import { IGroup, usernameWithDomain } from "../../types/actor";
import { Address, IAddress } from "../../types/address.model"; import { Address, IAddress } from "../../types/address.model";
@ -186,6 +185,7 @@ import { CONFIG } from "@/graphql/config";
import { IConfig } from "@/types/config.model"; import { IConfig } from "@/types/config.model";
import { ServerParseError } from "@apollo/client/link/http"; import { ServerParseError } from "@apollo/client/link/http";
import { ErrorResponse } from "@apollo/client/link/error"; import { ErrorResponse } from "@apollo/client/link/error";
import RouteName from "@/router/name";
@Component({ @Component({
components: { components: {
@ -225,9 +225,12 @@ export default class GroupSettings extends mixins(GroupMixin) {
showCopiedTooltip = false; showCopiedTooltip = false;
editableGroup!: IGroup;
async updateGroup(): Promise<void> { async updateGroup(): Promise<void> {
try { try {
const variables = this.buildVariables(); const variables = this.buildVariables();
console.log(variables);
await this.$apollo.mutate<{ updateGroup: IGroup }>({ await this.$apollo.mutate<{ updateGroup: IGroup }>({
mutation: UPDATE_GROUP, mutation: UPDATE_GROUP,
variables, variables,
@ -270,18 +273,26 @@ export default class GroupSettings extends mixins(GroupMixin) {
}, 2000); }, 2000);
} }
@Watch("group")
async watchUpdateGroup(): Promise<void> {
this.editableGroup = { ...this.group };
}
private buildVariables() { private buildVariables() {
let avatarObj = {}; let avatarObj = {};
let bannerObj = {}; let bannerObj = {};
const variables = { ...this.group }; const variables = { ...this.editableGroup };
const physicalAddress = {
...variables.physicalAddress,
};
// eslint-disable-next-line // eslint-disable-next-line
// @ts-ignore // @ts-ignore
delete variables.__typename; delete variables.__typename;
if (variables.physicalAddress) { if (physicalAddress) {
// eslint-disable-next-line // eslint-disable-next-line
// @ts-ignore // @ts-ignore
delete variables.physicalAddress.__typename; delete physicalAddress.__typename;
} }
delete variables.avatar; delete variables.avatar;
delete variables.banner; delete variables.banner;
@ -291,7 +302,7 @@ export default class GroupSettings extends mixins(GroupMixin) {
avatar: { avatar: {
media: { media: {
name: this.avatarFile.name, name: this.avatarFile.name,
alt: `${this.group.preferredUsername}'s avatar`, alt: `${this.editableGroup.preferredUsername}'s avatar`,
file: this.avatarFile, file: this.avatarFile,
}, },
}, },
@ -303,14 +314,20 @@ export default class GroupSettings extends mixins(GroupMixin) {
banner: { banner: {
media: { media: {
name: this.bannerFile.name, name: this.bannerFile.name,
alt: `${this.group.preferredUsername}'s banner`, alt: `${this.editableGroup.preferredUsername}'s banner`,
file: this.bannerFile, file: this.bannerFile,
}, },
}, },
}; };
} }
return { return {
...variables, id: this.group.id,
name: this.editableGroup.name,
summary: this.editableGroup.summary,
visibility: this.editableGroup.visibility,
openness: this.editableGroup.openness,
manuallyApprovesFollowers: this.editableGroup.manuallyApprovesFollowers,
physicalAddress,
...avatarObj, ...avatarObj,
...bannerObj, ...bannerObj,
}; };
@ -322,7 +339,7 @@ export default class GroupSettings extends mixins(GroupMixin) {
} }
get currentAddress(): IAddress { get currentAddress(): IAddress {
return new Address(this.group.physicalAddress); return new Address(this.editableGroup.physicalAddress);
} }
get avatarMaxSize(): number | undefined { get avatarMaxSize(): number | undefined {

View File

@ -49,7 +49,7 @@
<picture-upload <picture-upload
v-model="pictureFile" v-model="pictureFile"
:textFallback="$t('Headline picture')" :textFallback="$t('Headline picture')"
:defaultImage="post.picture" :defaultImage="editablePost.picture"
/> />
<b-field <b-field
@ -61,21 +61,21 @@
size="is-large" size="is-large"
aria-required="true" aria-required="true"
required required
v-model="post.title" v-model="editablePost.title"
/> />
</b-field> </b-field>
<tag-input v-model="post.tags" :data="tags" path="title" /> <tag-input v-model="editablePost.tags" :data="tags" path="title" />
<div class="field"> <div class="field">
<label class="label">{{ $t("Post") }}</label> <label class="label">{{ $t("Post") }}</label>
<p v-if="errors.body" class="help is-danger">{{ errors.body }}</p> <p v-if="errors.body" class="help is-danger">{{ errors.body }}</p>
<editor v-model="post.body" /> <editor v-model="editablePost.body" />
</div> </div>
<subtitle>{{ $t("Who can view this post") }}</subtitle> <subtitle>{{ $t("Who can view this post") }}</subtitle>
<div class="field"> <div class="field">
<b-radio <b-radio
v-model="post.visibility" v-model="editablePost.visibility"
name="postVisibility" name="postVisibility"
:native-value="PostVisibility.PUBLIC" :native-value="PostVisibility.PUBLIC"
>{{ $t("Visible everywhere on the web") }}</b-radio >{{ $t("Visible everywhere on the web") }}</b-radio
@ -83,7 +83,7 @@
</div> </div>
<div class="field"> <div class="field">
<b-radio <b-radio
v-model="post.visibility" v-model="editablePost.visibility"
name="postVisibility" name="postVisibility"
:native-value="PostVisibility.UNLISTED" :native-value="PostVisibility.UNLISTED"
>{{ $t("Only accessible through link") }}</b-radio >{{ $t("Only accessible through link") }}</b-radio
@ -91,7 +91,7 @@
</div> </div>
<div class="field"> <div class="field">
<b-radio <b-radio
v-model="post.visibility" v-model="editablePost.visibility"
name="postVisibility" name="postVisibility"
:native-value="PostVisibility.PRIVATE" :native-value="PostVisibility.PRIVATE"
>{{ $t("Only accessible to members of the group") }}</b-radio >{{ $t("Only accessible to members of the group") }}</b-radio
@ -166,7 +166,7 @@ import {
import { IPost } from "../../types/post.model"; import { IPost } from "../../types/post.model";
import Editor from "../../components/Editor.vue"; import Editor from "../../components/Editor.vue";
import { IActor, IGroup, usernameWithDomain } from "../../types/actor"; import { IActor, usernameWithDomain } from "../../types/actor";
import TagInput from "../../components/Event/TagInput.vue"; import TagInput from "../../components/Event/TagInput.vue";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import Subtitle from "../../components/Utils/Subtitle.vue"; import Subtitle from "../../components/Utils/Subtitle.vue";
@ -249,8 +249,6 @@ export default class EditPost extends mixins(GroupMixin) {
tags: [], tags: [],
}; };
group!: IGroup;
PostVisibility = PostVisibility; PostVisibility = PostVisibility;
pictureFile: File | null = null; pictureFile: File | null = null;
@ -259,6 +257,8 @@ export default class EditPost extends mixins(GroupMixin) {
RouteName = RouteName; RouteName = RouteName;
editablePost!: IPost;
usernameWithDomain = usernameWithDomain; usernameWithDomain = usernameWithDomain;
async mounted(): Promise<void> { async mounted(): Promise<void> {
@ -270,6 +270,7 @@ export default class EditPost extends mixins(GroupMixin) {
if (oldPost.picture !== newPost.picture) { if (oldPost.picture !== newPost.picture) {
this.pictureFile = await buildFileFromIMedia(this.post.picture); this.pictureFile = await buildFileFromIMedia(this.post.picture);
} }
this.editablePost = { ...this.post };
} }
// eslint-disable-next-line consistent-return // eslint-disable-next-line consistent-return
@ -280,11 +281,11 @@ export default class EditPost extends mixins(GroupMixin) {
const { data } = await this.$apollo.mutate({ const { data } = await this.$apollo.mutate({
mutation: UPDATE_POST, mutation: UPDATE_POST,
variables: { variables: {
id: this.post.id, id: this.editablePost.id,
title: this.post.title, title: this.editablePost.title,
body: this.post.body, body: this.editablePost.body,
tags: (this.post.tags || []).map(({ title }) => title), tags: (this.editablePost.tags || []).map(({ title }) => title),
visibility: this.post.visibility, visibility: this.editablePost.visibility,
draft, draft,
...(await this.buildPicture()), ...(await this.buildPicture()),
}, },
@ -300,9 +301,9 @@ export default class EditPost extends mixins(GroupMixin) {
const { data } = await this.$apollo.mutate({ const { data } = await this.$apollo.mutate({
mutation: CREATE_POST, mutation: CREATE_POST,
variables: { variables: {
...this.post, ...this.editablePost,
...(await this.buildPicture()), ...(await this.buildPicture()),
tags: (this.post.tags || []).map(({ title }) => title), tags: (this.editablePost.tags || []).map(({ title }) => title),
attributedToId: this.actualGroup.id, attributedToId: this.actualGroup.id,
draft, draft,
}, },
@ -362,16 +363,16 @@ export default class EditPost extends mixins(GroupMixin) {
obj = { ...obj, ...pictureObj }; obj = { ...obj, ...pictureObj };
} }
try { try {
if (this.post.picture && this.pictureFile) { if (this.editablePost.picture && this.pictureFile) {
const oldPictureFile = (await buildFileFromIMedia( const oldPictureFile = (await buildFileFromIMedia(
this.post.picture this.editablePost.picture
)) as File; )) as File;
const oldPictureFileContent = await readFileAsync(oldPictureFile); const oldPictureFileContent = await readFileAsync(oldPictureFile);
const newPictureFileContent = await readFileAsync( const newPictureFileContent = await readFileAsync(
this.pictureFile as File this.pictureFile as File
); );
if (oldPictureFileContent === newPictureFileContent) { if (oldPictureFileContent === newPictureFileContent) {
obj.picture = { mediaId: this.post.picture.id }; obj.picture = { mediaId: this.editablePost.picture.id };
} }
} }
} catch (e) { } catch (e) {

View File

@ -1,9 +1,20 @@
<template> <template>
<div>
<article class="container" v-if="post"> <article class="container" v-if="post">
<section class="heading-section"> <header>
<div class="banner-container">
<lazy-image
v-if="post.picture"
:src="post.picture.url"
:width="post.picture.metadata.width"
:height="post.picture.metadata.height"
:blurhash="post.picture.metadata.blurhash"
/>
</div>
<div class="heading-section">
<div class="heading-wrapper">
<div class="title-metadata">
<h1 class="title">{{ post.title }}</h1> <h1 class="title">{{ post.title }}</h1>
<i18n tag="span" path="By {author}" class="authors"> <p class="metadata">
<router-link <router-link
slot="author" slot="author"
:to="{ :to="{
@ -12,21 +23,26 @@
preferredUsername: usernameWithDomain(post.attributedTo), preferredUsername: usernameWithDomain(post.attributedTo),
}, },
}" }"
>{{ post.attributedTo.name }}</router-link
> >
</i18n> <actor-inline :actor="post.attributedTo" />
<p class="published has-text-grey-dark" v-if="!post.draft"> </router-link>
<span class="published has-text-grey-dark" v-if="!post.draft">
<b-icon icon="clock" size="is-small" />
{{ post.publishAt | formatDateTimeString }} {{ post.publishAt | formatDateTimeString }}
</p> </span>
<small <span
v-if="post.visibility === PostVisibility.PRIVATE" v-if="post.visibility === PostVisibility.PRIVATE"
class="has-text-grey-dark" class="has-text-grey-dark"
> >
<b-icon icon="lock" size="is-small" /> <b-icon icon="lock" size="is-small" />
{{ {{
$t("Accessible only to members", { group: post.attributedTo.name }) $t("Accessible only to members", {
group: post.attributedTo.name,
})
}} }}
</small> </span>
</p>
</div>
<p class="buttons" v-if="isCurrentActorMember"> <p class="buttons" v-if="isCurrentActorMember">
<b-tag type="is-warning" size="is-medium" v-if="post.draft">{{ <b-tag type="is-warning" size="is-medium" v-if="post.draft">{{
$t("Draft") $t("Draft")
@ -42,8 +58,10 @@
>{{ $t("Edit") }}</router-link >{{ $t("Edit") }}</router-link
> >
</p> </p>
<img v-if="post.picture" :src="post.picture.url" alt="" /> </div>
</section> </div>
</header>
<section v-html="post.body" class="content" /> <section v-html="post.body" class="content" />
<section class="tags"> <section class="tags">
<router-link <router-link
@ -55,7 +73,6 @@
</router-link> </router-link>
</section> </section>
</article> </article>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -66,11 +83,12 @@ import { PostVisibility } from "@/types/enums";
import { IMember } from "@/types/actor/member.model"; import { IMember } from "@/types/actor/member.model";
import { CURRENT_ACTOR_CLIENT, PERSON_MEMBERSHIPS } from "../../graphql/actor"; import { CURRENT_ACTOR_CLIENT, PERSON_MEMBERSHIPS } from "../../graphql/actor";
import { FETCH_POST } from "../../graphql/post"; import { FETCH_POST } from "../../graphql/post";
import { IPost } from "../../types/post.model"; import { IPost } from "../../types/post.model";
import { usernameWithDomain } from "../../types/actor"; import { usernameWithDomain } from "../../types/actor";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import Tag from "../../components/Tag.vue"; import Tag from "../../components/Tag.vue";
import LazyImage from "../../components/Image/LazyImage.vue";
import ActorInline from "../../components/Account/ActorInline.vue";
@Component({ @Component({
apollo: { apollo: {
@ -106,6 +124,8 @@ import Tag from "../../components/Tag.vue";
}, },
components: { components: {
Tag, Tag,
LazyImage,
ActorInline,
}, },
metaInfo() { metaInfo() {
return { return {
@ -148,63 +168,80 @@ export default class Post extends mixins(GroupMixin) {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
article { article {
section.heading-section { background: $white !important;
text-align: center; header {
display: flex;
flex-direction: column;
.banner-container {
display: flex;
justify-content: center;
height: 30vh;
}
.heading-section {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: auto -3rem 2rem; margin-bottom: 2rem;
.heading-wrapper {
padding: 15px 10px;
display: flex;
flex-wrap: wrap;
justify-content: center;
.title-metadata {
min-width: 300px;
flex: 20;
p.metadata {
margin-top: 16px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
*:not(:first-child) {
padding-left: 5px;
}
}
}
p.buttons {
flex: 1;
}
}
h1.title { h1.title {
margin: 0 auto; margin: 0;
padding-top: 3rem; font-weight: 500;
font-size: 3rem; font-size: 38px;
font-weight: 700; font-family: "Roboto", "Helvetica", "Arial", serif;
} }
.authors { .authors {
margin-top: 2rem;
display: inline-block; display: inline-block;
} }
.published {
margin-top: 1rem;
}
&::after { &::after {
height: 0.2rem; height: 0.2rem;
content: " "; content: " ";
display: block; display: block;
width: 100%;
background-color: $purple-1; background-color: $purple-1;
margin-top: 1rem;
} }
.buttons { .buttons {
justify-content: center; justify-content: center;
} }
& > * {
z-index: 10;
}
& > img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.3;
object-fit: cover;
object-position: 50% 50%;
z-index: 0;
} }
} }
section.content { & > section {
margin: 0 2rem;
&.content {
font-size: 1.1rem; font-size: 1.1rem;
} }
section.tags { &.tags {
padding-bottom: 5rem; padding-bottom: 5rem;
a { a {
@ -216,10 +253,8 @@ article {
} }
} }
} }
}
background: $white;
max-width: 700px;
margin: 0 auto; margin: 0 auto;
padding: 0 3rem;
} }
</style> </style>