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 {
}),
created () {
// 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)
},
destroyed () {
......@@ -93,7 +93,7 @@ export default {
suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
showInstanceSpecificPanel () {
return this.$store.state.instance.showInstanceSpecificPanel &&
!this.$store.state.config.hideISP &&
!this.$store.getters.mergedConfig.hideISP &&
this.$store.state.instance.instanceSpecificPanelContent
},
showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
......
......@@ -16,8 +16,8 @@ const Attachment = {
data () {
return {
nsfwImage: this.$store.state.instance.nsfwCensorImage || nsfwImage,
hideNsfwLocal: this.$store.state.config.hideNsfw,
preloadImage: this.$store.state.config.preloadImage,
hideNsfwLocal: this.$store.getters.mergedConfig.hideNsfw,
preloadImage: this.$store.getters.mergedConfig.preloadImage,
loading: false,
img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'),
modalOpen: false,
......@@ -58,7 +58,7 @@ const Attachment = {
}
},
openModal (event) {
const modalTypes = this.$store.state.config.playVideosInModal
const modalTypes = this.$store.getters.mergedConfig.playVideosInModal
? ['image', 'video']
: ['image']
if (fileTypeService.fileMatchesSomeType(modalTypes, this.attachment) ||
......@@ -71,7 +71,7 @@ const Attachment = {
}
},
toggleHidden (event) {
if (this.$store.state.config.useOneClickNsfw && !this.showHidden) {
if (this.$store.getters.mergedConfig.useOneClickNsfw && !this.showHidden) {
this.openModal(event)
return
}
......
<template>
<label class="checkbox">
<label
class="checkbox"
:class="{ disabled, indeterminate }"
>
<input
type="checkbox"
:disabled="disabled"
:checked="checked"
:indeterminate.prop="indeterminate"
@change="$emit('change', $event.target.checked)"
>
<i class="checkbox-indicator" />
<span v-if="!!$slots.default"><slot /></span>
<span
class="label"
v-if="!!$slots.default"
>
<slot />
</span>
</label>
</template>
......@@ -17,7 +26,11 @@ export default {
prop: 'checked',
event: 'change'
},
props: ['checked', 'indeterminate']
props: [
'checked',
'indeterminate',
'disabled'
]
}
</script>
......@@ -27,12 +40,16 @@ export default {
.checkbox {
position: relative;
display: inline-block;
padding-left: 1.2em;
min-height: 1.2em;
&-indicator {
position: relative;
padding-left: 1.2em;
}
&-indicator::before {
position: absolute;
left: 0;
right: 0;
top: 0;
display: block;
content: '✔';
......@@ -54,6 +71,17 @@ export default {
box-sizing: border-box;
}
&.disabled {
.checkbox-indicator::before,
.label {
opacity: .5;
}
.label {
color: $fallback--faint;
color: var(--faint, $fallback--faint);
}
}
input[type=checkbox] {
display: none;
......@@ -68,9 +96,6 @@ export default {
color: var(--text, $fallback--text);
}
&:disabled + .checkbox-indicator::before {
opacity: .5;
}
}
& > span {
......
......@@ -99,7 +99,7 @@ const EmojiInput = {
},
computed: {
padEmoji () {
return this.$store.state.config.padEmoji
return this.$store.getters.mergedConfig.padEmoji
},
suggestions () {
const firstchar = this.textAtCaret.charAt(0)
......
import Checkbox from '../checkbox/checkbox.vue'
const filterByKeyword = (list, keyword = '') => {
return list.filter(x => x.displayText.includes(keyword))
......@@ -13,7 +14,6 @@ const EmojiPicker = {
},
data () {
return {
labelKey: String(Math.random() * 100000),
keyword: '',
activeGroup: 'custom',
showingStickers: false,
......@@ -22,7 +22,8 @@ const EmojiPicker = {
}
},
components: {
StickerPicker: () => import('../sticker_picker/sticker_picker.vue')
StickerPicker: () => import('../sticker_picker/sticker_picker.vue'),
Checkbox
},
methods: {
onEmoji (emoji) {
......
......@@ -14,10 +14,6 @@
padding: 7px;
line-height: normal;
}
.keep-open-label {
padding: 0 7px;
display: flex;
}
.heading {
display: flex;
......
......@@ -75,22 +75,10 @@
</span>
</div>
</div>
<div
class="keep-open"
>
<input
: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 class="keep-open">
<Checkbox v-model="keepOpen">
{{ $t('emoji.keep_open') }}
</Checkbox>
</div>
</div>
<div
......
import { mapGetters } from 'vuex'
const FavoriteButton = {
props: ['status', 'loggedIn'],
data () {
return {
hidePostStatsLocal: typeof this.$store.state.config.hidePostStats === 'undefined'
? this.$store.state.instance.hidePostStats
: this.$store.state.config.hidePostStats,
animated: false
}
},
......@@ -28,7 +27,8 @@ const FavoriteButton = {
'icon-star': this.status.favorited,
'animate-spin': this.animated
}
}
},
...mapGetters(['mergedConfig'])
}
}
......
......@@ -6,7 +6,7 @@
:title="$t('tool_tip.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 v-else>
<i
......@@ -14,7 +14,7 @@
class="button-icon favorite-button"
: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>
</template>
......
......@@ -29,7 +29,7 @@ const Gallery = {
return rows
},
useContainFit () {
return this.$store.state.config.useContainFit
return this.$store.getters.mergedConfig.useContainFit
}
},
methods: {
......
......@@ -40,7 +40,7 @@ export default {
},
language: {
get: function () { return this.$store.state.config.interfaceLanguage },
get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
set: function (val) {
this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
this.$i18n.locale = val
......
......@@ -63,7 +63,7 @@ const MobileNav = {
this.$refs.notifications.markAsSeen()
},
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()
}
}
......
......@@ -30,7 +30,7 @@ const MobilePostStatusButton = {
return this.autohideFloatingPostButton && (this.hidden || this.inputActive)
},
autohideFloatingPostButton () {
return !!this.$store.state.config.autohideFloatingPostButton
return !!this.$store.getters.mergedConfig.autohideFloatingPostButton
}
},
watch: {
......
......@@ -39,7 +39,7 @@ const Notification = {
return highlightClass(this.notification.from_profile)
},
userStyle () {
const highlight = this.$store.state.config.highlight
const highlight = this.$store.getters.mergedConfig.highlight
const user = this.notification.from_profile
return highlightStyle(highlight[user.screen_name])
},
......
......@@ -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 { reject, map, uniqBy } from 'lodash'
import suggestor from '../emoji_input/suggestor.js'
import { mapGetters } from 'vuex'
import Checkbox from '../checkbox/checkbox.vue'
const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
let allAttentions = [...attentions]
......@@ -35,7 +37,8 @@ const PostStatusForm = {
MediaUpload,
EmojiInput,
PollForm,
ScopeSelector
ScopeSelector,
Checkbox
},
mounted () {
this.resize(this.$refs.textarea)
......@@ -50,9 +53,7 @@ const PostStatusForm = {
const preset = this.$route.query.message
let statusText = preset || ''
const scopeCopy = typeof this.$store.state.config.scopeCopy === 'undefined'
? this.$store.state.instance.scopeCopy
: this.$store.state.config.scopeCopy
const { scopeCopy } = this.$store.getters.mergedConfig
if (this.replyTo) {
const currentUser = this.$store.state.users.currentUser
......@@ -63,9 +64,7 @@ const PostStatusForm = {
? this.copyMessageScope
: this.$store.state.users.currentUser.default_scope
const contentType = typeof this.$store.state.config.postContentType === 'undefined'
? this.$store.state.instance.postContentType
: this.$store.state.config.postContentType
const { postContentType: contentType } = this.$store.getters.mergedConfig
return {
dropFiles: [],
......@@ -94,10 +93,7 @@ const PostStatusForm = {
return this.$store.state.users.currentUser.default_scope
},
showAllScopes () {
const minimalScopesMode = typeof this.$store.state.config.minimalScopesMode === 'undefined'
? this.$store.state.instance.minimalScopesMode
: this.$store.state.config.minimalScopesMode
return !minimalScopesMode
return !this.mergedConfig.minimalScopesMode
},
emojiUserSuggestor () {
return suggestor({
......@@ -145,13 +141,7 @@ const PostStatusForm = {
return this.$store.state.instance.minimalScopesMode
},
alwaysShowSubject () {
if (typeof this.$store.state.config.alwaysShowSubjectInput !== 'undefined') {
return this.$store.state.config.alwaysShowSubjectInput
} else if (typeof this.$store.state.instance.alwaysShowSubjectInput !== 'undefined') {
return this.$store.state.instance.alwaysShowSubjectInput
} else {
return true
}
return this.mergedConfig.alwaysShowSubjectInput
},
postFormats () {
return this.$store.state.instance.postFormats || []
......@@ -164,13 +154,14 @@ const PostStatusForm = {
this.$store.state.instance.pollLimits.max_options >= 2
},
hideScopeNotice () {
return this.$store.state.config.hideScopeNotice
return this.$store.getters.mergedConfig.hideScopeNotice
},
pollContentError () {
return this.pollFormVisible &&
this.newStatus.poll &&
this.newStatus.poll.error
}
},
...mapGetters(['mergedConfig'])
},
methods: {
postStatus (newStatus) {
......
......@@ -261,12 +261,9 @@
v-if="newStatus.files.length > 0"
class="upload_settings"
>
<input
id="filesSensitive"
v-model="newStatus.nsfw"
type="checkbox"
>
<label for="filesSensitive">{{ $t('post_status.attachments_sensitive') }}</label>
<Checkbox v-model="newStatus.nsfw">
{{ $t('post_status.attachments_sensitive') }}
</Checkbox>
</div>
</form>
</div>
......
import { mapGetters } from 'vuex'
const RetweetButton = {
props: ['status', 'loggedIn', 'visibility'],
data () {
return {
hidePostStatsLocal: typeof this.$store.state.config.hidePostStats === 'undefined'
? this.$store.state.instance.hidePostStats
: this.$store.state.config.hidePostStats,
animated: false
}
},
......@@ -28,7 +27,8 @@ const RetweetButton = {
'retweeted-empty': !this.status.repeated,
'animate-spin': this.animated
}
}
},
...mapGetters(['mergedConfig'])
}
}
......
......@@ -7,7 +7,7 @@
:title="$t('tool_tip.repeat')"
@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 v-else>
<i
......@@ -23,7 +23,7 @@
class="button-icon icon-retweet"
: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>
</template>
......
This diff is collapsed.
This diff is collapsed.
......@@ -16,6 +16,7 @@ import fileType from 'src/services/file_type/file_type.service'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
import { mentionMatchesUrl, extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
import { filter, unescape, uniqBy } from 'lodash'
import { mapGetters } from 'vuex'
const Status = {
name: 'Status',
......@@ -41,20 +42,16 @@ const Status = {
showingTall: this.inConversation && this.focused,
showingLongSubject: false,
error: null,
expandingSubject: typeof this.$store.state.config.collapseMessageWithSubject === 'undefined'
? !this.$store.state.instance.collapseMessageWithSubject
: !this.$store.state.config.collapseMessageWithSubject,
expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject,
betterShadow: this.$store.state.interface.browserSupport.cssFilter
}
},
computed: {
localCollapseSubjectDefault () {
return typeof this.$store.state.config.collapseMessageWithSubject === 'undefined'
? this.$store.state.instance.collapseMessageWithSubject
: this.$store.state.config.collapseMessageWithSubject
return this.mergedConfig.collapseMessageWithSubject
},
muteWords () {
return this.$store.state.config.muteWords
return this.mergedConfig.muteWords
},
repeaterClass () {
const user = this.statusoid.user
......@@ -69,18 +66,18 @@ const Status = {
},
repeaterStyle () {
const user = this.statusoid.user
const highlight = this.$store.state.config.highlight
const highlight = this.mergedConfig.highlight
return highlightStyle(highlight[user.screen_name])
},
userStyle () {
if (this.noHeading) return
const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
const highlight = this.$store.state.config.highlight
const highlight = this.mergedConfig.highlight
return highlightStyle(highlight[user.screen_name])
},
hideAttachments () {
return (this.$store.state.config.hideAttachments && !this.inConversation) ||
(this.$store.state.config.hideAttachmentsInConv && this.inConversation)
return (this.mergedConfig.hideAttachments && !this.inConversation) ||
(this.mergedConfig.hideAttachmentsInConv && this.inConversation)
},
userProfileLink () {
return this.generateUserProfileLink(this.status.user.id, this.status.user.screen_name)
......@@ -119,9 +116,7 @@ const Status = {
},
muted () { return !this.unmuted && ((!this.inProfile && this.status.user.muted) || (!this.inConversation && this.status.thread_muted) || this.muteWordHits.length > 0) },
hideFilteredStatuses () {
return typeof this.$store.state.config.hideFilteredStatuses === 'undefined'
? this.$store.state.instance.hideFilteredStatuses
: this.$store.state.config.hideFilteredStatuses
return this.mergedConfig.hideFilteredStatuses
},
hideStatus () {
return (this.hideReply || this.deleted) || (this.muted && this.hideFilteredStatuses)
......@@ -162,7 +157,7 @@ const Status = {
}
},
hideReply () {
if (this.$store.state.config.replyVisibility === 'all') {
if (this.mergedConfig.replyVisibility === 'all') {
return false
}
if (this.inConversation || !this.isReply) {
......@@ -174,7 +169,7 @@ const Status = {
if (this.status.type === 'retweet') {
return false
}
const checkFollowing = this.$store.state.config.replyVisibility === 'following'
const checkFollowing = this.mergedConfig.replyVisibility === 'following'
for (var i = 0; i < this.status.attentions.length; ++i) {
if (this.status.user.id === this.status.attentions[i].id) {
continue
......@@ -219,9 +214,7 @@ const Status = {
replySubject () {
if (!this.status.summary) return ''
const decodedSummary = unescape(this.status.summary)
const behavior = typeof this.$store.state.config.subjectLineBehavior === 'undefined'
? this.$store.state.instance.subjectLineBehavior
: this.$store.state.config.subjectLineBehavior
const behavior = this.mergedConfig.subjectLineBehavior
const startsWithRe = decodedSummary.match(/^re[: ]/i)
if ((behavior !== 'noop' && startsWithRe) || behavior === 'masto') {
return decodedSummary
......@@ -232,8 +225,8 @@ const Status = {
}
},
attachmentSize () {
if ((this.$store.state.config.hideAttachments && !this.inConversation) ||
(this.$store.state.config.hideAttachmentsInConv && this.inConversation) ||
if ((this.mergedConfig.hideAttachments && !this.inConversation) ||
(this.mergedConfig.hideAttachmentsInConv && this.inConversation) ||
(this.status.attachments.length > this.maxThumbnails)) {
return 'hide'
} else if (this.compact) {
......@@ -245,7 +238,7 @@ const Status = {
if (this.attachmentSize === 'hide') {
return []
}
return this.$store.state.config.playVideosInModal
return this.mergedConfig.playVideosInModal
? ['image', 'video']
: ['image']
},
......@@ -260,7 +253,7 @@ const Status = {
)
},
maxThumbnails () {
return this.$store.state.config.maxThumbnails
return this.mergedConfig.maxThumbnails
},
contentHtml () {
if (!this.status.summary_html) {
......@@ -283,10 +276,9 @@ const Status = {
return this.status.tags.filter(tagObj => tagObj.hasOwnProperty('name')).map(tagObj => tagObj.name).join(' ')
},
hidePostStats () {
return typeof this.$store.state.config.hidePostStats === 'undefined'
? this.$store.state.instance.hidePostStats
: this.$store.state.config.hidePostStats
}
return this.mergedConfig.hidePostStats
},
...mapGetters(['mergedConfig'])
},
components: {
Attachment,
......
......@@ -8,7 +8,7 @@ const StillImage = {
],
data () {
return {
stopGifs: this.$store.state.config.stopGifs
stopGifs: this.$store.getters.mergedConfig.stopGifs
}
},
computed: {
......
......@@ -10,6 +10,7 @@ import ContrastRatio from '../contrast_ratio/contrast_ratio.vue'
import TabSwitcher from '../tab_switcher/tab_switcher.js'
import Preview from './preview.vue'
import ExportImport from '../export_import/export_import.vue'
import Checkbox from '../checkbox/checkbox.vue'
// List of color values used in v1
const v1OnlyNames = [
......@@ -27,7 +28,7 @@ export default {
data () {
return {
availableStyles: [],
selected: this.$store.state.config.theme,
selected: this.$store.getters.mergedConfig.theme,
previewShadows: {},
previewColors: {},
......@@ -111,7 +112,7 @@ export default {
})
},
mounted () {
this.normalizeLocalState(this.$store.state.config.customTheme)
this.normalizeLocalState(this.$store.getters.mergedConfig.customTheme)
if (typeof this.shadowSelected === 'undefined') {
this.shadowSelected = this.shadowsAvailable[0]
}
......@@ -338,7 +339,8 @@ export default {
FontControl,
TabSwitcher,
Preview,
ExportImport
ExportImport,
Checkbox
},
methods: {
setCustomTheme () {
......@@ -365,9 +367,9 @@ export default {
return version >= 1 || version <= 2
},
clearAll () {
const state = this.$store.state.config.customTheme
const state = this.$store.getters.mergedConfig.customTheme
const version = state.colors ? 2 : 'l1'
this.normalizeLocalState(this.$store.state.config.customTheme, version)
this.normalizeLocalState(this.$store.getters.mergedConfig.customTheme, version)
},
// Clears all the extra stuff when loading V1 theme
......
......@@ -42,44 +42,29 @@
</div>
<div class="save-load-options">
<span class="keep-option">
<input
id="keep-color"
v-model="keepColor"
type="checkbox"
>
<label for="keep-color">{{ $t('settings.style.switcher.keep_color') }}</label>
<Checkbox v-model="keepColor">
{{ $t('settings.style.switcher.keep_color') }}
</Checkbox>
</span>
<span class="keep-option">
<input
id="keep-shadows"
v-model="keepShadows"
type="checkbox"
>
<label for="keep-shadows">{{ $t('settings.style.switcher.keep_shadows') }}</label>
<Checkbox v-model="keepShadows">
{{ $t('settings.style.switcher.keep_shadows') }}
</Checkbox>
</span>
<span class="keep-option">
<input
id="keep-opacity"
v-model="keepOpacity"
type="checkbox"
>
<label for="keep-opacity">{{ $t('settings.style.switcher.keep_opacity') }}</label>
<Checkbox v-model="keepOpacity">
{{ $t('settings.style.switcher.keep_opacity') }}
</Checkbox>
</span>
<span class="keep-option">
<input
id="keep-roundness"
v-model="keepRoundness"
type="checkbox"
>
<label for="keep-roundness">{{ $t('settings.style.switcher.keep_roundness') }}</label>
<Checkbox v-model="keepRoundness">
{{ $t('settings.style.switcher.keep_roundness') }}
</Checkbox>
</span>
<span class="keep-option">
<input
id="keep-fonts"
v-model="keepFonts"
type="checkbox"
>
<label for="keep-fonts">{{ $t('settings.style.switcher.keep_fonts') }}</label>
<Checkbox v-model="keepFonts">
{{ $t('settings.style.switcher.keep_fonts') }}
</Checkbox>
</span>
<p>{{ $t('settings.style.switcher.save_load_hint') }}</p>
</div>
......