HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

fix: unable to scroll through reactions on mobile

Browse source
This commit is contained in:
freeplay 2023-07-16 17:24:34 -04:00
parent 48c52c3ee8
commit 6fbbef1a8e
8 changed files with 36 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/client/src/components/MkNote.vue
View file

@ -148,7 +148,7 @@
{{ appearNote.channel.name }}</MkA {{ appearNote.channel.name }}</MkA
> >
</div> </div>
<footer ref="footerEl" class="footer" @click.stop tabindex="-1"> <footer ref="footerEl" class="footer" tabindex="-1">
<XReactionsViewer <XReactionsViewer
v-if="enableEmojiReactions" v-if="enableEmojiReactions"
ref="reactionsViewer" ref="reactionsViewer"
@ -157,7 +157,7 @@
<button <button
v-tooltip.noDelay.bottom="i18n.ts.reply" v-tooltip.noDelay.bottom="i18n.ts.reply"
class="button _button" class="button _button"
@click="reply()" @click.stop="reply()"
> >
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i> <i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
<template <template
@ -202,7 +202,7 @@
ref="reactButton" ref="reactButton"
v-tooltip.noDelay.bottom="i18n.ts.reaction" v-tooltip.noDelay.bottom="i18n.ts.reaction"
class="button _button" class="button _button"
@click="react()" @click.stop="react()"
> >
<i class="ph-smiley ph-bold ph-lg"></i> <i class="ph-smiley ph-bold ph-lg"></i>
</button> </button>
@ -213,7 +213,7 @@
" "
ref="reactButton" ref="reactButton"
class="button _button reacted" class="button _button reacted"
@click="undoReact(appearNote)" @click.stop="undoReact(appearNote)"
v-tooltip.noDelay.bottom="i18n.ts.removeReaction" v-tooltip.noDelay.bottom="i18n.ts.removeReaction"
> >
<i class="ph-minus ph-bold ph-lg"></i> <i class="ph-minus ph-bold ph-lg"></i>
@ -223,7 +223,7 @@
ref="menuButton" ref="menuButton"
v-tooltip.noDelay.bottom="i18n.ts.more" v-tooltip.noDelay.bottom="i18n.ts.more"
class="button _button" class="button _button"
@click="menu()" @click.stop="menu()"
> >
<i class="ph-dots-three-outline ph-bold ph-lg"></i> <i class="ph-dots-three-outline ph-bold ph-lg"></i>
</button> </button>
@ -862,7 +862,6 @@ defineExpose({
z-index: 2; z-index: 2;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
margin-top: 0.4em; margin-top: 0.4em;
> :deep(.button) { > :deep(.button) {
position: relative; position: relative;
@ -876,7 +875,6 @@ defineExpose({
max-width: 3.5em; max-width: 3.5em;
width: max-content; width: max-content;
min-width: max-content; min-width: max-content;
pointer-events: all;
height: auto; height: auto;
transition: opacity 0.2s; transition: opacity 0.2s;
&::before { &::before {

12
packages/client/src/components/MkNoteSub.vue
View file

@ -56,7 +56,7 @@
</div> </div>
</div> </div>
</div> </div>
<footer ref="footerEl" class="footer" @click.stop tabindex="-1"> <footer ref="footerEl" class="footer" tabindex="-1">
<XReactionsViewer <XReactionsViewer
v-if="enableEmojiReactions" v-if="enableEmojiReactions"
ref="reactionsViewer" ref="reactionsViewer"
@ -65,7 +65,7 @@
<button <button
v-tooltip.noDelay.bottom="i18n.ts.reply" v-tooltip.noDelay.bottom="i18n.ts.reply"
class="button _button" class="button _button"
@click="reply()" @click.stop="reply()"
> >
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i> <i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
<template v-if="appearNote.repliesCount > 0"> <template v-if="appearNote.repliesCount > 0">
@ -107,7 +107,7 @@
ref="reactButton" ref="reactButton"
v-tooltip.noDelay.bottom="i18n.ts.reaction" v-tooltip.noDelay.bottom="i18n.ts.reaction"
class="button _button" class="button _button"
@click="react()" @click.stop="react()"
> >
<i class="ph-smiley ph-bold ph-lg"></i> <i class="ph-smiley ph-bold ph-lg"></i>
</button> </button>
@ -118,7 +118,7 @@
" "
ref="reactButton" ref="reactButton"
class="button _button reacted" class="button _button reacted"
@click="undoReact(appearNote)" @click.stop="undoReact(appearNote)"
v-tooltip.noDelay.bottom="i18n.ts.removeReaction" v-tooltip.noDelay.bottom="i18n.ts.removeReaction"
> >
<i class="ph-minus ph-bold ph-lg"></i> <i class="ph-minus ph-bold ph-lg"></i>
@ -128,7 +128,7 @@
ref="menuButton" ref="menuButton"
v-tooltip.noDelay.bottom="i18n.ts.more" v-tooltip.noDelay.bottom="i18n.ts.more"
class="button _button" class="button _button"
@click="menu()" @click.stop="menu()"
> >
<i class="ph-dots-three-outline ph-bold ph-lg"></i> <i class="ph-dots-three-outline ph-bold ph-lg"></i>
</button> </button>
@ -470,7 +470,6 @@ function noteClick(e) {
z-index: 2; z-index: 2;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
> :deep(.button) { > :deep(.button) {
position: relative; position: relative;
@ -484,7 +483,6 @@ function noteClick(e) {
max-width: 3.5em; max-width: 3.5em;
width: max-content; width: max-content;
min-width: max-content; min-width: max-content;
pointer-events: all;
height: auto; height: auto;
transition: opacity 0.2s; transition: opacity 0.2s;
&::before { &::before {

2
packages/client/src/components/MkQuoteButton.vue
View file

@ -3,7 +3,7 @@
v-if="canRenote && $store.state.seperateRenoteQuote" v-if="canRenote && $store.state.seperateRenoteQuote"
v-tooltip.noDelay.bottom="i18n.ts.quote" v-tooltip.noDelay.bottom="i18n.ts.quote"
class="eddddedb _button" class="eddddedb _button"
@click="quote()" @click.stop="quote()"
> >
<i class="ph-quotes ph-bold ph-lg"></i> <i class="ph-quotes ph-bold ph-lg"></i>
</button> </button>

26
packages/client/src/components/MkReactionsViewer.reaction.vue
View file

@ -9,7 +9,7 @@
canToggle, canToggle,
newlyAdded: !isInitial, newlyAdded: !isInitial,
}" }"
@click="toggleReaction()" @click.stop="toggleReaction()"
> >
<XReactionIcon <XReactionIcon
class="icon" class="icon"
@ -100,13 +100,20 @@ useTooltip(
<style lang="scss" scoped> <style lang="scss" scoped>
.hkzvhatu { .hkzvhatu {
position: relative;
display: inline-block; display: inline-block;
height: 32px; height: 32px;
margin: 2px; margin-block: 2px;
padding: 0 6px; padding: 0 8px;
border-radius: 4px;
pointer-events: all; pointer-events: all;
min-width: max-content; min-width: max-content;
&::before {
content: "";
position: absolute;
inset: 0 2px;
border-radius: 4px;
z-index: -1;
}
&.newlyAdded { &.newlyAdded {
animation: scaleInSmall 0.3s cubic-bezier(0, 0, 0, 1.2); animation: scaleInSmall 0.3s cubic-bezier(0, 0, 0, 1.2);
:deep(.mk-emoji) { :deep(.mk-emoji) {
@ -126,9 +133,10 @@ useTooltip(
} }
} }
&.canToggle { &.canToggle {
background: rgba(0, 0, 0, 0.05); &::before {
background: rgba(0, 0, 0, 0.05);
&:hover { }
&:hover:not(.reacted)::before {
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
} }
} }
@ -139,9 +147,7 @@ useTooltip(
&.reacted { &.reacted {
order: -1; order: -1;
background: var(--accent); &::before {
&:hover {
background: var(--accent); background: var(--accent);
} }

7
packages/client/src/components/MkReactionsViewer.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div ref="reactionsEl" class="reactions-list tdflqwzn" :class="{ isMe }"> <div ref="reactionsEl" class="reactions-list swiper-no-swiping tdflqwzn" :class="{ isMe }">
<XReaction <XReaction
v-for="(count, reaction) in note.reactions" v-for="(count, reaction) in note.reactions"
:key="reaction" :key="reaction"
@ -50,6 +50,11 @@ const isMe = computed(() => $i && $i.id === props.note.userId);
transparent transparent
); );
scrollbar-width: none; scrollbar-width: none;
pointer-events: none;
:deep(*) {
pointer-events: all;
}
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }

2
packages/client/src/components/MkRenoteButton.vue
View file

@ -5,7 +5,7 @@
v-tooltip.noDelay.bottom="i18n.ts.renote" v-tooltip.noDelay.bottom="i18n.ts.renote"
class="button _button canRenote" class="button _button canRenote"
:class="{ renoted: hasRenotedBefore }" :class="{ renoted: hasRenotedBefore }"
@click="renote(false, $event)" @click.stop="renote(false, $event)"
> >
<i class="ph-repeat ph-bold ph-lg"></i> <i class="ph-repeat ph-bold ph-lg"></i>
<p v-if="count > 0 && !detailedView" class="count">{{ count }}</p> <p v-if="count > 0 && !detailedView" class="count">{{ count }}</p>

2
packages/client/src/components/MkStarButton.vue
View file

@ -2,7 +2,7 @@
<button <button
v-tooltip.noDelay.bottom="i18n.ts._gallery.like" v-tooltip.noDelay.bottom="i18n.ts._gallery.like"
class="button _button" class="button _button"
@click="star($event)" @click.stop="star($event)"
> >
<svg <svg
v-if="defaultStore.state.woozyMode === true" v-if="defaultStore.state.woozyMode === true"

2
packages/client/src/components/MkStarButtonNoEmoji.vue
View file

@ -4,7 +4,7 @@
class="button _button" class="button _button"
:class="$style.root" :class="$style.root"
ref="buttonRef" ref="buttonRef"
@click="toggleStar($event)" @click.stop="toggleStar($event)"
> >
<span v-if="!reacted"> <span v-if="!reacted">
<i <i