Mergan/pleroma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'settings-refactor' into 'develop'

Browse source 
Settings refactor

See merge request pleroma/pleroma-fe!960
This commit is contained in:
HJ 2019-10-29 07:41:29 +00:00
commit 21989c673e
36 changed files with 401 additions and 649 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/App.js
View file

@ -45,7 +45,7 @@ export default {
}), }),
created () { created () {
// Load the locale from the storage // Load the locale from the storage
this.$i18n.locale = this.$store.state.config.interfaceLanguage this.$i18n.locale = this.$store.getters.mergedConfig.interfaceLanguage
window.addEventListener('resize', this.updateMobileState) window.addEventListener('resize', this.updateMobileState)
}, },
destroyed () { destroyed () {
@ -93,7 +93,7 @@ export default {
suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled }, suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
showInstanceSpecificPanel () { showInstanceSpecificPanel () {
return this.$store.state.instance.showInstanceSpecificPanel && return this.$store.state.instance.showInstanceSpecificPanel &&
!this.$store.state.config.hideISP && !this.$store.getters.mergedConfig.hideISP &&
this.$store.state.instance.instanceSpecificPanelContent this.$store.state.instance.instanceSpecificPanelContent
}, },
showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }, showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },

8
src/components/attachment/attachment.js
View file

