Merge pull request #250 from h3poteto/iss-237

closes #237 Allow to change font-size

src/main/preferences.js

@@ -8,6 +8,7 @@ const Base = {
       toot: true
     },
     theme: 'white',
+    fontSize: 14,
     displayNameStyle: 0
   }
 }

src/renderer/App.vue

@@ -22,7 +22,8 @@ export default {
           '--theme-secondary-color': state.App.theme.secondary_color,
           '--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
+          '--theme-wrapper-mask-color': state.App.theme.wrapper_mask_color,
+          '--base-font-size': `${state.App.fontSize}px`
         }
       }
     })
@@ -62,6 +63,10 @@ html, body, #app {
   a:focus {
     color: #409eff;
   }
+
+  --base-font-size: 14px;
+
+  font-size: var(--base-font-size);
 }
 
 html, body, #app, #global_header {

src/renderer/components/Preferences/General.vue

@@ -12,6 +12,12 @@
             <el-radio v-model="theme" label="dark">Dark</el-radio>
           </td>
         </tr>
+        <tr>
+          <td class="title">Font size:</td>
+          <td class="status">
+            <el-input-number :value="fontSize" :min="9" :max="18" @change="updateFontSize"></el-input-number>
+          </td>
+        </tr>
         <tr>
           <td class="title">Display name style:</td>
           <td class="status">
@@ -81,7 +87,8 @@ export default {
   },
   computed: {
     ...mapState({
-      loading: state => state.Preferences.General.loading
+      loading: state => state.Preferences.General.loading,
+      fontSize: state => state.Preferences.General.general.fontSize
     }),
     theme: {
       get () {
@@ -128,6 +135,11 @@ export default {
           type: 'error'
         })
       })
+  },
+  methods: {
+    updateFontSize (value) {
+      this.$store.dispatch('Preferences/General/updateFontSize', value)
+    }
   }
 }
 </script>

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

