Merge branch 'fix/floating-button' into 'develop'

Mobile Post button fix

Closes #506

See merge request pleroma/pleroma-fe!769
This commit is contained in:
HJ 2019-05-07 18:40:49 +00:00
commit 157d4e601e
6 changed files with 50 additions and 22 deletions

View file

@ -1,5 +1,5 @@
import PostStatusForm from '../post_status_form/post_status_form.vue' import PostStatusForm from '../post_status_form/post_status_form.vue'
import { throttle } from 'lodash' import { debounce } from 'lodash'
const MobilePostStatusModal = { const MobilePostStatusModal = {
components: { components: {
@ -16,11 +16,15 @@ const MobilePostStatusModal = {
} }
}, },
created () { created () {
window.addEventListener('scroll', this.handleScroll) if (this.autohideFloatingPostButton) {
this.activateFloatingPostButtonAutohide()
}
window.addEventListener('resize', this.handleOSK) window.addEventListener('resize', this.handleOSK)
}, },
destroyed () { destroyed () {
window.removeEventListener('scroll', this.handleScroll) if (this.autohideFloatingPostButton) {
this.deactivateFloatingPostButtonAutohide()
}
window.removeEventListener('resize', this.handleOSK) window.removeEventListener('resize', this.handleOSK)
}, },
computed: { computed: {
@ -28,10 +32,30 @@ const MobilePostStatusModal = {
return this.$store.state.users.currentUser return this.$store.state.users.currentUser
}, },
isHidden () { isHidden () {
return this.hidden || this.inputActive return this.autohideFloatingPostButton && (this.hidden || this.inputActive)
},
autohideFloatingPostButton () {
return !!this.$store.state.config.autohideFloatingPostButton
}
},
watch: {
autohideFloatingPostButton: function (isEnabled) {
if (isEnabled) {
this.activateFloatingPostButtonAutohide()
} else {
this.deactivateFloatingPostButtonAutohide()
}
} }
}, },
methods: { methods: {
activateFloatingPostButtonAutohide () {
window.addEventListener('scroll', this.handleScrollStart)
window.addEventListener('scroll', this.handleScrollEnd)
},
deactivateFloatingPostButtonAutohide () {
window.removeEventListener('scroll', this.handleScrollStart)
window.removeEventListener('scroll', this.handleScrollEnd)
},
openPostForm () { openPostForm () {
this.postFormOpen = true this.postFormOpen = true
this.hidden = true this.hidden = true
@ -65,26 +89,19 @@ const MobilePostStatusModal = {
this.inputActive = false this.inputActive = false
} }
}, },
handleScroll: throttle(function () { handleScrollStart: debounce(function () {
const scrollAmount = window.scrollY - this.oldScrollPos if (window.scrollY > this.oldScrollPos) {
const scrollingDown = scrollAmount > 0 this.hidden = true
} else {
if (scrollingDown !== this.scrollingDown) { this.hidden = false
this.amountScrolled = 0
this.scrollingDown = scrollingDown
if (!scrollingDown) {
this.hidden = false
}
} else if (scrollingDown) {
this.amountScrolled += scrollAmount
if (this.amountScrolled > 100 && !this.hidden) {
this.hidden = true
}
} }
this.oldScrollPos = window.scrollY this.oldScrollPos = window.scrollY
this.scrollingDown = scrollingDown }, 100, {leading: true, trailing: false}),
}, 100)
handleScrollEnd: debounce(function () {
this.hidden = false
this.oldScrollPos = window.scrollY
}, 100, {leading: false, trailing: true})
} }
} }

View file

@ -46,6 +46,7 @@ const settings = {
streamingLocal: user.streaming, streamingLocal: user.streaming,
pauseOnUnfocusedLocal: user.pauseOnUnfocused, pauseOnUnfocusedLocal: user.pauseOnUnfocused,
hoverPreviewLocal: user.hoverPreview, hoverPreviewLocal: user.hoverPreview,
autohideFloatingPostButtonLocal: user.autohideFloatingPostButton,
hideMutedPostsLocal: typeof user.hideMutedPosts === 'undefined' hideMutedPostsLocal: typeof user.hideMutedPosts === 'undefined'
? instance.hideMutedPosts ? instance.hideMutedPosts
@ -183,6 +184,9 @@ const settings = {
hoverPreviewLocal (value) { hoverPreviewLocal (value) {
this.$store.dispatch('setOption', { name: 'hoverPreview', value }) this.$store.dispatch('setOption', { name: 'hoverPreview', value })
}, },
autohideFloatingPostButtonLocal (value) {
this.$store.dispatch('setOption', { name: 'autohideFloatingPostButton', value })
},
muteWordsString (value) { muteWordsString (value) {
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 })

View file

@ -122,6 +122,10 @@
{{$t('settings.minimal_scopes_mode')}} {{$t('settings.instance_default', { value: minimalScopesModeDefault })}} {{$t('settings.minimal_scopes_mode')}} {{$t('settings.instance_default', { value: minimalScopesModeDefault })}}
</label> </label>
</li> </li>
<li>
<input type="checkbox" id="autohideFloatingPostButton" v-model="autohideFloatingPostButtonLocal">
<label for="autohideFloatingPostButton">{{$t('settings.autohide_floating_post_button')}}</label>
</li>
</ul> </ul>
</div> </div>

View file

@ -233,6 +233,7 @@
"reply_visibility_all": "Show all replies", "reply_visibility_all": "Show all replies",
"reply_visibility_following": "Only show replies directed at me or users I'm following", "reply_visibility_following": "Only show replies directed at me or users I'm following",
"reply_visibility_self": "Only show replies directed at me", "reply_visibility_self": "Only show replies directed at me",
"autohide_floating_post_button": "Automatically hide New Post button (mobile)",
"saving_err": "Error saving settings", "saving_err": "Error saving settings",
"saving_ok": "Settings saved", "saving_ok": "Settings saved",
"search_user_to_block": "Search whom you want to block", "search_user_to_block": "Search whom you want to block",

View file

@ -152,6 +152,7 @@
"reply_visibility_all": "Показывать все ответы", "reply_visibility_all": "Показывать все ответы",
"reply_visibility_following": "Показывать только ответы мне и тех на кого я подписан", "reply_visibility_following": "Показывать только ответы мне и тех на кого я подписан",
"reply_visibility_self": "Показывать только ответы мне", "reply_visibility_self": "Показывать только ответы мне",
"autohide_floating_post_button": "Автоматически скрывать кнопку постинга (в мобильной версии)",
"saving_err": "Не удалось сохранить настройки", "saving_err": "Не удалось сохранить настройки",
"saving_ok": "Сохранено", "saving_ok": "Сохранено",
"security_tab": "Безопасность", "security_tab": "Безопасность",

View file

@ -17,6 +17,7 @@ const defaultState = {
autoLoad: true, autoLoad: true,
streaming: false, streaming: false,
hoverPreview: true, hoverPreview: true,
autohideFloatingPostButton: false,
pauseOnUnfocused: true, pauseOnUnfocused: true,
stopGifs: false, stopGifs: false,
replyVisibility: 'all', replyVisibility: 'all',