Merge branch 'develop' of ssh.gitgud.io:lambadalambda/pleroma-fe into feature/profile-editing

src/App.js

@@ -29,6 +29,9 @@ export default {
     },
     scrollToTop () {
       window.scrollTo(0, 0)
+    },
+    logout () {
+      this.$store.dispatch('logout')
     }
   }
 }

src/App.vue

@@ -8,6 +8,7 @@
         <div class='item right'>
           <user-finder></user-finder>
           <router-link :to="{ name: 'settings'}"><i class="icon-cog"></i></router-link>
+          <a href="#" v-if="currentUser" @click.prevent="logout"><i class="icon-logout" title="Logout" ></i></a>
         </div>
       </div>
     </nav>

src/components/conversation/conversation.js

@@ -1,4 +1,4 @@
-import { find, filter, sortBy } from 'lodash'
+import { reduce, find, filter, sortBy } from 'lodash'
 import { statusType } from '../../modules/statuses.js'
 import Status from '../status/status.vue'
 
@@ -33,6 +33,21 @@ const conversation = {
       const statuses = this.$store.state.statuses.allStatuses
       const conversation = filter(statuses, { statusnet_conversation_id: conversationId })
       return sortAndFilterConversation(conversation)
+    },
+    replies () {
+      let i = 1
+      return reduce(this.conversation, (result, {id, in_reply_to_status_id}) => {
+        const irid = Number(in_reply_to_status_id)
+        if (irid) {
+          result[irid] = result[irid] || []
+          result[irid].push({
+            name: `#${i}`,
+            id: id
+          })
+        }
+        i++
+        return result
+      }, {})
     }
   },
   components: {
@@ -59,18 +74,8 @@ const conversation = {
       }
     },
     getReplies (id) {
-      let res = []
       id = Number(id)
-      let i
-      for (i = 0; i < this.conversation.length; i++) {
-        if (Number(this.conversation[i].in_reply_to_status_id) === id) {
-          res.push({
-            name: `#${i}`,
-            id: this.conversation[i].id
-          })
-        }
-      }
-      return res
+      return this.replies[id] || []
     },
     focused (id) {
       if (this.statusoid.retweeted_status) {

src/components/notifications/notifications.scss

@@ -49,6 +49,10 @@
         color: $green;
       }
 
+      .icon-user-plus.lit {
+        color: $blue;
+      }
+
       .icon-reply.lit {
         color: $blue;
       }

src/components/notifications/notifications.vue

@@ -36,6 +36,15 @@
               </h1>
               <status :compact="true" :statusoid="notification.status"></status>
             </div>
+            <div v-if="notification.type === 'follow'">
+              <h1>
+                <span :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
+                <i class="fa icon-user-plus lit"></i>
+              </h1>
+              <div>
+                <router-link :to="{ name: 'user-profile', params: { id: notification.action.user.id } }">@{{ notification.action.user.screen_name }}</router-link> followed you
+              </div>
+            </div>
           </div>
         </div>
       </div>

src/components/user_card_content/user_card_content.vue

@@ -8,8 +8,10 @@
         <div class='container'>
           <img :src="user.profile_image_url">
           <span class="glyphicon glyphicon-user"></span>
-          <div class='user-name'>{{user.name}}</div>
-          <div class='user-screen-name'>@{{user.screen_name}}</div>
+          <div class="name-and-screen-name">
+            <div class='user-name'>{{user.name}}</div>
+            <div class='user-screen-name'>@{{user.screen_name}}</div>
+          </div>
         </div>
         <div v-if="isOtherUser" class="user-interactions">
           <div v-if="user.follows_you && loggedIn" class="following base06">
@@ -124,6 +126,8 @@
 .profile-panel-body {
   top: -0em;
   padding-top: 4em;
+
+  word-wrap: break-word;
 }
 
 .user-info {
@@ -143,33 +147,37 @@
     align-content: flex-start;
     justify-content: center;
     max-height: 60px;
+    overflow: hidden;
   }
 
   img {
-      border: 2px solid;
-      border-radius: 5px;
-      flex: 1 0 100%;
-      max-width: 48px;
-      max-height: 48px;
+    border: 2px solid;
+    border-radius: 5px;
+    flex: 1 0 100%;
+    width: 48px;
+    height: 48px;
+    object-fit: cover;
   }
 
 	text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0);
 
-	.user-name{
-		margin-top: 0.0em;
+  .name-and-screen-name {
+    display: block;
+    margin-top: 0.0em;
     margin-left: 0.6em;
-    flex: 0 0 auto;
-    align-self: flex-start;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+	.user-name{
 	}
 
   .user-screen-name {
-      margin-top: 0.0em;
-      margin-left: 0.6em;
       font-weight: lighter;
       font-size: 15px;
       padding-right: 0.1em;
       flex: 0 0 auto;
-      align-self: flex-start;
   }
 
   .user-interactions {

src/modules/statuses.js

@@ -105,6 +105,10 @@ export const statusType = (status) => {
     return 'deletion'
   }
 
+  if (status.text.match(/started following/)) {
+    return 'follow'
+  }
+
   return 'unknown'
 }
 
@@ -253,6 +257,9 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
         favoriteStatus(favorite)
       }
     },
+    'follow': (status) => {
+      addNotification({ type: 'follow', status: status, action: status })
+    },
     'deletion': (deletion) => {
       const uri = deletion.uri
       updateMaxId(deletion)

src/modules/users.js

@@ -26,6 +26,9 @@ export const mutations = {
   setCurrentUser (state, user) {
     state.currentUser = merge(state.currentUser || {}, user)
   },
+  clearCurrentUser (state) {
+    state.currentUser = false
+  },
   beginLogin (state) {
     state.loggingIn = true
   },
@@ -66,6 +69,11 @@ const users = {
         store.commit('setUserForStatus', status)
       })
     },
+    logout (store) {
+      store.commit('clearCurrentUser')
+      store.dispatch('stopFetching', 'friends')
+      store.commit('setBackendInteractor', backendInteractorService())
+    },
     loginUser (store, userCredentials) {
       return new Promise((resolve, reject) => {
         const commit = store.commit

src/services/api/api.service.js

@@ -27,6 +27,7 @@ const QVITTER_USER_TIMELINE_URL = '/api/qvitter/statuses/user_timeline.json'
 // const USER_URL = '/api/users/show.json'
 
 import { each, map } from 'lodash'
+import 'whatwg-fetch'
 
 const oldfetch = window.fetch