Merge remote-tracking branch 'upstream/develop' into shigusegubu

* upstream/develop: (21 commits) Added polyfills for EventTarget (needed for Safari) and CustomEvent (needed for IE) Fix missing TWKN when logged in, but server is set to private mode. Fix follower request fetching Add domain mutes to changelog Implement domain mutes v2 change changelog to reflect actual release history of frontend Fix #750 , fix error messages and captcha resetting Optimize Notifications Rendering update CHANGELOG Use last seen notif instead of first unseen notif for sinceId Add AMOLED dark theme mfa fix unify showimmideately Some error handling wire up staff accounts with correct store data remove unused fallback Add user migrates filter to interactions change the expression of `move` Fix target account link Add view for moves notifications ...
2020-01-27 23:32:54 +02:00 · 2020-01-27 23:32:54 +02:00 · 948fd2086b
commit 948fd2086b
parent 75bdeab0a0 b0b0fc403a
42 changed files with 484 additions and 140 deletions
--- a/src/components/domain_mute_card/domain_mute_card.js
+++ b/src/components/domain_mute_card/domain_mute_card.js
@ -0,0 +1,15 @@
+import ProgressButton from '../progress_button/progress_button.vue'
+
+const DomainMuteCard = {
+  props: ['domain'],
+  components: {
+    ProgressButton
+  },
+  methods: {
+    unmuteDomain () {
+      return this.$store.dispatch('unmuteDomain', this.domain)
+    }
+  }
+}
+
+export default DomainMuteCard
--- a/src/components/domain_mute_card/domain_mute_card.vue
+++ b/src/components/domain_mute_card/domain_mute_card.vue
@ -0,0 +1,38 @@
+<template>
+  <div class="domain-mute-card">
+    <div class="domain-mute-card-domain">
+      {{ domain }}
+    </div>
+    <ProgressButton
+      :click="unmuteDomain"
+      class="btn btn-default"
+    >
+      {{ $t('domain_mute_card.unmute') }}
+      <template slot="progress">
+        {{ $t('domain_mute_card.unmute_progress') }}
+      </template>
+    </ProgressButton>
+  </div>
+</template>
+
+<script src="./domain_mute_card.js"></script>
+
+<style lang="scss">
+.domain-mute-card {
+  flex: 1 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.6em 1em 0.6em 0;
+
+  &-domain {
+    margin-right: 1em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  button {
+    width: 10em;
+  }
+}
+</style>
--- a/src/components/interactions/interactions.js
+++ b/src/components/interactions/interactions.js
@ -3,7 +3,8 @@ import Notifications from '../notifications/notifications.vue'
 const tabModeDict = {
  mentions: ['mention'],
  'likes+repeats': ['repeat', 'like'],
-  follows: ['follow']
+  follows: ['follow'],
+  moves: ['move']
 }

 const Interactions = {
--- a/src/components/interactions/interactions.vue
+++ b/src/components/interactions/interactions.vue
@ -21,6 +21,10 @@
        key="follows"
        :label="$t('interactions.follows')"
      />
+      <span
+        key="moves"
+        :label="$t('interactions.moves')"
+      />
    </tab-switcher>
    <Notifications
      ref="notifications"
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@ -3,7 +3,7 @@ import { mapState } from 'vuex'
 const NavPanel = {
  created () {
    if (this.currentUser && this.currentUser.locked) {
-      this.$store.dispatch('startFetchingFollowRequest')
+      this.$store.dispatch('startFetchingFollowRequests')
    }
  },
  computed: mapState({
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@ -33,7 +33,7 @@
            <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }}
          </router-link>
        </li>
-        <li v-if="federating && !privateMode">
+        <li v-if="federating && (currentUser || !privateMode)">
          <router-link :to="{ name: 'public-external-timeline' }">
            <i class="button-icon icon-globe" /> {{ $t("nav.twkn") }}
          </router-link>
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@ -43,18 +43,18 @@ const Notification = {
      const user = this.notification.from_profile
      return highlightStyle(highlight[user.screen_name])
    },
-    userInStore () {
-      return this.$store.getters.findUser(this.notification.from_profile.id)
-    },
    user () {
-      if (this.userInStore) {
-        return this.userInStore
-      }
-      return this.notification.from_profile
+      return this.$store.getters.findUser(this.notification.from_profile.id)
    },
    userProfileLink () {
      return this.generateUserProfileLink(this.user)
    },
+    targetUser () {
+      return this.$store.getters.findUser(this.notification.target.id)
+    },
+    targetUserProfileLink () {
+      return this.generateUserProfileLink(this.targetUser)
+    },
    needMute () {
      return this.user.muted
    }
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@ -74,9 +74,13 @@
              <i class="fa icon-user-plus lit" />
              <small>{{ $t('notifications.followed_you') }}</small>
            </span>
+            <span v-if="notification.type === 'move'">
+              <i class="fa icon-arrow-curved lit" />
+              <small>{{ $t('notifications.migrated_to') }}</small>
+            </span>
          </div>
          <div
-            v-if="notification.type === 'follow'"
+            v-if="notification.type === 'follow' || notification.type === 'move'"
            class="timeago"
          >
            <span class="faint">
@ -115,6 +119,14 @@
            @{{ notification.from_profile.screen_name }}
          </router-link>
        </div>
+        <div
+          v-else-if="notification.type === 'move'"
+          class="move-text"
+        >
+          <router-link :to="targetUserProfileLink">
+            @{{ notification.target.screen_name }}
+          </router-link>
+        </div>
        <template v-else>
          <status
            class="faint"
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@ -2,10 +2,12 @@ import Notification from '../notification/notification.vue'
 import notificationsFetcher from '../../services/notifications_fetcher/notifications_fetcher.service.js'
 import {
  notificationsFromStore,
-  visibleNotificationsFromStore,
+  filteredNotificationsFromStore,
  unseenNotificationsFromStore
 } from '../../services/notification_utils/notification_utils.js'

+const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30
+
 const Notifications = {
  props: {
    // Disables display of panel header
@ -18,7 +20,11 @@ const Notifications = {
  },
  data () {
    return {
-      bottomedOut: false
+      bottomedOut: false,
+      // How many seen notifications to display in the list. The more there are,
+      // the heavier the page becomes. This count is increased when loading
+      // older notifications, and cut back to default whenever hitting "Read!".
+      seenToDisplayCount: DEFAULT_SEEN_TO_DISPLAY_COUNT
    }
  },
  computed: {
@ -34,14 +40,17 @@ const Notifications = {
    unseenNotifications () {
      return unseenNotificationsFromStore(this.$store)
    },
-    visibleNotifications () {
-      return visibleNotificationsFromStore(this.$store, this.filterMode)
+    filteredNotifications () {
+      return filteredNotificationsFromStore(this.$store, this.filterMode)
    },
    unseenCount () {
      return this.unseenNotifications.length
    },
    loading () {
      return this.$store.state.statuses.notifications.loading
+    },
+    notificationsToDisplay () {
+      return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
    }
  },
  components: {
@ -64,12 +73,21 @@ const Notifications = {
  methods: {
    markAsSeen () {
      this.$store.dispatch('markNotificationsAsSeen')
+      this.seenToDisplayCount = DEFAULT_SEEN_TO_DISPLAY_COUNT
    },
    fetchOlderNotifications () {
      if (this.loading) {
        return
      }

+      const seenCount = this.filteredNotifications.length - this.unseenCount
+      if (this.seenToDisplayCount < seenCount) {
+        this.seenToDisplayCount = Math.min(this.seenToDisplayCount + 20, seenCount)
+        return
+      } else if (this.seenToDisplayCount > seenCount) {
+        this.seenToDisplayCount = seenCount
+      }
+
      const store = this.$store
      const credentials = store.state.users.currentUser.credentials
      store.commit('setNotificationsLoading', { value: true })
@ -82,6 +100,7 @@ const Notifications = {
        if (notifs.length === 0) {
          this.bottomedOut = true
        }
+        this.seenToDisplayCount += notifs.length
      })
    }
  }
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@ -76,7 +76,7 @@
    }
  }

-  .follow-text {
+  .follow-text, .move-text {
    padding: 0.5em 0;
  }

@ -151,6 +151,11 @@
      color: var(--cOrange, $fallback--cOrange);
    }

+    .icon-arrow-curved.lit {
+      color: $fallback--cBlue;
+      color: var(--cBlue, $fallback--cBlue);
+    }
+
    .status-content {
      margin: 0;
      max-height: 300px;
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@ -32,7 +32,7 @@
      </div>
      <div class="panel-body">
        <div
-          v-for="notification in visibleNotifications"
+          v-for="notification in notificationsToDisplay"
          :key="notification.id"
          class="notification"
          :class="{&quot;unseen&quot;: !minimalMode && !notification.seen}"
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@ -63,7 +63,8 @@ const registration = {
          await this.signUp(this.user)
          this.$router.push({ name: 'friends' })
        } catch (error) {
-          console.warn('Registration failed: ' + error)
+          console.warn('Registration failed: ', error)
+          this.setCaptcha()
        }
      }
    },
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@ -170,7 +170,7 @@
              <label
                class="form--label"
                for="captcha-label"
-              >{{ $t('captcha') }}</label>
+              >{{ $t('registration.captcha') }}</label>

              <template v-if="['kocaptcha', 'native'].includes(captcha.type)">
                <img
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@ -103,6 +103,10 @@ const settings = {

        promise.then(() => {
          this.$store.dispatch('setOption', { name: 'useStreamingApi', value })
+        }).catch((e) => {
+          console.error('Failed starting MastoAPI Streaming socket', e)
+          this.$store.dispatch('disableMastoSockets')
+          this.$store.dispatch('setOption', { name: 'useStreamingApi', value: false })
        })
      }
    }
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@ -323,6 +323,11 @@
                      {{ $t('settings.notification_visibility_mentions') }}
                    </Checkbox>
                  </li>
+                  <li>
+                    <Checkbox v-model="notificationVisibility.moves">
+                      {{ $t('settings.notification_visibility_moves') }}
+                    </Checkbox>
+                  </li>
                </ul>
              </div>
              <div>
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@ -12,7 +12,7 @@ const SideDrawer = {
    this.closeGesture = GestureService.swipeGesture(GestureService.DIRECTION_LEFT, this.toggleDrawer)

    if (this.currentUser && this.currentUser.locked) {
-      this.$store.dispatch('startFetchingFollowRequest')
+      this.$store.dispatch('startFetchingFollowRequests')
    }
  },
  components: { UserCard },
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@ -88,7 +88,7 @@
          </router-link>
        </li>
        <li
-          v-if="federating && !privateMode"
+          v-if="federating && (currentUser || !privateMode)"
          @click="toggleDrawer"
        >
          <router-link to="/main/all">
--- a/src/components/staff_panel/staff_panel.js
+++ b/src/components/staff_panel/staff_panel.js
@ -1,3 +1,4 @@
+import map from 'lodash/map'
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'

 const StaffPanel = {
@ -6,7 +7,7 @@ const StaffPanel = {
  },
  computed: {
    staffAccounts () {
-      return this.$store.state.instance.staffAccounts
+      return map(this.$store.state.instance.staffAccounts, nickname => this.$store.getters.findUser(nickname)).filter(_ => _)
    }
  }
 }
--- a/src/components/user_settings/mfa.js
+++ b/src/components/user_settings/mfa.js
@ -139,7 +139,7 @@ const Mfa = {

    // fetch settings from server
    async fetchSettings () {
-      let result = await this.backendInteractor.fetchSettingsMFA()
+      let result = await this.backendInteractor.settingsMFA()
      if (result.error) return
      this.settings = result.settings
      this.settings.available = true
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@ -9,6 +9,7 @@ import ScopeSelector from '../scope_selector/scope_selector.vue'
 import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
 import BlockCard from '../block_card/block_card.vue'
 import MuteCard from '../mute_card/mute_card.vue'
+import DomainMuteCard from '../domain_mute_card/domain_mute_card.vue'
 import SelectableList from '../selectable_list/selectable_list.vue'
 import ProgressButton from '../progress_button/progress_button.vue'
 import EmojiInput from '../emoji_input/emoji_input.vue'
@ -32,6 +33,12 @@ const MuteList = withSubscription({
  childPropName: 'items'
 })(SelectableList)

+const DomainMuteList = withSubscription({
+  fetch: (props, $store) => $store.dispatch('fetchDomainMutes'),
+  select: (props, $store) => get($store.state.users.currentUser, 'domainMutes', []),
+  childPropName: 'items'
+})(SelectableList)
+
 const UserSettings = {
  data () {
    return {
@ -67,7 +74,8 @@ const UserSettings = {
      changedPassword: false,
      changePasswordError: false,
      activeTab: 'profile',
-      notificationSettings: this.$store.state.users.currentUser.notification_settings
+      notificationSettings: this.$store.state.users.currentUser.notification_settings,
+      newDomainToMute: ''
    }
  },
  created () {
@ -80,10 +88,12 @@ const UserSettings = {
    ImageCropper,
    BlockList,
    MuteList,
+    DomainMuteList,
    EmojiInput,
    Autosuggest,
    BlockCard,
    MuteCard,
+    DomainMuteCard,
    ProgressButton,
    Importer,
    Exporter,
@ -365,6 +375,13 @@ const UserSettings = {
    unmuteUsers (ids) {
      return this.$store.dispatch('unmuteUsers', ids)
    },
+    unmuteDomains (domains) {
+      return this.$store.dispatch('unmuteDomains', domains)
+    },
+    muteDomain () {
+      return this.$store.dispatch('muteDomain', this.newDomainToMute)
+        .then(() => { this.newDomainToMute = '' })
+    },
    identity (value) {
      return value
    }
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@ -509,59 +509,114 @@
        </div>

        <div :label="$t('settings.mutes_tab')">
-          <div class="profile-edit-usersearch-wrapper">
-            <Autosuggest
-              :filter="filterUnMutedUsers"
-              :query="queryUserIds"
-              :placeholder="$t('settings.search_user_to_mute')"
-            >
-              <MuteCard
-                slot-scope="row"
-                :user-id="row.item"
-              />
-            </Autosuggest>
-          </div>
-          <MuteList
-            :refresh="true"
-            :get-key="identity"
-          >
-            <template
-              slot="header"
-              slot-scope="{selected}"
-            >
-              <div class="profile-edit-bulk-actions">
-                <ProgressButton
-                  v-if="selected.length > 0"
-                  class="btn btn-default"
-                  :click="() => muteUsers(selected)"
+          <tab-switcher>
+            <div label="Users">
+              <div class="profile-edit-usersearch-wrapper">
+                <Autosuggest
+                  :filter="filterUnMutedUsers"
+                  :query="queryUserIds"
+                  :placeholder="$t('settings.search_user_to_mute')"
                >
-                  {{ $t('user_card.mute') }}
-                  <template slot="progress">
-                    {{ $t('user_card.mute_progress') }}
-                  </template>
-                </ProgressButton>
-                <ProgressButton
-                  v-if="selected.length > 0"
-                  class="btn btn-default"
-                  :click="() => unmuteUsers(selected)"
+                  <MuteCard
+                    slot-scope="row"
+                    :user-id="row.item"
+                  />
+                </Autosuggest>
+              </div>
+              <MuteList
+                :refresh="true"
+                :get-key="identity"
+              >
+                <template
+                  slot="header"
+                  slot-scope="{selected}"
                >
-                  {{ $t('user_card.unmute') }}
+                  <div class="profile-edit-bulk-actions">
+                    <ProgressButton
+                      v-if="selected.length > 0"
+                      class="btn btn-default"
+                      :click="() => muteUsers(selected)"
+                    >
+                      {{ $t('user_card.mute') }}
+                      <template slot="progress">
+                        {{ $t('user_card.mute_progress') }}
+                      </template>
+                    </ProgressButton>
+                    <ProgressButton
+                      v-if="selected.length > 0"
+                      class="btn btn-default"
+                      :click="() => unmuteUsers(selected)"
+                    >
+                      {{ $t('user_card.unmute') }}
+                      <template slot="progress">
+                        {{ $t('user_card.unmute_progress') }}
+                      </template>
+                    </ProgressButton>
+                  </div>
+                </template>
+                <template
+                  slot="item"
+                  slot-scope="{item}"
+                >
+                  <MuteCard :user-id="item" />
+                </template>
+                <template slot="empty">
+                  {{ $t('settings.no_mutes') }}
+                </template>
+              </MuteList>
+            </div>
+
+            <div :label="$t('settings.domain_mutes')">
+              <div class="profile-edit-domain-mute-form">
+                <input
+                  v-model="newDomainToMute"
+                  :placeholder="$t('settings.type_domains_to_mute')"
+                  type="text"
+                  @keyup.enter="muteDomain"
+                >
+                <ProgressButton
+                  class="btn btn-default"
+                  :click="muteDomain"
+                >
+                  {{ $t('domain_mute_card.mute') }}
                  <template slot="progress">
-                    {{ $t('user_card.unmute_progress') }}
+                    {{ $t('domain_mute_card.mute_progress') }}
                  </template>
                </ProgressButton>
              </div>
-            </template>
-            <template
-              slot="item"
-              slot-scope="{item}"
-            >
-              <MuteCard :user-id="item" />
-            </template>
-            <template slot="empty">
-              {{ $t('settings.no_mutes') }}
-            </template>
-          </MuteList>
+              <DomainMuteList
+                :refresh="true"
+                :get-key="identity"
+              >
+                <template
+                  slot="header"
+                  slot-scope="{selected}"
+                >
+                  <div class="profile-edit-bulk-actions">
+                    <ProgressButton
+                      v-if="selected.length > 0"
+                      class="btn btn-default"
+                      :click="() => unmuteDomains(selected)"
+                    >
+                      {{ $t('domain_mute_card.unmute') }}
+                      <template slot="progress">
+                        {{ $t('domain_mute_card.unmute_progress') }}
+                      </template>
+                    </ProgressButton>
+                  </div>
+                </template>
+                <template
+                  slot="item"
+                  slot-scope="{item}"
+                >
+                  <DomainMuteCard :domain="item" />
+                </template>
+                <template slot="empty">
+                  {{ $t('settings.no_mutes') }}
+                </template>
+              </DomainMuteList>
+            </div>
+          </tab-switcher>
        </div>
      </tab-switcher>
    </div>
@ -639,6 +694,18 @@
    }
  }

+  &-domain-mute-form {
+    padding: 1em;
+    display: flex;
+    flex-direction: column;
+
+    button {
+      align-self: flex-end;
+      margin-top: 1em;
+      width: 10em;
+    }
+  }
+
  .setting-subitem {
    margin-left: 1.75em;
  }