Mastodon
/
Whalebird-desktop-client-mac-linux-windows
mirror of https://github.com/h3poteto/whalebird-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

refs #3301 Rewrite Preferences/Appearance/ColorPallet with composition API

This commit is contained in:
AkiraFukushima 2022-05-04 19:10:35 +09:00
parent a9513fab4e
commit 0d3ecbc177
No known key found for this signature in database
GPG Key ID: B6E51BAC4DE1A957
2 changed files with 121 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

237
src/renderer/components/Preferences/Appearance/ColorPallet.vue
View File

@ -1,189 +1,144 @@
<template>
<el-form class="pallet" label-position="top" size="small">
<div class="item">
<el-form-item
:label="$t('preferences.appearance.custom_theme.background_color')"
>
<el-form-item :label="$t('preferences.appearance.custom_theme.background_color')">
<el-color-picker v-model="background"></el-color-picker>
</el-form-item>
<el-form-item
:label="
$t('preferences.appearance.custom_theme.selected_background_color')
"
>
<el-form-item :label="$t('preferences.appearance.custom_theme.selected_background_color')">
<el-color-picker v-model="selectedBackground"></el-color-picker>
</el-form-item>
</div>
<div class="item">
<el-form-item
:label="$t('preferences.appearance.custom_theme.global_header_color')"
>
<el-form-item :label="$t('preferences.appearance.custom_theme.global_header_color')">
<el-color-picker v-model="globalHeader"></el-color-picker>
</el-form-item>
<el-form-item
:label="$t('preferences.appearance.custom_theme.side_menu_color')"
>
<el-form-item :label="$t('preferences.appearance.custom_theme.side_menu_color')">
<el-color-picker v-model="sideMenu"></el-color-picker>
</el-form-item>
</div>
<div class="item">
<el-form-item
:label="$t('preferences.appearance.custom_theme.primary_color')"
>
<el-form-item :label="$t('preferences.appearance.custom_theme.primary_color')">
<el-color-picker v-model="primary"></el-color-picker>
</el-form-item>
<el-form-item
:label="$t('preferences.appearance.custom_theme.regular_color')"
>
<el-form-item :label="$t('preferences.appearance.custom_theme.regular_color')">
<el-color-picker v-model="regular"></el-color-picker>
</el-form-item>
</div>
<div class="item">
<el-form-item
:label="$t('preferences.appearance.custom_theme.secondary_color')"
>
<el-form-item :label="$t('preferences.appearance.custom_theme.secondary_color')">
<el-color-picker v-model="secondary"></el-color-picker>
</el-form-item>
<el-form-item
:label="$t('preferences.appearance.custom_theme.border_color')"
>
<el-form-item :label="$t('preferences.appearance.custom_theme.border_color')">
<el-color-picker v-model="border"></el-color-picker>
</el-form-item>
</div>
<div class="item">
<el-form-item
:label="$t('preferences.appearance.custom_theme.header_menu_color')"
>
<el-form-item :label="$t('preferences.appearance.custom_theme.header_menu_color')">
<el-color-picker v-model="headerMenu"></el-color-picker>
</el-form-item>
<el-form-item
:label="$t('preferences.appearance.custom_theme.wrapper_mask_color')"
>
<el-color-picker
v-model="wrapperMask"
:show-alpha="true"
></el-color-picker>
<el-form-item :label="$t('preferences.appearance.custom_theme.wrapper_mask_color')">
<el-color-picker v-model="wrapperMask" :show-alpha="true"></el-color-picker>
</el-form-item>
</div>
</el-form>
</template>
<script>
export default {
<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useStore } from '@/store'
import { ACTION_TYPES } from '@/store/Preferences/Appearance'
export default defineComponent({
name: 'color-pallet',
computed: {
background: {
get() {
return this.$store.state.Preferences.Appearance.appearance
.customThemeColor.background_color
},
set(value) {
this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
background_color: value,
setup() {
const space = 'Preferences/Appearance'
const store = useStore()
const background = computed({
get: () => store.state.Preferences.Appearance.appearance.customThemeColor.background_color,
set: (value: string) =>
store.dispatch(`${space}/${ACTION_TYPES.UPDATE_CUSTOM_THEME_COLOR}`, {
background_color: value
})
},
},
selectedBackground: {
get() {
return this.$store.state.Preferences.Appearance.appearance
.customThemeColor.selected_background_color
},
set(value) {
this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
selected_background_color: value,
})
const selectedBackground = computed({
get: () => store.state.Preferences.Appearance.appearance.customThemeColor.selected_background_color,
set: (value: string) =>
store.dispatch(`${space}/${ACTION_TYPES.UPDATE_CUSTOM_THEME_COLOR}`, {
selected_background_color: value
})
},
},
globalHeader: {
get() {
return this.$store.state.Preferences.Appearance.appearance
.customThemeColor.global_header_color
},
set(value) {
this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
global_header_color: value,
})
const globalHeader = computed({
get: () => store.state.Preferences.Appearance.appearance.customThemeColor.global_header_color,
set: (value: string) =>
store.dispatch(`${space}/${ACTION_TYPES.UPDATE_CUSTOM_THEME_COLOR}`, {
global_header_color: value
})
},
},
sideMenu: {
get() {
return this.$store.state.Preferences.Appearance.appearance
.customThemeColor.side_menu_color
},
set(value) {
this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
side_menu_color: value,
})
const sideMenu = computed({
get: () => store.state.Preferences.Appearance.appearance.customThemeColor.side_menu_color,
set: (value: string) =>
store.dispatch(`${space}/${ACTION_TYPES.UPDATE_CUSTOM_THEME_COLOR}`, {
side_menu_color: value
})
},
},
primary: {
get() {
return this.$store.state.Preferences.Appearance.appearance
.customThemeColor.primary_color
},
set(value) {
this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
primary_color: value,
})
const primary = computed({
get: () => store.state.Preferences.Appearance.appearance.customThemeColor.primary_color,
set: (value: string) =>
store.dispatch(`${space}/${ACTION_TYPES.UPDATE_CUSTOM_THEME_COLOR}`, {
primary_color: value
})
},
},
regular: {
get() {
return this.$store.state.Preferences.Appearance.appearance
.customThemeColor.regular_color
},
set(value) {
this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
regular_color: value,
})
const regular = computed({
get: () => store.state.Preferences.Appearance.appearance.customThemeColor.regular_color,
set: (value: string) =>
store.dispatch(`${space}/${ACTION_TYPES.UPDATE_CUSTOM_THEME_COLOR}`, {
regular_color: value
})
},
},
secondary: {
get() {
return this.$store.state.Preferences.Appearance.appearance
.customThemeColor.secondary_color
},
set(value) {
this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
secondary_color: value,
})
const secondary = computed({
get: () => store.state.Preferences.Appearance.appearance.customThemeColor.secondary_color,
set: (value: string) =>
store.dispatch(`${space}/${ACTION_TYPES.UPDATE_CUSTOM_THEME_COLOR}`, {
secondary_color: value
})
},
},
border: {
get() {
return this.$store.state.Preferences.Appearance.appearance
.customThemeColor.border_color
},
set(value) {
this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
border_color: value,
})
const border = computed({
get: () => store.state.Preferences.Appearance.appearance.customThemeColor.border_color,
set: (value: string) =>
store.dispatch(`${space}/${ACTION_TYPES.UPDATE_CUSTOM_THEME_COLOR}`, {
border_color: value
})
},
},
headerMenu: {
get() {
return this.$store.state.Preferences.Appearance.appearance
.customThemeColor.header_menu_color
},
set(value) {
this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
header_menu_color: value,
})
const headerMenu = computed({
get: () => store.state.Preferences.Appearance.appearance.customThemeColor.header_menu_color,
set: (value: string) =>
store.dispatch(`${space}/${ACTION_TYPES.UPDATE_CUSTOM_THEME_COLOR}`, {
header_menu_color: value
})
},
},
wrapperMask: {
get() {
return this.$store.state.Preferences.Appearance.appearance
.customThemeColor.wrapper_mask_color
},
set(value) {
this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
wrapper_mask_color: value,
})
const wrapperMask = computed({
get: () => store.state.Preferences.Appearance.appearance.customThemeColor.wrapper_mask_color,
set: (value: string) =>
store.dispatch(`${space}/${ACTION_TYPES.UPDATE_CUSTOM_THEME_COLOR}`, {
wrapper_mask_color: value
})
},
},
},
}
})
return {
background,
selectedBackground,
globalHeader,
sideMenu,
primary,
regular,
secondary,
border,
headerMenu,
wrapperMask
}
}
})
</script>
<style lang="scss" scoped>

