Merge branch 'cw-clickthrough' into 'develop'

Add support for configurable CW clickthrough

See merge request pleroma/pleroma-fe!310
This commit is contained in:
kaniini 2018-08-20 02:51:20 +00:00
commit 4ba4772e92
8 changed files with 60 additions and 19 deletions

View file

@ -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 })
} }

View file

@ -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>

View file

@ -22,15 +22,18 @@ const Status = {
'noHeading', 'noHeading',
'inlineExpanded' 'inlineExpanded'
], ],
data: () => ({ data () {
replying: false, return {
expanded: false, replying: false,
unmuted: false, expanded: false,
userExpanded: false, unmuted: false,
preview: null, userExpanded: false,
showPreview: false, preview: null,
showingTall: false showPreview: 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

View file

@ -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;
} }

View file

@ -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',

View file

@ -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')
} }

View file

@ -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,

View file

@ -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
} }