Allow UI Scaling and Have side bar open by default

src/renderer/components/theme-settings/theme-settings.js

@@ -3,6 +3,7 @@ import { mapActions } from 'vuex'
 import FtCard from '../ft-card/ft-card.vue'
 import FtSelect from '../ft-select/ft-select.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
+import FtSlider from '../ft-slider/ft-slider.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 
 export default Vue.extend({
@@ -11,6 +12,7 @@ export default Vue.extend({
     'ft-card': FtCard,
     'ft-select': FtSelect,
     'ft-toggle-switch': FtToggleSwitch,
+    'ft-slider': FtSlider,
     'ft-flex-box': FtFlexBox
   },
   data: function () {
@@ -18,6 +20,10 @@ export default Vue.extend({
       currentBaseTheme: '',
       currentMainColor: '',
       currentSecColor: '',
+      expandSideBar: false,
+      minUiScale: 50,
+      maxUiScale: 300,
+      uiScaleStep: 5,
       baseThemeValues: [
         'light',
         'dark',
@@ -48,6 +54,14 @@ export default Vue.extend({
       return this.$store.getters.getBarColor
     },
 
+    isSideNavOpen: function () {
+      return this.$store.getters.getIsSideNavOpen
+    },
+
+    uiScale: function () {
+      return this.$store.getters.getUiScale
+    },
+
     baseThemeNames: function () {
       return [
         this.$t('Settings.Theme Settings.Base Theme.Light'),
@@ -81,6 +95,7 @@ export default Vue.extend({
     this.currentBaseTheme = localStorage.getItem('baseTheme')
     this.currentMainColor = localStorage.getItem('mainColor').replace('main', '')
     this.currentSecColor = localStorage.getItem('secColor').replace('sec', '')
+    this.expandSideBar = localStorage.getItem('expandSideBar') === 'true'
   },
   methods: {
     updateBaseTheme: function (theme) {
@@ -97,6 +112,22 @@ export default Vue.extend({
       this.currentBaseTheme = theme
     },
 
+    handleExpandSideBar: function (value) {
+      if (this.isSideNavOpen !== value) {
+        this.$store.commit('toggleSideNav')
+      }
+
+      this.expandSideBar = value
+      localStorage.setItem('expandSideBar', value)
+    },
+
+    handleUiScale: function (value) {
+      const { webFrame } = require('electron')
+      const zoomFactor = value / 100
+      webFrame.setZoomFactor(zoomFactor)
+      this.updateUiScale(parseInt(value))
+    },
+
     updateMainColor: function (color) {
       const mainColor = `main${color}`
       const secColor = `sec${this.currentSecColor}`
@@ -126,7 +157,8 @@ export default Vue.extend({
     },
 
     ...mapActions([
-      'updateBarColor'
+      'updateBarColor',
+      'updateUiScale'
     ])
   }
 })

src/renderer/components/theme-settings/theme-settings.vue

@@ -11,6 +11,22 @@
         :default-value="barColor"
         @change="updateBarColor"
       />
+      <ft-toggle-switch
+        :label="$t('Settings.Theme Settings.Expand Side Bar by Default')"
+        :default-value="expandSideBar"
+        @change="handleExpandSideBar"
+      />
+    </ft-flex-box>
+    <ft-flex-box>
+      <ft-slider
+        :label="$t('Settings.Theme Settings.UI Scale')"
+        :default-value="uiScale"
+        :min-value="minUiScale"
+        :max-value="maxUiScale"
+        :step="uiScaleStep"
+        value-extension="%"
+        @change="handleUiScale"
+      />
     </ft-flex-box>
     <br>
     <ft-flex-box>

src/renderer/components/top-nav/top-nav.js

@@ -59,6 +59,10 @@ export default Vue.extend({
       searchContainer.style.display = 'none'
     }
 
+    if (localStorage.getItem('expandSideBar') === 'true') {
+      this.toggleSideNav()
+    }
+
     window.addEventListener('resize', function (event) {
       const width = event.srcElement.innerWidth
       const searchContainer = $('.searchContainer').get(0)

src/renderer/store/modules/settings.js

@@ -1,6 +1,8 @@
 import Datastore from 'nedb'
 
 let dbLocation
+let electron = null
+let webframe = null
 
 if (window && window.process && window.process.type === 'renderer') {
   // Electron is being used
@@ -11,7 +13,8 @@ if (window && window.process && window.process.type === 'renderer') {
     dbLocation = electron.remote.app.getPath('userData')
   } */
 
-  const electron = require('electron')
+  electron = require('electron')
+  webframe = electron.webFrame
   dbLocation = electron.remote.app.getPath('userData')
 
   dbLocation = dbLocation + '/settings.db'
@@ -28,6 +31,7 @@ const settingsDb = new Datastore({
 
 const state = {
   currentTheme: 'lightRed',
+  uiScale: 100,
   backendFallback: true,
   checkForUpdates: true,
   checkForBlogPosts: true,
@@ -87,6 +91,10 @@ const getters = {
     return state.barColor
   },
 
+  getUiScale: () => {
+    return state.uiScale
+  },
+
   getEnableSearchSuggestions: () => {
     return state.enableSearchSuggestions
   },
@@ -262,6 +270,10 @@ const actions = {
             case 'barColor':
               commit('setBarColor', result.value)
               break
+            case 'uiScale':
+              webframe.setZoomFactor(parseInt(result.value) / 100)
+              commit('setUiScale', result.value)
+              break
             case 'hideWatchedSubs':
               commit('setHideWatchedSubs', result.value)
               break
@@ -435,6 +447,14 @@ const actions = {
     })
   },
 
+  updateUiScale ({ commit }, uiScale) {
+    settingsDb.update({ _id: 'uiScale' }, { _id: 'uiScale', value: uiScale }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setUiScale', uiScale)
+      }
+    })
+  },
+
   updateHideWatchedSubs ({ commit }, hideWatchedSubs) {
     settingsDb.update({ _id: 'hideWatchedSubs' }, { _id: 'hideWatchedSubs', value: hideWatchedSubs }, { upsert: true }, (err, numReplaced) => {
       if (!err) {
@@ -666,6 +686,9 @@ const mutations = {
   setBarColor (state, barColor) {
     state.barColor = barColor
   },
+  setUiScale (state, uiScale) {
+    state.uiScale = uiScale
+  },
   setEnableSearchSuggestions (state, enableSearchSuggestions) {
     state.enableSearchSuggestions = enableSearchSuggestions
   },

static/locales/en-US.yaml

@@ -120,6 +120,8 @@ Settings:
   Theme Settings:
     Theme Settings: Theme Settings
     Match Top Bar with Main Color: Match Top Bar with Main Color
+    Expand Side Bar by Default: Expand Side Bar by Default
+    UI Scale: UI Scale
     Base Theme:
       Base Theme: Base Theme
       Black: Black