Merge branch 'advanced-misclick-guard' into 'develop'

Instead of blocking all interaction, only block interaction in places that matter

See merge request pleroma/pleroma-fe!1276

3 files changed, 11 insertions, 2 deletions

diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 0a395086..0a94de32 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -59,6 +59,15 @@ $status-margin: 0.75em;
     justify-content: flex-end;
   }
 
+  ._misclick-prevention & {
+    pointer-events: none;
+
+    .attachments {
+      pointer-events: initial;
+      cursor: initial;
+    }
+  }
+
   .left-side {
     margin-right: $status-margin;
   }
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 368ee81b..cba46daf 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -72,7 +72,7 @@ const Timeline = {
     },
     classes () {
       let rootClasses = !this.embedded ? ['panel', 'panel-default'] : []
-      if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked'])
+      if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
       return {
         root: rootClasses,
         header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading'] : []),
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 373b946f..04859852 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -113,7 +113,7 @@
   }
 
   &.-blocked {
-    pointer-events: none;
+    cursor: progress;
   }
 }