Initial work on highlighting changed settings. Some refactoring to

simplify addition of new settings
This commit is contained in:
Henry Jameson 2020-10-01 01:43:07 +03:00
parent 0c0722a092
commit a463959a36
7 changed files with 161 additions and 111 deletions

View File

@ -0,0 +1,57 @@
<template>
<label
class="BooleanSetting"
>
<Checkbox
:checked="state"
@change="update"
:disabled="disabled"
>
<span
v-if="!!$slots.default"
class="label"
>
<slot />
</span>
</Checkbox>
<span v-if="isChanged">
<strong>CHANGED</strong>
</span>
</label>
</template>
<script>
import { get, set } from 'lodash'
import Checkbox from 'src/components/checkbox/checkbox.vue'
export default {
props: [
'path',
'disabled'
],
components: {
Checkbox
},
computed: {
pathDefault () {
const [firstSegment, ...rest] = this.path.split('.')
return [firstSegment + 'DefaultValue', ...rest].join('.')
},
state () {
return get(this.$parent, this.path)
},
isChanged () {
return get(this.$parent, this.path) !== get(this.$parent, this.pathDefault)
}
},
methods: {
update (e) {
set(this.$parent, this.path, e)
}
}
}
</script>
<style lang="scss">
.BooleanSetting {
}
</style>

View File

@ -1,29 +1,16 @@
import {
instanceDefaultProperties,
multiChoiceProperties,
defaultState as configDefaultState
} from 'src/modules/config.js'
import { defaultState as configDefaultState } from 'src/modules/config.js'
const SharedComputedObject = () => ({
user () {
return this.$store.state.users.currentUser
},
// Getting localized values for instance-default properties
...instanceDefaultProperties
.filter(key => multiChoiceProperties.includes(key))
// Getting values for default properties
...Object.keys(configDefaultState)
.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])
console.log(this.$store.getters.defaultConfig)
return this.$store.getters.defaultConfig[key]
}
])
.reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),

View File

@ -1,5 +1,5 @@
import { filter, trim } from 'lodash'
import Checkbox from 'src/components/checkbox/checkbox.vue'
import BooleanSetting from '../helpers/boolean_setting.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js'
@ -10,7 +10,7 @@ const FilteringTab = {
}
},
components: {
Checkbox
BooleanSetting
},
computed: {
...SharedComputedObject(),

View File

@ -5,34 +5,34 @@
<span class="label">{{ $t('settings.notification_visibility') }}</span>
<ul class="option-list">
<li>
<Checkbox v-model="notificationVisibility.likes">
<BooleanSetting path="notificationVisibility.likes">
{{ $t('settings.notification_visibility_likes') }}
</Checkbox>
</BooleanSetting>
</li>
<li>
<Checkbox v-model="notificationVisibility.repeats">
<BooleanSetting path="notificationVisibility.repeats">
{{ $t('settings.notification_visibility_repeats') }}
</Checkbox>
</BooleanSetting>
</li>
<li>
<Checkbox v-model="notificationVisibility.follows">
<BooleanSetting path="notificationVisibility.follows">
{{ $t('settings.notification_visibility_follows') }}
</Checkbox>
</BooleanSetting>
</li>
<li>
<Checkbox v-model="notificationVisibility.mentions">
<BooleanSetting path="notificationVisibility.mentions">
{{ $t('settings.notification_visibility_mentions') }}
</Checkbox>
</BooleanSetting>
</li>
<li>
<Checkbox v-model="notificationVisibility.moves">
<BooleanSetting path="notificationVisibility.moves">
{{ $t('settings.notification_visibility_moves') }}
</Checkbox>
</BooleanSetting>
</li>
<li>
<Checkbox v-model="notificationVisibility.emojiReactions">
<BooleanSetting path="notificationVisibility.emojiReactions">
{{ $t('settings.notification_visibility_emoji_reactions') }}
</Checkbox>
</BooleanSetting>
</li>
</ul>
</div>
@ -57,14 +57,14 @@
</label>
</div>
<div>
<Checkbox v-model="hidePostStats">
{{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsLocalizedValue }) }}
</Checkbox>
<BooleanSetting path="hidePostStats">
{{ $t('settings.hide_post_stats') }}
</BooleanSetting>
</div>
<div>
<Checkbox v-model="hideUserStats">
{{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsLocalizedValue }) }}
</Checkbox>
<BooleanSetting path="hideUserStats">
{{ $t('settings.hide_user_stats') }}
</BooleanSetting>
</div>
</div>
<div class="setting-item">
@ -76,9 +76,9 @@
/>
</div>
<div>
<Checkbox v-model="hideFilteredStatuses">
{{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesLocalizedValue }) }}
</Checkbox>
<BooleanSetting path="hideFilteredStatuses">
{{ $t('settings.hide_filtered_statuses') }}
</BooleanSetting>
</div>
</div>
</div>

View File

@ -1,4 +1,4 @@
import Checkbox from 'src/components/checkbox/checkbox.vue'
import BooleanSetting from '../helpers/boolean_setting.vue'
import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js'
@ -16,7 +16,7 @@ const GeneralTab = {
}
},
components: {
Checkbox,
BooleanSetting,
InterfaceLanguageSwitcher
},
computed: {

View File

@ -7,9 +7,9 @@
<interface-language-switcher />
</li>
<li v-if="instanceSpecificPanelPresent">
<Checkbox v-model="hideISP">
<BooleanSetting path="hideISP">
{{ $t('settings.hide_isp') }}
</Checkbox>
</BooleanSetting>
</li>
</ul>
</div>
@ -17,46 +17,46 @@
<h2>{{ $t('nav.timeline') }}</h2>
<ul class="setting-list">
<li>
<Checkbox v-model="hideMutedPosts">
{{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsLocalizedValue }) }}
</Checkbox>
<BooleanSetting path="hideMutedPosts">
{{ $t('settings.hide_muted_posts') }}
</BooleanSetting>
</li>
<li>
<Checkbox v-model="collapseMessageWithSubject">
{{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectLocalizedValue }) }}
</Checkbox>
<BooleanSetting path="collapseMessageWithSubject">
{{ $t('settings.collapse_subject') }}
</BooleanSetting>
</li>
<li>
<Checkbox v-model="streaming">
<BooleanSetting path="streaming">
{{ $t('settings.streaming') }}
</Checkbox>
</BooleanSetting>
<ul
class="setting-list suboptions"
:class="[{disabled: !streaming}]"
>
<li>
<Checkbox
v-model="pauseOnUnfocused"
<BooleanSetting
path="pauseOnUnfocused"
:disabled="!streaming"
>
{{ $t('settings.pause_on_unfocused') }}
</Checkbox>
</BooleanSetting>
</li>
</ul>
</li>
<li>
<Checkbox v-model="useStreamingApi">
<BooleanSetting path="useStreamingApi">
{{ $t('settings.useStreamingApi') }}
<br>
<small>
{{ $t('settings.useStreamingApiWarning') }}
</small>
</Checkbox>
</BooleanSetting>
</li>
<li>
<Checkbox v-model="emojiReactionsOnTimeline">
<BooleanSetting path="emojiReactionsOnTimeline">
{{ $t('settings.emoji_reactions_on_timeline') }}
</Checkbox>
</BooleanSetting>
</li>
</ul>
</div>
@ -65,14 +65,14 @@
<h2>{{ $t('settings.composing') }}</h2>
<ul class="setting-list">
<li>
<Checkbox v-model="scopeCopy">
{{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyLocalizedValue }) }}
</Checkbox>
<BooleanSetting path="scopeCopy">
{{ $t('settings.scope_copy') }}
</BooleanSetting>
</li>
<li>
<Checkbox v-model="alwaysShowSubjectInput">
{{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputLocalizedValue }) }}
</Checkbox>
<BooleanSetting path="alwaysShowSubjectInput">
{{ $t('settings.subject_input_always_show') }}
</BooleanSetting>
</li>
<li>
<div>
@ -127,19 +127,19 @@
</div>
</li>
<li>
<Checkbox v-model="minimalScopesMode">
{{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeLocalizedValue }) }}
</Checkbox>
<BooleanSetting path="minimalScopesMode">
{{ $t('settings.minimal_scopes_mode') }} {{ minimalScopesModeDefaultValue }}
</BooleanSetting>
</li>
<li>
<Checkbox v-model="autohideFloatingPostButton">
<BooleanSetting path="autohideFloatingPostButton">
{{ $t('settings.autohide_floating_post_button') }}
</Checkbox>
</BooleanSetting>
</li>
<li>
<Checkbox v-model="padEmoji">
<BooleanSetting path="padEmoji">
{{ $t('settings.pad_emoji') }}
</Checkbox>
</BooleanSetting>
</li>
</ul>
</div>
@ -148,14 +148,14 @@
<h2>{{ $t('settings.attachments') }}</h2>
<ul class="setting-list">
<li>
<Checkbox v-model="hideAttachments">
<BooleanSetting path="hideAttachments">
{{ $t('settings.hide_attachments_in_tl') }}
</Checkbox>
</BooleanSetting>
</li>
<li>
<Checkbox v-model="hideAttachmentsInConv">
<BooleanSetting path="hideAttachmentsInConv">
{{ $t('settings.hide_attachments_in_convo') }}
</Checkbox>
</BooleanSetting>
</li>
<li>
<label for="maxThumbnails">
@ -163,7 +163,7 @@
</label>
<input
id="maxThumbnails"
v-model.number="maxThumbnails"
path.number="maxThumbnails"
class="number-input"
type="number"
min="0"
@ -171,48 +171,48 @@
>
</li>
<li>
<Checkbox v-model="hideNsfw">
<BooleanSetting path="hideNsfw">
{{ $t('settings.nsfw_clickthrough') }}
</Checkbox>
</BooleanSetting>
</li>
<ul class="setting-list suboptions">
<li>
<Checkbox
v-model="preloadImage"
<BooleanSetting
path="preloadImage"
:disabled="!hideNsfw"
>
{{ $t('settings.preload_images') }}
</Checkbox>
</BooleanSetting>
</li>
<li>
<Checkbox
v-model="useOneClickNsfw"
<BooleanSetting
path="useOneClickNsfw"
:disabled="!hideNsfw"
>
{{ $t('settings.use_one_click_nsfw') }}
</Checkbox>
</BooleanSetting>
</li>
</ul>
<li>
<Checkbox v-model="stopGifs">
<BooleanSetting path="stopGifs">
{{ $t('settings.stop_gifs') }}
</Checkbox>
</BooleanSetting>
</li>
<li>
<Checkbox v-model="loopVideo">
<BooleanSetting path="loopVideo">
{{ $t('settings.loop_video') }}
</Checkbox>
</BooleanSetting>
<ul
class="setting-list suboptions"
:class="[{disabled: !streaming}]"
>
<li>
<Checkbox
v-model="loopVideoSilentOnly"
<BooleanSetting
path="loopVideoSilentOnly"
:disabled="!loopVideo || !loopSilentAvailable"
>
{{ $t('settings.loop_video_silent_only') }}
</Checkbox>
</BooleanSetting>
<div
v-if="!loopSilentAvailable"
class="unavailable"
@ -223,14 +223,14 @@
</ul>
</li>
<li>
<Checkbox v-model="playVideosInModal">
<BooleanSetting path="playVideosInModal">
{{ $t('settings.play_videos_in_modal') }}
</Checkbox>
</BooleanSetting>
</li>
<li>
<Checkbox v-model="useContainFit">
<BooleanSetting path="useContainFit">
{{ $t('settings.use_contain_fit') }}
</Checkbox>
</BooleanSetting>
</li>
</ul>
</div>
@ -239,9 +239,9 @@
<h2>{{ $t('settings.notifications') }}</h2>
<ul class="setting-list">
<li>
<Checkbox v-model="webPushNotifications">
<BooleanSetting path="webPushNotifications">
{{ $t('settings.enable_web_push_notifications') }}
</Checkbox>
</BooleanSetting>
</li>
</ul>
</div>
@ -250,9 +250,9 @@
<h2>{{ $t('settings.fun') }}</h2>
<ul class="setting-list">
<li>
<Checkbox v-model="greentext">
{{ $t('settings.greentext') }} {{ $t('settings.instance_default', { value: greentextLocalizedValue }) }}
</Checkbox>
<BooleanSetting path="greentext">
{{ $t('settings.greentext') }}
</BooleanSetting>
</li>
</ul>
</div>

View File

@ -74,18 +74,24 @@ export const instanceDefaultProperties = Object.entries(defaultState)
.map(([key, value]) => key)
const config = {
state: defaultState,
state: { ...defaultState },
getters: {
mergedConfig (state, getters, rootState, rootGetters) {
defaultConfig (state, getters, rootState, rootGetters) {
const { instance } = rootState
console.log('DC', instance.minimalScopesMode)
return {
...state,
...instanceDefaultProperties
.map(key => [key, state[key] === undefined
? instance[key]
: state[key]
])
.reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
...defaultState,
...Object.fromEntries(
instanceDefaultProperties.map(key => [key, instance[key]])
)
}
},
mergedConfig (state, getters, rootState, rootGetters) {
const { defaultConfig } = rootGetters
console.log('DC2', defaultConfig.hideISP)
return {
...defaultConfig,
...state
}
}
},