Merge branch 'hide-statistics' into 'develop'

Add options for hiding post and user engagement statistics.

See merge request pleroma/pleroma-fe!336

src/components/favorite_button/favorite_button.js

@@ -2,6 +2,9 @@ const FavoriteButton = {
   props: ['status', 'loggedIn'],
   data () {
     return {
+      hidePostStatsLocal: typeof this.$store.state.config.hidePostStats === 'undefined'
+        ? this.$store.state.instance.hidePostStats
+        : this.$store.state.config.hidePostStats,
       animated: false
     }
   },

src/components/favorite_button/favorite_button.vue

@@ -1,11 +1,11 @@
 <template>
   <div v-if="loggedIn">
     <i :class='classes' class='favorite-button fav-active' @click.prevent='favorite()'/>
-    <span v-if='status.fave_num > 0'>{{status.fave_num}}</span>
+    <span v-if='!hidePostStatsLocal && status.fave_num > 0'>{{status.fave_num}}</span>
   </div>
   <div v-else>
     <i :class='classes' class='favorite-button'/>
-    <span v-if='status.fave_num > 0'>{{status.fave_num}}</span>
+    <span v-if='!hidePostStatsLocal && status.fave_num > 0'>{{status.fave_num}}</span>
   </div>
 </template>
 

src/components/retweet_button/retweet_button.js

@@ -2,6 +2,9 @@ const RetweetButton = {
   props: ['status', 'loggedIn', 'visibility'],
   data () {
     return {
+      hidePostStatsLocal: typeof this.$store.state.config.hidePostStats === 'undefined'
+        ? this.$store.state.instance.hidePostStats
+        : this.$store.state.config.hidePostStats,
       animated: false
     }
   },

src/components/retweet_button/retweet_button.vue

@@ -2,7 +2,7 @@
   <div v-if="loggedIn">
     <template v-if="visibility !== 'private' && visibility !== 'direct'">
       <i :class='classes' class='icon-retweet rt-active' v-on:click.prevent='retweet()'></i>
-      <span v-if='status.repeat_num > 0'>{{status.repeat_num}}</span>
+      <span v-if='!hidePostStatsLocal && status.repeat_num > 0'>{{status.repeat_num}}</span>
     </template>
     <template v-else>
       <i :class='classes' class='icon-lock' :title="$t('timeline.no_retweet_hint')"></i>
@@ -10,7 +10,7 @@
   </div>
   <div v-else-if="!loggedIn">
     <i :class='classes' class='icon-retweet'></i>
-    <span v-if='status.repeat_num > 0'>{{status.repeat_num}}</span>
+    <span v-if='!hidePostStatsLocal && status.repeat_num > 0'>{{status.repeat_num}}</span>
   </div>
 </template>
 

src/components/settings/settings.js

@@ -13,6 +13,14 @@ const settings = {
       hideAttachmentsLocal: user.hideAttachments,
       hideAttachmentsInConvLocal: user.hideAttachmentsInConv,
       hideNsfwLocal: user.hideNsfw,
+      hidePostStatsLocal: typeof user.hidePostStats === 'undefined'
+        ? instance.hidePostStats
+        : user.hidePostStats,
+      hidePostStatsDefault: this.$t('settings.values.' + instance.hidePostStats),
+      hideUserStatsLocal: typeof user.hideUserStats === 'undefined'
+        ? instance.hideUserStats
+        : user.hideUserStats,
+      hideUserStatsDefault: this.$t('settings.values.' + instance.hideUserStats),
       notificationVisibilityLocal: user.notificationVisibility,
       replyVisibilityLocal: user.replyVisibility,
       loopVideoLocal: user.loopVideo,
@@ -56,6 +64,12 @@ const settings = {
     hideAttachmentsInConvLocal (value) {
       this.$store.dispatch('setOption', { name: 'hideAttachmentsInConv', value })
     },
+    hidePostStatsLocal (value) {
+      this.$store.dispatch('setOption', { name: 'hidePostStats', value })
+    },
+    hideUserStatsLocal (value) {
+      this.$store.dispatch('setOption', { name: 'hideUserStats', value })
+    },
     hideNsfwLocal (value) {
       this.$store.dispatch('setOption', { name: 'hideNsfw', value })
     },

src/components/settings/settings.vue

@@ -138,6 +138,18 @@
               <i class="icon-down-open"/>
             </label>
           </div>
+          <div>
+            <input type="checkbox" id="hidePostStats" v-model="hidePostStatsLocal">
+            <label for="hidePostStats">
+              {{$t('settings.hide_post_stats')}} {{$t('settings.instance_default', { value: hidePostStatsDefault })}}
+            </label>
+          </div>
+          <div>
+            <input type="checkbox" id="hideUserStats" v-model="hideUserStatsLocal">
+            <label for="hideUserStats">
+              {{$t('settings.hide_user_stats')}} {{$t('settings.instance_default', { value: hideUserStatsDefault })}}
+            </label>
+          </div>
         </div>
         <div class="setting-item">
           <p>{{$t('settings.filtering_explanation')}}</p>

src/components/user_card_content/user_card_content.js

@@ -3,6 +3,13 @@ import { hex2rgb } from '../../services/color_convert/color_convert.js'
 
 export default {
   props: [ 'user', 'switcher', 'selected', 'hideBio' ],
+  data () {
+    return {
+      hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined'
+        ? this.$store.state.instance.hideUserStats
+        : this.$store.state.config.hideUserStats
+    }
+  },
   computed: {
     headingStyle () {
       const color = this.$store.state.config.colors.bg

src/components/user_card_content/user_card_content.vue

@@ -17,7 +17,7 @@
           <div :title="user.name" class='user-name' v-else>{{user.name}}</div>
           <router-link class='user-screen-name':to="{ name: 'user-profile', params: { id: user.id } }">
             <span>@{{user.screen_name}}</span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
-            <span class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
+            <span v-if="!hideUserStatsLocal" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
           </router-link>
         </div>
       </div>
@@ -91,18 +91,18 @@
       </div>
     </div>
     <div class="panel-body profile-panel-body">
-      <div class="user-counts" :class="{clickable: switcher}">
+      <div v-if="!hideUserStatsLocal || switcher" class="user-counts" :class="{clickable: switcher}">
         <div class="user-count" v-on:click.prevent="setProfileView('statuses')" :class="{selected: selected === 'statuses'}">
           <h5>{{ $t('user_card.statuses') }}</h5>
-          <span>{{user.statuses_count}} <br></span>
+          <span v-if="!hideUserStatsLocal">{{user.statuses_count}} <br></span>
         </div>
         <div class="user-count" v-on:click.prevent="setProfileView('friends')" :class="{selected: selected === 'friends'}">
           <h5>{{ $t('user_card.followees') }}</h5>
-          <span>{{user.friends_count}}</span>
+          <span v-if="!hideUserStatsLocal">{{user.friends_count}}</span>
         </div>
         <div class="user-count" v-on:click.prevent="setProfileView('followers')" :class="{selected: selected === 'followers'}">
           <h5>{{ $t('user_card.followers') }}</h5>
-          <span>{{user.followers_count}}</span>
+          <span v-if="!hideUserStatsLocal">{{user.followers_count}}</span>
         </div>
       </div>
       <p v-if="!hideBio && user.description_html" class="profile-bio" v-html="user.description_html"></p>

src/i18n/en.json

@@ -111,6 +111,8 @@
     "general": "General",
     "hide_attachments_in_convo": "Hide attachments in conversations",
     "hide_attachments_in_tl": "Hide attachments in timeline",
+    "hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
+    "hide_user_stats": "Hide user statistics (e.g. the number of followers)",
     "import_followers_from_a_csv_file": "Import follows from a csv file",
     "import_theme": "Load preset",
     "inputRadius": "Input fields",

src/main.js

@@ -100,6 +100,8 @@ window.fetch('/api/statusnet/config.json')
 
         var theme = (config.theme)
         var background = (config.background)
+        var hidePostStats = (config.hidePostStats)
+        var hideUserStats = (config.hideUserStats)
         var logo = (config.logo)
         var logoMask = (typeof config.logoMask === 'undefined' ? true : config.logoMask)
         var logoMargin = (typeof config.logoMargin === 'undefined' ? 0 : config.logoMargin)
@@ -113,6 +115,8 @@ window.fetch('/api/statusnet/config.json')
 
         store.dispatch('setInstanceOption', { name: 'theme', value: theme })
         store.dispatch('setInstanceOption', { name: 'background', value: background })
+        store.dispatch('setInstanceOption', { name: 'hidePostStats', value: hidePostStats })
+        store.dispatch('setInstanceOption', { name: 'hideUserStats', value: hideUserStats })
         store.dispatch('setInstanceOption', { name: 'logo', value: logo })
         store.dispatch('setInstanceOption', { name: 'logoMask', value: logoMask })
         store.dispatch('setInstanceOption', { name: 'logoMargin', value: logoMargin })

src/modules/instance.js

@@ -18,6 +18,8 @@ const defaultState = {
   scopeOptionsEnabled: true,
   formattingOptionsEnabled: false,
   collapseMessageWithSubject: false,
+  hidePostStats: false,
+  hideUserStats: false,
   disableChat: false,
 
   // Nasty stuff

static/config.json

@@ -10,5 +10,7 @@
   "showInstanceSpecificPanel": false,
   "scopeOptionsEnabled": false,
   "formattingOptionsEnabled": false,
-  "collapseMessageWithSubject": false
+  "collapseMessageWithSubject": false,
+  "hidePostStats": false,
+  "hideUserStats": false
 }