Merge branch 'settings-changed' into 'develop'
Boolean settings improvements See merge request pleroma/pleroma-fe!1257
This commit is contained in:
commit
7d4c7e3b3f
9 changed files with 214 additions and 115 deletions
57
src/components/settings_modal/helpers/boolean_setting.vue
Normal file
57
src/components/settings_modal/helpers/boolean_setting.vue
Normal 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
51
src/components/settings_modal/helpers/modified_indicator.vue
Normal file
|
@ -0,0 +1,51 @@
|
||||||
|
<template>
|
||||||
|
<span
|
||||||
|
v-if="changed"
|
||||||
|
class="ModifiedIndicator"
|
||||||
|
>
|
||||||
|
<Popover
|
||||||
|
trigger="hover"
|
||||||
|
>
|
||||||
|
<span slot="trigger">
|
||||||
|
|
||||||
|
<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>
|
|
@ -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 }), {}),
|
||||||
|
|
|
@ -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(),
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in a new issue