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

2019-06-05 22:09:52 +09:00 · 2019-06-05 22:09:52 +09:00 · ea40702f09
parent 47a8d9a8d1
commit ea40702f09
4 changed files with 93 additions and 85 deletions
--- a/src/renderer/App.vue
+++ b/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')
-      .then((conf) => {
-        this.$i18n.i18next.changeLanguage(conf.language.language)
-      })
+    this.$store.dispatch('App/loadPreferences').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:" ";
-  display:block;
-  clear:both;
+  content: ' ';
+  display: block;
+  clear: both;
 }
 </style>
 <style src="animate.css/animate.min.css"></style>
--- a/src/renderer/components/Preferences/Appearance/Toot.vue
+++ b/src/renderer/components/Preferences/Appearance/Toot.vue
@ -1,72 +1,68 @@
 <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 class="status" tabIndex="0" ref="status">
+    <div class="toot">
+      <div class="icon">
+        <img :src="sampleIcon" />
      </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 class="detail">
+        <div class="toot-header">
+          <div class="user">
+            <span class="display-name">{{ username }}</span>
+            <span class="acct">{{ accountName }}</span>
          </div>
-          <el-button slot="reference" type="text" :title="$t('cards.toot.detail')">
-            <icon name="ellipsis-h" scale="0.9"></icon>
+          <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>
-        </popper>
-      </div>
-      <div class="application">
-        {{ $t('cards.toot.via', { application: 'Whalebird' }) }}
+          <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 class="clearfix"></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>
--- a/src/renderer/components/molecules/Toot.vue
+++ b/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;
      }

--- a/src/renderer/store/App.ts
+++ b/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)