diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue index a33f6e87..984b0483 100644 --- a/src/components/extra_buttons/extra_buttons.vue +++ b/src/components/extra_buttons/extra_buttons.vue @@ -120,5 +120,9 @@ color: $fallback--text; color: var(--text, $fallback--text); } + + ._misclick-prevention & { + pointer-events: none !important; + } } </style> diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue index dfe12f86..55872133 100644 --- a/src/components/favorite_button/favorite_button.vue +++ b/src/components/favorite_button/favorite_button.vue @@ -35,6 +35,10 @@ color: $fallback--cOrange; color: var(--cOrange, $fallback--cOrange); } + + ._misclick-prevention & { + pointer-events: none !important; + } } &.-favorited { diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue index 95d95b11..bb4472d7 100644 --- a/src/components/react_button/react_button.vue +++ b/src/components/react_button/react_button.vue @@ -107,6 +107,10 @@ color: $fallback--text; color: var(--text, $fallback--text); } + + ._misclick-prevention & { + pointer-events: none !important; + } } </style> diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue index a0ac8941..4ca37d5e 100644 --- a/src/components/reply_button/reply_button.vue +++ b/src/components/reply_button/reply_button.vue @@ -34,6 +34,10 @@ color: $fallback--cBlue; color: var(--cBlue, $fallback--cBlue); } + + ._misclick-prevention & { + pointer-events: none !important; + } } } </style> diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue index b234f3d9..b79fcd75 100644 --- a/src/components/retweet_button/retweet_button.vue +++ b/src/components/retweet_button/retweet_button.vue @@ -45,6 +45,10 @@ color: $fallback--cGreen; color: var(--cGreen, $fallback--cGreen); } + + ._misclick-prevention & { + pointer-events: none !important; + } } &.-repeated { diff --git a/src/components/status/status.scss b/src/components/status/status.scss index 0a395086..769f7ef4 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -59,6 +59,12 @@ $status-margin: 0.75em; justify-content: flex-end; } + .user-avatar { + ._misclick-prevention & { + pointer-events: none !important; + } + } + .left-side { margin-right: $status-margin; } @@ -108,6 +114,10 @@ $status-margin: 0.75em; a { display: inline-block; word-break: break-all; + + ._misclick-prevention & { + pointer-events: none !important; + } } } @@ -250,6 +260,10 @@ $status-margin: 0.75em; vertical-align: middle; object-fit: contain; } + + ._misclick-prevention & a { + pointer-events: none !important; + } } .status-fadein { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 21412faa..eb54befc 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -119,6 +119,7 @@ > <router-link :to="userProfileLink" + class="user-avatar" @click.stop.prevent.capture.native="toggleUserExpanded" > <UserAvatar diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue index 321cd477..e3875498 100644 --- a/src/components/status_content/status_content.vue +++ b/src/components/status_content/status_content.vue @@ -240,6 +240,10 @@ $status-margin: 0.75em; word-wrap: break-word; word-break: break-word; + ._misclick-prevention & :not(.attachments) a { + pointer-events: none !important; + } + blockquote { margin: 0.2em 0 0.2em 2em; font-style: italic; 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; } } diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index f916af9d..d1cfe654 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -282,6 +282,10 @@ .user-card { position: relative; + ._misclick-prevention & { + pointer-events: none !important; + } + &:hover .Avatar { --_still-image-img-visibility: visible; --_still-image-canvas-visibility: hidden;