refs #579 List up fonts list

src/config/locales/en/translation.json

@@ -116,6 +116,7 @@
         "wrapper_mask_color": "Modal wrapper"
       },
       "font_size": "Font size",
+      "font_family": "Font family",
       "display_style": {
         "title": "Display style of username",
         "display_name_and_username": "Display name and username",

src/main/fonts.js

@@ -0,0 +1,14 @@
+import fontManager from 'font-manager'
+
+const fonts = () => {
+  return new Promise((resolve, reject) => {
+    fontManager.getAvailableFonts((fonts) => {
+      const families = fonts.map(f => {
+        return f.family
+      })
+      resolve(Array.from(new Set(families)).sort())
+    })
+  })
+}
+
+export default fonts

src/main/index.js

@@ -10,20 +10,16 @@ import path from 'path'
 import ContextMenu from 'electron-context-menu'
 import * as Splashscreen from '@trodi/electron-splashscreen'
 import openAboutWindow from 'about-window'
-import fontManager from 'font-manager'
 
 import Authentication from './auth'
 import Account from './account'
 import Streaming from './streaming'
 import Preferences from './preferences'
+import Fonts from './fonts'
 import Hashtags from './hashtags'
 import i18n from '../config/i18n'
 import Language from '../constants/language'
 
-fontManager.getAvailableFonts(function (fonts) {
-  console.log(fonts)
-})
-
 /**
  * Context menu
  */
@@ -695,6 +691,17 @@ ipcMain.on('remove-hashtag', (event, tag) => {
     })
 })
 
+// Fonts
+ipcMain.on('list-fonts', (event, _) => {
+  Fonts()
+    .then(list => {
+      event.sender.send('response-list-fonts', list)
+    })
+    .catch(err => {
+      event.sender.send('error-list-fonts', err)
+    })
+})
+
 // Application control
 ipcMain.on('relaunch', (event, _) => {
   app.relaunch()

src/renderer/App.vue

@@ -23,7 +23,8 @@ export default {
           '--theme-border-color': state.App.theme.border_color,
           '--theme-header-menu-color': state.App.theme.header_menu_color,
           '--theme-wrapper-mask-color': state.App.theme.wrapper_mask_color,
-          '--base-font-size': `${state.App.fontSize}px`
+          '--base-font-size': `${state.App.fontSize}px`,
+          '--specified-fonts': state.App.defaultFonts.join(', ')
         }
       }
     })
@@ -42,20 +43,6 @@ export default {
 </script>
 
 <style lang="scss">
-body {
-  font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Takaoゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
-}
-
-/*
-  These selectors are defined in user agent stylesheet. So I override.
-*/
-input,
-textarea,
-select,
-button {
-  font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Takaoゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
-}
-
 html, body, #app {
   --theme-background-color: #ffffff;
   --theme-selected-background-color: #f2f6fc;
@@ -86,6 +73,20 @@ html, body, #app {
   .theme-popover {
     background-color: #d9e1e8;
   }
+
+  --specified-fonts: 'Noto Sans', 'Noto Sans CJK JP', 'Takaoゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
+  font-family: var(--specified-fonts);
+
+
+  /*
+  These selectors are defined in user agent stylesheet. So I override.
+ */
+  input,
+  textarea,
+  select,
+  button {
+    font-family: var(--specified-fonts);
+  }
 }
 
 html, body, #app, #global_header {

src/renderer/components/Preferences/Appearance.vue

@@ -26,6 +26,16 @@
     <color-pallet></color-pallet>
   </div>
   <div class="font section">
+    <h4>{{ $t('preferences.appearance.font_family') }}</h4>
+    <span class="status">
+      <el-select v-model="font" placeholder="fonts">
+        <el-option
+          v-for="f in fontList"
+          :key="f"
+          :label="f"
+          :value="f" />
+      </el-select>
+    </span>
     <h4>{{ $t('preferences.appearance.font_size') }}</h4>
     <span class="status">
       <el-input-number :value="fontSize" :min="9" :max="18" @change="updateFontSize"></el-input-number>
@@ -92,12 +102,14 @@ export default {
       timeFormats: [
         TimeFormat.Absolute,
         TimeFormat.Relative
-      ]
+      ],
+      font: ''
     }
   },
   computed: {
     ...mapState('Preferences/Appearance', {
-      fontSize: state => state.appearance.fontSize
+      fontSize: state => state.appearance.fontSize,
+      fontList: state => state.fonts
     }),
     theme: {
       get () {
@@ -129,6 +141,7 @@ export default {
   },
   created () {
     this.$store.dispatch('Preferences/Appearance/loadAppearance')
+    this.$store.dispatch('Preferences/Appearance/loadFonts')
   },
   methods: {
     updateFontSize (value) {

src/renderer/store/App.js

@@ -6,6 +6,7 @@ import DisplayStyle from '~/src/constants/displayStyle'
 import Theme from '~/src/constants/theme'
 import TimeFormat from '~/src/constants/timeFormat'
 import Language from '~/src/constants/language'
+import DefaultFonts from '../utils/fonts'
 
 const App = {
   namespaced: true,
@@ -21,7 +22,8 @@ const App = {
       follow: true
     },
     timeFormat: TimeFormat.Absolute.value,
-    language: Language.en.key
+    language: Language.en.key,
+    defaultFonts: DefaultFonts
   },
   mutations: {
     updateTheme (state, themeColorList) {

src/renderer/store/Preferences/Appearance.js

@@ -3,6 +3,7 @@ import DisplayStyle from '~/src/constants/displayStyle'
 import Theme from '~/src/constants/theme'
 import TimeFormat from '~/src/constants/timeFormat'
 import { LightTheme } from '~/src/renderer/utils/theme'
+import DefaultFonts from '../../utils/fonts'
 
 export default {
   namespaced: true,
@@ -13,11 +14,24 @@ export default {
       displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
       timeFormat: TimeFormat.Absolute.value,
       customThemeColor: LightTheme
+    },
+    fonts: []
+  },
+  getters: {
+    currentFont: state => {
+      const font = DefaultFonts.find(f => state.fonts.includes(f))
+      if (font) {
+        return font
+      }
+      return DefaultFonts[0]
     }
   },
   mutations: {
     updateAppearance (state, conf) {
       state.appearance = conf
+    },
+    updateFonts (state, fonts) {
+      state.fonts = fonts
     }
   },
   actions: {
@@ -35,6 +49,20 @@ export default {
         })
       })
     },
+    loadFonts ({ commit }) {
+      return new Promise((resolve, reject) => {
+        ipcRenderer.send('list-fonts')
+        ipcRenderer.once('error-list-fonts', (event, err) => {
+          ipcRenderer.removeAllListeners('response-list-fonts')
+          reject(err)
+        })
+        ipcRenderer.once('response-list-fonts', (event, fonts) => {
+          ipcRenderer.removeAllListeners('error-list-fonts')
+          commit('updateFonts', fonts)
+          resolve(fonts)
+        })
+      })
+    },
     updateTheme ({ dispatch, commit, state }, theme) {
       const newAppearance = Object.assign({}, state.appearance, {
         theme: theme

src/renderer/utils/fonts.js

@@ -0,0 +1,14 @@
+export default [
+  'Noto Sans',
+  'Noto Sans CJK JP',
+  'Takaoゴシック',
+  'Hiragino Kaku Gothic ProN',
+  'ヒラギノ角ゴ ProN W3',
+  'Meiryo',
+  'メイリオ',
+  'Osaka',
+  'MS PGothic',
+  'arial',
+  'helvetica',
+  'sans-serif'
+]