commit: 157d4e601ebd1d46c7bb66d09de5561b57c7d35a
parent: 496ccd0bb3b48c6f9f03bd6c7cf0355f98b7871d
Author: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Tue, 7 May 2019 18:40:49 +0000
Merge branch 'fix/floating-button' into 'develop'
Mobile Post button fix
Closes #506
See merge request pleroma/pleroma-fe!769
Diffstat:
6 files changed, 49 insertions(+), 21 deletions(-)
diff --git a/src/components/mobile_post_status_modal/mobile_post_status_modal.js b/src/components/mobile_post_status_modal/mobile_post_status_modal.js
@@ -1,5 +1,5 @@
import PostStatusForm from '../post_status_form/post_status_form.vue'
-import { throttle } from 'lodash'
+import { debounce } from 'lodash'
const MobilePostStatusModal = {
components: {
@@ -16,11 +16,15 @@ const MobilePostStatusModal = {
}
},
created () {
- window.addEventListener('scroll', this.handleScroll)
+ if (this.autohideFloatingPostButton) {
+ this.activateFloatingPostButtonAutohide()
+ }
window.addEventListener('resize', this.handleOSK)
},
destroyed () {
- window.removeEventListener('scroll', this.handleScroll)
+ if (this.autohideFloatingPostButton) {
+ this.deactivateFloatingPostButtonAutohide()
+ }
window.removeEventListener('resize', this.handleOSK)
},
computed: {
@@ -28,10 +32,30 @@ const MobilePostStatusModal = {
return this.$store.state.users.currentUser
},
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: {
+ activateFloatingPostButtonAutohide () {
+ window.addEventListener('scroll', this.handleScrollStart)
+ window.addEventListener('scroll', this.handleScrollEnd)
+ },
+ deactivateFloatingPostButtonAutohide () {
+ window.removeEventListener('scroll', this.handleScrollStart)
+ window.removeEventListener('scroll', this.handleScrollEnd)
+ },
openPostForm () {
this.postFormOpen = true
this.hidden = true
@@ -65,26 +89,19 @@ const MobilePostStatusModal = {
this.inputActive = false
}
},
- handleScroll: throttle(function () {
- const scrollAmount = window.scrollY - this.oldScrollPos
- const scrollingDown = scrollAmount > 0
-
- if (scrollingDown !== this.scrollingDown) {
- 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
- }
+ handleScrollStart: debounce(function () {
+ if (window.scrollY > this.oldScrollPos) {
+ this.hidden = true
+ } else {
+ this.hidden = false
}
+ this.oldScrollPos = window.scrollY
+ }, 100, {leading: true, trailing: false}),
+ handleScrollEnd: debounce(function () {
+ this.hidden = false
this.oldScrollPos = window.scrollY
- this.scrollingDown = scrollingDown
- }, 100)
+ }, 100, {leading: false, trailing: true})
}
}
diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
@@ -46,6 +46,7 @@ const settings = {
streamingLocal: user.streaming,
pauseOnUnfocusedLocal: user.pauseOnUnfocused,
hoverPreviewLocal: user.hoverPreview,
+ autohideFloatingPostButtonLocal: user.autohideFloatingPostButton,
hideMutedPostsLocal: typeof user.hideMutedPosts === 'undefined'
? instance.hideMutedPosts
@@ -183,6 +184,9 @@ const settings = {
hoverPreviewLocal (value) {
this.$store.dispatch('setOption', { name: 'hoverPreview', value })
},
+ autohideFloatingPostButtonLocal (value) {
+ this.$store.dispatch('setOption', { name: 'autohideFloatingPostButton', value })
+ },
muteWordsString (value) {
value = filter(value.split('\n'), (word) => trim(word).length > 0)
this.$store.dispatch('setOption', { name: 'muteWords', value })
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
@@ -122,6 +122,10 @@
{{$t('settings.minimal_scopes_mode')}} {{$t('settings.instance_default', { value: minimalScopesModeDefault })}}
</label>
</li>
+ <li>
+ <input type="checkbox" id="autohideFloatingPostButton" v-model="autohideFloatingPostButtonLocal">
+ <label for="autohideFloatingPostButton">{{$t('settings.autohide_floating_post_button')}}</label>
+ </li>
</ul>
</div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -233,6 +233,7 @@
"reply_visibility_all": "Show all replies",
"reply_visibility_following": "Only show replies directed at me or users I'm following",
"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_ok": "Settings saved",
"search_user_to_block": "Search whom you want to block",
diff --git a/src/i18n/ru.json b/src/i18n/ru.json
@@ -152,6 +152,7 @@
"reply_visibility_all": "Показывать все ответы",
"reply_visibility_following": "Показывать только ответы мне и тех на кого я подписан",
"reply_visibility_self": "Показывать только ответы мне",
+ "autohide_floating_post_button": "Автоматически скрывать кнопку постинга (в мобильной версии)",
"saving_err": "Не удалось сохранить настройки",
"saving_ok": "Сохранено",
"security_tab": "Безопасность",
diff --git a/src/modules/config.js b/src/modules/config.js
@@ -17,6 +17,7 @@ const defaultState = {
autoLoad: true,
streaming: false,
hoverPreview: true,
+ autohideFloatingPostButton: false,
pauseOnUnfocused: true,
stopGifs: false,
replyVisibility: 'all',