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

Improve group related UI

Browse Source 
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
22 changed files with 892 additions and 427 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
js/src/components/Account/ActorInline.vue Normal file
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>

2
js/src/components/Activity/DiscussionActivityItem.vue
View File

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

2
js/src/components/Activity/EventActivityItem.vue
View File

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

4
js/src/components/Activity/GroupActivityItem.vue
View File

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

2
js/src/components/Activity/MemberActivityItem.vue
View File

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

2
js/src/components/Activity/PostActivityItem.vue
View File

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

2
js/src/components/Activity/ResourceActivityItem.vue
View File

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

4
js/src/components/Discussion/DiscussionListItem.vue
View File

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

9
js/src/components/Group/GroupSection.vue
View File

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

138
js/src/components/Group/ShareGroupModal.vue Normal file
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>

12
js/src/components/NavBar.vue
View File

@@ -112,7 +112,12 @@
<span @click="setIdentity(identity)">
<div class="media-left">
<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>
<b-icon v-else size="is-medium" icon="account-circle" />
</div>
@@ -133,11 +138,6 @@
:to="{ name: RouteName.UPDATE_IDENTITY }"
>{{ $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
v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR"
tag="router-link"

2
js/src/components/Post/PostListItem.vue
View File

@@ -5,7 +5,7 @@
>
<div class="title-info-wrapper">
<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), {
locale: $dateFnsLocale,
addSuffix: true,

4
js/src/components/Resource/ResourceItem.vue
View File

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