Commit 21989c67 authored by HJ's avatar HJ 🐼

Merge branch 'settings-refactor' into 'develop'

Settings refactor

See merge request pleroma/pleroma-fe!960
parents 42f428d9 b66564a3
...@@ -45,7 +45,7 @@ export default { ...@@ -45,7 +45,7 @@ export default {
}), }),
created () { created () {
// Load the locale from the storage // Load the locale from the storage
this.$i18n.locale = this.$store.state.config.interfaceLanguage this.$i18n.locale = this.$store.getters.mergedConfig.interfaceLanguage
window.addEventListener('resize', this.updateMobileState) window.addEventListener('resize', this.updateMobileState)
}, },
destroyed () { destroyed () {
...@@ -93,7 +93,7 @@ export default { ...@@ -93,7 +93,7 @@ export default {
suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled }, suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
showInstanceSpecificPanel () { showInstanceSpecificPanel () {
return this.$store.state.instance.showInstanceSpecificPanel && return this.$store.state.instance.showInstanceSpecificPanel &&
!this.$store.state.config.hideISP && !this.$store.getters.mergedConfig.hideISP &&
this.$store.state.instance.instanceSpecificPanelContent this.$store.state.instance.instanceSpecificPanelContent
}, },
showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }, showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
......
...@@ -16,8 +16,8 @@ const Attachment = { ...@@ -16,8 +16,8 @@ const Attachment = {
data () { data () {
return { return {
nsfwImage: this.$store.state.instance.nsfwCensorImage || nsfwImage, nsfwImage: this.$store.state.instance.nsfwCensorImage || nsfwImage,
hideNsfwLocal: this.$store.state.config.hideNsfw, hideNsfwLocal: this.$store.getters.mergedConfig.hideNsfw,
preloadImage: this.$store.state.config.preloadImage, preloadImage: this.$store.getters.mergedConfig.preloadImage,
loading: false, loading: false,
img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'), img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'),
modalOpen: false, modalOpen: false,
...@@ -58,7 +58,7 @@ const Attachment = { ...@@ -58,7 +58,7 @@ const Attachment = {
} }
}, },
openModal (event) { openModal (event) {
const modalTypes = this.$store.state.config.playVideosInModal const modalTypes = this.$store.getters.mergedConfig.playVideosInModal
? ['image', 'video'] ? ['image', 'video']
: ['image'] : ['image']
if (fileTypeService.fileMatchesSomeType(modalTypes, this.attachment) || if (fileTypeService.fileMatchesSomeType(modalTypes, this.attachment) ||
...@@ -71,7 +71,7 @@ const Attachment = { ...@@ -71,7 +71,7 @@ const Attachment = {
} }
}, },
toggleHidden (event) { toggleHidden (event) {
if (this.$store.state.config.useOneClickNsfw && !this.showHidden) { if (this.$store.getters.mergedConfig.useOneClickNsfw && !this.showHidden) {
this.openModal(event) this.openModal(event)
return return
} }
......
<template> <template>
<label class="checkbox"> <label
class="checkbox"
:class="{ disabled, indeterminate }"
>
<input <input
type="checkbox" type="checkbox"
:disabled="disabled"
:checked="checked" :checked="checked"
:indeterminate.prop="indeterminate" :indeterminate.prop="indeterminate"
@change="$emit('change', $event.target.checked)" @change="$emit('change', $event.target.checked)"
> >
<i class="checkbox-indicator" /> <i class="checkbox-indicator" />
<span v-if="!!$slots.default"><slot /></span> <span
class="label"
v-if="!!$slots.default"
>
<slot />
</span>
</label> </label>
</template> </template>
...@@ -17,7 +26,11 @@ export default { ...@@ -17,7 +26,11 @@ export default {
prop: 'checked', prop: 'checked',
event: 'change' event: 'change'
}, },
props: ['checked', 'indeterminate'] props: [
'checked',
'indeterminate',
'disabled'
]
} }
</script> </script>
...@@ -27,12 +40,16 @@ export default { ...@@ -27,12 +40,16 @@ export default {
.checkbox { .checkbox {
position: relative; position: relative;
display: inline-block; display: inline-block;
padding-left: 1.2em;
min-height: 1.2em; min-height: 1.2em;
&-indicator {
position: relative;
padding-left: 1.2em;
}
&-indicator::before { &-indicator::before {
position: absolute; position: absolute;
left: 0; right: 0;
top: 0; top: 0;
display: block; display: block;
content: '✔'; content: '✔';
...@@ -54,6 +71,17 @@ export default { ...@@ -54,6 +71,17 @@ export default {
box-sizing: border-box; box-sizing: border-box;
} }
&.disabled {
.checkbox-indicator::before,
.label {
opacity: .5;
}
.label {
color: $fallback--faint;
color: var(--faint, $fallback--faint);
}
}
input[type=checkbox] { input[type=checkbox] {
display: none; display: none;
...@@ -68,9 +96,6 @@ export default { ...@@ -68,9 +96,6 @@ export default {
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
} }
&:disabled + .checkbox-indicator::before {
opacity: .5;
}
} }
& > span { & > span {
......
...@@ -99,7 +99,7 @@ const EmojiInput = { ...@@ -99,7 +99,7 @@ const EmojiInput = {
}, },
computed: { computed: {
padEmoji () { padEmoji () {
return this.$store.state.config.padEmoji return this.$store.getters.mergedConfig.padEmoji
}, },
suggestions () { suggestions () {
const firstchar = this.textAtCaret.charAt(0) const firstchar = this.textAtCaret.charAt(0)
......
import Checkbox from '../checkbox/checkbox.vue'
const filterByKeyword = (list, keyword = '') => { const filterByKeyword = (list, keyword = '') => {
return list.filter(x => x.displayText.includes(keyword)) return list.filter(x => x.displayText.includes(keyword))
...@@ -13,7 +14,6 @@ const EmojiPicker = { ...@@ -13,7 +14,6 @@ const EmojiPicker = {
}, },
data () { data () {
return { return {
labelKey: String(Math.random() * 100000),
keyword: '', keyword: '',
activeGroup: 'custom', activeGroup: 'custom',
showingStickers: false, showingStickers: false,
...@@ -22,7 +22,8 @@ const EmojiPicker = { ...@@ -22,7 +22,8 @@ const EmojiPicker = {
} }
}, },
components: { components: {
StickerPicker: () => import('../sticker_picker/sticker_picker.vue') StickerPicker: () => import('../sticker_picker/sticker_picker.vue'),
Checkbox
}, },
methods: { methods: {
onEmoji (emoji) { onEmoji (emoji) {
......
...@@ -14,10 +14,6 @@ ...@@ -14,10 +14,6 @@
padding: 7px; padding: 7px;
line-height: normal; line-height: normal;
} }
.keep-open-label {
padding: 0 7px;
display: flex;
}
.heading { .heading {
display: flex; display: flex;
......
...@@ -75,22 +75,10 @@ ...@@ -75,22 +75,10 @@
</span> </span>
</div> </div>
</div> </div>
<div <div class="keep-open">
class="keep-open" <Checkbox v-model="keepOpen">
> {{ $t('emoji.keep_open') }}
<input </Checkbox>
:id="labelKey + 'keep-open'"
v-model="keepOpen"
type="checkbox"
>
<label
class="keep-open-label"
:for="labelKey + 'keep-open'"
>
<div class="keep-open-label-text">
{{ $t('emoji.keep_open') }}
</div>
</label>
</div> </div>
</div> </div>
<div <div
......
import { mapGetters } from 'vuex'
const FavoriteButton = { const FavoriteButton = {
props: ['status', 'loggedIn'], props: ['status', 'loggedIn'],
data () { data () {
return { return {
hidePostStatsLocal: typeof this.$store.state.config.hidePostStats === 'undefined'
? this.$store.state.instance.hidePostStats
: this.$store.state.config.hidePostStats,
animated: false animated: false
} }
}, },
...@@ -28,7 +27,8 @@ const FavoriteButton = { ...@@ -28,7 +27,8 @@ const FavoriteButton = {
'icon-star': this.status.favorited, 'icon-star': this.status.favorited,
'animate-spin': this.animated 'animate-spin': this.animated
} }
} },
...mapGetters(['mergedConfig'])
} }
} }
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
:title="$t('tool_tip.favorite')" :title="$t('tool_tip.favorite')"
@click.prevent="favorite()" @click.prevent="favorite()"
/> />
<span v-if="!hidePostStatsLocal && status.fave_num > 0">{{ status.fave_num }}</span> <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
</div> </div>
<div v-else> <div v-else>
<i <i
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
class="button-icon favorite-button" class="button-icon favorite-button"
:title="$t('tool_tip.favorite')" :title="$t('tool_tip.favorite')"
/> />
<span v-if="!hidePostStatsLocal && status.fave_num > 0">{{ status.fave_num }}</span> <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
</div> </div>
</template> </template>
......
...@@ -29,7 +29,7 @@ const Gallery = { ...@@ -29,7 +29,7 @@ const Gallery = {
return rows return rows
}, },
useContainFit () { useContainFit () {
return this.$store.state.config.useContainFit return this.$store.getters.mergedConfig.useContainFit
} }
}, },
methods: { methods: {
......
...@@ -40,7 +40,7 @@ export default { ...@@ -40,7 +40,7 @@ export default {
}, },
language: { language: {
get: function () { return this.$store.state.config.interfaceLanguage }, get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
set: function (val) { set: function (val) {
this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val }) this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
this.$i18n.locale = val this.$i18n.locale = val
......
...@@ -63,7 +63,7 @@ const MobileNav = { ...@@ -63,7 +63,7 @@ const MobileNav = {
this.$refs.notifications.markAsSeen() this.$refs.notifications.markAsSeen()
}, },
onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) { onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) {
if (this.$store.state.config.autoLoad && scrollTop + clientHeight >= scrollHeight) { if (this.$store.getters.mergedConfig.autoLoad && scrollTop + clientHeight >= scrollHeight) {
this.$refs.notifications.fetchOlderNotifications() this.$refs.notifications.fetchOlderNotifications()
} }
} }
......
...@@ -30,7 +30,7 @@ const MobilePostStatusButton = { ...@@ -30,7 +30,7 @@ const MobilePostStatusButton = {
return this.autohideFloatingPostButton && (this.hidden || this.inputActive) return this.autohideFloatingPostButton && (this.hidden || this.inputActive)
}, },
autohideFloatingPostButton () { autohideFloatingPostButton () {
return !!this.$store.state.config.autohideFloatingPostButton return !!this.$store.getters.mergedConfig.autohideFloatingPostButton
} }
}, },
watch: { watch: {
......
...@@ -39,7 +39,7 @@ const Notification = { ...@@ -39,7 +39,7 @@ const Notification = {
return highlightClass(this.notification.from_profile) return highlightClass(this.notification.from_profile)
}, },
userStyle () { userStyle () {
const highlight = this.$store.state.config.highlight const highlight = this.$store.getters.mergedConfig.highlight
const user = this.notification.from_profile const user = this.notification.from_profile
return highlightStyle(highlight[user.screen_name]) return highlightStyle(highlight[user.screen_name])
}, },
......
...@@ -7,6 +7,8 @@ import fileTypeService from '../../services/file_type/file_type.service.js' ...@@ -7,6 +7,8 @@ import fileTypeService from '../../services/file_type/file_type.service.js'
import { findOffset } from '../../services/offset_finder/offset_finder.service.js' import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
import { reject, map, uniqBy } from 'lodash' import { reject, map, uniqBy } from 'lodash'
import suggestor from '../emoji_input/suggestor.js' import suggestor from '../emoji_input/suggestor.js'
import { mapGetters } from 'vuex'
import Checkbox from '../checkbox/checkbox.vue'
const buildMentionsString = ({ user, attentions = [] }, currentUser) => { const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
let allAttentions = [...attentions] let allAttentions = [...attentions]
...@@ -35,7 +37,8 @@ const PostStatusForm = { ...@@ -35,7 +37,8 @@ const PostStatusForm = {
MediaUpload, MediaUpload,
EmojiInput, EmojiInput,
PollForm, PollForm,
ScopeSelector ScopeSelector,
Checkbox
}, },
mounted () { mounted () {
this.resize(this.$refs.textarea) this.resize(this.$refs.textarea)
...@@ -50,9 +53,7 @@ const PostStatusForm = { ...@@ -50,9 +53,7 @@ const PostStatusForm = {
const preset = this.$route.query.message const preset = this.$route.query.message
let statusText = preset || '' let statusText = preset || ''
const scopeCopy = typeof this.$store.state.config.scopeCopy === 'undefined' const { scopeCopy } = this.$store.getters.mergedConfig
? this.$store.state.instance.scopeCopy
: this.$store.state.config.scopeCopy
if (this.replyTo) { if (this.replyTo) {
const currentUser = this.$store.state.users.currentUser const currentUser = this.$store.state.users.currentUser
...@@ -63,9 +64,7 @@ const PostStatusForm = { ...@@ -63,9 +64,7 @@ const PostStatusForm = {
? this.copyMessageScope ? this.copyMessageScope
: this.$store.state.users.currentUser.default_scope : this.$store.state.users.currentUser.default_scope
const contentType = typeof this.$store.state.config.postContentType === 'undefined' const { postContentType: contentType } = this.$store.getters.mergedConfig
? this.$store.state.instance.postContentType
: this.$store.state.config.postContentType
return { return {
dropFiles: [], dropFiles: [],
...@@ -94,10 +93,7 @@ const PostStatusForm = { ...@@ -94,10 +93,7 @@ const PostStatusForm = {
return this.$store.state.users.currentUser.default_scope return this.$store.state.users.currentUser.default_scope
}, },
showAllScopes () { showAllScopes () {
const minimalScopesMode = typeof this.$store.state.config.minimalScopesMode === 'undefined' return !this.mergedConfig.minimalScopesMode
? this.$store.state.instance.minimalScopesMode
: this.$store.state.config.minimalScopesMode
return !minimalScopesMode
}, },
emojiUserSuggestor () { emojiUserSuggestor () {
return suggestor({ return suggestor({
...@@ -145,13 +141,7 @@ const PostStatusForm = { ...@@ -145,13 +141,7 @@ const PostStatusForm = {
return this.$store.state.instance.minimalScopesMode return this.$store.state.instance.minimalScopesMode
}, },
alwaysShowSubject () { alwaysShowSubject () {
if (typeof this.$store.state.config.alwaysShowSubjectInput !== 'undefined') { return this.mergedConfig.alwaysShowSubjectInput
return this.$store.state.config.alwaysShowSubjectInput
} else if (typeof this.$store.state.instance.alwaysShowSubjectInput !== 'undefined') {
return this.$store.state.instance.alwaysShowSubjectInput
} else {
return true
}
}, },
postFormats () { postFormats () {
return this.$store.state.instance.postFormats || [] return this.$store.state.instance.postFormats || []
...@@ -164,13 +154,14 @@ const PostStatusForm = { ...@@ -164,13 +154,14 @@ const PostStatusForm = {
this.$store.state.instance.pollLimits.max_options >= 2 this.$store.state.instance.pollLimits.max_options >= 2
}, },
hideScopeNotice () { hideScopeNotice () {
return this.$store.state.config.hideScopeNotice return this.$store.getters.mergedConfig.hideScopeNotice
}, },
pollContentError () { pollContentError () {
return this.pollFormVisible && return this.pollFormVisible &&
this.newStatus.poll && this.newStatus.poll &&
this.newStatus.poll.error this.newStatus.poll.error
} },
...mapGetters(['mergedConfig'])
}, },
methods: { methods: {
postStatus (newStatus) { postStatus (newStatus) {
......
...@@ -261,12 +261,9 @@ ...@@ -261,12 +261,9 @@
v-if="newStatus.files.length > 0" v-if="newStatus.files.length > 0"
class="upload_settings" class="upload_settings"
> >
<input <Checkbox v-model="newStatus.nsfw">
id="filesSensitive" {{ $t('post_status.attachments_sensitive') }}
v-model="newStatus.nsfw" </Checkbox>
type="checkbox"
>
<label for="filesSensitive">{{ $t('post_status.attachments_sensitive') }}</label>
</div> </div>
</form> </form>
</div> </div>
......
import { mapGetters } from 'vuex'
const RetweetButton = { const RetweetButton = {
props: ['status', 'loggedIn', 'visibility'], props: ['status', 'loggedIn', 'visibility'],
data () { data () {
return { return {
hidePostStatsLocal: typeof this.$store.state.config.hidePostStats === 'undefined'
? this.$store.state.instance.hidePostStats
: this.$store.state.config.hidePostStats,
animated: false animated: false
} }
}, },
...@@ -28,7 +27,8 @@ const RetweetButton = { ...@@ -28,7 +27,8 @@ const RetweetButton = {
'retweeted-empty': !this.status.repeated, 'retweeted-empty': !this.status.repeated,
'animate-spin': this.animated 'animate-spin': this.animated
} }
} },
...mapGetters(['mergedConfig'])
} }
} }
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
:title="$t('tool_tip.repeat')" :title="$t('tool_tip.repeat')"
@click.prevent="retweet()" @click.prevent="retweet()"
/> />
<span v-if="!hidePostStatsLocal && status.repeat_num > 0">{{ status.repeat_num }}</span> <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
</template> </template>
<template v-else> <template v-else>
<i <i
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
class="button-icon icon-retweet" class="button-icon icon-retweet"
:title="$t('tool_tip.repeat')" :title="$t('tool_tip.repeat')"
/> />
<span v-if="!hidePostStatsLocal && status.repeat_num > 0">{{ status.repeat_num }}</span> <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
</div> </div>
</template> </template>
......