Merge pull request #935 from h3poteto/iss-821
closes #821 Customize toot padding
This commit is contained in:
AkiraFukushima
GitHub
commit
88e11af737
|
|
@ -1,4 +1,7 @@
|
|||
{
|
||||
"processors": ["@mapbox/stylelint-processor-arbitrary-tags"],
|
||||
"extends": "stylelint-config-standard"
|
||||
"extends": [
|
||||
"stylelint-config-standard",
|
||||
"./node_modules/prettier-stylelint/config.js"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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: []
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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: []
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,6 +40,9 @@
|
|||
"nfsw": "Always ignore NFSW of medias",
|
||||
"hideAllAttachments": "Hide all medias"
|
||||
}
|
||||
},
|
||||
"appearance": {
|
||||
"toot_padding": "Padding around toot"
|
||||
}
|
||||
},
|
||||
"follow_requests": {
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -152,6 +152,7 @@
|
|||
},
|
||||
"font_size": "フォントサイズ",
|
||||
"font_family": "フォント",
|
||||
"toot_padding": "トゥート周りの空白",
|
||||
"display_style": {
|
||||
"title": "ユーザ名の表示形式",
|
||||
"display_name_and_username": "表示名+ユーザー名",
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@
|
|||
"nfsw": "Always ignore NFSW of medias",
|
||||
"hideAllAttachments": "Hide all medias"
|
||||
}
|
||||
},
|
||||
"appearance": {
|
||||
"toot_padding": "Padding around toot"
|
||||
}
|
||||
},
|
||||
"side_menu": {
|
||||
|
|
|
|||
|
|
@ -40,6 +40,9 @@
|
|||
"nfsw": "Always ignore NFSW of medias",
|
||||
"hideAllAttachments": "Hide all medias"
|
||||
}
|
||||
},
|
||||
"appearance": {
|
||||
"toot_padding": "Padding around toot"
|
||||
}
|
||||
},
|
||||
"follow_requests": {
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,68 +1,51 @@
|
|||
<template>
|
||||
<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>
|
||||
<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-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="right">
|
||||
<Toot :displayNameStyle="displayNameStyle" :timeFormat="timeFormat"></Toot>
|
||||
</div>
|
||||
</el-form>
|
||||
<div class="color-pallet section" v-if="customizeThemeColor">
|
||||
<color-pallet></color-pallet>
|
||||
</div>
|
||||
<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-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="right">
|
||||
<Toot
|
||||
:displayNameStyle="displayNameStyle"
|
||||
:timeFormat="timeFormat"
|
||||
></Toot>
|
||||
</div>
|
||||
</el-form>
|
||||
<div class="color-pallet section" v-if="customizeThemeColor">
|
||||
<color-pallet></color-pallet>
|
||||
<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-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-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<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-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="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-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-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,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)
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue