Merge branch 'masto-remains' into 'develop'

Interactions 2.0, removing last bits of qvitter api. Only login/register and change background remains after that

See merge request pleroma/pleroma-fe!792

src/components/interactions/interactions.js

@@ -0,0 +1,25 @@
+import Notifications from '../notifications/notifications.vue'
+
+const tabModeDict = {
+  mentions: ['mention'],
+  'likes+repeats': ['repeat', 'like'],
+  follows: ['follow']
+}
+
+const Interactions = {
+  data () {
+    return {
+      filterMode: tabModeDict['mentions']
+    }
+  },
+  methods: {
+    onModeSwitch (index, dataset) {
+      this.filterMode = tabModeDict[dataset.filter]
+    }
+  },
+  components: {
+    Notifications
+  }
+}
+
+export default Interactions

src/components/interactions/interactions.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <div class="title">
+        Interactions
+      </div>
+    </div>
+    <tab-switcher
+      ref="tabSwitcher"
+      :onSwitch="onModeSwitch"
+      >
+      <span data-tab-dummy data-filter="mentions" :label="$t('nav.mentions')"/>
+      <span data-tab-dummy data-filter="likes+repeats" :label="$t('interactions.favs_repeats')"/>
+      <span data-tab-dummy data-filter="follows" :label="$t('interactions.follows')"/>
+    </tab-switcher>
+    <Notifications
+      ref="notifications"
+      :noHeading="true"
+      :minimalMode="true"
+      :filterMode="filterMode"
+      />
+  </div>
+</template>
+
+<script src="./interactions.js"></script>

src/components/mentions/mentions.vue

@@ -1,5 +1,5 @@
 <template>
-  <Timeline :title="$t('nav.mentions')" v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/>
+  <Timeline :title="$t('nav.interactions')" v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/>
 </template>
 
 <script src="./mentions.js"></script>

src/components/nav_panel/nav_panel.vue

@@ -8,8 +8,8 @@
           </router-link>
         </li>
         <li v-if='currentUser'>
-          <router-link :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
-            {{ $t("nav.mentions") }}
+          <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
+            {{ $t("nav.interactions") }}
           </router-link>
         </li>
         <li v-if='currentUser'>

src/components/notifications/notifications.js

@@ -7,15 +7,24 @@ import {
 } from '../../services/notification_utils/notification_utils.js'
 
 const Notifications = {
-  props: [
-    'noHeading'
-  ],
+  props: {
+    // Disables display of panel header
+    noHeading: Boolean,
+    // Disables panel styles, unread mark, potentially other notification-related actions
+    // meant for "Interactions" timeline
+    minimalMode: Boolean,
+    // Custom filter mode, an array of strings, possible values 'mention', 'repeat', 'like', 'follow', used to override global filter for use in "Interactions" timeline
+    filterMode: Array
+  },
   data () {
     return {
       bottomedOut: false
     }
   },
   computed: {
+    mainClass () {
+      return this.minimalMode ? '' : 'panel panel-default'
+    },
     notifications () {
       return notificationsFromStore(this.$store)
     },
@@ -26,7 +35,8 @@ const Notifications = {
       return unseenNotificationsFromStore(this.$store)
     },
     visibleNotifications () {
-      return visibleNotificationsFromStore(this.$store)
+      console.log(this.filterMode)
+      return visibleNotificationsFromStore(this.$store, this.filterMode)
     },
     unseenCount () {
       return this.unseenNotifications.length

src/components/notifications/notifications.scss

@@ -1,8 +1,10 @@
 @import '../../_variables.scss';
 
 .notifications {
-  // a bit of a hack to allow scrolling below notifications
-  padding-bottom: 15em;
+  &:not(.minimal) {
+    // a bit of a hack to allow scrolling below notifications
+    padding-bottom: 15em;
+  }
 
   .loadmore-error {
     color: $fallback--text;

src/components/notifications/notifications.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="notifications">
-    <div class="panel panel-default">
+  <div :class="{ minimal: minimalMode }" class="notifications">
+    <div :class="mainClass">
       <div v-if="!noHeading" class="panel-heading">
         <div class="title">
           {{$t('notifications.notifications')}}
@@ -12,7 +12,7 @@
         <button v-if="unseenCount" @click.prevent="markAsSeen" class="read-button">{{$t('notifications.read')}}</button>
       </div>
       <div class="panel-body">
-        <div v-for="notification in visibleNotifications" :key="notification.id" class="notification" :class='{"unseen": !notification.seen}'>
+        <div v-for="notification in visibleNotifications" :key="notification.id" class="notification" :class='{"unseen": !minimalMode && !notification.seen}'>
           <div class="notification-overlay"></div>
           <notification :notification="notification"></notification>
         </div>
@@ -22,7 +22,9 @@
           {{$t('notifications.no_more_notifications')}}
         </div>
         <a v-else-if="!loading" href="#" v-on:click.prevent="fetchOlderNotifications()">
-          <div class="new-status-notification text-center panel-footer">{{$t('notifications.load_older')}}</div>
+          <div class="new-status-notification text-center panel-footer">
+            {{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older')}}
+          </div>
         </a>
         <div v-else class="new-status-notification text-center panel-footer">
           <i class="icon-spin3 animate-spin"/>

src/components/side_drawer/side_drawer.vue

@@ -26,6 +26,11 @@
             {{ $t("nav.dms") }}
           </router-link>
         </li>
+        <li v-if="currentUser" @click="toggleDrawer">
+          <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
+            {{ $t("nav.interactions") }}
+          </router-link>
+        </li>
       </ul>
       <ul>
         <li v-if="currentUser" @click="toggleDrawer">

src/components/tab_switcher/tab_switcher.js

@@ -4,15 +4,18 @@ import './tab_switcher.scss'
 
 export default Vue.component('tab-switcher', {
   name: 'TabSwitcher',
-  props: ['renderOnlyFocused'],
+  props: ['renderOnlyFocused', 'onSwitch'],
   data () {
     return {
       active: this.$slots.default.findIndex(_ => _.tag)
     }
   },
   methods: {
-    activateTab (index) {
+    activateTab (index, dataset) {
       return () => {
+        if (typeof this.onSwitch === 'function') {
+          this.onSwitch.call(null, index, this.$slots.default[index].elm.dataset)
+        }
         this.active = index
       }
     }
@@ -37,7 +40,11 @@ export default Vue.component('tab-switcher', {
 
             return (
               <div class={ classesWrapper.join(' ')}>
-                <button disabled={slot.data.attrs.disabled} onClick={this.activateTab(index)} class={ classesTab.join(' ') }>{slot.data.attrs.label}</button>
+                <button
+                  disabled={slot.data.attrs.disabled}
+                  onClick={this.activateTab(index)}
+                  class={classesTab.join(' ')}>
+                {slot.data.attrs.label}</button>
               </div>
             )
           })