Merge branch 'fix/block-misclicks-when-timeline-shifts' into 'develop'

block clicks for a second on timeline when timeline moves

See merge request pleroma/pleroma-fe!1266
This commit is contained in:
Shpuld Shpludson 2020-11-01 17:44:16 +00:00
commit 40ce3a9bd8
3 changed files with 25 additions and 5 deletions

View file

@ -13,6 +13,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
- Fixed chat messages sometimes getting lost when you receive a message at the same time
- Fixed clicking NSFW hider through status popover
### Changed
- Clicking immediately when timeline shifts is now blocked to prevent misclicks
### Added
- Import/export a muted users
- Proper handling of deletes when using websocket streaming

View file

@ -2,7 +2,7 @@ import Status from '../status/status.vue'
import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
import Conversation from '../conversation/conversation.vue'
import TimelineMenu from '../timeline_menu/timeline_menu.vue'
import { throttle, keyBy } from 'lodash'
import { debounce, throttle, keyBy } from 'lodash'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
@ -40,7 +40,8 @@ const Timeline = {
paused: false,
unfocused: false,
bottomedOut: false,
virtualScrollIndex: 0
virtualScrollIndex: 0,
blockingClicks: false
}
},
components: {
@ -70,8 +71,10 @@ const Timeline = {
}
},
classes () {
let rootClasses = !this.embedded ? ['panel', 'panel-default'] : []
if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked'])
return {
root: ['timeline'].concat(!this.embedded ? ['panel', 'panel-default'] : []),
root: rootClasses,
header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading'] : []),
body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
@ -130,6 +133,15 @@ const Timeline = {
this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
},
methods: {
stopBlockingClicks: debounce(function () {
this.blockingClicks = false
}, 1000),
blockClicksTemporarily () {
if (!this.blockingClicks) {
this.blockingClicks = true
}
this.stopBlockingClicks()
},
handleShortKey (e) {
// Ignore when input fields are focused
if (['textarea', 'input'].includes(e.target.tagName.toLowerCase())) return
@ -141,6 +153,7 @@ const Timeline = {
this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 })
this.fetchOlderStatuses()
} else {
this.blockClicksTemporarily()
this.$store.commit('showNewStatuses', { timeline: this.timelineName })
this.paused = false
}

View file

@ -1,5 +1,5 @@
<template>
<div :class="[classes.root, 'timeline']">
<div :class="[classes.root, 'Timeline']">
<div :class="classes.header">
<TimelineMenu v-if="!embedded" />
<div
@ -107,10 +107,14 @@
<style lang="scss">
@import '../../_variables.scss';
.timeline {
.Timeline {
.loadmore-text {
opacity: 1;
}
&.-blocked {
pointer-events: none;
}
}
.timeline-heading {