Merge branch 'develop' of git.pleroma.social:pleroma/pleroma-fe into hide-statistics

src/components/conversation/conversation.vue

@@ -3,7 +3,7 @@
     <div class="panel-heading conversation-heading">
       <span class="title"> {{ $t('timeline.conversation') }} </span>
       <span v-if="collapsable">
-        <small><a href="#" @click.prevent="$emit('toggleExpanded')">{{ $t('timeline.collapse') }}</a></small>
+        <a href="#" @click.prevent="$emit('toggleExpanded')">{{ $t('timeline.collapse') }}</a>
       </span>
     </div>
     <div class="panel-body">

src/components/favorite_button/favorite_button.js

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

src/components/features_panel/features_panel.js

@@ -0,0 +1,14 @@
+const FeaturesPanel = {
+  computed: {
+    chat: function () {
+      return this.$store.state.instance.chatAvailable && (!this.$store.state.chatDisabled)
+    },
+    gopher: function () { return this.$store.state.instance.gopherAvailable },
+    whoToFollow: function () { return this.$store.state.instance.suggestionsEnabled },
+    mediaProxy: function () { return this.$store.state.instance.mediaProxyAvailable },
+    scopeOptions: function () { return this.$store.state.instance.scopeOptionsEnabled },
+    textlimit: function () { return this.$store.state.instance.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/components/instance_specific_panel/instance_specific_panel.js

@@ -1,7 +1,7 @@
 const InstanceSpecificPanel = {
   computed: {
     instanceSpecificPanelContent () {
-      return this.$store.state.config.instanceSpecificPanelContent
+      return this.$store.state.instance.instanceSpecificPanelContent
     }
   }
 }

src/components/login_form/login_form.js

@@ -5,7 +5,7 @@ const LoginForm = {
   }),
   computed: {
     loggingIn () { return this.$store.state.users.loggingIn },
-    registrationOpen () { return this.$store.state.config.registrationOpen }
+    registrationOpen () { return this.$store.state.instance.registrationOpen }
   },
   methods: {
     submit () {

src/components/notifications/notifications.scss

@@ -22,10 +22,6 @@
   }
 
   .loadmore-error {
-    min-width: 6em;
-    text-align: center;
-    padding: 0 0.25em 0 0.25em;
-    margin: 0;
     color: $fallback--fg;
     color: var(--fg, $fallback--fg);
   }

src/components/post_status_form/post_status_form.js

@@ -75,8 +75,11 @@ const PostStatusForm = {
     candidates () {
       const firstchar = this.textAtCaret.charAt(0)
       if (firstchar === '@') {
-        const matchedUsers = filter(this.users, (user) => (String(user.name + user.screen_name)).toUpperCase()
-            .startsWith(this.textAtCaret.slice(1).toUpperCase()))
+        const query = this.textAtCaret.slice(1).toUpperCase()
+        const matchedUsers = filter(this.users, (user) => {
+          return user.screen_name.toUpperCase().startsWith(query) ||
+            user.name && user.name.toUpperCase().startsWith(query)
+        })
         if (matchedUsers.length <= 0) {
           return false
         }
@@ -99,7 +102,7 @@ const PostStatusForm = {
           name: '',
           utf: utf || '',
           // eslint-disable-next-line camelcase
-          img: utf ? '' : this.$store.state.config.server + image_url,
+          img: utf ? '' : this.$store.state.instance.server + image_url,
           highlighted: index === this.highlighted
         }))
       } else {
@@ -117,16 +120,16 @@ const PostStatusForm = {
       return this.$store.state.users.users
     },
     emoji () {
-      return this.$store.state.config.emoji || []
+      return this.$store.state.instance.emoji || []
     },
     customEmoji () {
-      return this.$store.state.config.customEmoji || []
+      return this.$store.state.instance.customEmoji || []
     },
     statusLength () {
       return this.newStatus.status.length
     },
     statusLengthLimit () {
-      return this.$store.state.config.textlimit
+      return this.$store.state.instance.textlimit
     },
     hasStatusLengthLimit () {
       return this.statusLengthLimit > 0
@@ -138,10 +141,10 @@ const PostStatusForm = {
       return this.hasStatusLengthLimit && (this.statusLength > this.statusLengthLimit)
     },
     scopeOptionsEnabled () {
-      return this.$store.state.config.scopeOptionsEnabled
+      return this.$store.state.instance.scopeOptionsEnabled
     },
     formattingOptionsEnabled () {
-      return this.$store.state.config.formattingOptionsEnabled
+      return this.$store.state.instance.formattingOptionsEnabled
     }
   },
   methods: {

src/components/post_status_form/post_status_form.vue

@@ -90,8 +90,7 @@
       </div>
       <div class="upload_settings" v-if="newStatus.files.length > 0">
         <input type="checkbox" id="filesSensitive" v-model="newStatus.nsfw">
-        <label for="filesSensitive" v-if="newStatus.nsfw">{{$t('post_status.attachments_sensitive')}}</label>
-        <label for="filesSensitive" v-else v-html="$t('post_status.attachments_not_sensitive')"></label>
+        <label for="filesSensitive">{{$t('post_status.attachments_sensitive')}}</label>
       </div>
     </form>
   </div>

src/components/registration/registration.js

@@ -5,16 +5,16 @@ const registration = {
     registering: false
   }),
   created () {
-    if ((!this.$store.state.config.registrationOpen && !this.token) || !!this.$store.state.users.currentUser) {
+    if ((!this.$store.state.instance.registrationOpen && !this.token) || !!this.$store.state.users.currentUser) {
       this.$router.push('/main/all')
     }
     // Seems like this doesn't work at first page open for some reason
-    if (this.$store.state.config.registrationOpen && this.token) {
+    if (this.$store.state.instance.registrationOpen && this.token) {
       this.$router.push('/registration')
     }
   },
   computed: {
-    termsofservice () { return this.$store.state.config.tos },
+    termsofservice () { return this.$store.state.instance.tos },
     token () { return this.$route.params.token }
   },
   methods: {

src/components/retweet_button/retweet_button.js

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

src/components/settings/settings.js

@@ -6,23 +6,35 @@ import { filter, trim } from 'lodash'
 
 const settings = {
   data () {
+    const user = this.$store.state.config
+    const instance = this.$store.state.instance
+
     return {
-      hideAttachmentsLocal: this.$store.state.config.hideAttachments,
-      hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv,
-      hideNsfwLocal: this.$store.state.config.hideNsfw,
-      hidePostStatsLocal: this.$store.state.config.hidePostStats,
-      hideUserStatsLocal: this.$store.state.config.hideUserStats,
-      notificationVisibilityLocal: this.$store.state.config.notificationVisibility,
-      replyVisibilityLocal: this.$store.state.config.replyVisibility,
-      loopVideoLocal: this.$store.state.config.loopVideo,
-      loopVideoSilentOnlyLocal: this.$store.state.config.loopVideoSilentOnly,
-      muteWordsString: this.$store.state.config.muteWords.join('\n'),
-      autoLoadLocal: this.$store.state.config.autoLoad,
-      streamingLocal: this.$store.state.config.streaming,
-      pauseOnUnfocusedLocal: this.$store.state.config.pauseOnUnfocused,
-      hoverPreviewLocal: this.$store.state.config.hoverPreview,
-      collapseMessageWithSubjectLocal: this.$store.state.config.collapseMessageWithSubject,
-      stopGifs: this.$store.state.config.stopGifs,
+      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,
+      loopVideoSilentOnlyLocal: user.loopVideoSilentOnly,
+      muteWordsString: user.muteWords.join('\n'),
+      autoLoadLocal: user.autoLoad,
+      streamingLocal: user.streaming,
+      pauseOnUnfocusedLocal: user.pauseOnUnfocused,
+      hoverPreviewLocal: user.hoverPreview,
+      collapseMessageWithSubjectLocal: typeof user.collapseMessageWithSubject === 'undefined'
+        ? instance.collapseMessageWithSubject
+        : user.collapseMessageWithSubject,
+      collapseMessageWithSubjectDefault: this.$t('settings.values.' + instance.collapseMessageWithSubject),
+      stopGifs: user.stopGifs,
       loopSilentAvailable:
         // Firefox
         Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
@@ -40,6 +52,9 @@ const settings = {
   computed: {
     user () {
       return this.$store.state.users.currentUser
+    },
+    currentSaveStateNotice () {
+      return this.$store.state.interface.settings.currentSaveStateNotice
     }
   },
   watch: {

src/components/settings/settings.vue

@@ -1,7 +1,21 @@
 <template>
 <div class="settings panel panel-default">
   <div class="panel-heading">
-    {{$t('settings.settings')}}
+    <div class="title">
+      {{$t('settings.settings')}}
+    </div>
+
+    <transition name="fade">
+      <template v-if="currentSaveStateNotice">
+        <div @click.prevent class="alert error" v-if="currentSaveStateNotice.error">
+          {{ $t('settings.saving_err') }}
+        </div>
+
+        <div @click.prevent class="alert transparent" v-if="!currentSaveStateNotice.error">
+          {{ $t('settings.saving_ok') }}
+        </div>
+    </template>
+    </transition>
   </div>
   <div class="panel-body">
     <tab-switcher>
@@ -15,7 +29,9 @@
           <ul class="setting-list">
             <li>
               <input type="checkbox" id="collapseMessageWithSubject" v-model="collapseMessageWithSubjectLocal">
-              <label for="collapseMessageWithSubject">{{$t('settings.collapse_subject')}}</label>
+              <label for="collapseMessageWithSubject">
+                {{$t('settings.collapse_subject')}} {{$t('settings.instance_default', { value: collapseMessageWithSubjectDefault })}}
+              </label>
             </li>
             <li>
               <input type="checkbox" id="streaming" v-model="streamingLocal">
@@ -124,11 +140,15 @@
           </div>
           <div>
             <input type="checkbox" id="hidePostStats" v-model="hidePostStatsLocal">
-            <label for="hidePostStats">{{$t('settings.hide_post_stats')}}</label>
+            <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')}}</label>
+            <label for="hideUserStats">
+              {{$t('settings.hide_user_stats')}} {{$t('settings.instance_default', { value: hideUserStatsDefault })}}
+            </label>
           </div>
         </div>
         <div class="setting-item">

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

@@ -23,6 +23,7 @@
   img {
     width: 100%;
     height: 100%;
+    object-fit: contain;
   }
 
   &.animated {

src/components/timeline/timeline.vue

@@ -4,12 +4,12 @@
       <div class="title">
         {{title}}
       </div>
-      <button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
-        {{$t('timeline.show_new')}}{{newStatusCountStr}}
-      </button>
       <div @click.prevent class="loadmore-error alert error" v-if="timelineError">
         {{$t('timeline.error_fetching')}}
       </div>
+      <button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
+        {{$t('timeline.show_new')}}{{newStatusCountStr}}
+      </button>
       <div @click.prevent class="loadmore-text" v-if="!timeline.newStatusCount > 0 && !timelineError">
         {{$t('timeline.up_to_date')}}
       </div>
@@ -58,7 +58,6 @@
 
 .timeline {
   .loadmore-text {
-    font-size: 14px;
     opacity: 0.8;
     background-color: transparent;
     color: $fallback--faint;
@@ -66,11 +65,6 @@
   }
 
   .loadmore-error {
-    font-size: 14px;
-    min-width: 6em;
-    text-align: center;
-    padding: 0 0.25em 0 0.25em;
-    margin: 0;
     color: $fallback--fg;
     color: var(--fg, $fallback--fg);
   }

src/components/user_card_content/user_card_content.js

@@ -5,7 +5,9 @@ export default {
   props: [ 'user', 'switcher', 'selected', 'hideBio' ],
   data () {
     return {
-      hideUserStatsLocal: this.$store.state.config.hideUserStats
+      hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined'
+        ? this.$store.state.instance.hideUserStats
+        : this.$store.state.config.hideUserStats
     }
   },
   computed: {

src/components/user_panel/user_panel.vue

@@ -14,8 +14,10 @@
 
 <style lang="scss">
 .user-panel {
-    .profile-panel-background .panel-heading {
-        background: transparent;
-    }
+  .profile-panel-background .panel-heading {
+    background: transparent;
+    flex-direction: column;
+    align-items: stretch;
+  }
 }
 </style>

src/components/user_settings/user_settings.js

@@ -7,6 +7,7 @@ const UserSettings = {
       newname: this.$store.state.users.currentUser.name,
       newbio: this.$store.state.users.currentUser.description,
       newlocked: this.$store.state.users.currentUser.locked,
+      newnorichtext: this.$store.state.users.currentUser.no_rich_text,
       newdefaultScope: this.$store.state.users.currentUser.default_scope,
       followList: null,
       followImportError: false,
@@ -32,10 +33,10 @@ const UserSettings = {
       return this.$store.state.users.currentUser
     },
     pleromaBackend () {
-      return this.$store.state.config.pleromaBackend
+      return this.$store.state.instance.pleromaBackend
     },
     scopeOptionsEnabled () {
-      return this.$store.state.config.scopeOptionsEnabled
+      return this.$store.state.instance.scopeOptionsEnabled
     },
     vis () {
       return {
@@ -53,7 +54,8 @@ const UserSettings = {
       const locked = this.newlocked
       /* eslint-disable camelcase */
       const default_scope = this.newdefaultScope
-      this.$store.state.api.backendInteractor.updateProfile({params: {name, description, locked, default_scope}}).then((user) => {
+      const no_rich_text = this.newnorichtext
+      this.$store.state.api.backendInteractor.updateProfile({params: {name, description, locked, default_scope, no_rich_text}}).then((user) => {
         if (!user.error) {
           this.$store.commit('addNewUsers', [user])
           this.$store.commit('setCurrentUser', user)

src/components/user_settings/user_settings.vue

@@ -25,6 +25,10 @@
                 <i v-on:click="changeVis('public')" class="icon-globe" :class="vis.public"></i>
               </div>
             </div>
+            <p>
+              <input type="checkbox" v-model="newnorichtext" id="account-no-rich-text">
+              <label for="account-no-rich-text">{{$t('settings.no_rich_text_description')}}</label>
+            </p>
             <button :disabled='newname.length <= 0' class="btn btn-default" @click="updateProfile">{{$t('general.submit')}}</button>
           </div>
           <div class="setting-item">

src/components/who_to_follow_panel/who_to_follow_panel.js

@@ -3,9 +3,10 @@ import apiService from '../../services/api/api.service.js'
 function showWhoToFollow (panel, reply) {
   var users = reply
   var cn
-  var index = 0
-  var random = Math.floor(Math.random() * 10)
-  for (cn = random; cn < users.length; cn = cn + 10) {
+  var index
+  var step = 7
+  cn = Math.floor(Math.random() * step)
+  for (index = 0; index < 3; index++) {
     var user
     user = users[cn]
     var img
@@ -46,10 +47,7 @@ function showWhoToFollow (panel, reply) {
           }
         })
     }
-    index = index + 1
-    if (index > 2) {
-      break
-    }
+    cn = (cn + step) % users.length
   }
 }
 
@@ -85,14 +83,14 @@ const WhoToFollowPanel = {
     moreUrl: function () {
       var host = window.location.hostname
       var user = this.user
-      var suggestionsWeb = this.$store.state.config.suggestionsWeb
+      var suggestionsWeb = this.$store.state.instance.suggestionsWeb
       var url
       url = suggestionsWeb.replace(/{{host}}/g, encodeURIComponent(host))
       url = url.replace(/{{user}}/g, encodeURIComponent(user))
       return url
     },
     suggestionsEnabled () {
-      return this.$store.state.config.suggestionsEnabled
+      return this.$store.state.instance.suggestionsEnabled
     }
   },
   watch: {

src/components/who_to_follow_panel/who_to_follow_panel.vue

@@ -11,7 +11,7 @@
           <img v-bind:src="img1"/> <router-link :to="{ name: 'user-profile', params: { id: id1 } }">{{ name1 }}</router-link><br>
           <img v-bind:src="img2"/> <router-link :to="{ name: 'user-profile', params: { id: id2 } }">{{ name2 }}</router-link><br>
           <img v-bind:src="img3"/> <router-link :to="{ name: 'user-profile', params: { id: id3 } }">{{ name3 }}</router-link><br>
-          <img v-bind:src="$store.state.config.logo"> <a v-bind:href="moreUrl" target="_blank">{{$t('who_to_follow.more')}}</a>
+          <img v-bind:src="$store.state.instance.logo"> <a v-bind:href="moreUrl" target="_blank">{{$t('who_to_follow.more')}}</a>
         </p>
       </div>
     </div>