logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe
commit: c873a18c64c995721e62399428205c451f8b4758
parent: 044c9ad0562af059dd961d50961a3880fca9c642
Author: kaniini <ariadne@dereferenced.org>
Date:   Sat,  9 Nov 2019 17:38:45 +0000

Merge branch 'feature/about-page' into 'develop'

Feature/about page

Closes #699

See merge request pleroma/pleroma-fe!985

Diffstat:

MCHANGELOG.md1+
Msrc/boot/after_store.js15+++++++++++++++
Msrc/components/about/about.js13+++++++++++--
Msrc/components/about/about.vue6++++--
Asrc/components/mrf_transparency_panel/mrf_transparency_panel.js16++++++++++++++++
Asrc/components/mrf_transparency_panel/mrf_transparency_panel.vue122+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Msrc/components/nav_panel/nav_panel.vue5+++++
Asrc/components/staff_panel/staff_panel.js14++++++++++++++
Asrc/components/staff_panel/staff_panel.vue23+++++++++++++++++++++++
Msrc/i18n/en.json19+++++++++++++++++++
10 files changed, 230 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md @@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Emoji picker - Started changelog anew - Ability to change user's email +- About page ### Changed - changed the way fading effects for user profile/long statuses works, now uses css-mask instead of gradient background hacks which weren't exactly compatible with semi-transparent themes ### Fixed diff --git a/src/boot/after_store.js b/src/boot/after_store.js @@ -184,6 +184,15 @@ const getAppSecret = async ({ store }) => { }) } +const resolveStaffAccounts = async ({ store, accounts }) => { + const backendInteractor = store.state.api.backendInteractor + let nicknames = accounts.map(uri => uri.split('/').pop()) + .map(id => backendInteractor.fetchUser({ id })) + nicknames = await Promise.all(nicknames) + + store.dispatch('setInstanceOption', { name: 'staffAccounts', value: nicknames }) +} + const getNodeInfo = async ({ store }) => { try { const res = await window.fetch('/nodeinfo/2.0.json') @@ -212,6 +221,12 @@ const getNodeInfo = async ({ store }) => { const frontendVersion = window.___pleromafe_commit_hash store.dispatch('setInstanceOption', { name: 'frontendVersion', value: frontendVersion }) store.dispatch('setInstanceOption', { name: 'tagPolicyAvailable', value: metadata.federation.mrf_policies.includes('TagPolicy') }) + + const federation = metadata.federation + store.dispatch('setInstanceOption', { name: 'federationPolicy', value: federation }) + + const accounts = metadata.staffAccounts + await resolveStaffAccounts({ store, accounts }) } else { throw (res) } diff --git a/src/components/about/about.js b/src/components/about/about.js @@ -1,15 +1,24 @@ import InstanceSpecificPanel from '../instance_specific_panel/instance_specific_panel.vue' import FeaturesPanel from '../features_panel/features_panel.vue' import TermsOfServicePanel from '../terms_of_service_panel/terms_of_service_panel.vue' +import StaffPanel from '../staff_panel/staff_panel.vue' +import MRFTransparencyPanel from '../mrf_transparency_panel/mrf_transparency_panel.vue' const About = { components: { InstanceSpecificPanel, FeaturesPanel, - TermsOfServicePanel + TermsOfServicePanel, + StaffPanel, + MRFTransparencyPanel }, computed: { - showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel } + showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }, + showInstanceSpecificPanel () { + return this.$store.state.instance.showInstanceSpecificPanel && + !this.$store.getters.mergedConfig.hideISP && + this.$store.state.instance.instanceSpecificPanelContent + } } } diff --git a/src/components/about/about.vue b/src/components/about/about.vue @@ -1,8 +1,10 @@ <template> <div class="sidebar"> - <instance-specific-panel /> - <features-panel v-if="showFeaturesPanel" /> + <instance-specific-panel v-if="showInstanceSpecificPanel" /> + <staff-panel /> <terms-of-service-panel /> + <MRFTransparencyPanel /> + <features-panel v-if="showFeaturesPanel" /> </div> </template> diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.js b/src/components/mrf_transparency_panel/mrf_transparency_panel.js @@ -0,0 +1,16 @@ +import { mapState } from 'vuex' + +const MRFTransparencyPanel = { + computed: mapState({ + federationPolicy: state => state.instance.federationPolicy, + mrfPolicies: state => state.instance.federationPolicy.mrf_policies, + acceptInstances: state => state.instance.federationPolicy.mrf_simple.accept, + rejectInstances: state => state.instance.federationPolicy.mrf_simple.reject, + quarantineInstances: state => state.instance.federationPolicy.quarantined_instances, + ftlRemovalInstances: state => state.instance.federationPolicy.mrf_simple.federated_timeline_removal, + mediaNsfwInstances: state => state.instance.federationPolicy.mrf_simple.media_nsfw, + mediaRemovalInstances: state => state.instance.federationPolicy.mrf_simple.media_removal + }) +} + +export default MRFTransparencyPanel diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue @@ -0,0 +1,122 @@ +<template> + <div + v-if="federationPolicy" + class="mrf-transparency-panel" + > + <div class="panel panel-default base01-background"> + <div class="panel-heading timeline-heading base02-background"> + <div class="title"> + {{ $t("about.federation") }} + </div> + </div> + <div class="panel-body"> + <div class="mrf-section"> + <h2>{{ $t("about.mrf_policies") }}</h2> + <p>{{ $t("about.mrf_policies_desc") }}</p> + + <ul> + <li + v-for="policy in mrfPolicies" + :key="policy" + v-text="policy" + /> + </ul> + + <h2>{{ $t("about.mrf_policy_simple") }}</h2> + + <div v-if="acceptInstances.length"> + <h4>{{ $t("about.mrf_policy_simple_accept") }}</h4> + + <p>{{ $t("about.mrf_policy_simple_accept_desc") }}</p> + + <ul> + <li + v-for="instance in acceptInstances" + :key="instance" + v-text="instance" + /> + </ul> + </div> + + <div v-if="rejectInstances.length"> + <h4>{{ $t("about.mrf_policy_simple_reject") }}</h4> + + <p>{{ $t("about.mrf_policy_simple_reject_desc") }}</p> + + <ul> + <li + v-for="instance in rejectInstances" + :key="instance" + v-text="instance" + /> + </ul> + </div> + + <div v-if="quarantineInstances.length"> + <h4>{{ $t("about.mrf_policy_simple_quarantine") }}</h4> + + <p>{{ $t("about.mrf_policy_simple_quarantine_desc") }}</p> + + <ul> + <li + v-for="instance in quarantineInstances" + :key="instance" + v-text="instance" + /> + </ul> + </div> + + <div v-if="ftlRemovalInstances.length"> + <h4>{{ $t("about.mrf_policy_simple_ftl_removal") }}</h4> + + <p>{{ $t("about.mrf_policy_simple_ftl_removal_desc") }}</p> + + <ul> + <li + v-for="instance in ftlRemovalInstances" + :key="instance" + v-text="instance" + /> + </ul> + </div> + + <div v-if="mediaNsfwInstances.length"> + <h4>{{ $t("about.mrf_policy_simple_media_nsfw") }}</h4> + + <p>{{ $t("about.mrf_policy_simple_media_nsfw_desc") }}</p> + + <ul> + <li + v-for="instance in mediaNsfwInstances" + :key="instance" + v-text="instance" + /> + </ul> + </div> + + <div v-if="mediaRemovalInstances.length"> + <h4>{{ $t("about.mrf_policy_simple_media_removal") }}</h4> + + <p>{{ $t("about.mrf_policy_simple_media_removal_desc") }}</p> + + <ul> + <li + v-for="instance in mediaRemovalInstances" + :key="instance" + v-text="instance" + /> + </ul> + </div> + </div> + </div> + </div> + </div> +</template> + +<script src="./mrf_transparency_panel.js"></script> + +<style lang="scss"> +.mrf-section { + margin: 1em; +} +</style> diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue @@ -38,6 +38,11 @@ {{ $t("nav.twkn") }} </router-link> </li> + <li> + <router-link :to="{ name: 'about' }"> + {{ $t("nav.about") }} + </router-link> + </li> </ul> </div> </div> diff --git a/src/components/staff_panel/staff_panel.js b/src/components/staff_panel/staff_panel.js @@ -0,0 +1,14 @@ +import BasicUserCard from '../basic_user_card/basic_user_card.vue' + +const StaffPanel = { + components: { + BasicUserCard + }, + computed: { + staffAccounts () { + return this.$store.state.instance.staffAccounts + } + } +} + +export default StaffPanel diff --git a/src/components/staff_panel/staff_panel.vue b/src/components/staff_panel/staff_panel.vue @@ -0,0 +1,23 @@ +<template> + <div class="staff-panel"> + <div class="panel panel-default base01-background"> + <div class="panel-heading timeline-heading base02-background"> + <div class="title"> + {{ $t("about.staff") }} + </div> + </div> + <div class="panel-body"> + <basic-user-card + v-for="user in staffAccounts" + :key="user.screen_name" + :user="user" + /> + </div> + </div> + </div> +</template> + +<script src="./staff_panel.js" ></script> + +<style lang="scss"> +</style> diff --git a/src/i18n/en.json b/src/i18n/en.json @@ -1,4 +1,23 @@ { + "about": { + "staff": "Staff", + "federation": "Federation", + "mrf_policies": "Enabled MRF Policies", + "mrf_policies_desc": "MRF policies manipulate the federation behaviour of the instance. The following policies are enabled:", + "mrf_policy_simple": "Instance-specific Policies", + "mrf_policy_simple_accept": "Accept", + "mrf_policy_simple_accept_desc": "This instance only accepts messages from the following instances:", + "mrf_policy_simple_reject": "Reject", + "mrf_policy_simple_reject_desc": "This instance will not accept messages from the following instances:", + "mrf_policy_simple_quarantine": "Quarantine", + "mrf_policy_simple_quarantine_desc": "This instance will send only public posts to the following instances:", + "mrf_policy_simple_ftl_removal": "Removal from \"The Whole Known Network\" Timeline", + "mrf_policy_simple_ftl_removal_desc": "This instance removes these instances from \"The Whole Known Network\" timeline:", + "mrf_policy_simple_media_removal": "Media Removal", + "mrf_policy_simple_media_removal_desc": "This instance removes media from posts on the following instances:", + "mrf_policy_simple_media_nsfw": "Media Force-set As Sensitive", + "mrf_policy_simple_media_nsfw_desc": "This instance forces media to be set sensitive in posts on the following instances:" + }, "chat": { "title": "Chat" },