Mastodon
/
Whalebird-desktop-client-mac-linux-windows
mirror of https://github.com/h3poteto/whalebird-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

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

This commit is contained in:
AkiraFukushima 2019-06-05 22:09:52 +09:00
parent 47a8d9a8d1
commit ea40702f09
4 changed files with 93 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/renderer/App.vue
View File

@ -11,7 +11,7 @@ export default {
name: 'Whalebird', name: 'Whalebird',
computed: { computed: {
...mapState({ ...mapState({
theme: (state) => { theme: state => {
return { return {
'--theme-background-color': state.App.theme.background_color, '--theme-background-color': state.App.theme.background_color,
'--theme-selected-background-color': state.App.theme.selected_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-header-menu-color': state.App.theme.header_menu_color,
'--theme-wrapper-mask-color': state.App.theme.wrapper_mask_color, '--theme-wrapper-mask-color': state.App.theme.wrapper_mask_color,
'--theme-scrollbar-color': state.App.theme.scrollbar_color, '--theme-scrollbar-color': state.App.theme.scrollbar_color,
'--toot-padding': `${state.App.tootPadding}px`,
'--base-font-size': `${state.App.fontSize}px`, '--base-font-size': `${state.App.fontSize}px`,
'--specified-fonts': state.App.defaultFonts.join(', ') '--specified-fonts': state.App.defaultFonts.join(', ')
} }
} }
}) })
}, },
created () { created() {
this.$store.dispatch('App/watchShortcutsEvents') 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)
this.$i18n.i18next.changeLanguage(conf.language.language) })
})
}, },
destroyed () { destroyed() {
this.$store.dispatch('App/removeShortcutsEvents') this.$store.dispatch('App/removeShortcutsEvents')
} }
} }
@ -70,6 +70,7 @@ body,
color: #409eff; color: #409eff;
} }
--toot-padding: 8px;
--base-font-size: 14px; --base-font-size: 14px;
font-size: var(--base-font-size); font-size: var(--base-font-size);
@ -78,7 +79,8 @@ body,
background-color: #d9e1e8; 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); font-family: var(--specified-fonts);
@ -93,7 +95,10 @@ body,
} }
} }
html, body, #app, #global_header { html,
body,
#app,
#global_header {
height: 100%; height: 100%;
margin: 0; margin: 0;
} }
@ -118,9 +123,9 @@ p {
} }
.clearfix:after { .clearfix:after {
content:" "; content: ' ';
display:block; display: block;
clear:both; clear: both;
} }
</style> </style>
<style src="animate.css/animate.min.css"></style> <style src="animate.css/animate.min.css"></style>

137
src/renderer/components/Preferences/Appearance/Toot.vue
View File

@ -1,72 +1,68 @@
<template> <template>
<div <div class="status" tabIndex="0" ref="status">
class="status" <div class="toot">
tabIndex="0" <div class="icon">
ref="status" <img :src="sampleIcon" />
>
<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>
<div class="content-wrapper"> <div class="detail">
<div class="content" v-html="status"></div> <div class="toot-header">
</div> <div class="user">
<div class="tool-box"> <span class="display-name">{{ username }}</span>
<el-button type="text" class="reply" :title="$t('cards.toot.reply')"> <span class="acct">{{ accountName }}</span>
<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> </div>
<el-button slot="reference" type="text" :title="$t('cards.toot.detail')"> <div class="timestamp">
<icon name="ellipsis-h" scale="0.9"></icon> {{ 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>
</popper> <el-button type="text" class="reblog" :title="$t('cards.toot.reblog')">
</div> <icon name="retweet" scale="0.9"></icon>
<div class="application"> </el-button>
{{ $t('cards.toot.via', { application: 'Whalebird' }) }} <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>
<div class="clearfix"></div>
</div> </div>
<div class="clearfix"></div>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -87,10 +83,10 @@ export default {
} }
}, },
computed: { computed: {
sampleIcon () { sampleIcon() {
return 'https://github.com/h3poteto/whalebird-desktop/raw/master/build/icons/256x256.png' return 'https://github.com/h3poteto/whalebird-desktop/raw/master/build/icons/256x256.png'
}, },
username () { username() {
switch (this.displayNameStyle) { switch (this.displayNameStyle) {
case DisplayStyle.DisplayNameAndUsername.value: case DisplayStyle.DisplayNameAndUsername.value:
case DisplayStyle.DisplayName.value: case DisplayStyle.DisplayName.value:
@ -99,7 +95,7 @@ export default {
return 'whalebird@mastodon.social' return 'whalebird@mastodon.social'
} }
}, },
accountName () { accountName() {
switch (this.displayNameStyle) { switch (this.displayNameStyle) {
case DisplayStyle.DisplayNameAndUsername.value: case DisplayStyle.DisplayNameAndUsername.value:
return 'whalebird@mastodon.social' return 'whalebird@mastodon.social'
@ -107,7 +103,7 @@ export default {
return '' return ''
} }
}, },
timestamp () { timestamp() {
switch (this.timeFormat) { switch (this.timeFormat) {
case TimeFormat.Absolute.value: case TimeFormat.Absolute.value:
return '2018-08-12 20:35:41' return '2018-08-12 20:35:41'
@ -115,13 +111,13 @@ export default {
return moment('2018-08-12 20:35:41').fromNow() return moment('2018-08-12 20:35:41').fromNow()
} }
}, },
status () { status() {
return '<p>Sample status</p>' return '<p>Sample status</p>'
}, },
reblogsCount () { reblogsCount() {
return 1 return 1
}, },
favouritesCount () { favouritesCount() {
return 5 return 5
} }
} }
@ -183,7 +179,7 @@ export default {
color: var(--theme-primary-color); color: var(--theme-primary-color);
.content { .content {
margin: 4px 0 8px; margin: var(--toot-padding) 0;
word-wrap: break-word; word-wrap: break-word;
} }
@ -270,5 +266,4 @@ export default {
background-color: var(--theme-selected-background-color); background-color: var(--theme-selected-background-color);
outline: 0; outline: 0;
} }
</style> </style>

2
src/renderer/components/molecules/Toot.vue
View File

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

10
src/renderer/store/App.ts
View File

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