refs #821 Read toot padding option and apply it on toot

src/renderer/App.vue

@@ -11,7 +11,7 @@ export default {
   name: 'Whalebird',
   computed: {
     ...mapState({
-      theme: (state) => {
+      theme: state => {
         return {
           '--theme-background-color': state.App.theme.background_color,
           '--theme-selected-background-color': state.App.theme.selected_background_color,
@@ -24,6 +24,7 @@ export default {
           '--theme-header-menu-color': state.App.theme.header_menu_color,
           '--theme-wrapper-mask-color': state.App.theme.wrapper_mask_color,
           '--theme-scrollbar-color': state.App.theme.scrollbar_color,
+          '--toot-padding': `${state.App.tootPadding}px`,
           '--base-font-size': `${state.App.fontSize}px`,
           '--specified-fonts': state.App.defaultFonts.join(', ')
         }
@@ -32,8 +33,7 @@ export default {
   },
   created() {
     this.$store.dispatch('App/watchShortcutsEvents')
-    this.$store.dispatch('App/loadPreferences')
+    this.$store.dispatch('App/loadPreferences').then(conf => {
-      .then((conf) => {
       this.$i18n.i18next.changeLanguage(conf.language.language)
     })
   },
@@ -70,6 +70,7 @@ body,
     color: #409eff;
   }
 
+  --toot-padding: 8px;
   --base-font-size: 14px;
 
   font-size: var(--base-font-size);
@@ -78,7 +79,8 @@ body,
     background-color: #d9e1e8;
   }
 
-  --specified-fonts: 'Noto Sans', 'Noto Sans CJK JP', 'Takaoゴシック', 'ヒラギノ角ゴ ProN W3', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --specified-fonts: 'Noto Sans', 'Noto Sans CJK JP', 'Takaoゴシック', 'ヒラギノ角ゴ ProN W3', '-apple-system', 'BlinkMacSystemFont',
+    'Segoe UI', 'Roboto', 'Helvetica Neue', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 
   font-family: var(--specified-fonts);
 
@@ -93,7 +95,10 @@ body,
   }
 }
 
-html, body, #app, #global_header {
+html,
+body,
+#app,
+#global_header {
   height: 100%;
   margin: 0;
 }
@@ -118,7 +123,7 @@ p {
 }
 
 .clearfix:after {
-  content:" ";
+  content: ' ';
   display: block;
   clear: both;
 }

src/renderer/components/Preferences/Appearance/Toot.vue

@@ -1,9 +1,5 @@
 <template>
-<div
+  <div class="status" tabIndex="0" ref="status">
-  class="status"
-  tabIndex="0"
-  ref="status"
-  >
     <div class="toot">
       <div class="icon">
         <img :src="sampleIcon" />
@@ -183,7 +179,7 @@ export default {
       color: var(--theme-primary-color);
 
       .content {
-        margin: 4px 0 8px;
+        margin: var(--toot-padding) 0;
         word-wrap: break-word;
       }
 
@@ -270,5 +266,4 @@ export default {
   background-color: var(--theme-selected-background-color);
   outline: 0;
 }
-
 </style>

src/renderer/components/molecules/Toot.vue

@@ -622,7 +622,7 @@ export default {
       color: var(--theme-primary-color);
 
       .content {
-        margin: 4px 0 8px;
+        margin: var(--toot-padding) 0;
         word-wrap: break-word;
       }
 

src/renderer/store/App.ts

@@ -10,7 +10,7 @@ import DefaultFonts from '@/utils/fonts'
 import { RootState } from '@/store'
 import { Notify } from '~/src/types/notify'
 
-export interface AppState {
+export type AppState = {
   theme: ThemeColorType
   fontSize: number
   displayNameStyle: number
@@ -21,6 +21,7 @@ export interface AppState {
   ignoreCW: boolean
   ignoreNFSW: boolean
   hideAllAttachments: boolean
+  tootPadding: number
 }
 
 const state = (): AppState => ({
@@ -33,6 +34,7 @@ const state = (): AppState => ({
     favourite: true,
     follow: true
   },
+  tootPadding: 8,
   timeFormat: TimeFormat.Absolute.value,
   language: Language.en.key,
   defaultFonts: DefaultFonts,
@@ -46,6 +48,7 @@ const MUTATION_TYPES = {
   UPDATE_FONT_SIZE: 'updateFontSize',
   UPDATE_DISPLAY_NAME_STYLE: 'updateDisplayNameStyle',
   UPDATE_NOTIFY: 'updateNotify',
+  UPDATE_TOOT_PADDING: 'updateTootPadding',
   UPDATE_TIME_FORMAT: 'updateTimeFormat',
   UPDATE_LANGUAGE: 'updateLanguage',
   ADD_FONT: 'addFont',
@@ -67,6 +70,9 @@ const mutations: MutationTree<AppState> = {
   [MUTATION_TYPES.UPDATE_NOTIFY]: (state: AppState, notify: Notify) => {
     state.notify = notify
   },
+  [MUTATION_TYPES.UPDATE_TOOT_PADDING]: (state: AppState, value: number) => {
+    state.tootPadding = value
+  },
   [MUTATION_TYPES.UPDATE_TIME_FORMAT]: (state: AppState, format: number) => {
     state.timeFormat = format
   },
@@ -104,6 +110,7 @@ const actions: ActionTree<AppState, RootState> = {
         ipcRenderer.removeAllListeners('response-get-preferences')
         reject(err)
       })
+      // TODO: any
       ipcRenderer.once('response-get-preferences', (_, conf: any) => {
         ipcRenderer.removeAllListeners('error-get-preferences')
         dispatch('updateTheme', conf.appearance as any)
@@ -112,6 +119,7 @@ const actions: ActionTree<AppState, RootState> = {
         commit(MUTATION_TYPES.UPDATE_NOTIFY, conf.notification.notify as Notify)
         commit(MUTATION_TYPES.UPDATE_TIME_FORMAT, conf.appearance.timeFormat as number)
         commit(MUTATION_TYPES.UPDATE_LANGUAGE, conf.language.language as string)
+        commit(MUTATION_TYPES.UPDATE_TOOT_PADDING, conf.appearance.tootPadding as number)
         commit(MUTATION_TYPES.ADD_FONT, conf.appearance.font as string)
         commit(MUTATION_TYPES.UPDATE_IGNORE_CW, conf.general.timeline.cw as boolean)
         commit(MUTATION_TYPES.UPDATE_IGNORE_NFSW, conf.general.timeline.nfsw as boolean)