logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git
commit: 7d4c7e3b3fce5d16849e677703e17ea67da927c8
parent de66267a07eb018cc0309ff6f9dd896d53ba3ff4
Author: HJ <30-hj@users.noreply.git.pleroma.social>
Date:   Tue,  2 Feb 2021 20:27:23 +0000

Merge branch 'settings-changed' into 'develop'

Boolean settings improvements

See merge request pleroma/pleroma-fe!1257

Diffstat:

Asrc/components/settings_modal/helpers/boolean_setting.vue57+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Asrc/components/settings_modal/helpers/modified_indicator.vue51+++++++++++++++++++++++++++++++++++++++++++++++++++
Msrc/components/settings_modal/helpers/shared_computed_object.js22++++------------------
Msrc/components/settings_modal/tabs/filtering_tab.js4++--
Msrc/components/settings_modal/tabs/filtering_tab.vue42+++++++++++++++++++++---------------------
Msrc/components/settings_modal/tabs/general_tab.js4++--
Msrc/components/settings_modal/tabs/general_tab.vue126++++++++++++++++++++++++++++++++++++++++----------------------------------------
Msrc/i18n/en.json1+
Msrc/modules/config.js22+++++++++++++---------
9 files changed, 214 insertions(+), 115 deletions(-)

diff --git a/src/components/settings_modal/helpers/boolean_setting.vue 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> + <ModifiedIndicator :changed="isChanged" /> + </Checkbox> + </label> +</template> + +<script> +import { get, set } from 'lodash' +import Checkbox from 'src/components/checkbox/checkbox.vue' +import ModifiedIndicator from './modified_indicator.vue' +export default { + props: [ + 'path', + 'disabled' + ], + components: { + Checkbox, + ModifiedIndicator + }, + 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/modified_indicator.vue b/src/components/settings_modal/helpers/modified_indicator.vue @@ -0,0 +1,51 @@ +<template> + <span + v-if="changed" + class="ModifiedIndicator" + > + <Popover + trigger="hover" + > + <span slot="trigger"> + &nbsp; + <FAIcon + icon="wrench" + /> + </span> + <div + class="modified-tooltip" + slot="content" + > + {{ $t('settings.setting_changed') }} + </div> + </Popover> + </span> +</template> + +<script> +import Popover from 'src/components/popover/popover.vue' +import { library } from '@fortawesome/fontawesome-svg-core' +import { faWrench } from '@fortawesome/free-solid-svg-icons' + +library.add( + faWrench +) + +export default { + props: ['changed'], + components: { Popover } +} +</script> + +<style lang="scss"> +.ModifiedIndicator { + display: inline-block; + position: relative; + + .modified-tooltip { + margin: 0.5em 1em; + min-width: 10em; + text-align: center; + } +} +</style> diff --git a/src/components/settings_modal/helpers/shared_computed_object.js b/src/components/settings_modal/helpers/shared_computed_object.js @@ -1,29 +1,15 @@ -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]) + 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 @@ -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' import { library } from '@fortawesome/fontawesome-svg-core' @@ -18,7 +18,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 @@ -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> @@ -60,14 +60,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"> @@ -80,9 +80,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 @@ -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' @@ -26,7 +26,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 @@ -7,14 +7,14 @@ <interface-language-switcher /> </li> <li v-if="instanceSpecificPanelPresent"> - <Checkbox v-model="hideISP"> + <BooleanSetting path="hideISP"> {{ $t('settings.hide_isp') }} - </Checkbox> + </BooleanSetting> </li> <li v-if="instanceWallpaperUsed"> - <Checkbox v-model="hideInstanceWallpaper"> + <BooleanSetting path="hideInstanceWallpaper"> {{ $t('settings.hide_wallpaper') }} - </Checkbox> + </BooleanSetting> </li> </ul> </div> @@ -22,51 +22,51 @@ <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"> + <BooleanSetting path="virtualScrolling"> {{ $t('settings.virtual_scrolling') }} - </Checkbox> + </BooleanSetting> </li> </ul> </div> @@ -75,14 +75,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> @@ -143,19 +143,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> @@ -164,14 +164,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"> @@ -179,7 +179,7 @@ </label> <input id="maxThumbnails" - v-model.number="maxThumbnails" + path.number="maxThumbnails" class="number-input" type="number" min="0" @@ -187,48 +187,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" @@ -239,14 +239,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> @@ -255,9 +255,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> @@ -266,9 +266,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/i18n/en.json b/src/i18n/en.json @@ -242,6 +242,7 @@ "settings": { "app_name": "App name", "security": "Security", + "setting_changed": "Setting is different from default", "enter_current_password_to_confirm": "Enter your current password to confirm your identity", "mfa": { "otp": "OTP", diff --git a/src/modules/config.js b/src/modules/config.js @@ -76,18 +76,22 @@ 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 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 + return { + ...defaultConfig, + ...state } } },