Merge pull request #1474 from h3poteto/iss-1471

closes #1471 Handle follow requests in notifications

spec/renderer/integration/store/Preferences/Notification.spec.ts

@@ -13,6 +13,7 @@ const state = (): NotificationState => {
         reblog: true,
         favourite: true,
         follow: true,
+        follow_request: true,
         reaction: true
       }
     }
@@ -60,6 +61,7 @@ describe('Preferences/Notification', () => {
               reblog: false,
               favourite: false,
               follow: false,
+              follow_request: false,
               reaction: false
             }
           }
@@ -73,6 +75,7 @@ describe('Preferences/Notification', () => {
             reblog: false,
             favourite: false,
             follow: false,
+            follow_request: false,
             reaction: false
           }
         })
@@ -97,6 +100,7 @@ describe('Preferences/Notification', () => {
           reblog: false,
           favourite: true,
           follow: true,
+          follow_request: true,
           reaction: true
         }
       })

spec/renderer/unit/store/Preferences/Notification.spec.ts

@@ -10,6 +10,7 @@ describe('Preferences/Notification', () => {
           reblog: true,
           favourite: true,
           follow: true,
+          follow_request: true,
           reaction: true
         }
       }

src/config/locales/en/translation.json

@@ -451,6 +451,10 @@
       "title": "Follow",
       "body": "{{username}} is now following you"
     },
+    "follow_request": {
+      "title": "FollowRequest",
+      "body": "Receive a follow request from {{username}}"
+    },
     "reblog": {
       "title": "Reblog",
       "body": "{{username}} boosted your status"

src/config/locales/no/translation.json

@@ -180,6 +180,7 @@
         "reblog": "Notify me when I receive a reblog",
         "favourite": "Notify me when I receive a favourite",
         "follow": "Notify me when I receive a follow",
+        "follow_request": "Notify me when I receive a follow request",
         "reaction": "Notify me when I receive a emoji reaction"
       }
     },

src/main/index.ts

@@ -1421,6 +1421,15 @@ const createNotification = (notification: Entity.Notification, notifyConfig: Not
         } as NotificationConstructorOptions
       }
       break
+    case 'follow_request':
+      if (notifyConfig.follow_request) {
+        return {
+          title: i18next.t('notification.follow_request.title'),
+          body: i18next.t('notification.follow_request.body', { username: username(notification.account) }),
+          silent: false
+        } as NotificationConstructorOptions
+      }
+      break
     case 'mention':
       if (notifyConfig.reply) {
         return {

src/main/preferences.ts

@@ -46,6 +46,7 @@ const notify: Notify = {
   reblog: true,
   favourite: true,
   follow: true,
+  follow_request: true,
   reaction: true
 }
 

src/renderer/components/Preferences/Notification.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="notification">
     <h2>{{ $t('preferences.notification.title') }}</h2>
-    <el-form class="section" label-position="right" label-width="300px" size="small">
+    <el-form class="section" label-position="right" label-width="360px" size="small">
       <p class="description">{{ $t('preferences.notification.enable.description') }}</p>
       <el-form-item for="notifyReply" :label="$t('preferences.notification.enable.reply')">
         <el-switch id="notifyReply" v-model="notifyReply" active-color="#13ce66"> </el-switch>
@@ -18,6 +18,9 @@
       <el-form-item for="notifyFollow" :label="$t('preferences.notification.enable.follow')">
         <el-switch v-model="notifyFollow" active-color="#13ce66"> </el-switch>
       </el-form-item>
+      <el-form-item for="notifyFollowRequest" :label="$t('preferences.notification.enable.follow_request')">
+        <el-switch v-model="notifyFollowRequest" active-color="#13ce66"> </el-switch>
+      </el-form-item>
     </el-form>
   </div>
 </template>
@@ -66,6 +69,16 @@ export default {
         })
       }
     },
