refs #821 Save toot padding in preferences

2019-06-05 21:51:02 +09:00 · 2019-06-05 21:51:02 +09:00 · 47a8d9a8d1
parent 9755fe78ad
commit 47a8d9a8d1
6 changed files with 113 additions and 114 deletions
--- a/spec/renderer/integration/store/Preferences/Appearance.spec.ts
+++ b/spec/renderer/integration/store/Preferences/Appearance.spec.ts
@ -16,7 +16,8 @@ const state = (): AppearanceState => {
      displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
      timeFormat: TimeFormat.Absolute.value,
      customThemeColor: LightTheme,
-      font: DefaultFonts[0]
+      font: DefaultFonts[0],
+      tootPadding: 8
    },
    fonts: []
  }
--- a/spec/renderer/unit/store/Preferences/Appearance.spec.ts
+++ b/spec/renderer/unit/store/Preferences/Appearance.spec.ts
@ -15,7 +15,8 @@ describe('Preferences/Appearance', () => {
        displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
        timeFormat: TimeFormat.Absolute.value,
        customThemeColor: LightTheme,
-        font: DefaultFonts[0]
+        font: DefaultFonts[0],
+        tootPadding: 8
      },
      fonts: []
    }
--- a/src/main/preferences.ts
+++ b/src/main/preferences.ts
@ -13,12 +13,12 @@ import { Appearance } from '~/src/types/appearance'
 import { Language as LanguageSet } from '~/src/types/language'

 type General = {
-  sound: Sound,
+  sound: Sound
  timeline: Timeline
 }

 type State = {
-  collapse: boolean,
+  collapse: boolean
  hideGlobalHeader: boolean
 }

@ -27,10 +27,10 @@ type Notification = {
 }

 type BaseConfig = {
-  general: General,
-  state: State,
-  language: LanguageSet,
-  notification: Notification,
+  general: General
+  state: State
+  language: LanguageSet
+  notification: Notification
  appearance: Appearance
 }

