refs #251 Move appearance settings to separate page

2018-09-21 00:16:10 +09:00 · 2018-09-21 00:16:10 +09:00 · 78605f1492
parent 8181a11582
commit 78605f1492
14 changed files with 587 additions and 215 deletions
--- a/src/config/locales/en/translation.json
+++ b/src/config/locales/en/translation.json
@ -74,24 +74,6 @@
    "title": "Preferences",
    "general": {
      "title": "General",
-      "appearance": "Appearance",
-      "theme_color": "Theme color:",
-      "theme": {
-        "light": "Light",
-        "dark": "Dark"
-      },
-      "font_size": "Font size:",
-      "display_style": {
-        "title": "Display style:",
-        "display_name_and_username": "Display name and username",
-        "display_name": "Display name",
-        "username": "Username"
-      },
-      "time_format": {
-        "title": "Time format:",
-        "absolute": "Absolute",
-        "relative": "Relative"
-      },
      "toot": "Toot",
      "visibility": {
        "title": "Default visibility:",
@ -104,6 +86,26 @@
      "fav_rb_sound": "Favorite and Boost:",
      "toot_sound": "Toot:"
    },
+    "appearance": {
+      "title": "Appearance",
+      "theme_color": "Theme color",
+      "theme": {
+        "light": "Light",
+        "dark": "Dark"
+      },
+      "font_size": "Font size",
+      "display_style": {
+        "title": "Display style of username",
+        "display_name_and_username": "Display name and username",
+        "display_name": "Display name",
+        "username": "Username"
+      },
+      "time_format": {
+        "title": "Time format",
+        "absolute": "Absolute",
+        "relative": "Relative"
+      }
+    },
    "notification": {
      "title": "Notification",
      "notify": {
--- a/src/constants/displayStyle.js
+++ b/src/constants/displayStyle.js
@ -1,14 +1,14 @@
 export default {
  DisplayNameAndUsername: {
-    name: 'preferences.general.display_style.display_name_and_username',
+    name: 'preferences.appearance.display_style.display_name_and_username',
    value: 0
  },
  DisplayName: {
-    name: 'preferences.general.display_style.display_name',
+    name: 'preferences.appearance.display_style.display_name',
    value: 1
  },
  Username: {
-    name: 'preferences.general.display_style.username',
+    name: 'preferences.appearance.display_style.username',
    value: 2
  }
 }
--- a/src/constants/theme.js
+++ b/src/constants/theme.js
@ -1,10 +1,10 @@
 export default {
  Light: {
-    name: 'preferences.general.theme.light',
+    name: 'preferences.appearance.theme.light',
    key: 'light'
  },
  Dark: {
-    name: 'preferences.general.theme.dark',
+    name: 'preferences.appearance.theme.dark',
    key: 'dark'
  }
 }
--- a/src/constants/timeFormat.js
+++ b/src/constants/timeFormat.js
@ -1,10 +1,10 @@
 export default {
  Absolute: {
-    name: 'preferences.general.time_format.absolute',
+    name: 'preferences.appearance.time_format.absolute',
    value: 0
  },
  Relative: {
-    name: 'preferences.general.time_format.relative',
+    name: 'preferences.appearance.time_format.relative',
    value: 1
  }
 }
--- a/src/main/preferences.js
+++ b/src/main/preferences.js
@ -12,11 +12,7 @@ const Base = {
      fav_rb: true,
      toot: true
    },
-    theme: Theme.Light.key,
-    fontSize: 14,
-    displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
-    tootVisibility: Visibility.Public.value,
-    timeFormat: TimeFormat.Absolute.value
+    tootVisibility: Visibility.Public.value
  },
  state: {
    collapse: false
@ -31,6 +27,12 @@ const Base = {
      favourite: true,
      follow: true
    }
+  },
+  appearance: {
+    theme: Theme.Light.key,
+    fontSize: 14,
+    displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
+    timeFormat: TimeFormat.Absolute.value
  }
 }

--- a/src/renderer/components/Preferences.vue
+++ b/src/renderer/components/Preferences.vue
@ -23,15 +23,19 @@
            <icon name="cog" class="icon" scale="1.3"></icon>
            <span>{{ $t('preferences.general.title') }}</span>
          </el-menu-item>
-          <el-menu-item index="2" :route="{path: '/preferences/notification'}" @click="notification">
+          <el-menu-item index="2" :route="{path: '/preferences/appearance'}" @click="appearance">
+            <icon name="palette" class="icon" scale="1.3"></icon>
+            <span>{{ $t('preferences.appearance.title') }}</span>
+          </el-menu-item>
+          <el-menu-item index="3" :route="{path: '/preferences/notification'}" @click="notification">
            <icon name="bell" class="icon" scale="1.3"></icon>
            <span>{{ $t('preferences.notification.title') }}</span>
          </el-menu-item>
-          <el-menu-item index="3" :route="{path: '/preferences/account'}" @click="account">
+          <el-menu-item index="4" :route="{path: '/preferences/account'}" @click="account">
            <icon name="user" class="icon" scale="1.3"></icon>
            <span>{{ $t('preferences.account.title') }}</span>
          </el-menu-item>
-          <el-menu-item index="4" :route="{path: '/preferences/language'}" @click="language">
+          <el-menu-item index="5" :route="{path: '/preferences/language'}" @click="language">
            <icon name="language" class="icon" scale="1.3"></icon>
            <span>{{ $t('preferences.language.title') }}</span>
          </el-menu-item>
@ -72,6 +76,9 @@ export default {
    },
    language () {
      this.$router.push('/preferences/language')
+    },
+    appearance () {
+      this.$router.push('/preferences/appearance')
    }
  }
 }