@ -16,8 +16,8 @@ const Attachment = {
data () { data () {
return { return {
nsfwImage: this.$store.state.instance.nsfwCensorImage || nsfwImage, nsfwImage: this.$store.state.instance.nsfwCensorImage || nsfwImage,
hideNsfwLocal: this.$store.state.config.hideNsfw, hideNsfwLocal: this.$store.getters.mergedConfig.hideNsfw,
preloadImage: this.$store.state.config.preloadImage, preloadImage: this.$store.getters.mergedConfig.preloadImage,
loading: false, loading: false,
img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'), img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'),
modalOpen: false, modalOpen: false,
@ -58,7 +58,7 @@ const Attachment = {
} }
}, },
openModal (event) { openModal (event) {
const modalTypes = this.$store.state.config.playVideosInModal const modalTypes = this.$store.getters.mergedConfig.playVideosInModal
? ['image', 'video'] ? ['image', 'video']
: ['image'] : ['image']
if (fileTypeService.fileMatchesSomeType(modalTypes, this.attachment) || if (fileTypeService.fileMatchesSomeType(modalTypes, this.attachment) ||
@ -71,7 +71,7 @@ const Attachment = {
} }
}, },
toggleHidden (event) { toggleHidden (event) {
if (this.$store.state.config.useOneClickNsfw && !this.showHidden) { if (this.$store.getters.mergedConfig.useOneClickNsfw && !this.showHidden) {
this.openModal(event) this.openModal(event)
return return
} }

41
src/components/checkbox/checkbox.vue
View file

@ -1,13 +1,22 @@
<template> <template>
<label class="checkbox"> <label
class="checkbox"
:class="{ disabled, indeterminate }"
>
<input <input
type="checkbox" type="checkbox"
:disabled="disabled"
:checked="checked" :checked="checked"
:indeterminate.prop="indeterminate" :indeterminate.prop="indeterminate"
@change="$emit('change', $event.target.checked)" @change="$emit('change', $event.target.checked)"
> >
<i class="checkbox-indicator" /> <i class="checkbox-indicator" />
<span v-if="!!$slots.default"><slot /></span> <span
class="label"
v-if="!!$slots.default"
>
<slot />
</span>
</label> </label>
</template> </template>
@ -17,7 +26,11 @@ export default {
prop: 'checked', prop: 'checked',
event: 'change' event: 'change'
}, },
props: ['checked', 'indeterminate'] props: [
'checked',
'indeterminate',
'disabled'
]
} }
</script> </script>
@ -27,12 +40,16 @@ export default {
.checkbox { .checkbox {
position: relative; position: relative;
display: inline-block; display: inline-block;
padding-left: 1.2em;
min-height: 1.2em; min-height: 1.2em;
&-indicator {
position: relative;
padding-left: 1.2em;
}
&-indicator::before { &-indicator::before {
position: absolute; position: absolute;
left: 0; right: 0;
top: 0; top: 0;
display: block; display: block;
content: '✔'; content: '✔';
@ -54,6 +71,17 @@ export default {
box-sizing: border-box; box-sizing: border-box;
} }
&.disabled {
.checkbox-indicator::before,
.label {
opacity: .5;
}
.label {
color: $fallback--faint;
color: var(--faint, $fallback--faint);
}
}
input[type=checkbox] { input[type=checkbox] {
display: none; display: none;
@ -68,9 +96,6 @@ export default {
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
} }
&:disabled + .checkbox-indicator::before {
opacity: .5;
}
} }
& > span { & > span {

2
src/components/emoji_input/emoji_input.js
View file

@ -99,7 +99,7 @@ const EmojiInput = {
}, },
computed: { computed: {
padEmoji () { padEmoji () {
return this.$store.state.config.padEmoji return this.$store.getters.mergedConfig.padEmoji
}, },
suggestions () { suggestions () {
const firstchar = this.textAtCaret.charAt(0) const firstchar = this.textAtCaret.charAt(0)

5
src/components/emoji_picker/emoji_picker.js
View file

@ -1,3 +1,4 @@
import Checkbox from '../checkbox/checkbox.vue'
const filterByKeyword = (list, keyword = '') => { const filterByKeyword = (list, keyword = '') => {
return list.filter(x => x.displayText.includes(keyword)) return list.filter(x => x.displayText.includes(keyword))
@ -13,7 +14,6 @@ const EmojiPicker = {
}, },
data () { data () {
return { return {
labelKey: String(Math.random() * 100000),
keyword: '', keyword: '',
activeGroup: 'custom', activeGroup: 'custom',
showingStickers: false, showingStickers: false,
@ -22,7 +22,8 @@ const EmojiPicker = {
} }
}, },
components: { components: {
StickerPicker: () => import('../sticker_picker/sticker_picker.vue') StickerPicker: () => import('../sticker_picker/sticker_picker.vue'),
Checkbox
}, },
methods: { methods: {
onEmoji (emoji) { onEmoji (emoji) {

4
src/components/emoji_picker/emoji_picker.scss
View file

@ -14,10 +14,6 @@
padding: 7px; padding: 7px;
line-height: normal; line-height: normal;
} }
.keep-open-label {
padding: 0 7px;
display: flex;
}
.heading { .heading {
display: flex; display: flex;

20
src/components/emoji_picker/emoji_picker.vue
View file

@ -75,22 +75,10 @@
</span> </span>
</div> </div>
</div> </div>
<div <div class="keep-open">
class="keep-open" <Checkbox v-model="keepOpen">
> {{ $t('emoji.keep_open') }}
<input </Checkbox>
:id="labelKey + 'keep-open'"
v-model="keepOpen"
type="checkbox"
>
<label
class="keep-open-label"
:for="labelKey + 'keep-open'"
>
<div class="keep-open-label-text">
{{ $t('emoji.keep_open') }}
</div>
</label>
</div> </div>
</div> </div>
<div <div

8
src/components/favorite_button/favorite_button.js
View file

@ -1,10 +1,9 @@
import { mapGetters } from 'vuex'
const FavoriteButton = { const FavoriteButton = {
props: ['status', 'loggedIn'], props: ['status', 'loggedIn'],
data () { data () {
return { return {
hidePostStatsLocal: typeof this.$store.state.config.hidePostStats === 'undefined'
? this.$store.state.instance.hidePostStats
: this.$store.state.config.hidePostStats,
animated: false animated: false
} }
}, },
@ -28,7 +27,8 @@ const FavoriteButton = {
'icon-star': this.status.favorited, 'icon-star': this.status.favorited,
'animate-spin': this.animated 'animate-spin': this.animated
} }
} },
...mapGetters(['mergedConfig'])
} }
} }

4
src/components/favorite_button/favorite_button.vue
View file

@ -6,7 +6,7 @@
:title="$t('tool_tip.favorite')" :title="$t('tool_tip.favorite')"
@click.prevent="favorite()" @click.prevent="favorite()"
/> />
<span v-if="!hidePostStatsLocal && status.fave_num > 0">{{ status.fave_num }}</span> <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
</div> </div>
<div v-else> <div v-else>
<i <i
@ -14,7 +14,7 @@
class="button-icon favorite-button" class="button-icon favorite-button"
:title="$t('tool_tip.favorite')" :title="$t('tool_tip.favorite')"
/> />
<span v-if="!hidePostStatsLocal && status.fave_num > 0">{{ status.fave_num }}</span> <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
</div> </div>
</template> </template>

2
src/components/gallery/gallery.js
View file

@ -29,7 +29,7 @@ const Gallery = {
return rows return rows
}, },
useContainFit () { useContainFit () {
return this.$store.state.config.useContainFit return this.$store.getters.mergedConfig.useContainFit
} }
}, },
methods: { methods: {

2
src/components/interface_language_switcher/interface_language_switcher.vue
View file

@ -40,7 +40,7 @@ export default {
}, },
language: { language: {
get: function () { return this.$store.state.config.interfaceLanguage }, get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
set: function (val) { set: function (val) {
this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val }) this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
this.$i18n.locale = val this.$i18n.locale = val

2
src/components/mobile_nav/mobile_nav.js
View file

@ -63,7 +63,7 @@ const MobileNav = {
this.$refs.notifications.markAsSeen() this.$refs.notifications.markAsSeen()
}, },
onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) { onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) {
if (this.$store.state.config.autoLoad && scrollTop + clientHeight >= scrollHeight) { if (this.$store.getters.mergedConfig.autoLoad && scrollTop + clientHeight >= scrollHeight) {
this.$refs.notifications.fetchOlderNotifications() this.$refs.notifications.fetchOlderNotifications()
} }
} }

2
src/components/mobile_post_status_button/mobile_post_status_button.js
View file

@ -30,7 +30,7 @@ const MobilePostStatusButton = {
return this.autohideFloatingPostButton && (this.hidden || this.inputActive) return this.autohideFloatingPostButton && (this.hidden || this.inputActive)
}, },
autohideFloatingPostButton () { autohideFloatingPostButton () {
return !!this.$store.state.config.autohideFloatingPostButton return !!this.$store.getters.mergedConfig.autohideFloatingPostButton
} }
}, },
watch: { watch: {

2
src/components/notification/notification.js
View file

@ -39,7 +39,7 @@ const Notification = {
return highlightClass(this.notification.from_profile) return highlightClass(this.notification.from_profile)
}, },
userStyle () { userStyle () {
const highlight = this.$store.state.config.highlight const highlight = this.$store.getters.mergedConfig.highlight
const user = this.notification.from_profile const user = this.notification.from_profile
return highlightStyle(highlight[user.screen_name]) return highlightStyle(highlight[user.screen_name])
}, },

31
src/components/post_status_form/post_status_form.js
View file

@ -7,6 +7,8 @@ import fileTypeService from '../../services/file_type/file_type.service.js'
import { findOffset } from '../../services/offset_finder/offset_finder.service.js' import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
import { reject, map, uniqBy } from 'lodash' import { reject, map, uniqBy } from 'lodash'
import suggestor from '../emoji_input/suggestor.js' import suggestor from '../emoji_input/suggestor.js'
import { mapGetters } from 'vuex'
import Checkbox from '../checkbox/checkbox.vue'
const buildMentionsString = ({ user, attentions = [] }, currentUser) => { const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
let allAttentions = [...attentions] let allAttentions = [...attentions]
@ -35,7 +37,8 @@ const PostStatusForm = {
MediaUpload, MediaUpload,
EmojiInput, EmojiInput,
PollForm, PollForm,
ScopeSelector ScopeSelector,
Checkbox
}, },
mounted () { mounted () {
this.resize(this.$refs.textarea) this.resize(this.$refs.textarea)
@ -50,9 +53,7 @@ const PostStatusForm = {
const preset = this.$route.query.message const preset = this.$route.query.message
let statusText = preset || '' let statusText = preset || ''
const scopeCopy = typeof this.$store.state.config.scopeCopy === 'undefined' const { scopeCopy } = this.$store.getters.mergedConfig
? this.$store.state.instance.scopeCopy
: this.$store.state.config.scopeCopy
if (this.replyTo) { if (this.replyTo) {
const currentUser = this.$store.state.users.currentUser const currentUser = this.$store.state.users.currentUser
@ -63,9 +64,7 @@ const PostStatusForm = {
? this.copyMessageScope ? this.copyMessageScope
: this.$store.state.users.currentUser.default_scope : this.$store.state.users.currentUser.default_scope
const contentType = typeof this.$store.state.config.postContentType === 'undefined' const { postContentType: contentType } = this.$store.getters.mergedConfig
? this.$store.state.instance.postContentType
: this.$store.state.config.postContentType
return { return {
dropFiles: [], dropFiles: [],
@ -94,10 +93,7 @@ const PostStatusForm = {
return this.$store.state.users.currentUser.default_scope return this.$store.state.users.currentUser.default_scope
}, },
showAllScopes () { showAllScopes () {
const minimalScopesMode = typeof this.$store.state.config.minimalScopesMode === 'undefined' return !this.mergedConfig.minimalScopesMode
? this.$store.state.instance.minimalScopesMode
: this.$store.state.config.minimalScopesMode
return !minimalScopesMode
}, },
emojiUserSuggestor () { emojiUserSuggestor () {
return suggestor({ return suggestor({
@ -145,13 +141,7 @@ const PostStatusForm = {
return this.$store.state.instance.minimalScopesMode return this.$store.state.instance.minimalScopesMode
}, },
alwaysShowSubject () { alwaysShowSubject () {
if (typeof this.$store.state.config.alwaysShowSubjectInput !== 'undefined') { return this.mergedConfig.alwaysShowSubjectInput
return this.$store.state.config.alwaysShowSubjectInput
} else if (typeof this.$store.state.instance.alwaysShowSubjectInput !== 'undefined') {
return this.$store.state.instance.alwaysShowSubjectInput
} else {
return true
}
}, },
postFormats () { postFormats () {
return this.$store.state.instance.postFormats || [] return this.$store.state.instance.postFormats || []
@ -164,13 +154,14 @@ const PostStatusForm = {
this.$store.state.instance.pollLimits.max_options >= 2 this.$store.state.instance.pollLimits.max_options >= 2
}, },
hideScopeNotice () { hideScopeNotice () {
return this.$store.state.config.hideScopeNotice return this.$store.getters.mergedConfig.hideScopeNotice
}, },
pollContentError () { pollContentError () {
return this.pollFormVisible && return this.pollFormVisible &&
this.newStatus.poll && this.newStatus.poll &&
this.newStatus.poll.error this.newStatus.poll.error
} },
...mapGetters(['mergedConfig'])
}, },
methods: { methods: {
postStatus (newStatus) { postStatus (newStatus) {

9
src/components/post_status_form/post_status_form.vue
View file

@ -261,12 +261,9 @@
v-if="newStatus.files.length > 0" v-if="newStatus.files.length > 0"
class="upload_settings" class="upload_settings"
> >
<input <Checkbox v-model="newStatus.nsfw">
id="filesSensitive" {{ $t('post_status.attachments_sensitive') }}
v-model="newStatus.nsfw" </Checkbox>
type="checkbox"
>
<label for="filesSensitive">{{ $t('post_status.attachments_sensitive') }}</label>
</div> </div>
</form> </form>
</div> </div>

8
src/components/retweet_button/retweet_button.js
View file

@ -1,10 +1,9 @@
import { mapGetters } from 'vuex'
const RetweetButton = { const RetweetButton = {
props: ['status', 'loggedIn', 'visibility'], props: ['status', 'loggedIn', 'visibility'],
data () { data () {
return { return {
hidePostStatsLocal: typeof this.$store.state.config.hidePostStats === 'undefined'
? this.$store.state.instance.hidePostStats
: this.$store.state.config.hidePostStats,
animated: false animated: false
} }
}, },
@ -28,7 +27,8 @@ const RetweetButton = {
'retweeted-empty': !this.status.repeated, 'retweeted-empty': !this.status.repeated,
'animate-spin': this.animated 'animate-spin': this.animated
} }
} },
...mapGetters(['mergedConfig'])
} }
} }

4
src/components/retweet_button/retweet_button.vue
View file

@ -7,7 +7,7 @@
:title="$t('tool_tip.repeat')" :title="$t('tool_tip.repeat')"
@click.prevent="retweet()" @click.prevent="retweet()"
/> />
<span v-if="!hidePostStatsLocal && status.repeat_num > 0">{{ status.repeat_num }}</span> <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
</template> </template>
<template v-else> <template v-else>
<i <i
@ -23,7 +23,7 @@
class="button-icon icon-retweet" class="button-icon icon-retweet"
:title="$t('tool_tip.repeat')" :title="$t('tool_tip.repeat')"
/> />
<span v-if="!hidePostStatsLocal && status.repeat_num > 0">{{ status.repeat_num }}</span> <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
</div> </div>
</template> </template>

239
src/components/settings/settings.js
View file

@ -5,88 +5,22 @@ import TabSwitcher from '../tab_switcher/tab_switcher.js'
import StyleSwitcher from '../style_switcher/style_switcher.vue' import StyleSwitcher from '../style_switcher/style_switcher.vue'
import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue' import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
import { extractCommit } from '../../services/version/version.service' import { extractCommit } from '../../services/version/version.service'
import { instanceDefaultProperties, defaultState as configDefaultState } from '../../modules/config.js'
import Checkbox from '../checkbox/checkbox.vue'
const pleromaFeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma-fe/commit/' const pleromaFeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma-fe/commit/'
const pleromaBeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma/commit/' const pleromaBeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma/commit/'
const multiChoiceProperties = [
'postContentType',
'subjectLineBehavior'
]
const settings = { const settings = {
data () { data () {
const user = this.$store.state.config
const instance = this.$store.state.instance const instance = this.$store.state.instance
return { return {
hideAttachmentsLocal: user.hideAttachments,
padEmojiLocal: user.padEmoji,
hideAttachmentsInConvLocal: user.hideAttachmentsInConv,
maxThumbnails: user.maxThumbnails,
hideNsfwLocal: user.hideNsfw,
useOneClickNsfw: user.useOneClickNsfw,
hideISPLocal: user.hideISP,
preloadImage: user.preloadImage,
hidePostStatsLocal: typeof user.hidePostStats === 'undefined'
? instance.hidePostStats
: user.hidePostStats,
hidePostStatsDefault: this.$t('settings.values.' + instance.hidePostStats),
hideUserStatsLocal: typeof user.hideUserStats === 'undefined'
? instance.hideUserStats
: user.hideUserStats,
hideUserStatsDefault: this.$t('settings.values.' + instance.hideUserStats),
hideFilteredStatusesLocal: typeof user.hideFilteredStatuses === 'undefined'
? instance.hideFilteredStatuses
: user.hideFilteredStatuses,
hideFilteredStatusesDefault: this.$t('settings.values.' + instance.hideFilteredStatuses),
notificationVisibilityLocal: user.notificationVisibility,
replyVisibilityLocal: user.replyVisibility,
loopVideoLocal: user.loopVideo,
muteWordsString: user.muteWords.join('\n'),
autoLoadLocal: user.autoLoad,
streamingLocal: user.streaming,
pauseOnUnfocusedLocal: user.pauseOnUnfocused,
hoverPreviewLocal: user.hoverPreview,
autohideFloatingPostButtonLocal: user.autohideFloatingPostButton,
hideMutedPostsLocal: typeof user.hideMutedPosts === 'undefined'
? instance.hideMutedPosts
: user.hideMutedPosts,
hideMutedPostsDefault: this.$t('settings.values.' + instance.hideMutedPosts),
collapseMessageWithSubjectLocal: typeof user.collapseMessageWithSubject === 'undefined'
? instance.collapseMessageWithSubject
: user.collapseMessageWithSubject,
collapseMessageWithSubjectDefault: this.$t('settings.values.' + instance.collapseMessageWithSubject),
subjectLineBehaviorLocal: typeof user.subjectLineBehavior === 'undefined'
? instance.subjectLineBehavior
: user.subjectLineBehavior,
subjectLineBehaviorDefault: instance.subjectLineBehavior,
postContentTypeLocal: typeof user.postContentType === 'undefined'
? instance.postContentType
: user.postContentType,
postContentTypeDefault: instance.postContentType,
alwaysShowSubjectInputLocal: typeof user.alwaysShowSubjectInput === 'undefined'
? instance.alwaysShowSubjectInput
: user.alwaysShowSubjectInput,
alwaysShowSubjectInputDefault: this.$t('settings.values.' + instance.alwaysShowSubjectInput),
scopeCopyLocal: typeof user.scopeCopy === 'undefined'
? instance.scopeCopy
: user.scopeCopy,
scopeCopyDefault: this.$t('settings.values.' + instance.scopeCopy),
minimalScopesModeLocal: typeof user.minimalScopesMode === 'undefined'
? instance.minimalScopesMode
: user.minimalScopesMode,
minimalScopesModeDefault: this.$t('settings.values.' + instance.minimalScopesMode),
stopGifs: user.stopGifs,
webPushNotificationsLocal: user.webPushNotifications,
loopVideoSilentOnlyLocal: user.loopVideosSilentOnly,
loopSilentAvailable: loopSilentAvailable:
// Firefox // Firefox
Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') || Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
@ -94,8 +28,6 @@ const settings = {
Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') || Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') ||
// Future spec, still not supported in Nightly 63 as of 08/2018 // Future spec, still not supported in Nightly 63 as of 08/2018
Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks'), Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks'),
playVideosInModal: user.playVideosInModal,
useContainFit: user.useContainFit,
backendVersion: instance.backendVersion, backendVersion: instance.backendVersion,
frontendVersion: instance.frontendVersion frontendVersion: instance.frontendVersion
@ -104,7 +36,8 @@ const settings = {
components: { components: {
TabSwitcher, TabSwitcher,
StyleSwitcher, StyleSwitcher,
InterfaceLanguageSwitcher InterfaceLanguageSwitcher,
Checkbox
}, },
computed: { computed: {
user () { user () {
@ -122,116 +55,56 @@ const settings = {
}, },
backendVersionLink () { backendVersionLink () {
return pleromaBeCommitUrl + extractCommit(this.backendVersion) return pleromaBeCommitUrl + extractCommit(this.backendVersion)
},
// Getting localized values for instance-default properties
...instanceDefaultProperties
.filter(key => multiChoiceProperties.includes(key))
.map(key => [
key + 'DefaultValue',
function () {
return this.$store.getters.instanceDefaultConfig[key]
}
])
.reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
...instanceDefaultProperties
.filter(key => !multiChoiceProperties.includes(key))
.map(key => [
key + 'LocalizedValue',
function () {
return this.$t('settings.values.' + this.$store.getters.instanceDefaultConfig[key])
}
])
.reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
// Generating computed values for vuex properties
...Object.keys(configDefaultState)
.map(key => [key, {
get () { return this.$store.getters.mergedConfig[key] },
set (value) {
this.$store.dispatch('setOption', { name: key, value })
}
}])
.reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
// Special cases (need to transform values)
muteWordsString: {
get () { return this.$store.getters.mergedConfig.muteWords.join('\n') },
set (value) {
this.$store.dispatch('setOption', {
name: 'muteWords',
value: filter(value.split('\n'), (word) => trim(word).length > 0)
})
}
} }
}, },
// Updating nested properties
watch: { watch: {
hideAttachmentsLocal (value) { notificationVisibility: {
this.$store.dispatch('setOption', { name: 'hideAttachments', value }) handler (value) {
}, this.$store.dispatch('setOption', {
padEmojiLocal (value) { name: 'notificationVisibility',
this.$store.dispatch('setOption', { name: 'padEmoji', value }) value: this.$store.getters.mergedConfig.notificationVisibility
}, })
hideAttachmentsInConvLocal (value) { },
this.$store.dispatch('setOption', { name: 'hideAttachmentsInConv', value }) deep: true
},
hidePostStatsLocal (value) {
this.$store.dispatch('setOption', { name: 'hidePostStats', value })
},
hideUserStatsLocal (value) {
this.$store.dispatch('setOption', { name: 'hideUserStats', value })
},
hideFilteredStatusesLocal (value) {
this.$store.dispatch('setOption', { name: 'hideFilteredStatuses', value })
},
hideNsfwLocal (value) {
this.$store.dispatch('setOption', { name: 'hideNsfw', value })
},
useOneClickNsfw (value) {
this.$store.dispatch('setOption', { name: 'useOneClickNsfw', value })
},
preloadImage (value) {
this.$store.dispatch('setOption', { name: 'preloadImage', value })
},
hideISPLocal (value) {
this.$store.dispatch('setOption', { name: 'hideISP', value })
},
'notificationVisibilityLocal.likes' (value) {
this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility })
},
'notificationVisibilityLocal.follows' (value) {
this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility })
},
'notificationVisibilityLocal.repeats' (value) {
this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility })
},
'notificationVisibilityLocal.mentions' (value) {
this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility })
},
replyVisibilityLocal (value) {
this.$store.dispatch('setOption', { name: 'replyVisibility', value })
},
loopVideoLocal (value) {
this.$store.dispatch('setOption', { name: 'loopVideo', value })
},
loopVideoSilentOnlyLocal (value) {
this.$store.dispatch('setOption', { name: 'loopVideoSilentOnly', value })
},
autoLoadLocal (value) {
this.$store.dispatch('setOption', { name: 'autoLoad', value })
},
streamingLocal (value) {
this.$store.dispatch('setOption', { name: 'streaming', value })
},
pauseOnUnfocusedLocal (value) {
this.$store.dispatch('setOption', { name: 'pauseOnUnfocused', value })
},
hoverPreviewLocal (value) {
this.$store.dispatch('setOption', { name: 'hoverPreview', value })
},
autohideFloatingPostButtonLocal (value) {
this.$store.dispatch('setOption', { name: 'autohideFloatingPostButton', value })
},
muteWordsString (value) {
value = filter(value.split('\n'), (word) => trim(word).length > 0)
this.$store.dispatch('setOption', { name: 'muteWords', value })
},
hideMutedPostsLocal (value) {
this.$store.dispatch('setOption', { name: 'hideMutedPosts', value })
},
collapseMessageWithSubjectLocal (value) {
this.$store.dispatch('setOption', { name: 'collapseMessageWithSubject', value })
},
scopeCopyLocal (value) {
this.$store.dispatch('setOption', { name: 'scopeCopy', value })
},
alwaysShowSubjectInputLocal (value) {
this.$store.dispatch('setOption', { name: 'alwaysShowSubjectInput', value })
},
subjectLineBehaviorLocal (value) {
this.$store.dispatch('setOption', { name: 'subjectLineBehavior', value })
},
postContentTypeLocal (value) {
this.$store.dispatch('setOption', { name: 'postContentType', value })
},
minimalScopesModeLocal (value) {
this.$store.dispatch('setOption', { name: 'minimalScopesMode', value })
},
stopGifs (value) {
this.$store.dispatch('setOption', { name: 'stopGifs', value })
},
webPushNotificationsLocal (value) {
this.$store.dispatch('setOption', { name: 'webPushNotifications', value })
if (value) this.$store.dispatch('registerPushNotifications')
},
playVideosInModal (value) {
this.$store.dispatch('setOption', { name: 'playVideosInModal', value })
},
useContainFit (value) {
this.$store.dispatch('setOption', { name: 'useContainFit', value })
},
maxThumbnails (value) {
value = this.maxThumbnails = Math.floor(Math.max(value, 0))
this.$store.dispatch('setOption', { name: 'maxThumbnails', value })
} }
} }
} }

308
src/components/settings/settings.vue
View file

@ -36,12 +36,9 @@
<interface-language-switcher /> <interface-language-switcher />
</li> </li>
<li v-if="instanceSpecificPanelPresent"> <li v-if="instanceSpecificPanelPresent">
<input <Checkbox v-model="hideISP">
id="hideISP" {{ $t('settings.hide_isp') }}
v-model="hideISPLocal" </Checkbox>
type="checkbox"
>
<label for="hideISP">{{ $t('settings.hide_isp') }}</label>
</li> </li>
</ul> </ul>
</div> </div>
@ -49,58 +46,42 @@
<h2>{{ $t('nav.timeline') }}</h2> <h2>{{ $t('nav.timeline') }}</h2>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<input <Checkbox v-model="hideMutedPosts">
id="hideMutedPosts" {{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsLocalizedValue }) }}
v-model="hideMutedPostsLocal" </Checkbox>
type="checkbox"
>
<label for="hideMutedPosts">{{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsDefault }) }}</label>
</li> </li>
<li> <li>
<input <Checkbox v-model="collapseMessageWithSubject">
id="collapseMessageWithSubject" {{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectLocalizedValue }) }}
v-model="collapseMessageWithSubjectLocal" </Checkbox>
type="checkbox"
>
<label for="collapseMessageWithSubject">{{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectDefault }) }}</label>
</li> </li>
<li> <li>
<input <Checkbox v-model="streaming">
id="streaming" {{ $t('settings.streaming') }}
v-model="streamingLocal" </Checkbox>
type="checkbox"
>
<label for="streaming">{{ $t('settings.streaming') }}</label>
<ul <ul
class="setting-list suboptions" class="setting-list suboptions"
:class="[{disabled: !streamingLocal}]" :class="[{disabled: !streaming}]"
> >
<li> <li>
<input <Checkbox
id="pauseOnUnfocused" v-model="pauseOnUnfocused"
v-model="pauseOnUnfocusedLocal" :disabled="!streaming"
:disabled="!streamingLocal"
type="checkbox"
> >
<label for="pauseOnUnfocused">{{ $t('settings.pause_on_unfocused') }}</label> {{ $t('settings.pause_on_unfocused') }}
</Checkbox>
</li> </li>
</ul> </ul>
</li> </li>
<li> <li>
<input <Checkbox v-model="autoLoad">
id="autoload" {{ $t('settings.autoload') }}
v-model="autoLoadLocal" </Checkbox>
type="checkbox"
>
<label for="autoload">{{ $t('settings.autoload') }}</label>
</li> </li>
<li> <li>
<input <Checkbox v-model="hoverPreview">
id="hoverPreview" {{ $t('settings.reply_link_preview') }}
v-model="hoverPreviewLocal" </Checkbox>
type="checkbox"
>
<label for="hoverPreview">{{ $t('settings.reply_link_preview') }}</label>
</li> </li>
</ul> </ul>
</div> </div>
@ -109,24 +90,14 @@
<h2>{{ $t('settings.composing') }}</h2> <h2>{{ $t('settings.composing') }}</h2>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<input <Checkbox v-model="scopeCopy">
id="scopeCopy" {{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyLocalizedValue }) }}
v-model="scopeCopyLocal" </Checkbox>
type="checkbox"
>
<label for="scopeCopy">
{{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyDefault }) }}
</label>
</li> </li>
<li> <li>
<input <Checkbox v-model="alwaysShowSubjectInput">
id="subjectHide" {{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputLocalizedValue }) }}
v-model="alwaysShowSubjectInputLocal" </Checkbox>
type="checkbox"
>
<label for="subjectHide">
{{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputDefault }) }}
</label>
</li> </li>
<li> <li>
<div> <div>
@ -137,19 +108,19 @@
> >
<select <select
id="subjectLineBehavior" id="subjectLineBehavior"
v-model="subjectLineBehaviorLocal" v-model="subjectLineBehavior"
> >
<option value="email"> <option value="email">
{{ $t('settings.subject_line_email') }} {{ $t('settings.subject_line_email') }}
{{ subjectLineBehaviorDefault == 'email' ? $t('settings.instance_default_simple') : '' }} {{ subjectLineBehaviorDefaultValue == 'email' ? $t('settings.instance_default_simple') : '' }}
</option> </option>
<option value="masto"> <option value="masto">
{{ $t('settings.subject_line_mastodon') }} {{ $t('settings.subject_line_mastodon') }}
{{ subjectLineBehaviorDefault == 'mastodon' ? $t('settings.instance_default_simple') : '' }} {{ subjectLineBehaviorDefaultValue == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
</option> </option>
<option value="noop"> <option value="noop">
{{ $t('settings.subject_line_noop') }} {{ $t('settings.subject_line_noop') }}
{{ subjectLineBehaviorDefault == 'noop' ? $t('settings.instance_default_simple') : '' }} {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
</option> </option>
</select> </select>
<i class="icon-down-open" /> <i class="icon-down-open" />
@ -165,7 +136,7 @@
> >
<select <select
id="postContentType" id="postContentType"
v-model="postContentTypeLocal" v-model="postContentType"
> >
<option <option
v-for="postFormat in postFormats" v-for="postFormat in postFormats"
@ -173,7 +144,7 @@
:value="postFormat" :value="postFormat"
> >
{{ $t(`post_status.content_type["${postFormat}"]`) }} {{ $t(`post_status.content_type["${postFormat}"]`) }}
{{ postContentTypeDefault === postFormat ? $t('settings.instance_default_simple') : '' }} {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
</option> </option>
</select> </select>
<i class="icon-down-open" /> <i class="icon-down-open" />
@ -181,30 +152,19 @@
</div> </div>
</li> </li>
<li> <li>
<input <Checkbox v-model="minimalScopesMode">
id="minimalScopesMode" {{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeLocalizedValue }) }}
v-model="minimalScopesModeLocal" </Checkbox>
type="checkbox"
>
<label for="minimalScopesMode">
{{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeDefault }) }}
</label>
</li> </li>
<li> <li>
<input <Checkbox v-model="autohideFloatingPostButton">
id="autohideFloatingPostButton" {{ $t('settings.autohide_floating_post_button') }}
v-model="autohideFloatingPostButtonLocal" </Checkbox>
type="checkbox"
>
<label for="autohideFloatingPostButton">{{ $t('settings.autohide_floating_post_button') }}</label>
</li> </li>
<li> <li>
<input <Checkbox v-model="padEmoji">
id="padEmoji" {{ $t('settings.pad_emoji') }}
v-model="padEmojiLocal" </Checkbox>
type="checkbox"
>
<label for="padEmoji">{{ $t('settings.pad_emoji') }}</label>
</li> </li>
</ul> </ul>
</div> </div>
@ -213,23 +173,19 @@
<h2>{{ $t('settings.attachments') }}</h2> <h2>{{ $t('settings.attachments') }}</h2>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<input <Checkbox v-model="hideAttachments">
id="hideAttachments" {{ $t('settings.hide_attachments_in_tl') }}
v-model="hideAttachmentsLocal" </Checkbox>
type="checkbox"
>
<label for="hideAttachments">{{ $t('settings.hide_attachments_in_tl') }}</label>
</li> </li>
<li> <li>
<input <Checkbox v-model="hideAttachmentsInConv">
id="hideAttachmentsInConv" {{ $t('settings.hide_attachments_in_convo') }}
v-model="hideAttachmentsInConvLocal" </Checkbox>
type="checkbox"
>
<label for="hideAttachmentsInConv">{{ $t('settings.hide_attachments_in_convo') }}</label>
</li> </li>
<li> <li>
<label for="maxThumbnails">{{ $t('settings.max_thumbnails') }}</label> <label for="maxThumbnails">
{{ $t('settings.max_thumbnails') }}
</label>
<input <input
id="maxThumbnails" id="maxThumbnails"
v-model.number="maxThumbnails" v-model.number="maxThumbnails"
@ -240,60 +196,48 @@
> >
</li> </li>
<li> <li>
<input <Checkbox v-model="hideNsfw">
id="hideNsfw" {{ $t('settings.nsfw_clickthrough') }}
v-model="hideNsfwLocal" </Checkbox>
type="checkbox"
>
<label for="hideNsfw">{{ $t('settings.nsfw_clickthrough') }}</label>
</li> </li>
<ul class="setting-list suboptions"> <ul class="setting-list suboptions">
<li> <li>
<input <Checkbox
id="preloadImage"
v-model="preloadImage" v-model="preloadImage"
:disabled="!hideNsfwLocal" :disabled="!hideNsfw"
type="checkbox"
> >
<label for="preloadImage">{{ $t('settings.preload_images') }}</label> {{ $t('settings.preload_images') }}
</Checkbox>
</li> </li>
<li> <li>
<input <Checkbox
id="useOneClickNsfw"
v-model="useOneClickNsfw" v-model="useOneClickNsfw"
:disabled="!hideNsfwLocal" :disabled="!hideNsfw"
type="checkbox"
> >
<label for="useOneClickNsfw">{{ $t('settings.use_one_click_nsfw') }}</label> {{ $t('settings.use_one_click_nsfw') }}
</Checkbox>
</li> </li>
</ul> </ul>
<li> <li>
<input <Checkbox v-model="stopGifs">
id="stopGifs" {{ $t('settings.stop_gifs') }}
v-model="stopGifs" </Checkbox>
type="checkbox"
>
<label for="stopGifs">{{ $t('settings.stop_gifs') }}</label>
</li> </li>
<li> <li>
<input <Checkbox v-model="loopVideo">
id="loopVideo" {{ $t('settings.loop_video') }}
v-model="loopVideoLocal" </Checkbox>
type="checkbox"
>
<label for="loopVideo">{{ $t('settings.loop_video') }}</label>
<ul <ul
class="setting-list suboptions" class="setting-list suboptions"
:class="[{disabled: !streamingLocal}]" :class="[{disabled: !streaming}]"
> >
<li> <li>
<input <Checkbox
id="loopVideoSilentOnly" v-model="loopVideoSilentOnly"
v-model="loopVideoSilentOnlyLocal" :disabled="!loopVideo || !loopSilentAvailable"
:disabled="!loopVideoLocal || !loopSilentAvailable"
type="checkbox"
> >
<label for="loopVideoSilentOnly">{{ $t('settings.loop_video_silent_only') }}</label> {{ $t('settings.loop_video_silent_only') }}
</Checkbox>
<div <div
v-if="!loopSilentAvailable" v-if="!loopSilentAvailable"
class="unavailable" class="unavailable"
@ -304,20 +248,14 @@
</ul> </ul>
</li> </li>
<li> <li>
<input <Checkbox v-model="playVideosInModal">
id="playVideosInModal" {{ $t('settings.play_videos_in_modal') }}
v-model="playVideosInModal" </Checkbox>
type="checkbox"
>
<label for="playVideosInModal">{{ $t('settings.play_videos_in_modal') }}</label>
</li> </li>
<li> <li>
<input <Checkbox v-model="useContainFit">
id="useContainFit" {{ $t('settings.use_contain_fit') }}
v-model="useContainFit" </Checkbox>
type="checkbox"
>
<label for="useContainFit">{{ $t('settings.use_contain_fit') }}</label>
</li> </li>
</ul> </ul>
</div> </div>
@ -326,14 +264,9 @@
<h2>{{ $t('settings.notifications') }}</h2> <h2>{{ $t('settings.notifications') }}</h2>
<ul class="setting-list"> <ul class="setting-list">
<li> <li>
<input <Checkbox v-model="webPushNotifications">
id="webPushNotifications"
v-model="webPushNotificationsLocal"
type="checkbox"
>
<label for="webPushNotifications">
{{ $t('settings.enable_web_push_notifications') }} {{ $t('settings.enable_web_push_notifications') }}
</label> </Checkbox>
</li> </li>
</ul> </ul>
</div> </div>
@ -351,44 +284,24 @@
<span class="label">{{ $t('settings.notification_visibility') }}</span> <span class="label">{{ $t('settings.notification_visibility') }}</span>
<ul class="option-list"> <ul class="option-list">
<li> <li>
<input <Checkbox v-model="notificationVisibility.likes">
id="notification-visibility-likes"
v-model="notificationVisibilityLocal.likes"
type="checkbox"
>
<label for="notification-visibility-likes">
{{ $t('settings.notification_visibility_likes') }} {{ $t('settings.notification_visibility_likes') }}
</label> </Checkbox>
</li> </li>
<li> <li>
<input <Checkbox v-model="notificationVisibility.repeats">
id="notification-visibility-repeats"
v-model="notificationVisibilityLocal.repeats"
type="checkbox"
>
<label for="notification-visibility-repeats">
{{ $t('settings.notification_visibility_repeats') }} {{ $t('settings.notification_visibility_repeats') }}
</label> </Checkbox>
</li> </li>
<li> <li>
<input <Checkbox v-model="notificationVisibility.follows">
id="notification-visibility-follows"
v-model="notificationVisibilityLocal.follows"
type="checkbox"
>
<label for="notification-visibility-follows">
{{ $t('settings.notification_visibility_follows') }} {{ $t('settings.notification_visibility_follows') }}
</label> </Checkbox>
</li> </li>
<li> <li>
<input <Checkbox v-model="notificationVisibility.mentions">
id="notification-visibility-mentions"
v-model="notificationVisibilityLocal.mentions"
type="checkbox"
>
<label for="notification-visibility-mentions">
{{ $t('settings.notification_visibility_mentions') }} {{ $t('settings.notification_visibility_mentions') }}
</label> </Checkbox>
</li> </li>
</ul> </ul>
</div> </div>
@ -400,7 +313,7 @@
> >
<select <select
id="replyVisibility" id="replyVisibility"
v-model="replyVisibilityLocal" v-model="replyVisibility"
> >
<option <option
value="all" value="all"
@ -413,24 +326,14 @@
</label> </label>
</div> </div>
<div> <div>
<input <Checkbox v-model="hidePostStats">
id="hidePostStats" {{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsLocalizedValue }) }}
v-model="hidePostStatsLocal" </Checkbox>
type="checkbox"
>
<label for="hidePostStats">
{{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsDefault }) }}
</label>
</div> </div>
<div> <div>
<input <Checkbox v-model="hideUserStats">
id="hideUserStats" {{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsLocalizedValue }) }}
v-model="hideUserStatsLocal" </Checkbox>
type="checkbox"
>
<label for="hideUserStats">
{{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsDefault }) }}
</label>
</div> </div>
</div> </div>
<div class="setting-item"> <div class="setting-item">
@ -442,14 +345,9 @@
/> />
</div> </div>
<div> <div>
<input <Checkbox v-model="hideFilteredStatuses">
id="hideFilteredStatuses" {{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesLocalizedValue }) }}
v-model="hideFilteredStatusesLocal" </Checkbox>
type="checkbox"
>
<label for="hideFilteredStatuses">
{{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesDefault }) }}
</label>
</div> </div>
</div> </div>
</div> </div>

