Merge branch 'cw-clickthrough' into 'develop'
Add support for configurable CW clickthrough See merge request pleroma/pleroma-fe!310
This commit is contained in:
commit
4ba4772e92
|
@ -15,6 +15,7 @@ const settings = {
|
||||||
streamingLocal: this.$store.state.config.streaming,
|
streamingLocal: this.$store.state.config.streaming,
|
||||||
pauseOnUnfocusedLocal: this.$store.state.config.pauseOnUnfocused,
|
pauseOnUnfocusedLocal: this.$store.state.config.pauseOnUnfocused,
|
||||||
hoverPreviewLocal: this.$store.state.config.hoverPreview,
|
hoverPreviewLocal: this.$store.state.config.hoverPreview,
|
||||||
|
collapseMessageWithSubjectLocal: this.$store.state.config.collapseMessageWithSubject,
|
||||||
stopGifs: this.$store.state.config.stopGifs,
|
stopGifs: this.$store.state.config.stopGifs,
|
||||||
loopSilentAvailable:
|
loopSilentAvailable:
|
||||||
// Firefox
|
// Firefox
|
||||||
|
@ -65,6 +66,9 @@ const settings = {
|
||||||
value = filter(value.split('\n'), (word) => trim(word).length > 0)
|
value = filter(value.split('\n'), (word) => trim(word).length > 0)
|
||||||
this.$store.dispatch('setOption', { name: 'muteWords', value })
|
this.$store.dispatch('setOption', { name: 'muteWords', value })
|
||||||
},
|
},
|
||||||
|
collapseMessageWithSubjectLocal (value) {
|
||||||
|
this.$store.dispatch('setOption', { name: 'collapseMessageWithSubject', value })
|
||||||
|
},
|
||||||
stopGifs (value) {
|
stopGifs (value) {
|
||||||
this.$store.dispatch('setOption', { name: 'stopGifs', value })
|
this.$store.dispatch('setOption', { name: 'stopGifs', value })
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,6 +16,10 @@
|
||||||
<div class="setting-item">
|
<div class="setting-item">
|
||||||
<h2>{{$t('nav.timeline')}}</h2>
|
<h2>{{$t('nav.timeline')}}</h2>
|
||||||
<ul class="setting-list">
|
<ul class="setting-list">
|
||||||
|
<li>
|
||||||
|
<input type="checkbox" id="collapseMessageWithSubject" v-model="collapseMessageWithSubjectLocal">
|
||||||
|
<label for="collapseMessageWithSubject">{{$t('settings.collapse_subject')}}</label>
|
||||||
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<input type="checkbox" id="streaming" v-model="streamingLocal">
|
<input type="checkbox" id="streaming" v-model="streamingLocal">
|
||||||
<label for="streaming">{{$t('settings.streaming')}}</label>
|
<label for="streaming">{{$t('settings.streaming')}}</label>
|
||||||
|
|
|
@ -22,15 +22,18 @@ const Status = {
|
||||||
'noHeading',
|
'noHeading',
|
||||||
'inlineExpanded'
|
'inlineExpanded'
|
||||||
],
|
],
|
||||||
data: () => ({
|
data () {
|
||||||
|
return {
|
||||||
replying: false,
|
replying: false,
|
||||||
expanded: false,
|
expanded: false,
|
||||||
unmuted: false,
|
unmuted: false,
|
||||||
userExpanded: false,
|
userExpanded: false,
|
||||||
preview: null,
|
preview: null,
|
||||||
showPreview: false,
|
showPreview: false,
|
||||||
showingTall: false
|
showingTall: false,
|
||||||
}),
|
expandingSubject: !this.$store.state.config.collapseMessageWithSubject
|
||||||
|
}
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
muteWords () {
|
muteWords () {
|
||||||
return this.$store.state.config.muteWords
|
return this.$store.state.config.muteWords
|
||||||
|
@ -98,12 +101,27 @@ const Status = {
|
||||||
//
|
//
|
||||||
// Using max-height + overflow: auto for status components resulted in false positives
|
// Using max-height + overflow: auto for status components resulted in false positives
|
||||||
// very often with japanese characters, and it was very annoying.
|
// very often with japanese characters, and it was very annoying.
|
||||||
|
tallStatus () {
|
||||||
|
const lengthScore = this.status.statusnet_html.split(/<p|<br/).length + this.status.text.length / 80
|
||||||
|
return lengthScore > 20
|
||||||
|
},
|
||||||
|
hideSubjectStatus () {
|
||||||
|
if (this.tallStatus && !this.$store.state.config.collapseMessageWithSubject) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
return !this.expandingSubject && this.status.summary
|
||||||
|
},
|
||||||
hideTallStatus () {
|
hideTallStatus () {
|
||||||
|
if (this.status.summary && this.$store.state.config.collapseMessageWithSubject) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
if (this.showingTall) {
|
if (this.showingTall) {
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
const lengthScore = this.status.statusnet_html.split(/<p|<br/).length + this.status.text.length / 80
|
return this.tallStatus
|
||||||
return lengthScore > 20
|
},
|
||||||
|
showingMore () {
|
||||||
|
return this.showingTall || (this.status.summary && this.expandingSubject)
|
||||||
},
|
},
|
||||||
attachmentSize () {
|
attachmentSize () {
|
||||||
if ((this.$store.state.config.hideAttachments && !this.inConversation) ||
|
if ((this.$store.state.config.hideAttachments && !this.inConversation) ||
|
||||||
|
@ -163,8 +181,16 @@ const Status = {
|
||||||
toggleUserExpanded () {
|
toggleUserExpanded () {
|
||||||
this.userExpanded = !this.userExpanded
|
this.userExpanded = !this.userExpanded
|
||||||
},
|
},
|
||||||
toggleShowTall () {
|
toggleShowMore () {
|
||||||
this.showingTall = !this.showingTall
|
if (this.showingTall) {
|
||||||
|
this.showingTall = false
|
||||||
|
} else if (this.expandingSubject) {
|
||||||
|
this.expandingSubject = false
|
||||||
|
} else if (this.hideTallStatus) {
|
||||||
|
this.showingTall = true
|
||||||
|
} else if (this.hideSubjectStatus) {
|
||||||
|
this.expandingSubject = true
|
||||||
|
}
|
||||||
},
|
},
|
||||||
replyEnter (id, event) {
|
replyEnter (id, event) {
|
||||||
this.showPreview = true
|
this.showPreview = true
|
||||||
|
|
|
@ -76,9 +76,11 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div :class="{'tall-status': hideTallStatus}" class="status-content-wrapper">
|
<div :class="{'tall-status': hideTallStatus}" class="status-content-wrapper">
|
||||||
<a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="hideTallStatus" href="#" @click.prevent="toggleShowTall">Show more</a>
|
<a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="hideTallStatus" href="#" @click.prevent="toggleShowMore">Show more</a>
|
||||||
<div @click.prevent="linkClicked" class="status-content media-body" v-html="status.statusnet_html"></div>
|
<div @click.prevent="linkClicked" class="status-content media-body" v-html="status.statusnet_html" v-if="!hideSubjectStatus"></div>
|
||||||
<a v-if="showingTall" href="#" class="tall-status-unhider" @click.prevent="toggleShowTall">Show less</a>
|
<div @click.prevent="linkClicked" class="status-content media-body" v-html="status.summary" v-else></div>
|
||||||
|
<a v-if="hideSubjectStatus" href="#" class="cw-status-hider" @click.prevent="toggleShowMore">Show more</a>
|
||||||
|
<a v-if="showingMore" href="#" class="status-unhider" @click.prevent="toggleShowMore">Show less</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if='status.attachments' class='attachments media-body'>
|
<div v-if='status.attachments' class='attachments media-body'>
|
||||||
|
@ -310,7 +312,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tall-status-unhider {
|
.status-unhider, .cw-status-hider {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
|
@ -317,6 +317,7 @@ const en = {
|
||||||
hide_attachments_in_tl: 'Hide attachments in timeline',
|
hide_attachments_in_tl: 'Hide attachments in timeline',
|
||||||
hide_attachments_in_convo: 'Hide attachments in conversations',
|
hide_attachments_in_convo: 'Hide attachments in conversations',
|
||||||
nsfw_clickthrough: 'Enable clickthrough NSFW attachment hiding',
|
nsfw_clickthrough: 'Enable clickthrough NSFW attachment hiding',
|
||||||
|
collapse_subject: 'Collapse posts with subjects',
|
||||||
stop_gifs: 'Play-on-hover GIFs',
|
stop_gifs: 'Play-on-hover GIFs',
|
||||||
autoload: 'Enable automatic loading when scrolled to the bottom',
|
autoload: 'Enable automatic loading when scrolled to the bottom',
|
||||||
streaming: 'Enable automatic streaming of new posts when scrolled to the top',
|
streaming: 'Enable automatic streaming of new posts when scrolled to the top',
|
||||||
|
|
|
@ -45,6 +45,7 @@ Vue.use(VueChatScroll)
|
||||||
|
|
||||||
const persistedStateOptions = {
|
const persistedStateOptions = {
|
||||||
paths: [
|
paths: [
|
||||||
|
'config.collapseMessageWithSubject',
|
||||||
'config.hideAttachments',
|
'config.hideAttachments',
|
||||||
'config.hideAttachmentsInConv',
|
'config.hideAttachmentsInConv',
|
||||||
'config.hideNsfw',
|
'config.hideNsfw',
|
||||||
|
@ -95,7 +96,7 @@ window.fetch('/api/statusnet/config.json')
|
||||||
window.fetch('/static/config.json')
|
window.fetch('/static/config.json')
|
||||||
.then((res) => res.json())
|
.then((res) => res.json())
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
const {theme, background, logo, showWhoToFollowPanel, whoToFollowProvider, whoToFollowLink, showInstanceSpecificPanel, scopeOptionsEnabled} = data
|
const {theme, background, logo, showWhoToFollowPanel, whoToFollowProvider, whoToFollowLink, showInstanceSpecificPanel, scopeOptionsEnabled, collapseMessageWithSubject} = data
|
||||||
store.dispatch('setOption', { name: 'theme', value: theme })
|
store.dispatch('setOption', { name: 'theme', value: theme })
|
||||||
store.dispatch('setOption', { name: 'background', value: background })
|
store.dispatch('setOption', { name: 'background', value: background })
|
||||||
store.dispatch('setOption', { name: 'logo', value: logo })
|
store.dispatch('setOption', { name: 'logo', value: logo })
|
||||||
|
@ -104,6 +105,7 @@ window.fetch('/static/config.json')
|
||||||
store.dispatch('setOption', { name: 'whoToFollowLink', value: whoToFollowLink })
|
store.dispatch('setOption', { name: 'whoToFollowLink', value: whoToFollowLink })
|
||||||
store.dispatch('setOption', { name: 'showInstanceSpecificPanel', value: showInstanceSpecificPanel })
|
store.dispatch('setOption', { name: 'showInstanceSpecificPanel', value: showInstanceSpecificPanel })
|
||||||
store.dispatch('setOption', { name: 'scopeOptionsEnabled', value: scopeOptionsEnabled })
|
store.dispatch('setOption', { name: 'scopeOptionsEnabled', value: scopeOptionsEnabled })
|
||||||
|
store.dispatch('setOption', { name: 'collapseMessageWithSubject', value: collapseMessageWithSubject })
|
||||||
if (data['chatDisabled']) {
|
if (data['chatDisabled']) {
|
||||||
store.dispatch('disableChat')
|
store.dispatch('disableChat')
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,6 +4,7 @@ import StyleSetter from '../services/style_setter/style_setter.js'
|
||||||
const defaultState = {
|
const defaultState = {
|
||||||
name: 'Pleroma FE',
|
name: 'Pleroma FE',
|
||||||
colors: {},
|
colors: {},
|
||||||
|
collapseMessageWithSubject: false,
|
||||||
hideAttachments: false,
|
hideAttachments: false,
|
||||||
hideAttachmentsInConv: false,
|
hideAttachmentsInConv: false,
|
||||||
hideNsfw: true,
|
hideNsfw: true,
|
||||||
|
|
|
@ -11,5 +11,6 @@
|
||||||
"whoToFollowLink": "https://vinayaka.distsn.org/?{{host}}+{{user}}",
|
"whoToFollowLink": "https://vinayaka.distsn.org/?{{host}}+{{user}}",
|
||||||
"whoToFollowLinkDummy2": "https://followlink.osa-p.net/recommend.html",
|
"whoToFollowLinkDummy2": "https://followlink.osa-p.net/recommend.html",
|
||||||
"showInstanceSpecificPanel": false,
|
"showInstanceSpecificPanel": false,
|
||||||
"scopeOptionsEnabled": false
|
"scopeOptionsEnabled": false,
|
||||||
|
"collapseMessageWithSubject": false
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue