diff options
| -rw-r--r-- | src/components/settings_modal/helpers/boolean_setting.vue | 57 | ||||
| -rw-r--r-- | src/components/settings_modal/helpers/shared_computed_object.js | 23 | ||||
| -rw-r--r-- | src/components/settings_modal/tabs/filtering_tab.js | 4 | ||||
| -rw-r--r-- | src/components/settings_modal/tabs/filtering_tab.vue | 42 | ||||
| -rw-r--r-- | src/components/settings_modal/tabs/general_tab.js | 4 | ||||
| -rw-r--r-- | src/components/settings_modal/tabs/general_tab.vue | 118 | ||||
| -rw-r--r-- | src/modules/config.js | 24 |
7 files changed, 161 insertions, 111 deletions
diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue new file mode 100644 index 00000000..11b354ed --- /dev/null +++ b/src/components/settings_modal/helpers/boolean_setting.vue @@ -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> diff --git a/src/components/settings_modal/helpers/shared_computed_object.js b/src/components/settings_modal/helpers/shared_computed_object.js index 86703697..3cbcd288 100644 --- a/src/components/settings_modal/helpers/shared_computed_object.js +++ b/src/components/settings_modal/helpers/shared_computed_object.js @@ -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 }), {}), diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js index 3b2df556..04273211 100644 --- a/src/components/settings_modal/tabs/filtering_tab.js +++ b/src/components/settings_modal/tabs/filtering_tab.js @@ -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(), diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue index eea41514..6c42718b 100644 --- a/src/components/settings_modal/tabs/filtering_tab.vue +++ b/src/components/settings_modal/tabs/filtering_tab.vue @@ -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> diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js index 0eb37e44..679ef684 100644 --- a/src/components/settings_modal/tabs/general_tab.js +++ b/src/components/settings_modal/tabs/general_tab.js @@ -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: { diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index 13482de7..f794ad6b 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -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> <li> <Checkbox v-model="virtualScrolling"> @@ -70,14 +70,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> @@ -132,19 +132,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> @@ -153,14 +153,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"> @@ -168,7 +168,7 @@ </label> <input id="maxThumbnails" - v-model.number="maxThumbnails" + path.number="maxThumbnails" class="number-input" type="number" min="0" @@ -176,48 +176,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" @@ -228,14 +228,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> @@ -244,9 +244,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> @@ -255,9 +255,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> diff --git a/src/modules/config.js b/src/modules/config.js index 444b8ec7..cd7c8670 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -75,18 +75,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 { + ...defaultState, + ...Object.fromEntries( + instanceDefaultProperties.map(key => [key, instance[key]]) + ) + } + }, + mergedConfig (state, getters, rootState, rootGetters) { + const { defaultConfig } = rootGetters + console.log('DC2', defaultConfig.hideISP) return { - ...state, - ...instanceDefaultProperties - .map(key => [key, state[key] === undefined - ? instance[key] - : state[key] - ]) - .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}) + ...defaultConfig, + ...state } } }, |