Merge remote-tracking branch 'upstream/develop' into develop

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

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)
     }

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
+    }
   }
 }
 

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>
 

src/components/media_upload/media_upload.vue

@@ -6,16 +6,16 @@
     @drop="fileDrop"
   >
     <label
-      class="btn btn-default"
+      class="label"
       :title="$t('tool_tip.media_upload')"
     >
       <i
         v-if="uploading"
-        class="icon-spin4 animate-spin"
+        class="progress-icon icon-spin4 animate-spin"
       />
       <i
         v-if="!uploading"
-        class="icon-upload"
+        class="new-icon icon-upload"
       />
       <input
         v-if="uploadReady"
@@ -30,15 +30,24 @@
 
 <script src="./media_upload.js" ></script>
 
-<style>
+<style lang="scss">
 .media-upload {
-  .icon-upload {
+  .label {
+    display: inline-block;
+  }
+
+  .new-icon {
     cursor: pointer;
   }
 
-  label {
-    display: block;
-    width: 100%;
+  .progress-icon {
+    display: inline-block;
+    line-height: 0;
+    &::before {
+      /* Overriding fontello to achieve the perfect speeeen */
+      margin: 0;
+      line-height: 0;
+    }
   }
 }
-</style>
+ </style>

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

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>

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>

src/components/post_status_form/post_status_form.vue

@@ -339,11 +339,6 @@
     font-size: 26px;
     flex: 1;
 
-    i {
-      display: block;
-      width: 100%;
-    }
-
     &.selected, &:hover {
       // needs to be specific to override icon default color
       i, label {

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

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>

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"
   },

src/modules/config.js

@@ -5,6 +5,7 @@ const browserLocale = (window.navigator.language || 'en').split('-')[0]
 
 export const defaultState = {
   colors: {},
+  hideISP: false,
   // bad name: actually hides posts of muted USERS
   hideMutedPosts: undefined, // instance default
   collapseMessageWithSubject: undefined, // instance default