+    notifyFollowRequest: {
+      get() {
+        return this.$store.state.Preferences.Notification.notification.notify.follow_request
+      },
+      set(value) {
+        this.$store.dispatch('Preferences/Notification/updateNotify', {
+          follow_request: value
+        })
+      }
+    },
     notifyReaction: {
       get() {
         return this.$store.state.Preferences.Notification.notification.notify.reaction

src/renderer/components/organisms/Notification.vue

@@ -23,6 +23,17 @@
       @select="$emit('selectNotification')"
     >
     </follow>
+    <FollowRequest
+      v-else-if="message.type === 'follow_request'"
+      :message="message"
+      :focused="focused"
+      :overlaid="overlaid"
+      @focusNext="$emit('focusNext')"
+      @focusPrev="$emit('focusPrev')"
+      @focusRight="$emit('focusRight')"
+      @select="$emit('selectNotification')"
+    >
+    </FollowRequest>
     <mention
       v-else-if="message.type === 'mention'"
       :message="message"
@@ -79,6 +90,7 @@
 <script>
 import Favourite from './Notification/Favourite'
 import Follow from './Notification/Follow'
+import FollowRequest from './Notification/FollowRequest'
 import Mention from './Notification/Mention'
 import Quote from './Notification/Quote'
 import Reblog from './Notification/Reblog'
@@ -104,7 +116,7 @@ export default {
       default: false
     }
   },
-  components: { Favourite, Follow, Mention, Quote, Reblog, Reaction },
+  components: { Favourite, Follow, FollowRequest, Mention, Quote, Reblog, Reaction },
   methods: {
     updateToot(message) {
       return this.$emit('update', message)

src/renderer/components/organisms/Notification/FollowRequest.vue

@@ -0,0 +1,170 @@
+<template>
+  <div
+    class="follow-request"
+    tabIndex="0"
+    v-shortkey="shortcutEnabled ? { next: ['j'], prev: ['k'], right: ['l'], profile: ['p'] } : {}"
+    @shortkey="handleStatusControl"
+    ref="status"
+    @click="$emit('select')"
+    role="article"
+    aria-label="follow event"
+  >
+    <div class="action">
+      <div class="action-mark">
+        <icon name="user-plus" scale="0.7"></icon>
+      </div>
+      <div class="action-detail">
+        {{ $t('notification.follow_request.body') }}
+        <span class="bold" @click="openUser(message.account)">
+          <bdi v-html="username(message.account)"></bdi>
+        </span>
+      </div>
+      <div class="action-icon" role="presentation">
+        <FailoverImg :src="message.account.avatar" />
+      </div>
+    </div>
+    <div class="clearfix"></div>
+    <div class="fill-line"></div>
+  </div>
+</template>
+
+<script>
+import FailoverImg from '~/src/renderer/components/atoms/FailoverImg'
+import emojify from '~/src/renderer/utils/emojify'
+
+export default {
+  name: 'follow-request',
+  components: {
+    FailoverImg
+  },
+  props: {
+    message: {
+      type: Object,
+      default: {}
+    },
+    focused: {
+      type: Boolean,
+      default: false
+    },
+    overlaid: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    shortcutEnabled: function () {
+      return this.focused && !this.overlaid
+    }
+  },
+  mounted() {
+    if (this.focused) {
+      this.$refs.status.focus()
+    }
+  },
+  watch: {
+    focused: function (newState, oldState) {
+      if (newState) {
+        this.$nextTick(function () {
+          this.$refs.status.focus()
+        })
+      } else if (oldState && !newState) {
+        this.$nextTick(function () {
+          this.$refs.status.blur()
+        })
+      }
+    }
+  },
+  methods: {
+    username(account) {
+      if (account.display_name !== '') {
+        return emojify(account.display_name, account.emojis)
+      } else {
+        return account.username
+      }
+    },
+    openUser(account) {
+      this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
+      this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
+      this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
+    },
+    handleStatusControl(event) {
+      switch (event.srcKey) {
+        case 'next':
+          this.$emit('focusNext')
+          break
+        case 'prev':
+          this.$emit('focusPrev')
+          break
+        case 'right':
+          this.$emit('focusRight')
+          break
+        case 'profile':
+          this.openUser(this.message.account)
+          break
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bold {
+  font-weight: bold;
+}
+
+.follow-request {
+  padding: 8px 0 0 16px;
+
+  .action {
+    margin-right: 8px;
+
+    .action-mark {
+      color: #409eff;
+      float: left;
+      width: 32px;
+      text-align: right;
+    }
+
+    .action-detail {
+      margin-left: 10px;
+      font-size: var(--base-font-size);
+      float: left;
+      max-width: 80%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      .bold /deep/ {
+        cursor: pointer;
+
+        .emojione {
+          max-width: 14px;
+          max-height: 14px;
+        }
+      }
+    }
+
+    .action-icon {
+      width: 100%;
+      text-align: right;
+
+      img {
+        width: 16px;
+        height: 16px;
+        border-radius: 2px;
+      }
+    }
+  }
+
+  .fill-line {
+    height: 1px;
+    background-color: var(--theme-border-color);
+    margin: 4px 0 0;
+  }
+}
+
+.follow-request:focus {
+  background-color: var(--theme-selected-background-color);
+  outline: 0;
+}
+</style>

src/renderer/store/App.ts

@@ -40,6 +40,7 @@ const state = (): AppState => ({
     reblog: true,
     favourite: true,
     follow: true,
+    follow_request: true,
     reaction: true
   },
   tootPadding: 8,

src/renderer/store/Preferences/Notification.ts

@@ -17,6 +17,7 @@ const state: NotificationState = {
       reblog: true,
       favourite: true,
       follow: true,
+      follow_request: true,
       reaction: true
     }
   }

src/types/notify.ts

@@ -3,5 +3,6 @@ export type Notify = {
   reblog: boolean
   favourite: boolean
   follow: boolean
+  follow_request: boolean
   reaction: boolean
 }