From 15c73ee0b3c299234a4f8860b625a04483c2185d Mon Sep 17 00:00:00 2001 From: Preston Date: Tue, 6 Oct 2020 11:53:54 -0400 Subject: [PATCH] Allow UI Scaling and Have side bar open by default --- .../theme-settings/theme-settings.js | 34 ++++++++++++++++++- .../theme-settings/theme-settings.vue | 16 +++++++++ src/renderer/components/top-nav/top-nav.js | 4 +++ src/renderer/store/modules/settings.js | 25 +++++++++++++- static/locales/en-US.yaml | 2 ++ 5 files changed, 79 insertions(+), 2 deletions(-) diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js index b3838a69..ca3486ee 100644 --- a/src/renderer/components/theme-settings/theme-settings.js +++ b/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' ]) } }) diff --git a/src/renderer/components/theme-settings/theme-settings.vue b/src/renderer/components/theme-settings/theme-settings.vue index 3ac2c750..ea248361 100644 --- a/src/renderer/components/theme-settings/theme-settings.vue +++ b/src/renderer/components/theme-settings/theme-settings.vue @@ -11,6 +11,22 @@ :default-value="barColor" @change="updateBarColor" /> + + + +
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js index 6dc6007a..59cc2ec8 100644 --- a/src/renderer/components/top-nav/top-nav.js +++ b/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) diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js index 6245e992..6f1109a1 100644 --- a/src/renderer/store/modules/settings.js +++ b/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 }, diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml index 89ac0e1c..492c2c94 100644 --- a/static/locales/en-US.yaml +++ b/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