refs #821 Save toot padding in preferences

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: []
   }

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: []
     }

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,
+  general: General
-  state: State,
+  state: State
-  language: LanguageSet,
+  language: LanguageSet
-  notification: Notification,
+  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)

src/renderer/components/Preferences/Appearance.vue

@@ -1,68 +1,51 @@
 <template>
-<div id="appearance">
+  <div id="appearance">
-  <h2>{{ $t('preferences.appearance.title') }}</h2>
+    <h2>{{ $t('preferences.appearance.title') }}</h2>
-  <el-form class="theme section" size="small" label-position="top">
+    <el-form class="theme section" size="small" label-position="top">
-    <div class="left">
+      <div class="left">
-      <el-form-item for="theme" :label="$t('preferences.appearance.theme_color')">
+        <el-form-item for="theme" :label="$t('preferences.appearance.theme_color')">
-        <el-select id="theme" v-model="theme" placeholder="theme">
+          <el-select id="theme" v-model="theme" placeholder="theme">
-          <el-option
+            <el-option v-for="t in themes" :key="t.key" :label="$t(t.name)" :value="t.key"> </el-option>
-            v-for="t in themes"
+          </el-select>
-            :key="t.key"
+        </el-form-item>
-            :label="$t(t.name)"
+      </div>
-            :value="t.key">
+      <div class="right">
-          </el-option>
+        <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>
+      <el-form-item for="font-size" :label="$t('preferences.appearance.font_size')">
-    <div class="right">
+        <el-input-number id="font-size" :value="fontSize" :min="9" :max="18" @change="updateFontSize"></el-input-number>
-      <Toot
+      </el-form-item>
-        :displayNameStyle="displayNameStyle"
+    </el-form>
-        :timeFormat="timeFormat"
+    <el-form class="toot-padding section" size="small" label-position="top">
-        ></Toot>
+      <el-form-item for="toot-padding" :label="$t('preferences.appearance.too_padding.title')">
-    </div>
+        <el-input-number id="toot-padding" :value="tootPadding" :min="0" :max="24" @change="updateTootPadding"></el-input-number>
-  </el-form>
+      </el-form-item>
-  <div class="color-pallet section" v-if="customizeThemeColor">
+    </el-form>
-    <color-pallet></color-pallet>
+    <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: [
+      nameStyles: [DisplayStyle.DisplayNameAndUsername, DisplayStyle.DisplayName, DisplayStyle.Username],
-        DisplayStyle.DisplayNameAndUsername,
+      themes: [Theme.Light, Theme.Dark, Theme.SolarizedLight, Theme.SolarizedDark, Theme.KimbieDark, Theme.Custom],
-        DisplayStyle.DisplayName,
+      timeFormats: [TimeFormat.Absolute, TimeFormat.Relative]
-        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)
     }
   }
 }

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 {
+export type AppearanceState = {
-  appearance: Appearance,
+  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)
+      })
+    })
   }
 }
 

src/types/appearance.ts

@@ -1,10 +1,11 @@
 import { ThemeColorType } from '~/src/constants/themeColor'
 
 export type Appearance = {
-  theme: string,
+  theme: string
-  fontSize: number,
+  fontSize: number
-  displayNameStyle: number,
+  displayNameStyle: number
-  timeFormat: number,
+  timeFormat: number
-  customThemeColor: ThemeColorType,
+  customThemeColor: ThemeColorType
   font: string
+  tootPadding: number
 }