@ -76,7 +76,8 @@ const appearance: Appearance = {
  displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
  timeFormat: TimeFormat.Absolute.value,
  customThemeColor: LightTheme,
-  font: DefaultFonts[0]
+  font: DefaultFonts[0],
+  tootPadding: 8
 }

 const Base: BaseConfig = {
@ -90,11 +91,11 @@ const Base: BaseConfig = {
 export default class Preferences {
  private path: string

-  constructor (path: string) {
+  constructor(path: string) {
    this.path = path
  }

-  async load (): Promise<BaseConfig> {
+  async load(): Promise<BaseConfig> {
    try {
      const preferences = await this.get()
      return objectAssignDeep({}, Base, preferences)
@ -103,7 +104,7 @@ export default class Preferences {
    }
  }

-  get (): Promise<BaseConfig> {
+  get(): Promise<BaseConfig> {
    return new Promise((resolve, reject) => {
      storage.get(this.path, (err, data) => {
        if (err) return reject(err)
@ -112,16 +113,16 @@ export default class Preferences {
    })
  }

-  save (data: BaseConfig): Promise<BaseConfig> {
+  save(data: BaseConfig): Promise<BaseConfig> {
    return new Promise((resolve, reject) => {
-      storage.set(this.path, data, (err) => {
+      storage.set(this.path, data, err => {
        if (err) return reject(err)
        return resolve(data)
      })
    })
  }

-  async update (obj: any): Promise<BaseConfig> {
+  async update(obj: any): Promise<BaseConfig> {
    const current = await this.load()
    const data = objectAssignDeep({}, current, obj)
    const result = await this.save(data)
--- a/src/renderer/components/Preferences/Appearance.vue
+++ b/src/renderer/components/Preferences/Appearance.vue
@ -1,68 +1,51 @@
 <template>
-<div id="appearance">
-  <h2>{{ $t('preferences.appearance.title') }}</h2>
-  <el-form class="theme section" size="small" label-position="top">
-    <div class="left">
-      <el-form-item for="theme" :label="$t('preferences.appearance.theme_color')">
-        <el-select id="theme" v-model="theme" placeholder="theme">
-          <el-option
-            v-for="t in themes"
-            :key="t.key"
-            :label="$t(t.name)"
-            :value="t.key">
-          </el-option>
+  <div id="appearance">
+    <h2>{{ $t('preferences.appearance.title') }}</h2>
+    <el-form class="theme section" size="small" label-position="top">
+      <div class="left">
+        <el-form-item for="theme" :label="$t('preferences.appearance.theme_color')">
+          <el-select id="theme" v-model="theme" placeholder="theme">
+            <el-option v-for="t in themes" :key="t.key" :label="$t(t.name)" :value="t.key"> </el-option>
+          </el-select>
+        </el-form-item>
+      </div>
+      <div class="right">
+        <Toot :displayNameStyle="displayNameStyle" :timeFormat="timeFormat"></Toot>
+      </div>
+    </el-form>
+    <div class="color-pallet section" v-if="customizeThemeColor">
+      <color-pallet></color-pallet>
+    </div>
+    <el-form class="font section" size="small" label-position="top">
+      <el-form-item for="font-family" :label="$t('preferences.appearance.font_family')">
+        <el-select id="font-family" v-model="font" placeholder="fonts">
+          <el-option v-for="f in fontList" :key="f" :label="f" :value="f" />
        </el-select>
      </el-form-item>
-    </div>
-    <div class="right">
-      <Toot
-        :displayNameStyle="displayNameStyle"
-        :timeFormat="timeFormat"
-        ></Toot>
-    </div>
-  </el-form>
-  <div class="color-pallet section" v-if="customizeThemeColor">
-    <color-pallet></color-pallet>
+      <el-form-item for="font-size" :label="$t('preferences.appearance.font_size')">
+        <el-input-number id="font-size" :value="fontSize" :min="9" :max="18" @change="updateFontSize"></el-input-number>
+      </el-form-item>
+    </el-form>
+    <el-form class="toot-padding section" size="small" label-position="top">
+      <el-form-item for="toot-padding" :label="$t('preferences.appearance.too_padding.title')">
+        <el-input-number id="toot-padding" :value="tootPadding" :min="0" :max="24" @change="updateTootPadding"></el-input-number>
+      </el-form-item>
+    </el-form>
+    <el-form class="display-style section" size="small" label-position="top">
+      <el-form-item for="display-style" :label="$t('preferences.appearance.display_style.title')">
+        <el-select id="display-style" v-model="displayNameStyle" placeholder="style">
+          <el-option v-for="style in nameStyles" :key="style.value" :label="$t(style.name)" :value="style.value"> </el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <el-form class="time-format section" size="small" label-position="top">
+      <el-form-item for="time-format" :label="$t('preferences.appearance.time_format.title')">
+        <el-select id="time-format" v-model="timeFormat" placeholder="format">
+          <el-option v-for="format in timeFormats" :key="format.value" :label="$t(format.name)" :value="format.value"> </el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
  </div>
-  <el-form class="font section" size="small" label-position="top">
-    <el-form-item for="font-family" :label="$t('preferences.appearance.font_family')">
-      <el-select id="font-family" v-model="font" placeholder="fonts">
-        <el-option
-          v-for="f in fontList"
-          :key="f"
-          :label="f"
-          :value="f" />
-      </el-select>
-    </el-form-item>
-    <el-form-item for="font-size" :label="$t('preferences.appearance.font_size')">
-      <el-input-number id="font-size" :value="fontSize" :min="9" :max="18" @change="updateFontSize"></el-input-number>
-    </el-form-item>
-  </el-form>
-  <el-form class="display-style section" size="small" label-position="top">
-    <el-form-item for="display-style" :label="$t('preferences.appearance.display_style.title')">
-      <el-select id="display-style" v-model="displayNameStyle" placeholder="style">
-        <el-option
-          v-for="style in nameStyles"
-          :key="style.value"
-          :label="$t(style.name)"
-          :value="style.value">
-        </el-option>
-      </el-select>
-    </el-form-item>
-  </el-form>
-  <el-form class="time-format section" size="small" label-position="top">
-    <el-form-item for="time-format" :label="$t('preferences.appearance.time_format.title')">
-      <el-select id="time-format" v-model="timeFormat" placeholder="format">
-        <el-option
-          v-for="format in timeFormats"
-          :key="format.value"
-          :label="$t(format.name)"
-          :value="format.value">
-        </el-option>
-      </el-select>
-    </el-form-item>
-  </el-form>
-</div>
 </template>

 <script>
@ -79,75 +62,65 @@ export default {
    Toot,
    ColorPallet
  },
-  data () {
+  data() {
    return {
-      nameStyles: [
-        DisplayStyle.DisplayNameAndUsername,
-        DisplayStyle.DisplayName,
-        DisplayStyle.Username
-      ],
-      themes: [
-        Theme.Light,
-        Theme.Dark,
-        Theme.SolarizedLight,
-        Theme.SolarizedDark,
-        Theme.KimbieDark,
-        Theme.Custom
-      ],
-      timeFormats: [
-        TimeFormat.Absolute,
-        TimeFormat.Relative
-      ]
+      nameStyles: [DisplayStyle.DisplayNameAndUsername, DisplayStyle.DisplayName, DisplayStyle.Username],
+      themes: [Theme.Light, Theme.Dark, Theme.SolarizedLight, Theme.SolarizedDark, Theme.KimbieDark, Theme.Custom],
+      timeFormats: [TimeFormat.Absolute, TimeFormat.Relative]
    }
  },
  computed: {
    ...mapState('Preferences/Appearance', {
      fontSize: state => state.appearance.fontSize,
-      fontList: state => state.fonts
+      fontList: state => state.fonts,
+      tootPadding: state => state.appearance.tootPadding
    }),
    theme: {
-      get () {
+      get() {
        return this.$store.state.Preferences.Appearance.appearance.theme
      },
-      set (value) {
+      set(value) {
        this.$store.dispatch('Preferences/Appearance/updateTheme', value)
      }
    },
    displayNameStyle: {
-      get () {
+      get() {
        return this.$store.state.Preferences.Appearance.appearance.displayNameStyle
      },
-      set (value) {
+      set(value) {
        this.$store.dispatch('Preferences/Appearance/updateDisplayNameStyle', value)
      }
    },
    timeFormat: {
-      get () {
+      get() {
        return this.$store.state.Preferences.Appearance.appearance.timeFormat
      },
-      set (value) {
+      set(value) {
        this.$store.dispatch('Preferences/Appearance/updateTimeFormat', value)
      }
    },
-    customizeThemeColor () {
+    customizeThemeColor() {
      return this.theme === Theme.Custom.key
    },
    font: {
-      get () {
+      get() {
        return this.$store.state.Preferences.Appearance.appearance.font
      },
-      set (value) {
+      set(value) {
        this.$store.dispatch('Preferences/Appearance/updateFont', value)
      }
    }
  },
-  created () {
+  created() {
    this.$store.dispatch('Preferences/Appearance/loadAppearance')
    this.$store.dispatch('Preferences/Appearance/loadFonts')
  },
  methods: {
-    async updateFontSize (value) {
+    async updateFontSize(value) {
      await this.$store.dispatch('Preferences/Appearance/updateFontSize', value)
+    },
+    async updateTootPadding(value) {
+      await this.$store.dispatch('Preferences/Appearance/updateTootPadding', value)
    }
  }
 }
--- a/src/renderer/store/Preferences/Appearance.ts
+++ b/src/renderer/store/Preferences/Appearance.ts
@ -8,8 +8,8 @@ import { Module, MutationTree, ActionTree } from 'vuex'
 import { RootState } from '@/store'
 import { Appearance } from '~/src/types/appearance'

-export interface AppearanceState {
-  appearance: Appearance,
+export type AppearanceState = {
+  appearance: Appearance
  fonts: Array<string>
 }

@ -20,7 +20,8 @@ const state = (): AppearanceState => ({
    displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
    timeFormat: TimeFormat.Absolute.value,
    customThemeColor: LightTheme,
-    font: DefaultFonts[0]
+    font: DefaultFonts[0],
+    tootPadding: 8
  },
  fonts: []
 })
@ -194,6 +195,27 @@ const actions: ActionTree<AppearanceState, RootState> = {
        resolve(conf.appearance)
      })
    })
+  },
+  updateTootPadding: ({ dispatch, state, commit }, value: number) => {
+    const newAppearance: Appearance = Object.assign({}, state.appearance, {
+      tootPadding: value
+    })
+    const config = {
+      appearance: newAppearance
+    }
+    return new Promise((resolve, reject) => {
+      ipcRenderer.send('update-preferences', config)
+      ipcRenderer.once('error-update-preferences', (_, err: Error) => {
+        ipcRenderer.removeAllListeners('response-update-preferences')
+        reject(err)
+      })
+      ipcRenderer.once('response-update-preferences', (_, conf: any) => {
+        ipcRenderer.removeAllListeners('error-update-preferences')
+        commit(MUTATION_TYPES.UPDATE_APPEARANCE, conf.appearance as Appearance)
+        dispatch('App/loadPreferences', null, { root: true })
+        resolve(conf.appearance)
+      })
+    })
  }
 }

--- a/src/types/appearance.ts
+++ b/src/types/appearance.ts
@ -1,10 +1,11 @@
 import { ThemeColorType } from '~/src/constants/themeColor'

 export type Appearance = {
-  theme: string,
-  fontSize: number,
-  displayNameStyle: number,
-  timeFormat: number,
-  customThemeColor: ThemeColorType,
+  theme: string
+  fontSize: number
+  displayNameStyle: number
+  timeFormat: number
+  customThemeColor: ThemeColorType
  font: string
+  tootPadding: number
 }