moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

serverSideConfig renamed into profileSettingConfig to avoid confusion 

with serverSideStorage, reduced overall need for SharedComputedObject in
settings tabs, moved copypaste code of "setting" type of helpers into a
separate file.
This commit is contained in:
Henry Jameson 2023-03-12 14:32:13 +02:00
parent 8abaf8fa37
commit af0cd54223
17 changed files with 177 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/settings_modal/helpers/boolean_setting.js
View File

@ -1,56 +1,13 @@
import { get, set } from 'lodash'
import Checkbox from 'src/components/checkbox/checkbox.vue'
import ModifiedIndicator from './modified_indicator.vue'
import ServerSideIndicator from './server_side_indicator.vue'
import ProfileSettingIndicator from './profile_setting_indicator.vue'
import Setting from './setting.js'
export default {
components: {
Checkbox,
ModifiedIndicator,
ServerSideIndicator
ProfileSettingIndicator
},
props: [
'path',
'disabled',
'expert'
],
computed: {
pathDefault () {
const [firstSegment, ...rest] = this.path.split('.')
return [firstSegment + 'DefaultValue', ...rest].join('.')
},
state () {
const value = get(this.$parent, this.path)
if (value === undefined) {
return this.defaultState
} else {
return value
}
},
defaultState () {
return get(this.$parent, this.pathDefault)
},
isServerSide () {
return this.path.startsWith('serverSide_')
},
isChanged () {
return !this.path.startsWith('serverSide_') && this.state !== this.defaultState
},
matchesExpertLevel () {
return (this.expert || 0) <= this.$parent.expertLevel
}
},
methods: {
update (e) {
const [firstSegment, ...rest] = this.path.split('.')
set(this.$parent, this.path, e)
// Updating nested properties does not trigger update on its parent.
// probably still not as reliable, but works for depth=1 at least
if (rest.length > 0) {
set(this.$parent, firstSegment, { ...get(this.$parent, firstSegment) })
}
},
reset () {
set(this.$parent, this.path, this.defaultState)
}
}
...Setting
}

4
src/components/settings_modal/helpers/boolean_setting.vue
View File

@ -5,7 +5,7 @@
>
<Checkbox
:model-value="state"
:disabled="disabled"
:disabled="shouldBeDisabled"
@update:modelValue="update"
>
<span
@ -19,7 +19,7 @@
:changed="isChanged"
:onclick="reset"
/>
<ServerSideIndicator :server-side="isServerSide" />
<ProfileSettingIndicator :is-profile="isProfileTied" />
</Checkbox>
</label>
</template>

51
src/components/settings_modal/helpers/choice_setting.js
View File

