Merge pull request #586 from h3poteto/iss-581

closes #581 Switch notification in preferences

src/config/locales/de/translation.json

@@ -99,6 +99,16 @@
       "fav_rb_sound": "Favorit und Boost:",
       "toot_sound": "Toot:"
     },
+    "notification": {
+      "title": "Notification",
+      "notify": {
+        "title": "Notify",
+        "reply": "Reply:",
+        "reblog": "Reblog:",
+        "favourite": "Favourite:",
+        "follow": "Follow:"
+      }
+    },
     "account": {
       "title": "Konto",
       "connected": "Verbundenes Konto",

src/config/locales/en/translation.json

@@ -99,6 +99,16 @@
       "fav_rb_sound": "Favorite and Boost:",
       "toot_sound": "Toot:"
     },
+    "notification": {
+      "title": "Notification",
+      "notify": {
+        "title": "Notify",
+        "reply": "Reply:",
+        "reblog": "Reblog:",
+        "favourite": "Favourite:",
+        "follow": "Follow:"
+      }
+    },
     "account": {
       "title": "Account",
       "connected": "Connected Account",

src/config/locales/fr/translation.json

@@ -99,6 +99,16 @@
       "fav_rb_sound": "Partages et favoris:",
       "toot_sound": "Pouets:"
     },
+    "notification": {
+      "title": "Notification",
+      "notify": {
+        "title": "Notify",
+        "reply": "Reply:",
+        "reblog": "Reblog:",
+        "favourite": "Favourite:",
+        "follow": "Follow:"
+      }
+    },
     "account": {
       "title": "Compte",
       "connected": "Compte connecté",

src/config/locales/ja/translation.json

@@ -99,6 +99,16 @@
       "fav_rb_sound": "お気に入り，ブースト時:",
       "toot_sound": "トゥート時:"
     },
+    "notification": {
+      "title": "通知",
+      "notify": {
+        "title": "通知設定",
+        "reply": "返信:",
+        "reblog": "ブースト:",
+        "favourite": "お気に入り:",
+        "follow": "フォロー:"
+      }
+    },
     "account": {
       "title": "アカウント",
       "connected": "登録済みアカウント",

src/config/locales/ko/translation.json

@@ -99,6 +99,16 @@
       "fav_rb_sound": "즐겨찾기 및 부스트:",
       "toot_sound": "툿:"
     },
+    "notification": {
+      "title": "Notification",
+      "notify": {
+        "title": "Notify",
+        "reply": "Reply:",
+        "reblog": "Reblog:",
+        "favourite": "Favourite:",
+        "follow": "Follow:"
+      }
+    },
     "account": {
       "title": "계정",
       "connected": "연결된 계정",

src/config/locales/pl/translation.json

@@ -99,6 +99,16 @@
       "fav_rb_sound": "Polubienie i podbicie:",
       "toot_sound": "Wpisy:"
     },
+    "notification": {
+      "title": "Notification",
+      "notify": {
+        "title": "Notify",
+        "reply": "Reply:",
+        "reblog": "Reblog:",
+        "favourite": "Favourite:",
+        "follow": "Follow:"
+      }
+    },
     "account": {
       "title": "Konta",
       "connected": "Połączone konta",

src/main/index.js

@@ -578,6 +578,8 @@ ipcMain.on('get-preferences', (event, _) => {
     })
 })
 
+// TODO: do not use save-preferences
+// Because it update all preferences as default
 ipcMain.on('save-preferences', (event, data) => {
   const preferences = new Preferences(preferencesDBPath)
   preferences.save(data)
@@ -589,6 +591,17 @@ ipcMain.on('save-preferences', (event, data) => {
     })
 })
 
+ipcMain.on('update-preferences', (event, data) => {
+  const preferences = new Preferences(preferencesDBPath)
+  preferences.update(data)
+    .then((conf) => {
+      event.sender.send('response-update-preferences', conf)
+    })
+    .catch((err) => {
+      event.sender.send('error-update-preferences', err)
+    })
+})
+
 ipcMain.on('change-collapse', (event, value) => {
   const preferences = new Preferences(preferencesDBPath)
   preferences.update(

src/main/preferences.js

@@ -21,6 +21,14 @@ const Base = {
   },
   language: {
     language: Language.en.key
+  },
+  notification: {
+    notify: {
+      reply: true,
+      reblog: true,
+      favourite: true,
+      follow: true
+    }
   }
 }
 

src/renderer/components/Preferences.vue

@@ -23,11 +23,15 @@
             <icon name="cog" class="icon" scale="1.3"></icon>
             <span>{{ $t('preferences.general.title') }}</span>
           </el-menu-item>
-          <el-menu-item index="2" :route="{path: '/preferences/account'}" @click="account">
+          <el-menu-item index="2" :route="{path: '/preferences/notification'}" @click="notification">
+            <icon name="bell" class="icon" scale="1.3"></icon>
+            <span>{{ $t('preferences.notification.title') }}</span>
+          </el-menu-item>
+          <el-menu-item index="3" :route="{path: '/preferences/account'}" @click="account">
             <icon name="user" class="icon" scale="1.3"></icon>
             <span>{{ $t('preferences.account.title') }}</span>
           </el-menu-item>
-          <el-menu-item index="3" :route="{path: '/preferences/language'}" @click="language">
+          <el-menu-item index="4" :route="{path: '/preferences/language'}" @click="language">
             <icon name="language" class="icon" scale="1.3"></icon>
             <span>{{ $t('preferences.language.title') }}</span>
           </el-menu-item>
@@ -60,6 +64,9 @@ export default {
     general () {
       this.$router.push('/preferences/general')
     },
+    notification () {
+      this.$router.push('/preferences/notification')
+    },
     account () {
       this.$router.push('/preferences/account')
     },

src/renderer/components/Preferences/Notification.vue

@@ -0,0 +1,129 @@
+<template>
+<div id="notification">
+  <h2>{{ $t('preferences.notification.title') }}</h2>
+  <div class="notify">
+    <h3>{{ $t('preferences.notification.notify.title') }}</h3>
+    <table class="notification">
+      <tbody>
+        <tr>
+          <td class="title">{{ $t('preferences.notification.notify.reply') }}</td>
+          <td class="status">
+            <el-switch
+              v-model="notifyReply"
+              active-color="#13ce66">
+            </el-switch>
+          </td>
+        </tr>
+        <tr>
+          <td class="title">{{ $t('preferences.notification.notify.reblog') }}</td>
+          <td class="status">
+            <el-switch
+              v-model="notifyReblog"
+              active-color="#13ce66">
+            </el-switch>
+          </td>
+        </tr>
+        <tr>
+          <td class="title">{{ $t('preferences.notification.notify.favourite') }}</td>
+          <td class="status">
+            <el-switch
+              v-model="notifyFavourite"
+              active-color="#13ce66">
+            </el-switch>
+          </td>
+        </tr>
+        <tr>
+          <td class="title">{{ $t('preferences.notification.notify.follow') }}</td>
+          <td class="status">
+            <el-switch
+              v-model="notifyFollow"
+              active-color="#13ce66">
+            </el-switch>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'notification',
+  computed: {
+    notifyReply: {
+      get () {
+        return this.$store.state.Preferences.Notification.notification.notify.reply
+      },
+      set (value) {
+        this.$store.dispatch('Preferences/Notification/updateNotify', {
+          reply: value
+        })
+      }
+    },
+    notifyReblog: {
+      get () {
+        return this.$store.state.Preferences.Notification.notification.notify.reblog
+      },
+      set (value) {
+        this.$store.dispatch('Preferences/Notification/updateNotify', {
+          reblog: value
+        })
+      }
+    },
+    notifyFavourite: {
+      get () {
+        return this.$store.state.Preferences.Notification.notification.notify.favourite
+      },
+      set (value) {
+        this.$store.dispatch('Preferences/Notification/updateNotify', {
+          favourite: value
+        })
+      }
+    },
+    notifyFollow: {
+      get () {
+        return this.$store.state.Preferences.Notification.notification.notify.follow
+      },
+      set (value) {
+        this.$store.dispatch('Preferences/Notification/updateNotify', {
+          follow: value
+        })
+      }
+    }
+  },
+  created () {
+    this.$store.dispatch('Preferences/Notification/loadNotification')
+      .catch(() => {
+        this.$message({
+          message: this.$t('message.preferences_load_error'),
+          type: 'error'
+        })
+      })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#notification {
+  .notify {
+    table {
+      width: 100%;
+    }
+
+    td {
+      padding: 16px 0;
+    }
+
+    .title {
+      text-align: right;
+      width: 50%;
+    }
+
+    .status {
+      width: 50%;
+      text-align: center;
+    }
+  }
+}
+</style>

src/renderer/router/index.js

@@ -26,6 +26,11 @@ export default new Router({
           name: 'general',
           component: require('@/components/Preferences/General').default
         },
+        {
+          path: 'notification',
+          name: 'notification',
+          component: require('@/components/Preferences/Notification').default
+        },
         {
           path: 'account',
           name: 'account',

src/renderer/store/App.js

@@ -11,7 +11,13 @@ const App = {
     theme: LightTheme,
     fontSize: 14,
     displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
-    tootVisibility: Visibility.Public.value
+    tootVisibility: Visibility.Public.value,
+    notify: {
+      reply: true,
+      reblog: true,
+      favourite: true,
+      follow: true
+    }
   },
   mutations: {
     updateTheme (state, themeKey) {
@@ -35,6 +41,9 @@ const App = {
     },
     updateTootVisibility (state, value) {
       state.tootVisibility = value
+    },
+    updateNotify (state, notify) {
+      state.notify = notify
     }
   },
   actions: {
@@ -59,6 +68,7 @@ const App = {
           commit('updateDisplayNameStyle', conf.general.displayNameStyle)
           commit('updateFontSize', conf.general.fontSize)
           commit('updateTootVisibility', conf.general.tootVisibility)
+          commit('updateNotify', conf.notification.notify)
           resolve(conf)
         })
       })

src/renderer/store/Preferences.js

@@ -1,13 +1,15 @@
 import General from './Preferences/General'
 import Account from './Preferences/Account'
 import Language from './Preferences/Language'
+import Notification from './Preferences/Notification'
 
 const Preferences = {
   namespaced: true,
   modules: {
     General,
     Account,
-    Language
+    Language,
+    Notification
   },
   state: {
     defaultActive: '1'

src/renderer/store/Preferences/Notification.js

@@ -0,0 +1,50 @@
+import { ipcRenderer } from 'electron'
+
+export default {
+  namespaced: true,
+  state: {
+    notification: {
+      notify: {
+        reply: true,
+        reblog: true,
+        favourite: true,
+        follow: true
+      }
+    }
+  },
+  mutations: {
+    updateNotification (state, notification) {
+      state.notification = notification
+    }
+  },
+  actions: {
+    loadNotification ({ commit }) {
+      return new Promise((resolve, reject) => {
+        ipcRenderer.send('get-preferences')
+        ipcRenderer.once('error-get-preferences', (event, err) => {
+          ipcRenderer.removeAllListeners('response-get-preferences')
+          reject(err)
+        })
+        ipcRenderer.once('response-get-preferences', (event, conf) => {
+          ipcRenderer.removeAllListeners('error-get-preferences')
+          commit('updateNotification', conf.notification)
+          resolve(conf)
+        })
+      })
+    },
+    updateNotify ({ commit, state, dispatch }, notify) {
+      const newNotify = Object.assign({}, state.notification.notify, notify)
+      const newNotification = Object.assign({}, state.notification, {
+        notify: newNotify
+      })
+      const config = {
+        notification: newNotification
+      }
+      ipcRenderer.send('update-preferences', config)
+      ipcRenderer.once('response-update-preferences', (event, conf) => {
+        commit('updateNotification', conf.notification)
+        dispatch('App/loadPreferences', null, { root: true })
+      })
+    }
+  }
+}

src/renderer/store/TimelineSpace.js

@@ -89,9 +89,11 @@ const TimelineSpace = {
         commit('TimelineSpace/SideMenu/changeUnreadHomeTimeline', true, { root: true })
       })
       ipcRenderer.on('notification-start-user-streaming', (event, notification) => {
-        let notify = buildNotification(notification)
-        notify.onclick = () => {
-          router.push(`/${account._id}/notifications`)
+        let notify = createNotification(notification, rootState.App.notify)
+        if (notify) {
+          notify.onclick = () => {
+            router.push(`/${account._id}/notifications`)
+          }
         }
         commit('TimelineSpace/Contents/Notifications/appendNotifications', notification, { root: true })
         if (rootState.TimelineSpace.Contents.Notifications.heading && Math.random() > 0.8) {
@@ -172,25 +174,37 @@ const TimelineSpace = {
 
 export default TimelineSpace
 
-function buildNotification (notification) {
+function createNotification (notification, notifyConfig) {
   switch (notification.type) {
     case 'favourite':
-      return new Notification('Favourite', {
-        body: `${username(notification.account)} favourited your status`
-      })
+      if (notifyConfig.favourite) {
+        return new Notification('Favourite', {
+          body: `${username(notification.account)} favourited your status`
+        })
+      }
+      break
     case 'follow':
-      return new Notification('Follow', {
-        body: `${username(notification.account)} is now following you`
-      })
+      if (notifyConfig.follow) {
+        return new Notification('Follow', {
+          body: `${username(notification.account)} is now following you`
+        })
+      }
+      break
     case 'mention':
-      // Clean html tags
-      return new Notification(`${notification.status.account.display_name}`, {
-        body: `${notification.status.content.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g, '')}`
-      })
+      if (notifyConfig.reply) {
+        // Clean html tags
+        return new Notification(`${notification.status.account.display_name}`, {
+          body: `${notification.status.content.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g, '')}`
+        })
+      }
+      break
     case 'reblog':
-      return new Notification('Reblog', {
-        body: `${username(notification.account)} boosted your status`
-      })
+      if (notifyConfig.reblog) {
+        return new Notification('Reblog', {
+          body: `${username(notification.account)} boosted your status`
+        })
+      }
+      break
   }
 }