Merge pull request #935 from h3poteto/iss-821

closes #821 Customize toot padding

.stylelintrc.json

@@ -1,4 +1,7 @@
 {
   "processors": ["@mapbox/stylelint-processor-arbitrary-tags"],
-  "extends": "stylelint-config-standard"
+  "extends": [
+    "stylelint-config-standard",
+    "./node_modules/prettier-stylelint/config.js"
+  ]
 }

package.json

@@ -266,6 +266,7 @@
     "node-loader": "^0.6.0",
     "node-sass": "^4.10.0",
     "prettier": "^1.17.0",
+    "prettier-stylelint": "^0.4.2",
     "regenerator-runtime": "^0.13.1",
     "sass-loader": "^7.0.3",
     "style-loader": "^0.23.1",

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/config/locales/de/translation.missing.json

@@ -40,6 +40,9 @@
         "nfsw": "Always ignore NFSW of medias",
         "hideAllAttachments": "Hide all medias"
       }
+    },
+    "appearance": {
+      "toot_padding": "Padding around toot"
     }
   },
   "follow_requests": {

src/config/locales/en/translation.json

@@ -155,6 +155,7 @@
       },
       "font_size": "Font size",
       "font_family": "Font family",
+      "toot_padding": "Padding around toots",
       "display_style": {
         "title": "Display style of username",
         "display_name_and_username": "Display name and username",

src/config/locales/fr/translation.missing.json

@@ -6,6 +6,11 @@
     "follow_requests": "Follow Requests",
     "direct_messages": "Direct Messages"
   },
+  "preferences": {
+    "appearance": {
+      "toot_padding": "Padding around toot"
+    }
+  },
   "follow_requests": {
     "accept": "Accept",
     "reject": "Reject"

src/config/locales/it/translation.missing.json

@@ -6,6 +6,11 @@
     "follow_requests": "Follow Requests",
     "direct_messages": "Direct Messages"
   },
+  "preferences": {
+    "appearance": {
+      "toot_padding": "Padding around toot"
+    }
+  },
   "follow_requests": {
     "accept": "Accept",
     "reject": "Reject"

src/config/locales/ja/translation.json

@@ -152,6 +152,7 @@
       },
       "font_size": "フォントサイズ",
       "font_family": "フォント",
+      "toot_padding": "トゥート周りの空白",
       "display_style": {
         "title": "ユーザ名の表示形式",
         "display_name_and_username": "表示名+ユーザー名",

src/config/locales/ko/translation.missing.json

@@ -8,6 +8,9 @@
         "nfsw": "Always ignore NFSW of medias",
         "hideAllAttachments": "Hide all medias"
       }
+    },
+    "appearance": {
+      "toot_padding": "Padding around toot"
     }
   },
   "side_menu": {

src/config/locales/pl/translation.missing.json

@@ -40,6 +40,9 @@
         "nfsw": "Always ignore NFSW of medias",
         "hideAllAttachments": "Hide all medias"
       }
+    },
+    "appearance": {
+      "toot_padding": "Padding around toot"
     }
   },
   "follow_requests": {

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/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,20 +24,20 @@ 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(', ')
         }
       }
     })
   },
-  created () {
+  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)
     })
   },
-  destroyed () {
+  destroyed() {
     this.$store.dispatch('App/removeShortcutsEvents')
   }
 }
@@ -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,9 +123,9 @@ p {
 }
 
 .clearfix:after {
-  content:" ";
+  content: ' ';
-  display:block;
+  display: block;
-  clear:both;
+  clear: both;
 }
 </style>
 <style src="animate.css/animate.min.css"></style>

src/renderer/components/Preferences/Appearance.vue

@@ -1,24 +1,16 @@
 <template>
-<div id="appearance">
+  <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
+            <el-option v-for="t in themes" :key="t.key" :label="$t(t.name)" :value="t.key"> </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
+        <Toot :displayNameStyle="displayNameStyle" :timeFormat="timeFormat"></Toot>
-        :displayNameStyle="displayNameStyle"
-        :timeFormat="timeFormat"
-        ></Toot>
       </div>
     </el-form>
     <div class="color-pallet section" v-if="customizeThemeColor">
@@ -27,42 +19,33 @@
     <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
+          <el-option v-for="f in fontList" :key="f" :label="f" :value="f" />
-          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="toot-padding section" size="small" label-position="top">
+      <el-form-item for="toot-padding" :label="$t('preferences.appearance.toot_padding')">
+        <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
+          <el-option v-for="style in nameStyles" :key="style.value" :label="$t(style.name)" :value="style.value"> </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
+          <el-option v-for="format in timeFormats" :key="format.value" :label="$t(format.name)" :value="format.value"> </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>
+  </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/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" />
@@ -38,7 +34,7 @@
           <span class="count">
             {{ favouritesCount }}
           </span>
-        <popper trigger="click" :options="{placement: 'bottom'}" ref="popper">
+          <popper trigger="click" :options="{ placement: 'bottom' }" ref="popper">
             <div class="popper toot-menu">
               <ul class="menu-list">
                 <li role="button">
@@ -66,7 +62,7 @@
       </div>
       <div class="clearfix"></div>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
@@ -87,10 +83,10 @@ export default {
     }
   },
   computed: {
-    sampleIcon () {
+    sampleIcon() {
       return 'https://github.com/h3poteto/whalebird-desktop/raw/master/build/icons/256x256.png'
     },
-    username () {
+    username() {
       switch (this.displayNameStyle) {
         case DisplayStyle.DisplayNameAndUsername.value:
         case DisplayStyle.DisplayName.value:
@@ -99,7 +95,7 @@ export default {
           return 'whalebird@mastodon.social'
       }
     },
-    accountName () {
+    accountName() {
       switch (this.displayNameStyle) {
         case DisplayStyle.DisplayNameAndUsername.value:
           return 'whalebird@mastodon.social'
@@ -107,7 +103,7 @@ export default {
           return ''
       }
     },
-    timestamp () {
+    timestamp() {
       switch (this.timeFormat) {
         case TimeFormat.Absolute.value:
           return '2018-08-12 20:35:41'
@@ -115,13 +111,13 @@ export default {
           return moment('2018-08-12 20:35:41').fromNow()
       }
     },
-    status () {
+    status() {
       return '<p>Sample status</p>'
     },
-    reblogsCount () {
+    reblogsCount() {
       return 1
     },
-    favouritesCount () {
+    favouritesCount() {
       return 5
     }
   }
@@ -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)

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
 }