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

Merge branch 'settings-changed' into 'develop'

Browse source 
Boolean settings improvements

See merge request pleroma/pleroma-fe!1257
This commit is contained in:
HJ 2021-02-02 20:27:23 +00:00
commit 7d4c7e3b3f
9 changed files with 214 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/components/settings_modal/helpers/boolean_setting.vue Normal file
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>
<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>

51
src/components/settings_modal/helpers/modified_indicator.vue Normal file
View file

@ -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>

22
src/components/settings_modal/helpers/shared_computed_object.js
View file

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

4
src/components/settings_modal/tabs/filtering_tab.js
View file

@ -1,5 +1,5 @@
import { filter, trim } from 'lodash' 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 SharedComputedObject from '../helpers/shared_computed_object.js'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
@ -18,7 +18,7 @@ const FilteringTab = {
} }
}, },
components: { components: {
Checkbox BooleanSetting
}, },
computed: { computed: {
...SharedComputedObject(), ...SharedComputedObject(),

42
src/components/settings_modal/tabs/filtering_tab.vue
View file

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

4
src/components/settings_modal/tabs/general_tab.js
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 InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js' import SharedComputedObject from '../helpers/shared_computed_object.js'
@ -26,7 +26,7 @@ const GeneralTab = {
} }
}, },
components: { components: {
Checkbox, BooleanSetting,
InterfaceLanguageSwitcher InterfaceLanguageSwitcher
}, },
computed: { computed: {

126
src/components/settings_modal/tabs/general_tab.vue
View file

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

1
src/i18n/en.json
View file

@ -242,6 +242,7 @@
"settings": { "settings": {
"app_name": "App name", "app_name": "App name",
"security": "Security", "security": "Security",
"setting_changed": "Setting is different from default",
"enter_current_password_to_confirm": "Enter your current password to confirm your identity", "enter_current_password_to_confirm": "Enter your current password to confirm your identity",
"mfa": { "mfa": {
"otp": "OTP", "otp": "OTP",

22
src/modules/config.js
View file

@ -76,18 +76,22 @@ export const instanceDefaultProperties = Object.entries(defaultState)
.map(([key, value]) => key) .map(([key, value]) => key)
const config = { const config = {
state: defaultState, state: { ...defaultState },
getters: { getters: {
mergedConfig (state, getters, rootState, rootGetters) { defaultConfig (state, getters, rootState, rootGetters) {
const { instance } = rootState const { instance } = rootState
return { return {
...state, ...defaultState,
...instanceDefaultProperties ...Object.fromEntries(
.map(key => [key, state[key] === undefined instanceDefaultProperties.map(key => [key, instance[key]])
? instance[key] )
: state[key] }
]) },
.reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}) mergedConfig (state, getters, rootState, rootGetters) {
const { defaultConfig } = rootGetters
return {
...defaultConfig,
...state
} }
} }
}, },