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

Merge pull request #935 from h3poteto/iss-821 

closes #821 Customize toot padding
This commit is contained in:
AkiraFukushima 2019-06-05 23:16:26 +09:00 committed by GitHub
parent 9755fe78ad de7fad73f6
commit 88e11af737
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 1190 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.stylelintrc.json
View File

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

958
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -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",

3
spec/renderer/integration/store/Preferences/Appearance.spec.ts
View File

@ -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: []
}

3
spec/renderer/unit/store/Preferences/Appearance.spec.ts
View File

@ -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: []
}

3
src/config/locales/de/translation.missing.json
View File

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

1
src/config/locales/en/translation.json
View File

@ -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",

5
src/config/locales/fr/translation.missing.json
View File

@ -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"

5
src/config/locales/it/translation.missing.json
View File

@ -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"

1
src/config/locales/ja/translation.json
View File

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

3
src/config/locales/ko/translation.missing.json
View File

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

3
src/config/locales/pl/translation.missing.json
View File

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

27
src/main/preferences.ts
View File

@ -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,
state: State,
language: LanguageSet,
notification: Notification,
general: General
state: State
language: LanguageSet
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)

25
src/renderer/App.vue
View File

@ -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.$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>

91
src/renderer/components/Preferences/Appearance.vue
View File

@ -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
v-for="t in themes"
:key="t.key"
:label="$t(t.name)"
:value="t.key">
</el-option>
<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
:displayNameStyle="displayNameStyle"
:timeFormat="timeFormat"
></Toot>
<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
v-for="f in fontList"
:key="f"
:label="f"
:value="f" />
<el-option 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
v-for="style in nameStyles"
:key="style.value"
:label="$t(style.name)"
:value="style.value">
</el-option>
<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
v-for="format in timeFormats"
:key="format.value"
:label="$t(format.name)"
:value="format.value">
</el-option>
<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: [
DisplayStyle.DisplayNameAndUsername,
DisplayStyle.DisplayName,
DisplayStyle.Username
],
themes: [
Theme.Light,
Theme.Dark,
Theme.SolarizedLight,
Theme.SolarizedDark,
Theme.KimbieDark,
Theme.Custom
],
timeFormats: [
TimeFormat.Absolute,
TimeFormat.Relative
]
nameStyles: [DisplayStyle.DisplayNameAndUsername, DisplayStyle.DisplayName, 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)
}
}
}

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

@ -1,9 +1,5 @@
<template>
<div
class="status"
tabIndex="0"
ref="status"
>
<div 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>

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

@ -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;
}

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

@ -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)

28
src/renderer/store/Preferences/Appearance.ts
View File

@ -8,8 +8,8 @@ import { Module, MutationTree, ActionTree } from 'vuex'
import { RootState } from '@/store'
import { Appearance } from '~/src/types/appearance'
export interface AppearanceState {
appearance: Appearance,
export type AppearanceState = {
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)
})
})
}
}

11
src/types/appearance.ts
View File

@ -1,10 +1,11 @@
import { ThemeColorType } from '~/src/constants/themeColor'
export type Appearance = {
theme: string,
fontSize: number,
displayNameStyle: number,
timeFormat: number,
customThemeColor: ThemeColorType,
theme: string
fontSize: number
displayNameStyle: number
timeFormat: number
customThemeColor: ThemeColorType
font: string
tootPadding: number
}