2020-03-01 03:37:02 +00:00
|
|
|
import Vue from 'vue'
|
|
|
|
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'
|
2020-10-06 15:53:54 +00:00
|
|
|
import FtSlider from '../ft-slider/ft-slider.vue'
|
2020-03-01 03:37:02 +00:00
|
|
|
import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
|
2020-10-07 13:57:22 +00:00
|
|
|
import FtPrompt from '../ft-prompt/ft-prompt.vue'
|
2020-03-01 03:37:02 +00:00
|
|
|
|
|
|
|
export default Vue.extend({
|
|
|
|
name: 'ThemeSettings',
|
|
|
|
components: {
|
|
|
|
'ft-card': FtCard,
|
|
|
|
'ft-select': FtSelect,
|
|
|
|
'ft-toggle-switch': FtToggleSwitch,
|
2020-10-06 15:53:54 +00:00
|
|
|
'ft-slider': FtSlider,
|
2020-10-07 13:57:22 +00:00
|
|
|
'ft-flex-box': FtFlexBox,
|
|
|
|
'ft-prompt': FtPrompt
|
2020-03-01 03:37:02 +00:00
|
|
|
},
|
|
|
|
data: function () {
|
|
|
|
return {
|
|
|
|
currentBaseTheme: '',
|
|
|
|
currentMainColor: '',
|
|
|
|
currentSecColor: '',
|
2020-10-06 15:53:54 +00:00
|
|
|
expandSideBar: false,
|
|
|
|
minUiScale: 50,
|
|
|
|
maxUiScale: 300,
|
|
|
|
uiScaleStep: 5,
|
2020-10-07 13:57:22 +00:00
|
|
|
disableSmoothScrollingToggleValue: false,
|
|
|
|
showRestartPrompt: false,
|
|
|
|
restartPromptValues: [
|
|
|
|
'yes',
|
|
|
|
'no'
|
|
|
|
],
|
2020-03-01 03:37:02 +00:00
|
|
|
baseThemeValues: [
|
|
|
|
'light',
|
2020-06-21 06:17:01 +00:00
|
|
|
'dark',
|
2021-09-22 22:26:14 +00:00
|
|
|
'black',
|
|
|
|
'dracula'
|
2020-03-01 03:37:02 +00:00
|
|
|
],
|
|
|
|
colorValues: [
|
|
|
|
'Red',
|
|
|
|
'Pink',
|
|
|
|
'Purple',
|
|
|
|
'DeepPurple',
|
|
|
|
'Indigo',
|
|
|
|
'Blue',
|
|
|
|
'LightBlue',
|
|
|
|
'Cyan',
|
|
|
|
'Teal',
|
|
|
|
'Green',
|
|
|
|
'LightGreen',
|
|
|
|
'Lime',
|
|
|
|
'Yellow',
|
|
|
|
'Amber',
|
|
|
|
'Orange',
|
2021-09-22 22:26:14 +00:00
|
|
|
'DeepOrange',
|
|
|
|
'DraculaCyan',
|
|
|
|
'DraculaGreen',
|
|
|
|
'DraculaOrange',
|
|
|
|
'DraculaPink',
|
|
|
|
'DraculaPurple',
|
|
|
|
'DraculaRed',
|
|
|
|
'DraculaYellow'
|
2020-03-01 03:37:02 +00:00
|
|
|
]
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
barColor: function () {
|
|
|
|
return this.$store.getters.getBarColor
|
2020-08-07 00:20:42 +00:00
|
|
|
},
|
|
|
|
|
2020-10-06 15:53:54 +00:00
|
|
|
isSideNavOpen: function () {
|
|
|
|
return this.$store.getters.getIsSideNavOpen
|
|
|
|
},
|
|
|
|
|
|
|
|
uiScale: function () {
|
|
|
|
return this.$store.getters.getUiScale
|
|
|
|
},
|
|
|
|
|
2020-10-07 13:57:22 +00:00
|
|
|
disableSmoothScrolling: function () {
|
|
|
|
return this.$store.getters.getDisableSmoothScrolling
|
|
|
|
},
|
2021-10-05 20:16:47 +00:00
|
|
|
hideLabelsSideBar: function () {
|
|
|
|
return this.$store.getters.getHideLabelsSideBar
|
|
|
|
},
|
2020-10-07 13:57:22 +00:00
|
|
|
restartPromptMessage: function () {
|
|
|
|
return this.$t('Settings["The app needs to restart for changes to take effect. Restart and apply change?"]')
|
|
|
|
},
|
|
|
|
|
|
|
|
restartPromptNames: function () {
|
|
|
|
return [
|
|
|
|
this.$t('Yes'),
|
|
|
|
this.$t('No')
|
|
|
|
]
|
|
|
|
},
|
|
|
|
|
2020-08-07 00:20:42 +00:00
|
|
|
baseThemeNames: function () {
|
|
|
|
return [
|
|
|
|
this.$t('Settings.Theme Settings.Base Theme.Light'),
|
|
|
|
this.$t('Settings.Theme Settings.Base Theme.Dark'),
|
2021-09-22 22:26:14 +00:00
|
|
|
this.$t('Settings.Theme Settings.Base Theme.Black'),
|
|
|
|
this.$t('Settings.Theme Settings.Base Theme.Dracula')
|
2020-08-07 00:20:42 +00:00
|
|
|
]
|
|
|
|
},
|
|
|
|
|
|
|
|
colorNames: function () {
|
|
|
|
return [
|
|
|
|
this.$t('Settings.Theme Settings.Main Color Theme.Red'),
|
|
|
|
this.$t('Settings.Theme Settings.Main Color Theme.Pink'),
|
|
|
|
this.$t('Settings.Theme Settings.Main Color Theme.Purple'),
|
|
|
|
this.$t('Settings.Theme Settings.Main Color Theme.Deep Purple'),
|
|
|
|
this.$t('Settings.Theme Settings.Main Color Theme.Indigo'),
|
|
|
|
this.$t('Settings.Theme Settings.Main Color Theme.Blue'),
|
|
|
|
this.$t('Settings.Theme Settings.Main Color Theme.Light Blue'),
|
|
|
|
this.$t('Settings.Theme Settings.Main Color Theme.Cyan'),
|
|
|
|
this.$t('Settings.Theme Settings.Main Color Theme.Teal'),
|
|
|
|
this.$t('Settings.Theme Settings.Main Color Theme.Green'),
|
|
|
|
this.$t('Settings.Theme Settings.Main Color Theme.Light Green'),
|
|
|
|
this.$t('Settings.Theme Settings.Main Color Theme.Lime'),
|
|
|
|
this.$t('Settings.Theme Settings.Main Color Theme.Yellow'),
|
|
|
|
this.$t('Settings.Theme Settings.Main Color Theme.Amber'),
|
|
|
|
this.$t('Settings.Theme Settings.Main Color Theme.Orange'),
|
2021-09-22 22:26:14 +00:00
|
|
|
this.$t('Settings.Theme Settings.Main Color Theme.Deep Orange'),
|
|
|
|
this.$t('Settings.Theme Settings.Main Color Theme.Dracula Cyan'),
|
|
|
|
this.$t('Settings.Theme Settings.Main Color Theme.Dracula Green'),
|
|
|
|
this.$t('Settings.Theme Settings.Main Color Theme.Dracula Orange'),
|
|
|
|
this.$t('Settings.Theme Settings.Main Color Theme.Dracula Pink'),
|
|
|
|
this.$t('Settings.Theme Settings.Main Color Theme.Dracula Purple'),
|
|
|
|
this.$t('Settings.Theme Settings.Main Color Theme.Dracula Red'),
|
|
|
|
this.$t('Settings.Theme Settings.Main Color Theme.Dracula Yellow')
|
2020-08-07 00:20:42 +00:00
|
|
|
]
|
2020-03-01 03:37:02 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted: function () {
|
|
|
|
this.currentBaseTheme = localStorage.getItem('baseTheme')
|
|
|
|
this.currentMainColor = localStorage.getItem('mainColor').replace('main', '')
|
|
|
|
this.currentSecColor = localStorage.getItem('secColor').replace('sec', '')
|
2020-10-06 15:53:54 +00:00
|
|
|
this.expandSideBar = localStorage.getItem('expandSideBar') === 'true'
|
2020-10-07 13:57:22 +00:00
|
|
|
this.disableSmoothScrollingToggleValue = this.disableSmoothScrolling
|
2020-03-01 03:37:02 +00:00
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
updateBaseTheme: function (theme) {
|
|
|
|
const mainColor = `main${this.currentMainColor}`
|
|
|
|
const secColor = `sec${this.currentSecColor}`
|
|
|
|
|
|
|
|
const payload = {
|
|
|
|
baseTheme: theme,
|
|
|
|
mainColor: mainColor,
|
|
|
|
secColor: secColor
|
|
|
|
}
|
|
|
|
|
|
|
|
this.$parent.$parent.updateTheme(payload)
|
|
|
|
this.currentBaseTheme = theme
|
|
|
|
},
|
|
|
|
|
2020-10-06 15:53:54 +00:00
|
|
|
handleExpandSideBar: function (value) {
|
|
|
|
if (this.isSideNavOpen !== value) {
|
|
|
|
this.$store.commit('toggleSideNav')
|
|
|
|
}
|
|
|
|
|
|
|
|
this.expandSideBar = value
|
|
|
|
localStorage.setItem('expandSideBar', value)
|
|
|
|
},
|
|
|
|
|
2020-10-07 13:57:22 +00:00
|
|
|
handleRestartPrompt: function (value) {
|
|
|
|
this.disableSmoothScrollingToggleValue = value
|
|
|
|
this.showRestartPrompt = true
|
|
|
|
},
|
|
|
|
|
|
|
|
handleSmoothScrolling: function (value) {
|
|
|
|
this.showRestartPrompt = false
|
|
|
|
|
|
|
|
if (value === null || value === 'no') {
|
|
|
|
this.disableSmoothScrollingToggleValue = !this.disableSmoothScrollingToggleValue
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
2021-06-16 04:30:01 +00:00
|
|
|
this.updateDisableSmoothScrolling(
|
|
|
|
this.disableSmoothScrollingToggleValue
|
|
|
|
).then(() => {
|
|
|
|
// FIXME: No electron safeguard
|
|
|
|
const { ipcRenderer } = require('electron')
|
|
|
|
|
|
|
|
ipcRenderer.send('relaunchRequest')
|
|
|
|
})
|
2020-10-07 13:57:22 +00:00
|
|
|
},
|
|
|
|
|
2020-03-01 03:37:02 +00:00
|
|
|
updateMainColor: function (color) {
|
|
|
|
const mainColor = `main${color}`
|
|
|
|
const secColor = `sec${this.currentSecColor}`
|
|
|
|
|
|
|
|
const payload = {
|
|
|
|
baseTheme: this.currentBaseTheme,
|
|
|
|
mainColor: mainColor,
|
|
|
|
secColor: secColor
|
|
|
|
}
|
|
|
|
|
|
|
|
this.$parent.$parent.updateTheme(payload)
|
|
|
|
this.currentMainColor = color
|
|
|
|
},
|
|
|
|
|
|
|
|
updateSecColor: function (color) {
|
|
|
|
const mainColor = `main${this.currentMainColor}`
|
|
|
|
const secColor = `sec${color}`
|
|
|
|
|
|
|
|
const payload = {
|
|
|
|
baseTheme: this.currentBaseTheme,
|
|
|
|
mainColor: mainColor,
|
|
|
|
secColor: secColor
|
|
|
|
}
|
|
|
|
|
|
|
|
this.$parent.$parent.updateTheme(payload)
|
|
|
|
this.currentSecColor = color
|
|
|
|
},
|
|
|
|
|
|
|
|
...mapActions([
|
2020-10-06 15:53:54 +00:00
|
|
|
'updateBarColor',
|
2020-10-07 13:57:22 +00:00
|
|
|
'updateUiScale',
|
2021-10-05 20:16:47 +00:00
|
|
|
'updateDisableSmoothScrolling',
|
|
|
|
'updateHideLabelsSideBar'
|
2020-03-01 03:37:02 +00:00
|
|
|
])
|
|
|
|
}
|
|
|
|
})
|