37
src/renderer/store/Preferences/Appearance.ts
View File

@ -4,12 +4,13 @@ import TimeFormat from '~/src/constants/timeFormat'
import { LightTheme, ThemeColorType } from '~/src/constants/themeColor'
import DefaultFonts from '@/utils/fonts'
import { Module, MutationTree, ActionTree } from 'vuex'
import { toRaw } from 'vue'
import { RootState } from '@/store'
import { Appearance } from '~/src/types/appearance'
import { BaseConfig } from '~/src/types/preference'
import { MyWindow } from '~/src/types/global'
const win = (window as any) as MyWindow
const win = window as any as MyWindow
export type AppearanceState = {
appearance: Appearance
@ -43,19 +44,31 @@ const mutations: MutationTree<AppearanceState> = {
}
}
export const ACTION_TYPES = {
LOAD_APPEARANCE: 'loadAppearance',
LOAD_FONTS: 'loadFonts',
UPDATE_THEME: 'updateTheme',
UPDATE_FONT_SIZE: 'updateFontSize',
UPDATE_DISPLAY_NAME_STYLE: 'updateDisplayNameStyle',
UPDATE_TIME_FORMAT: 'updateTimeFormat',
UPDATE_CUSTOM_THEME_COLOR: 'updateCustomThemeColor',
UPDATE_FONT: 'updateFont',
UPDATE_TOOT_PADDING: 'updateTootPadding'
}
const actions: ActionTree<AppearanceState, RootState> = {
loadAppearance: async ({ commit }) => {
[ACTION_TYPES.LOAD_APPEARANCE]: async ({ commit }) => {
const conf: BaseConfig = await win.ipcRenderer.invoke('get-preferences')
commit(MUTATION_TYPES.UPDATE_APPEARANCE, conf.appearance)
return conf
},
loadFonts: async ({ commit }) => {
[ACTION_TYPES.LOAD_FONTS]: async ({ commit }) => {
const fonts: Array<string> = await win.ipcRenderer.invoke('list-fonts')
commit(MUTATION_TYPES.UPDATE_FONTS, [DefaultFonts[0]].concat(fonts))
return fonts
},
updateTheme: async ({ dispatch, commit, state }, themeKey: string) => {
const newAppearance: Appearance = Object.assign({}, state.appearance, {
[ACTION_TYPES.UPDATE_THEME]: async ({ dispatch, commit, state }, themeKey: string) => {
const newAppearance: Appearance = Object.assign({}, toRaw(state.appearance), {
theme: themeKey
})
const config = {
@ -65,7 +78,7 @@ const actions: ActionTree<AppearanceState, RootState> = {
commit(MUTATION_TYPES.UPDATE_APPEARANCE, conf.appearance)
dispatch('App/loadPreferences', null, { root: true })
},
updateFontSize: async ({ dispatch, commit, state }, fontSize: number) => {
[ACTION_TYPES.UPDATE_FONT_SIZE]: async ({ dispatch, commit, state }, fontSize: number) => {
const newAppearance: Appearance = Object.assign({}, state.appearance, {
fontSize: fontSize
})
@ -76,7 +89,7 @@ const actions: ActionTree<AppearanceState, RootState> = {
commit(MUTATION_TYPES.UPDATE_APPEARANCE, conf.appearance)
dispatch('App/loadPreferences', null, { root: true })
},
updateDisplayNameStyle: async ({ dispatch, commit, state }, value: number) => {
[ACTION_TYPES.UPDATE_DISPLAY_NAME_STYLE]: async ({ dispatch, commit, state }, value: number) => {
const newAppearance: Appearance = Object.assign({}, state.appearance, {
displayNameStyle: value
})
@ -87,7 +100,7 @@ const actions: ActionTree<AppearanceState, RootState> = {
dispatch('App/loadPreferences', null, { root: true })
commit(MUTATION_TYPES.UPDATE_APPEARANCE, conf.appearance)
},
updateTimeFormat: async ({ dispatch, commit, state }, value: number) => {
[ACTION_TYPES.UPDATE_TIME_FORMAT]: async ({ dispatch, commit, state }, value: number) => {
const newAppearance: Appearance = Object.assign({}, state.appearance, {
timeFormat: value
})
@ -98,8 +111,8 @@ const actions: ActionTree<AppearanceState, RootState> = {
dispatch('App/loadPreferences', null, { root: true })
commit(MUTATION_TYPES.UPDATE_APPEARANCE, conf.appearance)
},
updateCustomThemeColor: async ({ dispatch, state, commit }, value: object) => {
const newCustom: ThemeColorType = Object.assign({}, state.appearance.customThemeColor, value)
[ACTION_TYPES.UPDATE_CUSTOM_THEME_COLOR]: async ({ dispatch, state, commit }, value: object) => {
const newCustom: ThemeColorType = Object.assign({}, toRaw(state.appearance.customThemeColor), value)
const newAppearance: Appearance = Object.assign({}, state.appearance, {
customThemeColor: newCustom
})
@ -110,7 +123,7 @@ const actions: ActionTree<AppearanceState, RootState> = {
commit(MUTATION_TYPES.UPDATE_APPEARANCE, conf.appearance)
dispatch('App/loadPreferences', null, { root: true })
},
updateFont: async ({ dispatch, state, commit }, value: string) => {
[ACTION_TYPES.UPDATE_FONT]: async ({ dispatch, state, commit }, value: string) => {
const newAppearance: Appearance = Object.assign({}, state.appearance, {
font: value
})
@ -121,7 +134,7 @@ const actions: ActionTree<AppearanceState, RootState> = {
commit(MUTATION_TYPES.UPDATE_APPEARANCE, conf.appearance)
dispatch('App/loadPreferences', null, { root: true })
},
updateTootPadding: async ({ dispatch, state, commit }, value: number) => {
[ACTION_TYPES.UPDATE_TOOT_PADDING]: async ({ dispatch, state, commit }, value: number) => {
const newAppearance: Appearance = Object.assign({}, state.appearance, {
tootPadding: value
})