@@ -99,7 +99,7 @@ function findLink (target) {
 
     .action-detail {
       margin-left: 10px;
-      font-size: 14px;
+      font-size: var(--base-font-size);
       float: left;
       max-width: 80%;
 
@@ -140,19 +140,19 @@ function findLink (target) {
       .toot-header {
         .user {
           float: left;
-          font-size: 14px;
+          font-size: var(--base-font-size);
           cursor: pointer;
         }
 
         .timestamp {
-          font-size: 14px;
+          font-size: var(--base-font-size);
           text-align: right;
           width: 100%;
         }
       }
 
       .content {
-        font-size: 14px;
+        font-size: var(--base-font-size);
         margin: 4px 0 8px;
       }
     }

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

@@ -99,7 +99,7 @@ function findLink (target) {
 
     .action-detail {
       margin-left: 10px;
-      font-size: 14px;
+      font-size: var(--base-font-size);
       float: left;
       max-width: 80%;
 
@@ -140,18 +140,18 @@ function findLink (target) {
       .toot-header {
         .user {
           float: left;
-          font-size: 14px;
+          font-size: var(--base-font-size);
         }
 
         .timestamp {
-          font-size: 14px;
+          font-size: var(--base-font-size);
           text-align: right;
           width: 100%;
         }
       }
 
       .content {
-        font-size: 14px;
+        font-size: var(--base-font-size);
         margin: 4px 0 8px;
       }
     }

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

@@ -228,7 +228,7 @@ function findLink (target) {
     .toot-header {
       .user {
         float: left;
-        font-size: 14px;
+        font-size: var(--base-font-size);
         cursor: pointer;
         white-space: nowrap;
         max-width: 100%;
@@ -247,7 +247,7 @@ function findLink (target) {
       }
 
       .timestamp {
-        font-size: 14px;
+        font-size: var(--base-font-size);
         text-align: right;
         width: 100%;
         color: #909399;
@@ -255,7 +255,7 @@ function findLink (target) {
     }
 
     .content {
-      font-size: 14px;
+      font-size: var(--base-font-size);
       color: var(--theme-primary-color);
       margin: 4px 0 8px;
       word-wrap: break-word;
@@ -287,7 +287,7 @@ function findLink (target) {
       }
 
       .reblogger-name {
-        font-size: 12px;
+        font-size: calc(var(--base-font-size) * 0.86);
         cursor: pointer;
       }
     }

src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue

@@ -184,7 +184,7 @@ function findLink (target) {
     padding: 12px;
     box-sizing: border-box;
     word-wrap: break-word;
-    font-size: 14px;
+    font-size: var(--base-font-size);
 
     .follow-follower {
       .follower-status {
@@ -214,7 +214,7 @@ function findLink (target) {
 
         .menu-list {
           padding: 0;
-          font-size: 0.8em;
+          font-size: calc(var(--base-font-size) * 0.8);
           list-style-type: none;
           line-height: 20px;
           text-align: left;
@@ -246,7 +246,7 @@ function findLink (target) {
     .username {
       overflow: hidden;
       text-overflow: ellipsis;
-      font-size: 24px;
+      font-size: calc(var(--base-font-size) * 1.71);
       margin: 0 auto 12px auto;
     }
 
@@ -271,13 +271,13 @@ function findLink (target) {
       }
 
       .title {
-        font-size: 11px;
+        font-size: calc(var(--base-font-size) * 0.8);
         color: #909399;
       }
 
       .count {
         font-weight: 800;
-        font-size: 16px;
+        font-size: calc(var(--base-font-size) * 1.14);
         color: var(--theme-primary-color);
       }
     }
@@ -296,7 +296,7 @@ function findLink (target) {
   }
 
   .timeline {
-    font-size: 12px;
+    font-size: calc(var(--base-font-size) * 0.85);
   }
 }
 </style>

src/renderer/components/TimelineSpace/SideMenu.vue

@@ -85,6 +85,7 @@ export default {
     left: 65px;
     width: 180px;
     height: 70px;
+    font-size: 16px;
 
     .profile {
       color: #ffffff;

src/renderer/store/App.js

@@ -6,6 +6,7 @@ const App = {
   namespaced: true,
   state: {
     theme: LightTheme,
+    fontSize: 14,
     // 0: display name and username
     // 1: display name
     // 2: username
@@ -25,6 +26,9 @@ const App = {
           break
       }
     },
+    updateFontSize (state, value) {
+      state.fontSize = value
+    },
     updateDisplayNameStyle (state, value) {
       state.displayNameStyle = value
     }
@@ -47,6 +51,7 @@ const App = {
         ipcRenderer.removeAllListeners('error-get-preferences')
         commit('updateTheme', conf.general.theme)
         commit('updateDisplayNameStyle', conf.general.displayNameStyle)
+        commit('updateFontSize', conf.general.fontSize)
       })
     }
   }

src/renderer/store/Preferences/General.js

@@ -9,6 +9,7 @@ const General = {
         toot: true
       },
       theme: 'white',
+      fontSize: 14,
       displayNameStyle: 0
     },
     loading: false
@@ -59,6 +60,23 @@ const General = {
         commit('changeLoading', false)
       })
     },
+    updateFontSize ({ dispatch, commit, state }, fontSize) {
+      const newGeneral = Object.assign({}, state.general, {
+        fontSize: fontSize
+      })
+      const config = {
+        general: newGeneral
+      }
+      ipcRenderer.send('save-preferences', config)
+      ipcRenderer.once('error-save-preferences', (event, err) => {
+        ipcRenderer.removeAllListeners('response-save-preferences')
+      })
+      ipcRenderer.once('response-save-preferences', (event, conf) => {
+        ipcRenderer.removeAllListeners('error-save-preferences')
+        commit('updateGeneral', conf.general)
+        dispatch('App/loadPreferences', null, { root: true })
+      })
+    },
     updateDisplayNameStyle ({ dispatch, commit, state }, value) {
       const newGeneral = Object.assign({}, state.general, {
         displayNameStyle: value