Merge pull request #590 from h3poteto/iss-527

refs #527 Change time format and set in preferences

src/config/locales/en/translation.json

@@ -87,6 +87,11 @@
         "display_name": "Display name",
         "username": "Username"
       },
+      "time_format": {
+        "title": "Time format:",
+        "absolute": "Absolute",
+        "relative": "Relative"
+      },
       "toot": "Toot",
       "visibility": {
         "title": "Default visibility:",

src/constants/timeFormat.js

@@ -0,0 +1,10 @@
+export default {
+  Absolute: {
+    name: 'preferences.general.time_format.absolute',
+    value: 0
+  },
+  Relative: {
+    name: 'preferences.general.time_format.relative',
+    value: 1
+  }
+}

src/main/preferences.js

@@ -4,6 +4,7 @@ import Visibility from '../constants/visibility'
 import DisplayStyle from '../constants/displayStyle'
 import Theme from '../constants/theme'
 import Language from '../constants/language'
+import TimeFormat from '../constants/timeFormat'
 
 const Base = {
   general: {
@@ -14,7 +15,8 @@ const Base = {
     theme: Theme.Light.key,
     fontSize: 14,
     displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
-    tootVisibility: Visibility.Public.value
+    tootVisibility: Visibility.Public.value,
+    timeFormat: TimeFormat.Absolute.value
   },
   state: {
     collapse: false

src/renderer/components/Preferences/General.vue

@@ -30,6 +30,19 @@
             </el-select>
           </td>
         </tr>
+        <tr>
+          <td class="title">{{ $t('preferences.general.time_format.title') }}</td>
+          <td class="status">
+            <el-select v-model="timeFormat" placeholder="format">
+              <el-option
+                v-for="format in timeFormats"
+                :key="format.value"
+                :label="$t(format.name)"
+                :value="format.value">
+              </el-option>
+            </el-select>
+          </td>
+        </tr>
       </tbody>
     </table>
   </div>
@@ -86,6 +99,7 @@ import { mapState } from 'vuex'
 import Visibility from '~/src/constants/visibility'
 import DisplayStyle from '~/src/constants/displayStyle'
 import Theme from '~/src/constants/theme'
+import TimeFormat from '~/src/constants/timeFormat'
 
 export default {
   name: 'general',
@@ -104,6 +118,10 @@ export default {
       themes: [
         Theme.Light,
         Theme.Dark
+      ],
+      timeFormats: [
+        TimeFormat.Absolute,
+        TimeFormat.Relative
       ]
     }
   },
@@ -128,6 +146,14 @@ export default {
         this.$store.dispatch('Preferences/General/updateDisplayNameStyle', value)
       }
     },
+    timeFormat: {
+      get () {
+        return this.$store.state.Preferences.General.general.timeFormat
+      },
+      set (value) {
+        this.$store.dispatch('Preferences/General/updateTimeFormat', value)
+      }
+    },
     tootVisibility: {
       get () {
         return this.$store.state.Preferences.General.general.tootVisibility

src/renderer/components/TimelineSpace/Contents/Cards/Notification/Favourite.vue

@@ -72,10 +72,12 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import moment from 'moment'
 import { shell } from 'electron'
 import { findAccount, findLink, isTag } from '../../../../utils/link'
 import emojify from '~/src/renderer/utils/emojify'
+import TimeFormat from '~/src/constants/timeFormat'
 
 export default {
   name: 'favourite',
@@ -104,6 +106,11 @@ export default {
     }
   },
   computed: {
+    ...mapState({
+      displayNameStyle: state => state.App.displayNameStyle,
+      timeFormat: state => state.App.timeFormat,
+      language: state => state.App.language
+    }),
     shortcutEnabled: function () {
       return this.focused && !this.overlaid
     }
@@ -135,7 +142,13 @@ export default {
       }
     },
     parseDatetime (datetime) {
-      return moment(datetime).format('YYYY-MM-DD HH:mm:ss')
+      switch (this.timeFormat) {
+        case TimeFormat.Absolute.value:
+          return moment(datetime).format('YYYY-MM-DD HH:mm:ss')
+        case TimeFormat.Relative.value:
+          moment.locale(this.language)
+          return moment(datetime).fromNow()
+      }
     },
     tootClick (e) {
       if (isTag(e.target)) {

src/renderer/components/TimelineSpace/Contents/Cards/Notification/Reblog.vue

@@ -72,10 +72,12 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import moment from 'moment'
 import { shell } from 'electron'
 import { findAccount, findLink, isTag } from '../../../../utils/link'
 import emojify from '~/src/renderer/utils/emojify'
+import TimeFormat from '~/src/constants/timeFormat'
 
 export default {
   name: 'reblog',
@@ -104,6 +106,10 @@ export default {
     }
   },
   computed: {
+    ...mapState({
+      timeFormat: state => state.App.timeFormat,
+      language: state => state.App.language
+    }),
     shortcutEnabled: function () {
       return this.focused && !this.overlaid
     }
@@ -135,7 +141,13 @@ export default {
       }
     },
     parseDatetime (datetime) {
-      return moment(datetime).format('YYYY-MM-DD HH:mm:ss')
+      switch (this.timeFormat) {
+        case TimeFormat.Absolute.value:
+          return moment(datetime).format('YYYY-MM-DD HH:mm:ss')
+        case TimeFormat.Relative.value:
+          moment.locale(this.language)
+          return moment(datetime).fromNow()
+      }
     },
     tootClick (e) {
       if (isTag(e.target)) {

src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue

@@ -120,6 +120,7 @@ import { shell, clipboard } from 'electron'
 import { mapState } from 'vuex'
 import { findAccount, findLink, isTag } from '../../../utils/link'
 import DisplayStyle from '~/src/constants/displayStyle'
+import TimeFormat from '~/src/constants/timeFormat'
 import emojify from '~/src/renderer/utils/emojify'
 
 export default {
@@ -150,7 +151,9 @@ export default {
   },
   computed: {
     ...mapState({
-      displayNameStyle: state => state.App.displayNameStyle
+      displayNameStyle: state => state.App.displayNameStyle,
+      timeFormat: state => state.App.timeFormat,
+      language: state => state.App.language
     }),
     shortcutEnabled: function () {
       return this.focused && !this.overlaid
@@ -210,7 +213,13 @@ export default {
       }
     },
     parseDatetime (datetime) {
-      return moment(datetime).format('YYYY-MM-DD HH:mm:ss')
+      switch (this.timeFormat) {
+        case TimeFormat.Absolute.value:
+          return moment(datetime).format('YYYY-MM-DD HH:mm:ss')
+        case TimeFormat.Relative.value:
+          moment.locale(this.language)
+          return moment(datetime).fromNow()
+      }
     },
     tootClick (e) {
       if (isTag(e.target)) {

src/renderer/store/App.js

@@ -4,6 +4,8 @@ import { LightTheme, DarkTheme } from '../utils/theme'
 import Visibility from '~/src/constants/visibility'
 import DisplayStyle from '~/src/constants/displayStyle'
 import Theme from '~/src/constants/theme'
+import TimeFormat from '~/src/constants/timeFormat'
+import Language from '~/src/constants/language'
 
 const App = {
   namespaced: true,
@@ -17,7 +19,9 @@ const App = {
       reblog: true,
       favourite: true,
       follow: true
-    }
+    },
+    timeFormat: TimeFormat.Absolute.value,
+    language: Language.en.key
   },
   mutations: {
     updateTheme (state, themeKey) {
@@ -44,6 +48,12 @@ const App = {
     },
     updateNotify (state, notify) {
       state.notify = notify
+    },
+    updateTimeFormat (state, format) {
+      state.timeFormat = format
+    },
+    updateLanguage (state, key) {
+      state.language = key
     }
   },
   actions: {
@@ -69,6 +79,8 @@ const App = {
           commit('updateFontSize', conf.general.fontSize)
           commit('updateTootVisibility', conf.general.tootVisibility)
           commit('updateNotify', conf.notification.notify)
+          commit('updateTimeFormat', conf.general.timeFormat)
+          commit('updateLanguage', conf.language.language)
           resolve(conf)
         })
       })

src/renderer/store/Preferences/General.js

@@ -2,6 +2,7 @@ import { ipcRenderer } from 'electron'
 import Visibility from '~/src/constants/visibility'
 import DisplayStyle from '~/src/constants/displayStyle'
 import Theme from '~/src/constants/theme'
+import TimeFormat from '~/src/constants/timeFormat'
 
 const General = {
   namespaced: true,
@@ -14,7 +15,8 @@ const General = {
       theme: Theme.Light.key,
       fontSize: 14,
       displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
-      tootVisibility: Visibility.Public.value
+      tootVisibility: Visibility.Public.value,
+      timeFormat: TimeFormat.Absolute.value
     },
     loading: false
   },
@@ -98,6 +100,23 @@ const General = {
         commit('updateGeneral', conf.general)
       })
     },
+    updateTimeFormat ({ dispatch, commit, state }, value) {
+      const newGeneral = Object.assign({}, state.general, {
+        timeFormat: value
+      })
+      const config = {
+        general: newGeneral
+      }
+      ipcRenderer.send('update-preferences', config)
+      ipcRenderer.once('error-update-preferences', (event, err) => {
+        ipcRenderer.removeAllListeners('response-update-preferences')
+      })
+      ipcRenderer.once('response-update-preferences', (event, conf) => {
+        ipcRenderer.removeAllListeners('error-update-preferences')
+        dispatch('App/loadPreferences', null, { root: true })
+        commit('updateGeneral', conf.general)
+      })
+    },
     updateTootVisibility ({ dispatch, commit, state }, value) {
       const newGeneral = Object.assign({}, state.general, {
         tootVisibility: value