46
src/components/status/status.js
View file

@ -16,6 +16,7 @@ import fileType from 'src/services/file_type/file_type.service'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
import { mentionMatchesUrl, extractTagFromUrl } from 'src/services/matcher/matcher.service.js' import { mentionMatchesUrl, extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
import { filter, unescape, uniqBy } from 'lodash' import { filter, unescape, uniqBy } from 'lodash'
import { mapGetters } from 'vuex'
const Status = { const Status = {
name: 'Status', name: 'Status',
@ -41,20 +42,16 @@ const Status = {
showingTall: this.inConversation && this.focused, showingTall: this.inConversation && this.focused,
showingLongSubject: false, showingLongSubject: false,
error: null, error: null,
expandingSubject: typeof this.$store.state.config.collapseMessageWithSubject === 'undefined' expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject,
? !this.$store.state.instance.collapseMessageWithSubject
: !this.$store.state.config.collapseMessageWithSubject,
betterShadow: this.$store.state.interface.browserSupport.cssFilter betterShadow: this.$store.state.interface.browserSupport.cssFilter
} }
}, },
computed: { computed: {
localCollapseSubjectDefault () { localCollapseSubjectDefault () {
return typeof this.$store.state.config.collapseMessageWithSubject === 'undefined' return this.mergedConfig.collapseMessageWithSubject
? this.$store.state.instance.collapseMessageWithSubject
: this.$store.state.config.collapseMessageWithSubject
}, },
muteWords () { muteWords () {
return this.$store.state.config.muteWords return this.mergedConfig.muteWords
}, },
repeaterClass () { repeaterClass () {
const user = this.statusoid.user const user = this.statusoid.user
@ -69,18 +66,18 @@ const Status = {
}, },
repeaterStyle () { repeaterStyle () {
const user = this.statusoid.user const user = this.statusoid.user
const highlight = this.$store.state.config.highlight const highlight = this.mergedConfig.highlight
return highlightStyle(highlight[user.screen_name]) return highlightStyle(highlight[user.screen_name])
}, },
userStyle () { userStyle () {
if (this.noHeading) return if (this.noHeading) return
const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
const highlight = this.$store.state.config.highlight const highlight = this.mergedConfig.highlight
return highlightStyle(highlight[user.screen_name]) return highlightStyle(highlight[user.screen_name])
}, },
hideAttachments () { hideAttachments () {
return (this.$store.state.config.hideAttachments && !this.inConversation) || return (this.mergedConfig.hideAttachments && !this.inConversation) ||
(this.$store.state.config.hideAttachmentsInConv && this.inConversation) (this.mergedConfig.hideAttachmentsInConv && this.inConversation)
}, },
userProfileLink () { userProfileLink () {
return this.generateUserProfileLink(this.status.user.id, this.status.user.screen_name) return this.generateUserProfileLink(this.status.user.id, this.status.user.screen_name)
@ -119,9 +116,7 @@ const Status = {
}, },
muted () { return !this.unmuted && ((!this.inProfile && this.status.user.muted) || (!this.inConversation && this.status.thread_muted) || this.muteWordHits.length > 0) }, muted () { return !this.unmuted && ((!this.inProfile && this.status.user.muted) || (!this.inConversation && this.status.thread_muted) || this.muteWordHits.length > 0) },
hideFilteredStatuses () { hideFilteredStatuses () {
return typeof this.$store.state.config.hideFilteredStatuses === 'undefined' return this.mergedConfig.hideFilteredStatuses
? this.$store.state.instance.hideFilteredStatuses
: this.$store.state.config.hideFilteredStatuses
}, },
hideStatus () { hideStatus () {
return (this.hideReply || this.deleted) || (this.muted && this.hideFilteredStatuses) return (this.hideReply || this.deleted) || (this.muted && this.hideFilteredStatuses)
@ -162,7 +157,7 @@ const Status = {
} }
}, },
hideReply () { hideReply () {
if (this.$store.state.config.replyVisibility === 'all') { if (this.mergedConfig.replyVisibility === 'all') {
return false return false
} }
if (this.inConversation || !this.isReply) { if (this.inConversation || !this.isReply) {
@ -174,7 +169,7 @@ const Status = {
if (this.status.type === 'retweet') { if (this.status.type === 'retweet') {
return false return false
} }
const checkFollowing = this.$store.state.config.replyVisibility === 'following' const checkFollowing = this.mergedConfig.replyVisibility === 'following'
for (var i = 0; i < this.status.attentions.length; ++i) { for (var i = 0; i < this.status.attentions.length; ++i) {
if (this.status.user.id === this.status.attentions[i].id) { if (this.status.user.id === this.status.attentions[i].id) {
continue continue
@ -219,9 +214,7 @@ const Status = {
replySubject () { replySubject () {
if (!this.status.summary) return '' if (!this.status.summary) return ''
const decodedSummary = unescape(this.status.summary) const decodedSummary = unescape(this.status.summary)
const behavior = typeof this.$store.state.config.subjectLineBehavior === 'undefined' const behavior = this.mergedConfig.subjectLineBehavior
? this.$store.state.instance.subjectLineBehavior
: this.$store.state.config.subjectLineBehavior
const startsWithRe = decodedSummary.match(/^re[: ]/i) const startsWithRe = decodedSummary.match(/^re[: ]/i)
if ((behavior !== 'noop' && startsWithRe) || behavior === 'masto') { if ((behavior !== 'noop' && startsWithRe) || behavior === 'masto') {
return decodedSummary return decodedSummary
@ -232,8 +225,8 @@ const Status = {
} }
}, },
attachmentSize () { attachmentSize () {
if ((this.$store.state.config.hideAttachments && !this.inConversation) || if ((this.mergedConfig.hideAttachments && !this.inConversation) ||
(this.$store.state.config.hideAttachmentsInConv && this.inConversation) || (this.mergedConfig.hideAttachmentsInConv && this.inConversation) ||
(this.status.attachments.length > this.maxThumbnails)) { (this.status.attachments.length > this.maxThumbnails)) {
return 'hide' return 'hide'
} else if (this.compact) { } else if (this.compact) {
@ -245,7 +238,7 @@ const Status = {
if (this.attachmentSize === 'hide') { if (this.attachmentSize === 'hide') {
return [] return []
} }
return this.$store.state.config.playVideosInModal return this.mergedConfig.playVideosInModal
? ['image', 'video'] ? ['image', 'video']
: ['image'] : ['image']
}, },
@ -260,7 +253,7 @@ const Status = {
) )
}, },
maxThumbnails () { maxThumbnails () {
return this.$store.state.config.maxThumbnails return this.mergedConfig.maxThumbnails
}, },
contentHtml () { contentHtml () {
if (!this.status.summary_html) { if (!this.status.summary_html) {
@ -283,10 +276,9 @@ const Status = {
return this.status.tags.filter(tagObj => tagObj.hasOwnProperty('name')).map(tagObj => tagObj.name).join(' ') return this.status.tags.filter(tagObj => tagObj.hasOwnProperty('name')).map(tagObj => tagObj.name).join(' ')
}, },
hidePostStats () { hidePostStats () {
return typeof this.$store.state.config.hidePostStats === 'undefined' return this.mergedConfig.hidePostStats
? this.$store.state.instance.hidePostStats },
: this.$store.state.config.hidePostStats ...mapGetters(['mergedConfig'])
}
}, },
components: { components: {
Attachment, Attachment,

2
src/components/still-image/still-image.js
View file

@ -8,7 +8,7 @@ const StillImage = {
], ],
data () { data () {
return { return {
stopGifs: this.$store.state.config.stopGifs stopGifs: this.$store.getters.mergedConfig.stopGifs
} }
}, },
computed: { computed: {

12
src/components/style_switcher/style_switcher.js
View file

@ -10,6 +10,7 @@ import ContrastRatio from '../contrast_ratio/contrast_ratio.vue'
import TabSwitcher from '../tab_switcher/tab_switcher.js' import TabSwitcher from '../tab_switcher/tab_switcher.js'
import Preview from './preview.vue' import Preview from './preview.vue'
import ExportImport from '../export_import/export_import.vue' import ExportImport from '../export_import/export_import.vue'
import Checkbox from '../checkbox/checkbox.vue'
// List of color values used in v1 // List of color values used in v1
const v1OnlyNames = [ const v1OnlyNames = [
@ -27,7 +28,7 @@ export default {
data () { data () {
return { return {
availableStyles: [], availableStyles: [],
selected: this.$store.state.config.theme, selected: this.$store.getters.mergedConfig.theme,
previewShadows: {}, previewShadows: {},
previewColors: {}, previewColors: {},
@ -111,7 +112,7 @@ export default {
}) })
}, },
mounted () { mounted () {
this.normalizeLocalState(this.$store.state.config.customTheme) this.normalizeLocalState(this.$store.getters.mergedConfig.customTheme)
if (typeof this.shadowSelected === 'undefined') { if (typeof this.shadowSelected === 'undefined') {
this.shadowSelected = this.shadowsAvailable[0] this.shadowSelected = this.shadowsAvailable[0]
} }
@ -338,7 +339,8 @@ export default {
FontControl, FontControl,
TabSwitcher, TabSwitcher,
Preview, Preview,
ExportImport ExportImport,
Checkbox
}, },
methods: { methods: {
setCustomTheme () { setCustomTheme () {
@ -365,9 +367,9 @@ export default {
return version >= 1 || version <= 2 return version >= 1 || version <= 2
}, },
clearAll () { clearAll () {
const state = this.$store.state.config.customTheme const state = this.$store.getters.mergedConfig.customTheme
const version = state.colors ? 2 : 'l1' const version = state.colors ? 2 : 'l1'
this.normalizeLocalState(this.$store.state.config.customTheme, version) this.normalizeLocalState(this.$store.getters.mergedConfig.customTheme, version)
}, },
// Clears all the extra stuff when loading V1 theme // Clears all the extra stuff when loading V1 theme

45
src/components/style_switcher/style_switcher.vue
View file

@ -42,44 +42,29 @@
</div> </div>
<div class="save-load-options"> <div class="save-load-options">
<span class="keep-option"> <span class="keep-option">
<input <Checkbox v-model="keepColor">
id="keep-color" {{ $t('settings.style.switcher.keep_color') }}
v-model="keepColor" </Checkbox>
type="checkbox"
>
<label for="keep-color">{{ $t('settings.style.switcher.keep_color') }}</label>
</span> </span>
<span class="keep-option"> <span class="keep-option">
<input <Checkbox v-model="keepShadows">
id="keep-shadows" {{ $t('settings.style.switcher.keep_shadows') }}
v-model="keepShadows" </Checkbox>
type="checkbox"
>
<label for="keep-shadows">{{ $t('settings.style.switcher.keep_shadows') }}</label>
</span> </span>
<span class="keep-option"> <span class="keep-option">
<input <Checkbox v-model="keepOpacity">
id="keep-opacity" {{ $t('settings.style.switcher.keep_opacity') }}
v-model="keepOpacity" </Checkbox>
type="checkbox"
>
<label for="keep-opacity">{{ $t('settings.style.switcher.keep_opacity') }}</label>
</span> </span>
<span class="keep-option"> <span class="keep-option">
<input <Checkbox v-model="keepRoundness">
id="keep-roundness" {{ $t('settings.style.switcher.keep_roundness') }}
v-model="keepRoundness" </Checkbox>
type="checkbox"
>
<label for="keep-roundness">{{ $t('settings.style.switcher.keep_roundness') }}</label>
</span> </span>
<span class="keep-option"> <span class="keep-option">
<input <Checkbox v-model="keepFonts">
id="keep-fonts" {{ $t('settings.style.switcher.keep_fonts') }}
v-model="keepFonts" </Checkbox>
type="checkbox"
>
<label for="keep-fonts">{{ $t('settings.style.switcher.keep_fonts') }}</label>
</span> </span>
<p>{{ $t('settings.style.switcher.save_load_hint') }}</p> <p>{{ $t('settings.style.switcher.save_load_hint') }}</p>
</div> </div>

6
src/components/timeline/timeline.js
View file

@ -141,7 +141,7 @@ const Timeline = {
const bodyBRect = document.body.getBoundingClientRect() const bodyBRect = document.body.getBoundingClientRect()
const height = Math.max(bodyBRect.height, -(bodyBRect.y)) const height = Math.max(bodyBRect.height, -(bodyBRect.y))
if (this.timeline.loading === false && if (this.timeline.loading === false &&
this.$store.state.config.autoLoad && this.$store.getters.mergedConfig.autoLoad &&
this.$el.offsetHeight > 0 && this.$el.offsetHeight > 0 &&
(window.innerHeight + window.pageYOffset) >= (height - 750)) { (window.innerHeight + window.pageYOffset) >= (height - 750)) {
this.fetchOlderStatuses() this.fetchOlderStatuses()
@ -153,7 +153,7 @@ const Timeline = {
}, },
watch: { watch: {
newStatusCount (count) { newStatusCount (count) {
if (!this.$store.state.config.streaming) { if (!this.$store.getters.mergedConfig.streaming) {
return return
} }
if (count > 0) { if (count > 0) {
@ -162,7 +162,7 @@ const Timeline = {
const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0) const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
if (top < 15 && if (top < 15 &&
!this.paused && !this.paused &&
!(this.unfocused && this.$store.state.config.pauseOnUnfocused) !(this.unfocused && this.$store.getters.mergedConfig.pauseOnUnfocused)
) { ) {
this.showNewStatuses() this.showNewStatuses()
} else { } else {

22
src/components/user_card/user_card.js
View file

@ -6,6 +6,7 @@ import ModerationTools from '../moderation_tools/moderation_tools.vue'
import AccountActions from '../account_actions/account_actions.vue' import AccountActions from '../account_actions/account_actions.vue'
import { hex2rgb } from '../../services/color_convert/color_convert.js' import { hex2rgb } from '../../services/color_convert/color_convert.js'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import { mapGetters } from 'vuex'
export default { export default {
props: [ props: [
@ -14,9 +15,6 @@ export default {
data () { data () {
return { return {
followRequestInProgress: false, followRequestInProgress: false,
hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined'
? this.$store.state.instance.hideUserStats
: this.$store.state.config.hideUserStats,
betterShadow: this.$store.state.interface.browserSupport.cssFilter betterShadow: this.$store.state.interface.browserSupport.cssFilter
} }
}, },
@ -32,9 +30,9 @@ export default {
}] }]
}, },
style () { style () {
const color = this.$store.state.config.customTheme.colors const color = this.$store.getters.mergedConfig.customTheme.colors
? this.$store.state.config.customTheme.colors.bg // v2 ? this.$store.getters.mergedConfig.customTheme.colors.bg // v2
: this.$store.state.config.colors.bg // v1 : this.$store.getters.mergedConfig.colors.bg // v1
if (color) { if (color) {
const rgb = (typeof color === 'string') ? hex2rgb(color) : color const rgb = (typeof color === 'string') ? hex2rgb(color) : color
@ -66,21 +64,22 @@ export default {
}, },
userHighlightType: { userHighlightType: {
get () { get () {
const data = this.$store.state.config.highlight[this.user.screen_name] const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
return (data && data.type) || 'disabled' return (data && data.type) || 'disabled'
}, },
set (type) { set (type) {
const data = this.$store.state.config.highlight[this.user.screen_name] const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
if (type !== 'disabled') { if (type !== 'disabled') {
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: (data && data.color) || '#FFFFFF', type }) this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: (data && data.color) || '#FFFFFF', type })
} else { } else {
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined }) this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
} }
} },
...mapGetters(['mergedConfig'])
}, },
userHighlightColor: { userHighlightColor: {
get () { get () {
const data = this.$store.state.config.highlight[this.user.screen_name] const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
return data && data.color return data && data.color
}, },
set (color) { set (color) {
@ -93,7 +92,8 @@ export default {
const validRole = rights.admin || rights.moderator const validRole = rights.admin || rights.moderator
const roleTitle = rights.admin ? 'admin' : 'moderator' const roleTitle = rights.admin ? 'admin' : 'moderator'
return validRole && roleTitle return validRole && roleTitle
} },
...mapGetters(['mergedConfig'])
}, },
components: { components: {
UserAvatar, UserAvatar,

4
src/components/user_card/user_card.vue
View file

@ -84,7 +84,7 @@
>{{ visibleRole }}</span> >{{ visibleRole }}</span>
<span v-if="user.locked"><i class="icon icon-lock" /></span> <span v-if="user.locked"><i class="icon icon-lock" /></span>
<span <span
v-if="!hideUserStatsLocal && !hideBio" v-if="!mergedConfig.hideUserStats && !hideBio"
class="dailyAvg" class="dailyAvg"
>{{ dailyAvg }} {{ $t('user_card.per_day') }}</span> >{{ dailyAvg }} {{ $t('user_card.per_day') }}</span>
</div> </div>
@ -193,7 +193,7 @@
class="panel-body" class="panel-body"
> >
<div <div
v-if="!hideUserStatsLocal && switcher" v-if="!mergedConfig.hideUserStats && switcher"
class="user-counts" class="user-counts"
> >
<div <div

4
src/components/user_settings/user_settings.js
View file

@ -17,6 +17,7 @@ import Autosuggest from '../autosuggest/autosuggest.vue'
import Importer from '../importer/importer.vue' import Importer from '../importer/importer.vue'
import Exporter from '../exporter/exporter.vue' import Exporter from '../exporter/exporter.vue'
import withSubscription from '../../hocs/with_subscription/with_subscription' import withSubscription from '../../hocs/with_subscription/with_subscription'
import Checkbox from '../checkbox/checkbox.vue'
import Mfa from './mfa.vue' import Mfa from './mfa.vue'
const BlockList = withSubscription({ const BlockList = withSubscription({
@ -82,7 +83,8 @@ const UserSettings = {
ProgressButton, ProgressButton,
Importer, Importer,
Exporter, Exporter,
Mfa Mfa,
Checkbox
}, },
computed: { computed: {
user () { user () {

116
src/components/user_settings/user_settings.vue
View file

@ -53,12 +53,9 @@
/> />
</EmojiInput> </EmojiInput>
<p> <p>
<input <Checkbox v-model="newLocked">
id="account-locked" {{ $t('settings.lock_account_description') }}
v-model="newLocked" </Checkbox>
type="checkbox"
>
<label for="account-locked">{{ $t('settings.lock_account_description') }}</label>
</p> </p>
<div> <div>
<label for="default-vis">{{ $t('settings.default_vis') }}</label> <label for="default-vis">{{ $t('settings.default_vis') }}</label>
@ -75,69 +72,52 @@
</div> </div>
</div> </div>
<p> <p>
<input <Checkbox v-model="newNoRichText">
id="account-no-rich-text" {{ $t('settings.no_rich_text_description') }}
v-model="newNoRichText" </Checkbox>
type="checkbox"
>
<label for="account-no-rich-text">{{ $t('settings.no_rich_text_description') }}</label>
</p> </p>
<p> <p>
<input <Checkbox v-model="hideFollows">
id="account-hide-follows" {{ $t('settings.hide_follows_description') }}
v-model="hideFollows" </Checkbox>
type="checkbox"
>
<label for="account-hide-follows">{{ $t('settings.hide_follows_description') }}</label>
</p> </p>
<p class="setting-subitem"> <p class="setting-subitem">
<input <Checkbox
id="account-hide-follows-count"
v-model="hideFollowsCount" v-model="hideFollowsCount"
type="checkbox"
:disabled="!hideFollows" :disabled="!hideFollows"
> >
<label for="account-hide-follows-count">{{ $t('settings.hide_follows_count_description') }}</label> {{ $t('settings.hide_follows_count_description') }}
</Checkbox>
</p> </p>
<p> <p>
<input <Checkbox
id="account-hide-followers"
v-model="hideFollowers" v-model="hideFollowers"
type="checkbox"
> >
<label for="account-hide-followers">{{ $t('settings.hide_followers_description') }}</label> {{ $t('settings.hide_followers_description') }}
</Checkbox>
</p> </p>
<p class="setting-subitem"> <p class="setting-subitem">
<input <Checkbox
id="account-hide-followers-count"
v-model="hideFollowersCount" v-model="hideFollowersCount"
type="checkbox"
:disabled="!hideFollowers" :disabled="!hideFollowers"
> >
<label for="account-hide-followers-count">{{ $t('settings.hide_followers_count_description') }}</label> {{ $t('settings.hide_followers_count_description') }}
</Checkbox>
</p> </p>
<p> <p>
<input <Checkbox v-model="showRole">
id="account-show-role" <template v-if="role === 'admin'">
v-model="showRole" {{ $t('settings.show_admin_badge') }}
type="checkbox" </template>
> <template v-if="role === 'moderator'">
<label {{ $t('settings.show_moderator_badge') }}
v-if="role === 'admin'" </template>
for="account-show-role" </Checkbox>
>{{ $t('settings.show_admin_badge') }}</label>
<label
v-if="role === 'moderator'"
for="account-show-role"
>{{ $t('settings.show_moderator_badge') }}</label>
</p> </p>
<p> <p>
<input <Checkbox v-model="discoverable">
id="discoverable" {{ $t('settings.discoverable') }}
v-model="discoverable" </Checkbox>
type="checkbox"
>
<label for="discoverable">{{ $t('settings.discoverable') }}</label>
</p> </p>
<button <button
:disabled="newName && newName.length === 0" :disabled="newName && newName.length === 0"
@ -367,44 +347,24 @@
<span class="label">{{ $t('settings.notification_setting') }}</span> <span class="label">{{ $t('settings.notification_setting') }}</span>
<ul class="option-list"> <ul class="option-list">
<li> <li>
<input <Checkbox v-model="notificationSettings.follows">
id="notification-setting-follows"
v-model="notificationSettings.follows"
type="checkbox"
>
<label for="notification-setting-follows">
{{ $t('settings.notification_setting_follows') }} {{ $t('settings.notification_setting_follows') }}
</label> </Checkbox>
</li> </li>
<li> <li>
<input <Checkbox v-model="notificationSettings.followers">
id="notification-setting-followers"
v-model="notificationSettings.followers"
type="checkbox"
>
<label for="notification-setting-followers">
{{ $t('settings.notification_setting_followers') }} {{ $t('settings.notification_setting_followers') }}
</label> </Checkbox>
</li> </li>
<li> <li>
<input <Checkbox v-model="notificationSettings.non_follows">
id="notification-setting-non-follows"
v-model="notificationSettings.non_follows"
type="checkbox"
>
<label for="notification-setting-non-follows">
{{ $t('settings.notification_setting_non_follows') }} {{ $t('settings.notification_setting_non_follows') }}
</label> </Checkbox>
</li> </li>
<li> <li>
<input <Checkbox v-model="notificationSettings.non_followers">
id="notification-setting-non-followers"
v-model="notificationSettings.non_followers"
type="checkbox"
>
<label for="notification-setting-non-followers">
{{ $t('settings.notification_setting_non_followers') }} {{ $t('settings.notification_setting_non_followers') }}
</label> </Checkbox>
</li> </li>
</ul> </ul>
</div> </div>

8
src/components/video_attachment/video_attachment.js
View file

@ -3,7 +3,7 @@ const VideoAttachment = {
props: ['attachment', 'controls'], props: ['attachment', 'controls'],
data () { data () {
return { return {
loopVideo: this.$store.state.config.loopVideo loopVideo: this.$store.getters.mergedConfig.loopVideo
} }
}, },
methods: { methods: {
@ -12,16 +12,16 @@ const VideoAttachment = {
if (typeof target.webkitAudioDecodedByteCount !== 'undefined') { if (typeof target.webkitAudioDecodedByteCount !== 'undefined') {
// non-zero if video has audio track // non-zero if video has audio track
if (target.webkitAudioDecodedByteCount > 0) { if (target.webkitAudioDecodedByteCount > 0) {
this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly this.loopVideo = this.loopVideo && !this.$store.getters.mergedConfig.loopVideoSilentOnly
} }
} else if (typeof target.mozHasAudio !== 'undefined') { } else if (typeof target.mozHasAudio !== 'undefined') {
// true if video has audio track // true if video has audio track
if (target.mozHasAudio) { if (target.mozHasAudio) {
this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly this.loopVideo = this.loopVideo && !this.$store.getters.mergedConfig.loopVideoSilentOnly
} }
} else if (typeof target.audioTracks !== 'undefined') { } else if (typeof target.audioTracks !== 'undefined') {
if (target.audioTracks.length > 0) { if (target.audioTracks.length > 0) {
this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly this.loopVideo = this.loopVideo && !this.$store.getters.mergedConfig.loopVideoSilentOnly
} }
} }
} }

31
src/modules/config.js
View file

@ -3,8 +3,9 @@ import { setPreset, applyTheme } from '../services/style_setter/style_setter.js'
const browserLocale = (window.navigator.language || 'en').split('-')[0] const browserLocale = (window.navigator.language || 'en').split('-')[0]
const defaultState = { export const defaultState = {
colors: {}, colors: {},
// bad name: actually hides posts of muted USERS
hideMutedPosts: undefined, // instance default hideMutedPosts: undefined, // instance default
collapseMessageWithSubject: undefined, // instance default collapseMessageWithSubject: undefined, // instance default
padEmoji: true, padEmoji: true,
@ -37,11 +38,37 @@ const defaultState = {
subjectLineBehavior: undefined, // instance default subjectLineBehavior: undefined, // instance default
alwaysShowSubjectInput: undefined, // instance default alwaysShowSubjectInput: undefined, // instance default
postContentType: undefined, // instance default postContentType: undefined, // instance default
minimalScopesMode: undefined // instance default minimalScopesMode: undefined, // instance default
// This hides statuses filtered via a word filter
hideFilteredStatuses: undefined, // instance default
playVideosInModal: false,
useOneClickNsfw: false,
useContainFit: false,
hidePostStats: undefined, // instance default
hideUserStats: undefined // instance default
} }
// caching the instance default properties
export const instanceDefaultProperties = Object.entries(defaultState)
.filter(([key, value]) => value === undefined)
.map(([key, value]) => key)
const config = { const config = {
state: defaultState, state: defaultState,
getters: {
mergedConfig (state, getters, rootState, rootGetters) {
const { instance } = rootState
return {
...state,
...instanceDefaultProperties
.map(key => [key, state[key] === undefined
? instance[key]
: state[key]
])
.reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
}
}
},
mutations: { mutations: {
setOption (state, { name, value }) { setOption (state, { name, value }) {
set(state, name, value) set(state, name, value)

8
src/modules/instance.js
View file

@ -1,5 +1,6 @@
import { set } from 'vue' import { set } from 'vue'
import { setPreset } from '../services/style_setter/style_setter.js' import { setPreset } from '../services/style_setter/style_setter.js'
import { instanceDefaultProperties } from './config.js'
const defaultState = { const defaultState = {
// Stuff from static/config.json and apiConfig // Stuff from static/config.json and apiConfig
@ -72,6 +73,13 @@ const instance = {
} }
} }
}, },
getters: {
instanceDefaultConfig (state) {
return instanceDefaultProperties
.map(key => [key, state[key]])
.reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
}
},
actions: { actions: {
setInstanceOption ({ commit, dispatch }, { name, value }) { setInstanceOption ({ commit, dispatch }, { name, value }) {
commit('setInstanceOption', { name, value }) commit('setInstanceOption', { name, value })

5
src/services/notifications_fetcher/notifications_fetcher.service.js
View file

@ -8,11 +8,10 @@ const update = ({ store, notifications, older }) => {
const fetchAndUpdate = ({ store, credentials, older = false }) => { const fetchAndUpdate = ({ store, credentials, older = false }) => {
const args = { credentials } const args = { credentials }
const { getters } = store
const rootState = store.rootState || store.state const rootState = store.rootState || store.state
const timelineData = rootState.statuses.notifications const timelineData = rootState.statuses.notifications
const hideMutedPosts = typeof rootState.config.hideMutedPosts === 'undefined' const hideMutedPosts = getters.mergedConfig.hideMutedPosts
? rootState.instance.hideMutedPosts
: rootState.config.hideMutedPosts
args['withMuted'] = !hideMutedPosts args['withMuted'] = !hideMutedPosts

16
src/services/timeline_fetcher/timeline_fetcher.service.js
View file

@ -15,13 +15,21 @@ const update = ({ store, statuses, timeline, showImmediately, userId }) => {
}) })
} }
const fetchAndUpdate = ({ store, credentials, timeline = 'friends', older = false, showImmediately = false, userId = false, tag = false, until }) => { const fetchAndUpdate = ({
store,
credentials,
timeline = 'friends',
older = false,
showImmediately = false,
userId = false,
tag = false,
until
}) => {
const args = { timeline, credentials } const args = { timeline, credentials }
const rootState = store.rootState || store.state const rootState = store.rootState || store.state
const { getters } = store
const timelineData = rootState.statuses.timelines[camelCase(timeline)] const timelineData = rootState.statuses.timelines[camelCase(timeline)]
const hideMutedPosts = typeof rootState.config.hideMutedPosts === 'undefined' const hideMutedPosts = getters.mergedConfig.hideMutedPosts
? rootState.instance.hideMutedPosts
: rootState.config.hideMutedPosts
if (older) { if (older) {
args['until'] = until || timelineData.minId args['until'] = until || timelineData.minId

4
test/unit/specs/components/emoji_input.spec.js
View file

@ -12,8 +12,8 @@ const generateInput = (value, padEmoji = true) => {
}, },
mocks: { mocks: {
$store: { $store: {
state: { getters: {
config: { mergedConfig: {
padEmoji padEmoji
} }
} }

16
test/unit/specs/components/user_profile.spec.js
View file

@ -18,7 +18,14 @@ const actions = {
} }
const testGetters = { const testGetters = {
findUser: state => getters.findUser(state.users) findUser: state => getters.findUser(state.users),
mergedConfig: state => ({
colors: '',
highlight: {},
customTheme: {
colors: []
}
})
} }
const localUser = { const localUser = {
@ -45,13 +52,6 @@ const externalProfileStore = new Vuex.Store({
interface: { interface: {
browserSupport: '' browserSupport: ''
}, },
config: {
colors: '',
highlight: {},
customTheme: {
colors: []
}
},
instance: { instance: {
hideUserStats: true hideUserStats: true
}, },