--- a/src/renderer/components/Preferences/Appearance.vue
+++ b/src/renderer/components/Preferences/Appearance.vue
@ -0,0 +1,150 @@
+<template>
+<div id="appearance">
+  <h2>{{ $t('preferences.appearance.title') }}</h2>
+  <div class="theme section">
+    <div class="left">
+      <h4>{{ $t('preferences.appearance.theme_color') }}</h4>
+      <span class="status">
+        <el-select 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>
+      </span>
+    </div>
+    <div class="right">
+      <Toot
+        :displayNameStyle="displayNameStyle"
+        :timeFormat="timeFormat"
+        ></Toot>
+    </div>
+  </div>
+  <div class="font section">
+    <h4>{{ $t('preferences.appearance.font_size') }}</h4>
+    <span class="status">
+      <el-input-number :value="fontSize" :min="9" :max="18" @change="updateFontSize"></el-input-number>
+    </span>
+  </div>
+  <div class="display-style section">
+    <h4>{{ $t('preferences.appearance.display_style.title') }}</h4>
+    <span class="status">
+      <el-select 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>
+    </span>
+  </div>
+  <div class="time-format section">
+    <h4>{{ $t('preferences.appearance.time_format.title') }}</h4>
+    <span class="status">
+      <el-select 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>
+    </span>
+  </div>
+</div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import Toot from './Appearance/Toot'
+import DisplayStyle from '~/src/constants/displayStyle'
+import Theme from '~/src/constants/theme'
+import TimeFormat from '~/src/constants/timeFormat'
+
+export default {
+  name: 'appearance',
+  components: {
+    Toot
+  },
+  data () {
+    return {
+      nameStyles: [
+        DisplayStyle.DisplayNameAndUsername,
+        DisplayStyle.DisplayName,
+        DisplayStyle.Username
+      ],
+      themes: [
+        Theme.Light,
+        Theme.Dark
+      ],
+      timeFormats: [
+        TimeFormat.Absolute,
+        TimeFormat.Relative
+      ]
+    }
+  },
+  computed: {
+    ...mapState('Preferences/Appearance', {
+      fontSize: state => state.appearance.fontSize
+    }),
+    theme: {
+      get () {
+        return this.$store.state.Preferences.Appearance.appearance.theme
+      },
+      set (value) {
+        this.$store.dispatch('Preferences/Appearance/updateTheme', value)
+      }
+    },
+    displayNameStyle: {
+      get () {
+        return this.$store.state.Preferences.Appearance.appearance.displayNameStyle
+      },
+      set (value) {
+        this.$store.dispatch('Preferences/Appearance/updateDisplayNameStyle', value)
+      }
+    },
+    timeFormat: {
+      get () {
+        return this.$store.state.Preferences.Appearance.appearance.timeFormat
+      },
+      set (value) {
+        this.$store.dispatch('Preferences/Appearance/updateTimeFormat', value)
+      }
+    }
+  },
+  created () {
+    this.$store.dispatch('Preferences/Appearance/loadAppearance')
+  },
+  methods: {
+    updateFontSize (value) {
+      this.$store.dispatch('Preferences/Appearance/updateFontSize', value)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#appearance {
+  color: var(--theme-secondary-color);
+  box-sizing: border-box;
+
+  .theme {
+    display: flex;
+    align-items: flex-start;
+
+    .left {
+    }
+
+    .right {
+      margin-left: 40px;
+    }
+  }
+
+  .section {
+    margin-bottom: 48px;
+  }
+}
+</style>
--- a/src/renderer/components/Preferences/Appearance/Toot.vue
+++ b/src/renderer/components/Preferences/Appearance/Toot.vue
@ -0,0 +1,274 @@
+<template>
+<div
+  class="status"
+  tabIndex="0"
+  ref="status"
+  >
+  <div class="toot">
+    <div class="icon">
+      <img :src="sampleIcon" />
+    </div>
+    <div class="detail">
+      <div class="toot-header">
+        <div class="user">
+          <span class="display-name">{{ username }}</span>
+          <span class="acct">{{ accountName }}</span>
+        </div>
+        <div class="timestamp">
+          {{ timestamp }}
+        </div>
+        <div class="clearfix"></div>
+      </div>
+      <div class="content-wrapper">
+        <div class="content" v-html="status"></div>
+      </div>
+      <div class="tool-box">
+        <el-button type="text" class="reply" :title="$t('cards.toot.reply')">
+          <icon name="reply" scale="0.9"></icon>
+        </el-button>
+        <el-button type="text" class="reblog" :title="$t('cards.toot.reblog')">
+          <icon name="retweet" scale="0.9"></icon>
+        </el-button>
+        <span class="count">
+          {{ reblogsCount }}
+        </span>
+        <el-button type="text" class="favourite" :title="$t('cards.toot.fav')">
+          <icon name="star" scale="0.9"></icon>
+        </el-button>
+        <span class="count">
+          {{ favouritesCount }}
+        </span>
+        <popper trigger="click" :options="{placement: 'bottom'}" ref="popper">
+          <div class="popper toot-menu">
+            <ul class="menu-list">
+              <li role="button">
+                {{ $t('cards.toot.view_toot_detail') }}
+              </li>
+              <li role="button">
+                {{ $t('cards.toot.open_in_browser') }}
+              </li>
+              <li role="button">
+                {{ $t('cards.toot.copy_link_to_toot') }}
+              </li>
+              <li role="button" class="separate">
+                {{ $t('cards.toot.delete') }}
+              </li>
+            </ul>
+          </div>
+          <el-button slot="reference" type="text" :title="$t('cards.toot.detail')">
+            <icon name="ellipsis-h" scale="0.9"></icon>
+          </el-button>
+        </popper>
+      </div>
+      <div class="application">
+        {{ $t('cards.toot.via', { application: 'Whalebird' }) }}
+      </div>
+    </div>
+    <div class="clearfix"></div>
+  </div>
+</div>
+</template>
+
+<script>
+import moment from 'moment'
+import DisplayStyle from '~/src/constants/displayStyle'
+import TimeFormat from '~/src/constants/timeFormat'
+
+export default {
+  name: 'toot',
+  props: {
+    displayNameStyle: {
+      type: Number,
+      default: DisplayStyle.DisplayNameAndUsername.value
+    },
+    timeFormat: {
+      type: Number,
+      default: TimeFormat.Absolute.value
+    }
+  },
+  computed: {
+    sampleIcon () {
+      return 'https://github.com/h3poteto/whalebird-desktop/raw/master/build/icons/256x256.png'
+    },
+    username () {
+      switch (this.displayNameStyle) {
+        case DisplayStyle.DisplayNameAndUsername.value:
+        case DisplayStyle.DisplayName.value:
+          return 'Whalebird'
+        default:
+          return 'whalebird@mastodon.social'
+      }
+    },
+    accountName () {
+      switch (this.displayNameStyle) {
+        case DisplayStyle.DisplayNameAndUsername.value:
+          return 'whalebird@mastodon.social'
+        default:
+          return ''
+      }
+    },
+    timestamp () {
+      switch (this.timeFormat) {
+        case TimeFormat.Absolute.value:
+          return '2018-08-12 20:35:41'
+        case TimeFormat.Relative.value:
+          return moment('2018-08-12 20:35:41').fromNow()
+      }
+    },
+    status () {
+      return '<p>Sample status</p>'
+    },
+    reblogsCount () {
+      return 1
+    },
+    favouritesCount () {
+      return 5
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.toot {
+  padding: 8px 0 0 16px;
+
+  .icon {
+    float: left;
+
+    img {
+      width: 36px;
+      height: 36px;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+  }
+
+  .detail {
+    margin: 0 8px 0 8px;
+    float: left;
+    width: calc(100% - 52px);
+
+    .toot-header {
+      .user {
+        float: left;
+        font-size: var(--base-font-size);
+        cursor: pointer;
+        white-space: nowrap;
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        .display-name {
+          font-weight: 800;
+          color: var(--theme-primary-color);
+        }
+
+        .acct {
+          font-weight: normal;
+          color: var(--theme-secondary-color);
+        }
+      }
+
+      .timestamp {
+        font-size: var(--base-font-size);
+        text-align: right;
+        width: 100%;
+        color: #909399;
+        flota: right;
+      }
+    }
+
+    .content-wrapper /deep/ {
+      font-size: var(--base-font-size);
+      color: var(--theme-primary-color);
+
+      .content {
+        margin: 4px 0 8px;
+        word-wrap: break-word;
+      }
+
+      .emojione {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    .tool-box {
+      float: left;
+
+      button {
+        margin: 0 8px;
+        padding: 0;
+        color: #909399;
+      }
+
+      .count {
+        font-size: 0.8em;
+        color: #909399;
+        margin: 0 0 4px -8px;
+      }
+
+      .toot-menu {
+        padding: 2px 0;
+        border-color: #909399;
+
+        .menu-list {
+          padding: 0;
+          margin: 4px 0;
+          font-size: 0.9rem;
+          list-style-type: none;
+          line-height: 32px;
+          text-align: left;
+          color: #303133;
+
+          li {
+            box-sizing: border-box;
+            padding: 0 32px 0 16px;
+
+            &:hover {
+              background-color: #409eff;
+              color: #fff;
+              cursor: pointer;
+            }
+
+            &.separate {
+              border-top: 1px solid var(--theme-border-color);
+              padding-top: 4px;
+              margin-top: 2px;
+            }
+          }
+        }
+      }
+    }
+
+    .application {
+      float: right;
+      color: #909399;
+    }
+
+    .reply:hover,
+    .reblog:hover,
+    .favourite:hover {
+      color: #409eff;
+    }
+  }
+
+  .action-pop-over {
+    color: #303133;
+  }
+}
+
+.status {
+  background-color: var(--theme-background-color);
+  border: 1px solid var(--theme-border-color);
+  border-radius: 4px;
+  padding-bottom: 4px;
+  box-shadow: 0 0 12px var(--theme-border-color);
+}
+
+.status:focus {
+  background-color: var(--theme-selected-background-color);
+  outline: 0;
+}
+
+</style>
--- a/src/renderer/components/Preferences/General.vue
+++ b/src/renderer/components/Preferences/General.vue
@ -1,51 +1,6 @@
 <template>
 <div id="general" v-loading="loading">
  <h2>{{ $t('preferences.general.title') }}</h2>
-  <div class="appearance">
-    <h3>{{ $t('preferences.general.appearance') }}</h3>
-    <table class="theme">
-      <tbody>
-        <tr>
-          <td class="title">{{ $t('preferences.general.theme_color') }}</td>
-          <td class="status">
-            <el-radio v-for="t in themes" :key="t.key" v-model="theme" :label="t.key">{{ $t(t.name) }}</el-radio>
-          </td>
-        </tr>
-        <tr>
-          <td class="title">{{ $t('preferences.general.font_size') }}</td>
-          <td class="status">
-            <el-input-number :value="fontSize" :min="9" :max="18" @change="updateFontSize"></el-input-number>
-          </td>
-        </tr>
-        <tr>
-          <td class="title">{{ $t('preferences.general.display_style.title') }}</td>
-          <td class="status">
-            <el-select 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>
-          </td>
-        </tr>
-        <tr>
-          <td class="title">{{ $t('preferences.general.time_format.title') }}</td>
-          <td class="status">
-            <el-select 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>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
  <div class="toot">
    <h3>{{ $t('preferences.general.toot') }}</h3>
    <table>
@ -97,9 +52,6 @@
 <script>
 import { mapState } from 'vuex'
 import Visibility from '~/src/constants/visibility'
-import DisplayStyle from '~/src/constants/displayStyle'
-import Theme from '~/src/constants/theme'
-import TimeFormat from '~/src/constants/timeFormat'

 export default {
  name: 'general',
@ -109,51 +61,13 @@ export default {
        Visibility.Public,
        Visibility.Unlisted,
        Visibility.Private
-      ],
-      nameStyles: [
-        DisplayStyle.DisplayNameAndUsername,
-        DisplayStyle.DisplayName,
-        DisplayStyle.Username
-      ],
-      themes: [
-        Theme.Light,
-        Theme.Dark
-      ],
-      timeFormats: [
-        TimeFormat.Absolute,
-        TimeFormat.Relative
      ]
    }
  },
  computed: {
    ...mapState({
-      loading: state => state.Preferences.General.loading,
-      fontSize: state => state.Preferences.General.general.fontSize
+      loading: state => state.Preferences.General.loading
    }),
-    theme: {
-      get () {
-        return this.$store.state.Preferences.General.general.theme
-      },
-      set (value) {
-        this.$store.dispatch('Preferences/General/updateTheme', value)
-      }
-    },
-    displayNameStyle: {
-      get () {
-        return this.$store.state.Preferences.General.general.displayNameStyle
-      },
-      set (value) {
-        this.$store.dispatch('Preferences/General/updateDisplayNameStyle', value)
-      }
-    },
-    timeFormat: {
-      get () {
-        return this.$store.state.Preferences.General.general.timeFormat
-      },
-      set (value) {
-        this.$store.dispatch('Preferences/General/updateTimeFormat', value)
-      }
-    },
    tootVisibility: {
      get () {
        return this.$store.state.Preferences.General.general.tootVisibility
@ -191,11 +105,6 @@ export default {
          type: 'error'
        })
      })
-  },
-  methods: {
-    updateFontSize (value) {
-      this.$store.dispatch('Preferences/General/updateFontSize', value)
-    }
  }
 }
 </script>
@ -220,12 +129,6 @@ export default {
    text-align: center;
  }

-  .appearance {
-    color: var(--theme-secondary-color);
-    width: 100%;
-    box-sizing: border-box;
-  }
-
  .toot {
    color: var(--theme-secondary-color);
    width: 100%;
--- a/src/renderer/router/index.js
+++ b/src/renderer/router/index.js
@ -26,6 +26,11 @@ export default new Router({
          name: 'general',
          component: require('@/components/Preferences/General').default
        },
+        {
+          path: 'appearance',
+          name: 'appearance',
+          component: require('@/components/Preferences/Appearance').default
+        },
        {
          path: 'notification',
          name: 'notification',
--- a/src/renderer/store/App.js
+++ b/src/renderer/store/App.js
@ -74,12 +74,12 @@ const App = {
        })
        ipcRenderer.once('response-get-preferences', (event, conf) => {
          ipcRenderer.removeAllListeners('error-get-preferences')
-          commit('updateTheme', conf.general.theme)
-          commit('updateDisplayNameStyle', conf.general.displayNameStyle)
-          commit('updateFontSize', conf.general.fontSize)
+          commit('updateTheme', conf.appearance.theme)
+          commit('updateDisplayNameStyle', conf.appearance.displayNameStyle)
+          commit('updateFontSize', conf.appearance.fontSize)
          commit('updateTootVisibility', conf.general.tootVisibility)
          commit('updateNotify', conf.notification.notify)
-          commit('updateTimeFormat', conf.general.timeFormat)
+          commit('updateTimeFormat', conf.appearance.timeFormat)
          commit('updateLanguage', conf.language.language)
          resolve(conf)
        })
--- a/src/renderer/store/Preferences.js
+++ b/src/renderer/store/Preferences.js
@ -2,6 +2,7 @@ import General from './Preferences/General'
 import Account from './Preferences/Account'
 import Language from './Preferences/Language'
 import Notification from './Preferences/Notification'
+import Appearance from './Preferences/Appearance'

 const Preferences = {
  namespaced: true,
@ -9,7 +10,8 @@ const Preferences = {
    General,
    Account,
    Language,
-    Notification
+    Notification,
+    Appearance
  },
  state: {
    defaultActive: '1'
--- a/src/renderer/store/Preferences/Appearance.js
+++ b/src/renderer/store/Preferences/Appearance.js
@ -0,0 +1,105 @@
+import { ipcRenderer } from 'electron'
+import DisplayStyle from '~/src/constants/displayStyle'
+import Theme from '~/src/constants/theme'
+import TimeFormat from '~/src/constants/timeFormat'
+
+export default {
+  namespaced: true,
+  state: {
+    appearance: {
+      theme: Theme.Light.key,
+      fontSize: 14,
+      displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
+      timeFormat: TimeFormat.Absolute.value
+    }
+  },
+  mutations: {
+    updateAppearance (state, conf) {
+      state.appearance = conf
+    }
+  },
+  actions: {
+    loadAppearance ({ commit }) {
+      return new Promise((resolve, reject) => {
+        ipcRenderer.send('get-preferences')
+        ipcRenderer.once('error-get-preferences', (event, err) => {
+          ipcRenderer.removeAllListeners('response-get-preferences')
+          reject(err)
+        })
+        ipcRenderer.once('response-get-preferences', (event, conf) => {
+          ipcRenderer.removeAllListeners('error-get-preferences')
+          commit('updateAppearance', conf.appearance)
+          resolve(conf)
+        })
+      })
+    },
+    updateTheme ({ dispatch, commit, state }, theme) {
+      const newAppearance = Object.assign({}, state.appearance, {
+        theme: theme
+      })
+      const config = {
+        appearance: newAppearance
+      }
+      ipcRenderer.send('update-preferences', config)
+      ipcRenderer.once('error-update-preferences', (event, err) => {
+        ipcRenderer.removeAllListeners('response-update-preferences')
+      })
+      ipcRenderer.once('response-update-preferences', (event, conf) => {
+        ipcRenderer.removeAllListeners('error-update-preferences')
+        commit('updateAppearance', conf.appearance)
+        dispatch('App/loadPreferences', null, { root: true })
+      })
+    },
+    updateFontSize ({ dispatch, commit, state }, fontSize) {
+      const newAppearance = Object.assign({}, state.appearance, {
+        fontSize: fontSize
+      })
+      const config = {
+        appearance: newAppearance
+      }
+      ipcRenderer.send('update-preferences', config)
+      ipcRenderer.once('error-update-preferences', (event, err) => {
+        ipcRenderer.removeAllListeners('response-update-preferences')
+      })
+      ipcRenderer.once('response-update-preferences', (event, conf) => {
+        ipcRenderer.removeAllListeners('error-update-preferences')
+        commit('updateAppearance', conf.appearance)
+        dispatch('App/loadPreferences', null, { root: true })
+      })
+    },
+    updateDisplayNameStyle ({ dispatch, commit, state }, value) {
+      const newAppearance = Object.assign({}, state.appearance, {
+        displayNameStyle: value
+      })
+      const config = {
+        appearance: newAppearance
+      }
+      ipcRenderer.send('update-preferences', config)
+      ipcRenderer.once('error-update-preferences', (event, err) => {
+        ipcRenderer.removeAllListeners('response-update-preferences')
+      })
+      ipcRenderer.once('response-update-preferences', (event, conf) => {
+        ipcRenderer.removeAllListeners('error-update-preferences')
+        dispatch('App/loadPreferences', null, { root: true })
+        commit('updateAppearance', conf.appearance)
+      })
+    },
+    updateTimeFormat ({ dispatch, commit, state }, value) {
+      const newAppearance = Object.assign({}, state.appearance, {
+        timeFormat: value
+      })
+      const config = {
+        appearance: newAppearance
+      }
+      ipcRenderer.send('update-preferences', config)
+      ipcRenderer.once('error-update-preferences', (event, err) => {
+        ipcRenderer.removeAllListeners('response-update-preferences')
+      })
+      ipcRenderer.once('response-update-preferences', (event, conf) => {
+        ipcRenderer.removeAllListeners('error-update-preferences')
+        dispatch('App/loadPreferences', null, { root: true })
+        commit('updateAppearance', conf.appearance)
+      })
+    }
+  }
+}
--- a/src/renderer/store/Preferences/General.js
+++ b/src/renderer/store/Preferences/General.js
@ -1,8 +1,5 @@
 import { ipcRenderer } from 'electron'
 import Visibility from '~/src/constants/visibility'
-import DisplayStyle from '~/src/constants/displayStyle'
-import Theme from '~/src/constants/theme'
-import TimeFormat from '~/src/constants/timeFormat'

 const General = {
  namespaced: true,
@ -12,11 +9,7 @@ const General = {
        fav_rb: true,
        toot: true
      },
-      theme: Theme.Light.key,
-      fontSize: 14,
-      displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
-      tootVisibility: Visibility.Public.value,
-      timeFormat: TimeFormat.Absolute.value
+      tootVisibility: Visibility.Public.value
    },
    loading: false
  },
@ -46,77 +39,6 @@ const General = {
        })
      })
    },
-    updateTheme ({ dispatch, commit, state }, theme) {
-      commit('changeLoading', true)
-      const newGeneral = Object.assign({}, state.general, {
-        theme: theme
-      })
-      const config = {
-        general: newGeneral
-      }
-      ipcRenderer.send('update-preferences', config)
-      ipcRenderer.once('error-update-preferences', (event, err) => {
-        ipcRenderer.removeAllListeners('response-update-preferences')
-        commit('changeLoading', false)
-      })
-      ipcRenderer.once('response-update-preferences', (event, conf) => {
-        ipcRenderer.removeAllListeners('error-update-preferences')
-        commit('updateGeneral', conf.general)
-        dispatch('App/loadPreferences', null, { root: true })
-        commit('changeLoading', false)
-      })
-    },
-    updateFontSize ({ dispatch, commit, state }, fontSize) {
-      const newGeneral = Object.assign({}, state.general, {
-        fontSize: fontSize
-      })
-      const config = {
-        general: newGeneral
-      }
-      ipcRenderer.send('update-preferences', config)
-      ipcRenderer.once('error-update-preferences', (event, err) => {
-        ipcRenderer.removeAllListeners('response-update-preferences')
-      })
-      ipcRenderer.once('response-update-preferences', (event, conf) => {
-        ipcRenderer.removeAllListeners('error-update-preferences')
-        commit('updateGeneral', conf.general)
-        dispatch('App/loadPreferences', null, { root: true })
-      })
-    },
-    updateDisplayNameStyle ({ dispatch, commit, state }, value) {
-      const newGeneral = Object.assign({}, state.general, {
-        displayNameStyle: value
-      })
-      const config = {
-        general: newGeneral
-      }
-      ipcRenderer.send('update-preferences', config)
-      ipcRenderer.once('error-update-preferences', (event, err) => {
-        ipcRenderer.removeAllListeners('response-update-preferences')
-      })
-      ipcRenderer.once('response-update-preferences', (event, conf) => {
-        ipcRenderer.removeAllListeners('error-update-preferences')
-        dispatch('App/loadPreferences', null, { root: true })
-        commit('updateGeneral', conf.general)
-      })
-    },
-    updateTimeFormat ({ dispatch, commit, state }, value) {
-      const newGeneral = Object.assign({}, state.general, {
-        timeFormat: value
-      })
-      const config = {
-        general: newGeneral
-      }
-      ipcRenderer.send('update-preferences', config)
-      ipcRenderer.once('error-update-preferences', (event, err) => {
-        ipcRenderer.removeAllListeners('response-update-preferences')
-      })
-      ipcRenderer.once('response-update-preferences', (event, conf) => {
-        ipcRenderer.removeAllListeners('error-update-preferences')
-        dispatch('App/loadPreferences', null, { root: true })
-        commit('updateGeneral', conf.general)
-      })
-    },
    updateTootVisibility ({ dispatch, commit, state }, value) {
      const newGeneral = Object.assign({}, state.general, {
        tootVisibility: value