Show bubble instances in about panel (#123)

Reviewed-on: AkkomaGang/pleroma-fe#123

src/boot/after_store.js

@@ -285,6 +285,7 @@ const getNodeInfo = async ({ store }) => {
       })
 
       store.dispatch('setInstanceOption', { name: 'federationPolicy', value: federation })
+      store.dispatch('setInstanceOption', { name: 'localBubbleInstances', value: metadata.localBubbleInstances })
       store.dispatch('setInstanceOption', {
         name: 'federating',
         value: typeof federation.enabled === 'undefined'

src/components/about/about.js

@@ -3,6 +3,7 @@ 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'
+import LocalBubblePanel from '../local_bubble_panel/local_bubble_panel.vue'
 
 const About = {
   components: {
@@ -10,7 +11,8 @@ const About = {
     FeaturesPanel,
     TermsOfServicePanel,
     StaffPanel,
-    MRFTransparencyPanel
+    MRFTransparencyPanel,
+    LocalBubblePanel
   },
   computed: {
     showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },

src/components/about/about.vue

@@ -3,6 +3,7 @@
     <instance-specific-panel v-if="showInstanceSpecificPanel" />
     <staff-panel />
     <terms-of-service-panel />
+    <LocalBubblePanel />
     <MRFTransparencyPanel />
     <features-panel v-if="showFeaturesPanel" />
   </div>

src/components/local_bubble_panel/local_bubble_panel.js

@@ -0,0 +1,12 @@
+import { mapState } from 'vuex'
+import { get } from 'lodash'
+
+const LocalBubblePanel = {
+  computed: {
+    ...mapState({
+      bubbleInstances: state => get(state, 'instance.localBubbleInstances')
+    })
+  }
+}
+
+export default LocalBubblePanel

src/components/local_bubble_panel/local_bubble_panel.scss

@@ -0,0 +1,21 @@
+.mrf-section {
+  margin: 1em;
+
+  table {
+    width:100%;
+    text-align: left;
+    padding-left:10px;
+    padding-bottom:20px;
+
+    th, td {
+      width: 180px;
+      max-width: 360px;
+      overflow:  hidden;
+      vertical-align: text-top;
+    }
+
+    th+th, td+td {
+      width: auto;
+    }
+  }
+}

src/components/local_bubble_panel/local_bubble_panel.vue

@@ -0,0 +1,31 @@
+<template>
+  <div
+    v-if="bubbleInstances"
+    class="bubble-panel"
+  >
+    <div class="panel panel-default base01-background">
+      <div class="panel-heading timeline-heading base02-background">
+        <div class="title">
+          {{ $t("about.bubble_instances") }}
+        </div>
+      </div>
+      <div class="panel-body">
+        <p>{{ $t("about.bubble_instances_description")}}:</p>
+        <ul>
+          <li
+            v-for="instance in bubbleInstances"
+            :key="instance"
+            v-text="instance"
+          />
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./local_bubble_panel.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+@import './local_bubble_panel.scss';
+</style>

src/components/settings_modal/tabs/general_tab.vue

@@ -103,6 +103,18 @@
           <BooleanSetting path="renderMisskeyMarkdown">
             {{ $t('settings.render_mfm') }}
           </BooleanSetting>
+          <ul
+            class="setting-list suboptions"
+          >
+            <li>
+              <BooleanSetting
+                path="renderMfmOnHover"
+                :disabled="!renderMisskeyMarkdown"
+              >
+                {{ $t('settings.render_mfm_on_hover') }}
+              </BooleanSetting>
+            </li>
+          </ul>
         </li>
         <li>
           <BooleanSetting

src/components/status_body/status_body.scss

@@ -204,3 +204,4 @@
     }
   }
 }
+

src/components/status_content/status_content.js

@@ -100,6 +100,9 @@ const StatusContent = {
     maxThumbnails () {
       return this.mergedConfig.maxThumbnails
     },
+    renderMfmOnHover () {
+      return this.mergedConfig.renderMfmOnHover
+    },
     ...mapGetters(['mergedConfig']),
     ...mapState({
       currentUser: state => state.users.currentUser

src/components/status_content/status_content.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="StatusContent"
-    :class="{ '-compact': compact }"
+    :class="{ '-compact': compact, 'mfm-hover': renderMfmOnHover }"
   >
     <slot name="header" />
     <StatusBody
@@ -75,5 +75,17 @@
       height: 50px;
     }
   }
+
+  &.mfm-hover:not(:hover) {
+    .mfm {
+      animation: none;
     }
+  }
+}
+
+.quote-inline,
+.quote + .link-preview {
+  display: none;
+}
+
 </style>

src/components/still-image/still-image.vue

@@ -51,6 +51,10 @@
     width: 100%;
     height: 100%;
     object-fit: contain;
+
+    &::before {
+      line-height: 20px;
+    }
   }
 
   &.animated {

src/i18n/en.json

@@ -1,5 +1,7 @@
 {
     "about": {
+        "bubble_instances": "Local Bubble Instances",
+        "bubble_instances_description": "Instances chosen by the admins to represent the local area of this instance",
         "mrf": {
             "federation": "Federation",
             "keyword": {
@@ -577,6 +579,7 @@
         "remove_alias": "Remove this alias",
         "remove_backup": "Remove",
         "render_mfm": "Render Misskey Markdown",
+        "render_mfm_on_hover": "Pause MFM animations until post hover",
         "replies_in_timeline": "Replies in timeline",
         "reply_visibility_all": "Show all replies",
         "reply_visibility_following": "Only show replies directed at me or users I'm following",

src/modules/config.js

@@ -96,6 +96,7 @@ export const defaultState = {
   sensitiveByDefault: undefined, // instance default
   sensitiveIfSubject: undefined,
   renderMisskeyMarkdown: undefined,
+  renderMfmOnHover: undefined, // instance default
   conversationDisplay: undefined, // instance default
   conversationTreeAdvanced: undefined, // instance default
   conversationOtherRepliesButton: undefined, // instance default

src/modules/instance.js

@@ -57,6 +57,7 @@ const defaultState = {
   sensitiveByDefault: false,
   sensitiveIfSubject: true,
   renderMisskeyMarkdown: false,
+  renderMfmOnHover: false,
   conversationDisplay: 'linear',
   conversationTreeAdvanced: false,
   conversationOtherRepliesButton: 'below',