Merge branch 'develop' into 'notifications'

# Conflicts:
#   src/main.js

src/components/login_form/login_form.vue

@@ -34,6 +34,11 @@
 @import '../../_variables.scss';
 
 .login-form {
+  .btn {
+    min-height: 28px;
+    width: 10em;
+  }
+
   .error {
     text-align: center;
   }

src/components/post_status_form/post_status_form.vue

@@ -107,6 +107,10 @@
     padding: 0.5em;
     height: 32px;
 
+    button {
+      width: 10em;
+    }
+
     p {
       margin: 0.35em;
       padding: 0.35em;

src/components/settings/settings.js

@@ -8,6 +8,7 @@ const settings = {
       hideAttachmentsLocal: this.$store.state.config.hideAttachments,
       hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv,
       hideNsfwLocal: this.$store.state.config.hideNsfw,
+      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'),
@@ -44,6 +45,9 @@ const settings = {
     hideNsfwLocal (value) {
       this.$store.dispatch('setOption', { name: 'hideNsfw', value })
     },
+    replyVisibilityLocal (value) {
+      this.$store.dispatch('setOption', { name: 'replyVisibility', value })
+    },
     loopVideoLocal (value) {
       this.$store.dispatch('setOption', { name: 'loopVideo', value })
     },

src/components/settings/settings.vue

@@ -38,6 +38,16 @@
           <input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
           <label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
         </li>
+        <li>
+          <label for="replyVisibility" class="select">
+            <select id="replyVisibility" v-model="replyVisibilityLocal">
+              <option value="all" selected>{{$t('settings.reply_visibility_all')}}</option>
+              <option value="following">{{$t('settings.reply_visibility_following')}}</option>
+              <option value="self">{{$t('settings.reply_visibility_self')}}</option>
+            </select>
+            <i class="icon-down-open"/>
+          </label>
+        </li>
       </ul>
     </div>
     <div class="setting-item">
@@ -117,6 +127,8 @@
 
   .btn {
     margin-top: 1em;
+    min-height: 28px;
+    width: 10em;
   }
 }
 .setting-list {

src/components/status/status.js

@@ -83,7 +83,6 @@ const Status = {
       return hits
     },
     muted () { return !this.unmuted && (this.status.user.muted || this.muteWordHits.length > 0) },
-    isReply () { return !!this.status.in_reply_to_status_id },
     isFocused () {
       // retweet or root of an expanded conversation
       if (this.focused) {
@@ -105,6 +104,48 @@ const Status = {
       const lengthScore = this.status.statusnet_html.split(/<p|<br/).length + this.status.text.length / 80
       return lengthScore > 20
     },
+    isReply () {
+      if (this.status.in_reply_to_status_id) {
+        return true
+      }
+      // For private replies where we can't see the OP, in_reply_to_status_id will be null.
+      // So instead, check that the post starts with a @mention.
+      if (this.status.visibility === 'private') {
+        var textBody = this.status.text
+        if (this.status.summary !== null) {
+          textBody = textBody.substring(this.status.summary.length, textBody.length)
+        }
+        return textBody.startsWith('@')
+      }
+      return false
+    },
+    hideReply () {
+      if (this.$store.state.config.replyVisibility === 'all') {
+        return false
+      }
+      if (this.inlineExpanded || this.expanded || this.inConversation || !this.isReply) {
+        return false
+      }
+      if (this.status.user.id === this.$store.state.users.currentUser.id) {
+        return false
+      }
+      if (this.status.activity_type === 'repeat') {
+        return false
+      }
+      var checkFollowing = this.$store.state.config.replyVisibility === 'following'
+      for (var i = 0; i < this.status.attentions.length; ++i) {
+        if (this.status.user.id === this.status.attentions[i].id) {
+          continue
+        }
+        if (checkFollowing && this.status.attentions[i].following) {
+          return false
+        }
+        if (this.status.attentions[i].id === this.$store.state.users.currentUser.id) {
+          return false
+        }
+      }
+      return this.status.attentions.length > 0
+    },
     hideSubjectStatus () {
       if (this.tallStatus && !this.$store.state.config.collapseMessageWithSubject) {
         return false

src/components/status/status.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="status-el" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
+  <div class="status-el" v-if="!hideReply" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
     <template v-if="muted && !noReplyLinks">
       <div class="media status container muted">
         <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>

src/components/user_card_content/user_card_content.vue

@@ -105,8 +105,8 @@
           <span>{{user.followers_count}}</span>
         </div>
       </div>
-      <p v-if="!hideBio && user.description_html" v-html="user.description_html"></p>
-      <p v-else-if="!hideBio">{{ user.description }}</p>
+      <p v-if="!hideBio && user.description_html" class="profile-bio" v-html="user.description_html"></p>
+      <p v-else-if="!hideBio" class="profile-bio">{{ user.description }}</p>
     </div>
   </div>
 </template>
@@ -130,7 +130,11 @@
 .profile-panel-body {
   word-wrap: break-word;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%)
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%);
+
+  .profile-bio {
+    text-align: center;
+  }
 }
 
 .user-info {

src/components/who_to_follow_panel/who_to_follow_panel.js

@@ -1,5 +1,7 @@
-function showWhoToFollow (panel, reply, aHost, aUser) {
-  var users = reply.ids
+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)
@@ -7,12 +9,12 @@ function showWhoToFollow (panel, reply, aHost, aUser) {
     var user
     user = users[cn]
     var img
-    if (user.icon) {
-      img = user.icon
+    if (user.avatar) {
+      img = user.avatar
     } else {
       img = '/images/avi.png'
     }
-    var name = user.to_id
+    var name = user.acct
     if (index === 0) {
       panel.img1 = img
       panel.name1 = name
@@ -52,27 +54,15 @@ function showWhoToFollow (panel, reply, aHost, aUser) {
 }
 
 function getWhoToFollow (panel) {
-  var user = panel.$store.state.users.currentUser.screen_name
-  if (user) {
+  var credentials = panel.$store.state.users.currentUser.credentials
+  if (credentials) {
     panel.name1 = 'Loading...'
     panel.name2 = 'Loading...'
     panel.name3 = 'Loading...'
-    var host = window.location.hostname
-    var whoToFollowProvider = panel.$store.state.config.whoToFollowProvider
-    var url
-    url = whoToFollowProvider.replace(/{{host}}/g, encodeURIComponent(host))
-    url = url.replace(/{{user}}/g, encodeURIComponent(user))
-    window.fetch(url, {mode: 'cors'}).then(function (response) {
-      if (response.ok) {
-        return response.json()
-      } else {
-        panel.name1 = ''
-        panel.name2 = ''
-        panel.name3 = ''
-      }
-    }).then(function (reply) {
-      showWhoToFollow(panel, reply, host, user)
-    })
+    apiService.suggestions({credentials: credentials})
+      .then((reply) => {
+        showWhoToFollow(panel, reply)
+      })
   }
 }
 
@@ -95,26 +85,26 @@ const WhoToFollowPanel = {
     moreUrl: function () {
       var host = window.location.hostname
       var user = this.user
-      var whoToFollowLink = this.$store.state.config.whoToFollowLink
+      var suggestionsWeb = this.$store.state.config.suggestionsWeb
       var url
-      url = whoToFollowLink.replace(/{{host}}/g, encodeURIComponent(host))
+      url = suggestionsWeb.replace(/{{host}}/g, encodeURIComponent(host))
       url = url.replace(/{{user}}/g, encodeURIComponent(user))
       return url
     },
-    showWhoToFollowPanel () {
-      return this.$store.state.config.showWhoToFollowPanel
+    suggestionsEnabled () {
+      return this.$store.state.config.suggestionsEnabled
     }
   },
   watch: {
     user: function (user, oldUser) {
-      if (this.showWhoToFollowPanel) {
+      if (this.suggestionsEnabled) {
         getWhoToFollow(this)
       }
     }
   },
   mounted:
     function () {
-      if (this.showWhoToFollowPanel) {
+      if (this.suggestionsEnabled) {
         getWhoToFollow(this)
       }
     }

src/components/who_to_follow_panel/who_to_follow_panel.vue

@@ -3,7 +3,7 @@
     <div class="panel panel-default base01-background">
       <div class="panel-heading timeline-heading base02-background base04">
         <div class="title">
-          Who to follow
+          {{$t('who_to_follow.who_to_follow')}}
         </div>
       </div>
       <div class="panel-body who-to-follow">
@@ -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">More</a>
+          <img v-bind:src="$store.state.config.logo"> <a v-bind:href="moreUrl" target="_blank">{{$t('who_to_follow.more')}}</a>
         </p>
       </div>
     </div>