@ -1,51 +1,20 @@
import { get, set } from 'lodash'
import Select from 'src/components/select/select.vue'
import ModifiedIndicator from './modified_indicator.vue'
import ServerSideIndicator from './server_side_indicator.vue'
import ProfileSettingIndicator from './profile_setting_indicator.vue'
import Setting from './setting.js'
export default {
components: {
Select,
ModifiedIndicator,
ServerSideIndicator
ProfileSettingIndicator
},
props: [
'path',
'disabled',
'options',
'expert'
],
computed: {
pathDefault () {
const [firstSegment, ...rest] = this.path.split('.')
return [firstSegment + 'DefaultValue', ...rest].join('.')
},
state () {
const value = get(this.$parent, this.path)
if (value === undefined) {
return this.defaultState
} else {
return value
}
},
defaultState () {
return get(this.$parent, this.pathDefault)
},
isServerSide () {
return this.path.startsWith('serverSide_')
},
isChanged () {
return !this.path.startsWith('serverSide_') && this.state !== this.defaultState
},
matchesExpertLevel () {
return (this.expert || 0) <= this.$parent.expertLevel
}
},
methods: {
update (e) {
set(this.$parent, this.path, e)
},
reset () {
set(this.$parent, this.path, this.defaultState)
...Setting,
props: {
...Setting.props,
options: {
type: Array,
required: true
}
}
}

2
src/components/settings_modal/helpers/choice_setting.vue
View File

@ -23,7 +23,7 @@
:changed="isChanged"
:onclick="reset"
/>
<ServerSideIndicator :server-side="isServerSide" />
<ProfileSettingIndicator :is-profile="isProfileSetting" />
</label>
</template>

39
src/components/settings_modal/helpers/integer_setting.js
View File

@ -1,44 +1,15 @@
import { get, set } from 'lodash'
import ModifiedIndicator from './modified_indicator.vue'
import Setting from './setting.js'
export default {
components: {
ModifiedIndicator
},
props: {
path: String,
disabled: Boolean,
min: Number,
expert: [Number, String]
},
computed: {
pathDefault () {
const [firstSegment, ...rest] = this.path.split('.')
return [firstSegment + 'DefaultValue', ...rest].join('.')
},
state () {
const value = get(this.$parent, this.path)
if (value === undefined) {
return this.defaultState
} else {
return value
}
},
defaultState () {
return get(this.$parent, this.pathDefault)
},
isChanged () {
return this.state !== this.defaultState
},
matchesExpertLevel () {
return (this.expert || 0) <= this.$parent.expertLevel
}
},
...Setting,
methods: {
...Setting.methods,
update (e) {
set(this.$parent, this.path, parseInt(e.target.value))
},
reset () {
set(this.$parent, this.path, this.defaultState)
this.configSink(this.path, parseInt(e.target.value))
}
}
}

12
src/components/settings_modal/helpers/server_side_indicator.vue → src/components/settings_modal/helpers/profile_setting_indicator.vue
View File

@ -1,7 +1,7 @@
<template>
<span
v-if="serverSide"
class="ServerSideIndicator"
v-if="isProfile"
class="ProfileSettingIndicator"
>
<Popover
trigger="hover"
@ -14,7 +14,7 @@
/>
</template>
<template #content>
<div class="serverside-tooltip">
<div class="profilesetting-tooltip">
{{ $t('settings.setting_server_side') }}
</div>
</template>
@ -33,17 +33,17 @@ library.add(
export default {
components: { Popover },
props: ['serverSide']
props: ['isProfile']
}
</script>
<style lang="scss">
.ServerSideIndicator {
.ProfileSettingIndicator {
display: inline-block;
position: relative;
}
.serverside-tooltip {
.profilesetting-tooltip {
margin: 0.5em 1em;
min-width: 10em;
text-align: center;

84
src/components/settings_modal/helpers/setting.js Normal file
View File

@ -0,0 +1,84 @@
import { get, set } from 'lodash'
export default {
props: {
path: {
type: String,
required: true
},
disabled: {
type: Boolean,
default: false
},
parentPath: {
type: String
},
parentInvert: {
type: Boolean,
default: false
},
expert: {
type: [Number, String],
default: 0
},
source: {
type: String,
default: 'default'
}
},
computed: {
state () {
const value = get(this.configSource, this.path)
if (value === undefined) {
return this.defaultState
} else {
return value
}
},
shouldBeDisabled () {
const parentValue = this.parentPath !== undefined ? get(this.configSource, this.parentPath) : null
return this.disabled || (parentValue !== null ? (this.parentInvert ? parentValue : !parentValue) : false)
},
configSource () {
switch (this.source) {
case 'profile':
return this.$store.state.profileConfig
default:
return this.$store.getters.mergedConfig
}
},
configSink () {
switch (this.source) {
case 'profile':
return (k, v) => this.$store.dispatch('setProfileOption', { name: k, value: v })
default:
return (k, v) => this.$store.dispatch('setOption', { name: k, value: v })
}
},
defaultState () {
switch (this.source) {
case 'profile':
return {}
default:
return get(this.$store.getters.defaultConfig, this.path)
}
},
isProfileTied () {
return this.source === 'profile'
},
isChanged () {
return !this.source === 'default' && this.state !== this.defaultState
},
matchesExpertLevel () {
return (this.expert || 0) <= this.$store.state.config.expertLevel > 0
}
},
methods: {
update (e) {
console.log('U', this.path, e)
this.configSink(this.path, e)
},
reset () {
set(this.$store.getters.mergedConfig, this.path, this.defaultState)
}
}
}

18
src/components/settings_modal/helpers/shared_computed_object.js
View File

@ -1,19 +1,9 @@
import { defaultState as configDefaultState } from 'src/modules/config.js'
import { defaultState as serverSideConfigDefaultState } from 'src/modules/serverSideConfig.js'
const SharedComputedObject = () => ({
user () {
return this.$store.state.users.currentUser
},
// Getting values for default properties
...Object.keys(configDefaultState)
.map(key => [
key + 'DefaultValue',
function () {
return this.$store.getters.defaultConfig[key]
}
])
.reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
// Generating computed values for vuex properties
...Object.keys(configDefaultState)
.map(key => [key, {
@ -23,14 +13,6 @@ const SharedComputedObject = () => ({
}
}])
.reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
...Object.keys(serverSideConfigDefaultState)
.map(key => ['serverSide_' + key, {
get () { return this.$store.state.serverSideConfig[key] },
set (value) {
this.$store.dispatch('setServerSideOption', { name: key, value })
}
}])
.reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
// Special cases (need to transform values or perform actions first)
useStreamingApi: {
get () { return this.$store.getters.mergedConfig.useStreamingApi },

52
src/components/settings_modal/helpers/size_setting.js
View File

@ -1,6 +1,6 @@
import { get, set } from 'lodash'
import ModifiedIndicator from './modified_indicator.vue'
import Select from 'src/components/select/select.vue'
import Setting from './setting.js'
export const allCssUnits = ['cm', 'mm', 'in', 'px', 'pt', 'pc', 'em', 'ex', 'ch', 'rem', 'vw', 'vh', 'vmin', 'vmax', '%']
export const defaultHorizontalUnits = ['px', 'rem', 'vw']
@ -11,57 +11,31 @@ export default {
ModifiedIndicator,
Select
},
...Setting,
props: {
path: String,
disabled: Boolean,
...Setting.props,
min: Number,
units: {
type: [String],
type: Array,
default: () => allCssUnits
},
expert: [Number, String]
},
computed: {
pathDefault () {
const [firstSegment, ...rest] = this.path.split('.')
return [firstSegment + 'DefaultValue', ...rest].join('.')
},
stateUnit () {
return (this.state || '').replace(/\d+/, '')
},
stateValue () {
return (this.state || '').replace(/\D+/, '')
},
state () {
const value = get(this.$parent, this.path)
if (value === undefined) {
return this.defaultState
} else {
return value
}
},
defaultState () {
return get(this.$parent, this.pathDefault)
computed: {
...Setting.computed,
stateUnit () {
return this.state.replace(/\d+/, '')
},
isChanged () {
return this.state !== this.defaultState
},
matchesExpertLevel () {
return (this.expert || 0) <= this.$parent.expertLevel
stateValue () {
return this.state.replace(/\D+/, '')
}
},
methods: {
update (e) {
set(this.$parent, this.path, e)
},
reset () {
set(this.$parent, this.path, this.defaultState)
},
...Setting.methods,
updateValue (e) {
set(this.$parent, this.path, parseInt(e.target.value) + this.stateUnit)
this.configSink(this.path, parseInt(e.target.value) + this.stateUnit)
},
updateUnit (e) {
set(this.$parent, this.path, this.stateValue + e.target.value)
this.configSink(this.path, this.stateValue + e.target.value)
}
}
}

14
src/components/settings_modal/tabs/filtering_tab.vue
View File

@ -7,13 +7,11 @@
<BooleanSetting path="hideFilteredStatuses">
{{ $t('settings.hide_filtered_statuses') }}
</BooleanSetting>
<ul
class="setting-list suboptions"
:class="[{disabled: !streaming}]"
>
<ul class="setting-list suboptions">
<li>
<BooleanSetting
:disabled="hideFilteredStatuses"
parentPath="hideFilteredStatuses"
:parentInvert="true"
path="hideWordFilteredPosts"
>
{{ $t('settings.hide_wordfiltered_statuses') }}
@ -22,7 +20,8 @@
<li>
<BooleanSetting
v-if="user"
:disabled="hideFilteredStatuses"
parentPath="hideFilteredStatuses"
:parentInvert="true"
path="hideMutedThreads"
>
{{ $t('settings.hide_muted_threads') }}
@ -31,7 +30,8 @@
<li>
<BooleanSetting
v-if="user"
:disabled="hideFilteredStatuses"
parentPath="hideFilteredStatuses"
:parentInvert="true"
path="hideMutedPosts"
>
{{ $t('settings.hide_muted_posts') }}

6
src/components/settings_modal/tabs/general_tab.js
View File

@ -6,7 +6,7 @@ import SizeSetting, { defaultHorizontalUnits } from '../helpers/size_setting.vue
import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js'
import ServerSideIndicator from '../helpers/server_side_indicator.vue'
import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faGlobe
@ -65,7 +65,7 @@ const GeneralTab = {
SizeSetting,
InterfaceLanguageSwitcher,
ScopeSelector,
ServerSideIndicator
ProfileSettingIndicator
},
computed: {
horizontalUnits () {
@ -108,7 +108,7 @@ const GeneralTab = {
},
methods: {
changeDefaultScope (value) {
this.$store.dispatch('setServerSideOption', { name: 'defaultScope', value })
this.$store.dispatch('setProfileOption', { name: 'defaultScope', value })
}
}
}

29
src/components/settings_modal/tabs/general_tab.vue
View File

@ -29,14 +29,11 @@
<BooleanSetting path="streaming">
{{ $t('settings.streaming') }}
</BooleanSetting>
<ul
class="setting-list suboptions"
:class="[{disabled: !streaming}]"
>
<ul class="setting-list suboptions">
<li>
<BooleanSetting
path="pauseOnUnfocused"
:disabled="!streaming"
parentPath="streaming"
>
{{ $t('settings.pause_on_unfocused') }}
</BooleanSetting>
@ -265,7 +262,7 @@
<li>
<BooleanSetting
v-if="user"
path="serverSide_stripRichContent"
source="profile" path="stripRichContent"
expert="1"
>
{{ $t('settings.no_rich_text_description') }}
@ -290,7 +287,7 @@
<BooleanSetting
path="preloadImage"
expert="1"
:disabled="!hideNsfw"
parentPath="hideNsfw"
>
{{ $t('settings.preload_images') }}
</BooleanSetting>
@ -299,7 +296,7 @@
<BooleanSetting
path="useOneClickNsfw"
expert="1"
:disabled="!hideNsfw"
parentPath="hideNsfw"
>
{{ $t('settings.use_one_click_nsfw') }}
</BooleanSetting>
@ -312,15 +309,13 @@
>
{{ $t('settings.loop_video') }}
</BooleanSetting>
<ul
class="setting-list suboptions"
:class="[{disabled: !streaming}]"
>
<ul class="setting-list suboptions">
<li>
<BooleanSetting
path="loopVideoSilentOnly"
expert="1"
:disabled="!loopVideo || !loopSilentAvailable"
parentPath="loopVideo"
:disabled="!loopSilentAvailable"
>
{{ $t('settings.loop_video_silent_only') }}
</BooleanSetting>
@ -418,18 +413,18 @@
<ul class="setting-list">
<li>
<label for="default-vis">
{{ $t('settings.default_vis') }} <ServerSideIndicator :server-side="true" />
{{ $t('settings.default_vis') }} <ProfileSettingIndicator :is-profile="true" />
<ScopeSelector
class="scope-selector"
:show-all="true"
:user-default="serverSide_defaultScope"
:initial-scope="serverSide_defaultScope"
:user-default="$store.state.profileConfig.defaultScope"
:initial-scope="$store.state.profileConfig.defaultScope"
:on-scope-change="changeDefaultScope"
/>
</label>
</li>
<li>
<!-- <BooleanSetting path="serverSide_defaultNSFW"> -->
<!-- <BooleanSetting source="profile" path="defaultNSFW"> -->
<BooleanSetting path="sensitiveByDefault">
{{ $t('settings.sensitive_by_default') }}
</BooleanSetting>

4
src/components/settings_modal/tabs/notifications_tab.vue
View File

@ -4,7 +4,7 @@
<h2>{{ $t('settings.notification_setting_filters') }}</h2>
<ul class="setting-list">
<li>
<BooleanSetting path="serverSide_blockNotificationsFromStrangers">
<BooleanSetting source="profile" path="blockNotificationsFromStrangers">
{{ $t('settings.notification_setting_block_from_strangers') }}
</BooleanSetting>
</li>
@ -67,7 +67,7 @@
</li>
<li>
<BooleanSetting
path="serverSide_webPushHideContents"
source="profile" path="webPushHideContents"
expert="1"
>
{{ $t('settings.notification_setting_hide_notification_contents') }}

32
src/components/settings_modal/tabs/profile_tab.vue
View File

@ -254,37 +254,35 @@
<h2>{{ $t('settings.account_privacy') }}</h2>
<ul class="setting-list">
<li>
<BooleanSetting path="serverSide_locked">
<BooleanSetting source="profile" path="locked">
{{ $t('settings.lock_account_description') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting path="serverSide_discoverable">
<BooleanSetting source="profile" path="discoverable">
{{ $t('settings.discoverable') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting path="serverSide_allowFollowingMove">
<BooleanSetting source="profile" path="allowFollowingMove">
{{ $t('settings.allow_following_move') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting path="serverSide_hideFavorites">
<BooleanSetting source="profile" path="hideFavorites">
{{ $t('settings.hide_favorites_description') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting path="serverSide_hideFollowers">
<BooleanSetting source="profile" path="hideFollowers">
{{ $t('settings.hide_followers_description') }}
</BooleanSetting>
<ul
class="setting-list suboptions"
:class="[{disabled: !serverSide_hideFollowers}]"
>
<ul class="setting-list suboptions">
<li>
<BooleanSetting
path="serverSide_hideFollowersCount"
:disabled="!serverSide_hideFollowers"
source="profile"
path="hideFollowersCount"
parentPath="hideFollowers"
>
{{ $t('settings.hide_followers_count_description') }}
</BooleanSetting>
@ -292,17 +290,15 @@
</ul>
</li>
<li>
<BooleanSetting path="serverSide_hideFollows">
<BooleanSetting source="profile" path="hideFollows">
{{ $t('settings.hide_follows_description') }}
</BooleanSetting>
<ul
class="setting-list suboptions"
:class="[{disabled: !serverSide_hideFollows}]"
>
<ul class="setting-list suboptions">
<li>
<BooleanSetting
path="serverSide_hideFollowsCount"
:disabled="!serverSide_hideFollows"
source="profile"
path="hideFollowsCount"
parentPath="hideFollows"
>
{{ $t('settings.hide_follows_count_description') }}
</BooleanSetting>

4
src/main.js
View File

@ -10,7 +10,7 @@ import listsModule from './modules/lists.js'
import usersModule from './modules/users.js'
import apiModule from './modules/api.js'
import configModule from './modules/config.js'
import serverSideConfigModule from './modules/serverSideConfig.js'
import profileConfigModule from './modules/profileConfig.js'
import serverSideStorageModule from './modules/serverSideStorage.js'
import shoutModule from './modules/shout.js'
import oauthModule from './modules/oauth.js'
@ -80,7 +80,7 @@ const persistedStateOptions = {
lists: listsModule,
api: apiModule,
config: configModule,
serverSideConfig: serverSideConfigModule,
profileConfig: profileConfigModule,
serverSideStorage: serverSideStorageModule,
shout: shoutModule,
oauth: oauthModule,

3
src/modules/config.js
View File

@ -1,6 +1,7 @@
import Cookies from 'js-cookie'
import { setPreset, applyTheme, applyConfig } from '../services/style_setter/style_setter.js'
import messages from '../i18n/messages'
import { set } from 'lodash'
import localeService from '../services/locale/locale.service.js'
const BACKEND_LANGUAGE_COOKIE_NAME = 'userLanguage'
@ -147,7 +148,7 @@ const config = {
},
mutations: {
setOption (state, { name, value }) {
state[name] = value
set(state, name, value)
},
setHighlight (state, { user, color, type }) {
const data = this.state.config.highlight[user]

22
src/modules/serverSideConfig.js → src/modules/profileConfig.js
View File

@ -22,9 +22,9 @@ const notificationsApi = ({ rootState, commit }, { path, value, oldValue }) => {
.updateNotificationSettings({ settings })
.then(result => {
if (result.status === 'success') {
commit('confirmServerSideOption', { name, value })
commit('confirmProfileOption', { name, value })
} else {
commit('confirmServerSideOption', { name, value: oldValue })
commit('confirmProfileOption', { name, value: oldValue })
}
})
}
@ -94,16 +94,16 @@ export const settingsMap = {
export const defaultState = Object.fromEntries(Object.keys(settingsMap).map(key => [key, null]))
const serverSideConfig = {
const profileConfig = {
state: { ...defaultState },
mutations: {
confirmServerSideOption (state, { name, value }) {
confirmProfileOption (state, { name, value }) {
set(state, name, value)
},
wipeServerSideOption (state, { name }) {
wipeProfileOption (state, { name }) {
set(state, name, null)
},
wipeAllServerSideOptions (state) {
wipeAllProfileOptions (state) {
Object.keys(settingsMap).forEach(key => {
set(state, key, null)
})
@ -118,23 +118,23 @@ const serverSideConfig = {
}
},
actions: {
setServerSideOption ({ rootState, state, commit, dispatch }, { name, value }) {
setProfileOption ({ rootState, state, commit, dispatch }, { name, value }) {
const oldValue = get(state, name)
const map = settingsMap[name]
if (!map) throw new Error('Invalid server-side setting')
const { set: path = map, api = defaultApi } = map
commit('wipeServerSideOption', { name })
commit('wipeProfileOption', { name })
api({ rootState, commit }, { path, value, oldValue })
.catch((e) => {
console.warn('Error setting server-side option:', e)
commit('confirmServerSideOption', { name, value: oldValue })
commit('confirmProfileOption', { name, value: oldValue })
})
},
logout ({ commit }) {
commit('wipeAllServerSideOptions')
commit('wipeAllProfileOptions')
}
}
}
export default serverSideConfig
export default profileConfig