Merge branch 'feature/features-panel' into 'develop'

Features panel

See merge request pleroma/pleroma-fe!331

src/App.js

@@ -2,8 +2,9 @@ import UserPanel from './components/user_panel/user_panel.vue'
 import NavPanel from './components/nav_panel/nav_panel.vue'
 import Notifications from './components/notifications/notifications.vue'
 import UserFinder from './components/user_finder/user_finder.vue'
-import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
 import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
+import FeaturesPanel from './components/features_panel/features_panel.vue'
+import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
 import ChatPanel from './components/chat_panel/chat_panel.vue'
 
 export default {
@@ -13,8 +14,9 @@ export default {
     NavPanel,
     Notifications,
     UserFinder,
-    WhoToFollowPanel,
     InstanceSpecificPanel,
+    FeaturesPanel,
+    WhoToFollowPanel,
     ChatPanel
   },
   data: () => ({

src/App.vue

@@ -28,6 +28,7 @@
               <user-panel></user-panel>
               <nav-panel></nav-panel>
               <instance-specific-panel v-if="showInstanceSpecificPanel"></instance-specific-panel>
+              <features-panel v-if="!currentUser"></features-panel>
               <who-to-follow-panel v-if="currentUser && suggestionsEnabled"></who-to-follow-panel>
               <notifications v-if="currentUser"></notifications>
             </div>

src/components/features_panel/features_panel.js

@@ -0,0 +1,14 @@
+const FeaturesPanel = {
+  computed: {
+    chat: function () {
+      return this.$store.state.config.chatAvailable && (!this.$store.state.chatDisabled)
+    },
+    gopher: function () { return this.$store.state.config.gopherAvailable },
+    whoToFollow: function () { return this.$store.state.config.suggestionsEnabled },
+    mediaProxy: function () { return this.$store.state.config.mediaProxyAvailable },
+    scopeOptions: function () { return this.$store.state.config.scopeOptionsEnabled },
+    textlimit: function () { return this.$store.state.config.textlimit }
+  }
+}
+
+export default FeaturesPanel

src/components/features_panel/features_panel.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="features-panel">
+    <div class="panel panel-default base01-background">
+      <div class="panel-heading timeline-heading base02-background base04">
+        <div class="title">
+          {{$t('features_panel.title')}}
+        </div>
+      </div>
+      <div class="panel-body features-panel">
+        <ul>
+          <li v-if="chat">{{$t('features_panel.chat')}}</li>
+          <li v-if="gopher">{{$t('features_panel.gopher')}}</li>
+          <li v-if="whoToFollow">{{$t('features_panel.who_to_follow')}}</li>
+          <li v-if="mediaProxy">{{$t('features_panel.media_proxy')}}</li>
+          <li v-if="scopeOptions">{{$t('features_panel.scope_options')}}</li>
+          <li>{{$t('features_panel.text_limit')}} = {{textlimit}}</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./features_panel.js" ></script>
+
+<style lang="scss">
+  .features-panel li {
+    line-height: 24px;
+  }
+</style>

src/i18n/messages.js

@@ -419,6 +419,15 @@ const en = {
   who_to_follow: {
     who_to_follow: 'Who to follow',
     more: 'More'
+  },
+  features_panel: {
+    title: 'Features',
+    chat: 'Chat',
+    gopher: 'Gopher',
+    who_to_follow: 'Who to follow',
+    media_proxy: 'Media proxy',
+    scope_options: 'Scope options',
+    text_limit: 'Text limit'
   }
 }
 
@@ -943,6 +952,15 @@ const ja = {
   who_to_follow: {
     who_to_follow: 'おすすめユーザー',
     more: 'くわしく'
+  },
+  features_panel: {
+    title: 'ゆうこうなきのう',
+    chat: 'チャット',
+    gopher: 'Gopher',
+    who_to_follow: 'おすすめユーザー',
+    media_proxy: 'メディアプロクシ',
+    scope_options: 'こうかいはんい',
+    text_limit: 'もじのかず'
   }
 }
 

src/main.js

@@ -222,7 +222,12 @@ window.fetch('/instance/panel.html')
 window.fetch('/nodeinfo/2.0.json')
   .then((res) => res.json())
   .then((data) => {
-    const suggestions = data.metadata.suggestions
+    const metadata = data.metadata
+    store.dispatch('setOption', { name: 'mediaProxyAvailable', value: data.metadata.mediaProxy })
+    store.dispatch('setOption', { name: 'chatAvailable', value: data.metadata.chat })
+    store.dispatch('setOption', { name: 'gopherAvailable', value: data.metadata.gopher })
+
+    const suggestions = metadata.suggestions
     store.dispatch('setOption', { name: 'suggestionsEnabled', value: suggestions.enabled })
     store.dispatch('setOption', { name: 'suggestionsWeb', value: suggestions.web })
   })