fix retweet event handler, fix text being selectable for status action counters

This commit is contained in:
Shpuld Shpuldson 2020-11-26 18:23:53 +02:00
parent ebe3b38a90
commit bee77ffdb2
5 changed files with 65 additions and 25 deletions

View File

@ -173,11 +173,6 @@ a {
color: var(--link, $fallback--link); color: var(--link, $fallback--link);
} }
&.-padded {
padding: 10px;
margin: -10px;
}
&.-fullwidth { &.-fullwidth {
width: 100%; width: 100%;
} }

View File

@ -1,8 +1,8 @@
<template> <template>
<div> <div class="FavoriteButton">
<button <button
v-if="loggedIn" v-if="loggedIn"
class="FavoriteButton -interactive button-unstyled -padded" class="button-unstyled interactive"
:class="status.favorited && '-favorited'" :class="status.favorited && '-favorited'"
:title="$t('tool_tip.favorite')" :title="$t('tool_tip.favorite')"
@click.prevent="favorite()" @click.prevent="favorite()"
@ -19,7 +19,12 @@
:title="$t('tool_tip.favorite')" :title="$t('tool_tip.favorite')"
:icon="['far', 'star']" :icon="['far', 'star']"
/> />
<span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span> <span
v-if="!mergedConfig.hidePostStats && status.fave_num > 0"
class="action-counter"
>
{{ status.fave_num }}
</span>
</div> </div>
</template> </template>
@ -29,8 +34,19 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.FavoriteButton { .FavoriteButton {
&.-interactive { display: flex;
> :first-child {
padding: 10px;
margin: -10px -5px -10px -10px;
}
.action-counter {
pointer-events: none;
user-select: none;
}
.interactive {
.svg-inline--fa { .svg-inline--fa {
animation-duration: 0.6s; animation-duration: 0.6s;
} }

View File

@ -43,7 +43,7 @@
</div> </div>
<button <button
v-else-if="!loading" v-else-if="!loading"
class="button-unstyled -link -fullwidth" class="button-unstyled -link -block"
@click.prevent="fetchOlderNotifications()" @click.prevent="fetchOlderNotifications()"
> >
<div class="new-status-notification text-center panel-footer"> <div class="new-status-notification text-center panel-footer">

View File

@ -1,8 +1,8 @@
<template> <template>
<div> <div class="ReplyButton">
<button <button
v-if="loggedIn" v-if="loggedIn"
class="button-unstyled ReplyButton -padded -interactive" class="button-unstyled interactive"
:class="{'-active': replying}" :class="{'-active': replying}"
:title="$t('tool_tip.reply')" :title="$t('tool_tip.reply')"
@click.prevent="$emit('toggle')" @click.prevent="$emit('toggle')"
@ -15,10 +15,13 @@
<FAIcon <FAIcon
v-else v-else
icon="reply" icon="reply"
class="ReplyButton fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
:title="$t('tool_tip.reply')" :title="$t('tool_tip.reply')"
/> />
<span v-if="status.replies_count > 0"> <span
v-if="status.replies_count > 0"
class="action-counter"
>
{{ status.replies_count }} {{ status.replies_count }}
</span> </span>
</div> </div>
@ -30,13 +33,25 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.ReplyButton { .ReplyButton {
&.-interactive { display: flex;
> :first-child {
padding: 10px;
margin: -10px -5px -10px -10px;
}
.action-counter {
pointer-events: none;
user-select: none;
}
.interactive {
&:hover .svg-inline--fa, &:hover .svg-inline--fa,
&.-active .svg-inline--fa { &.-active .svg-inline--fa {
color: $fallback--cBlue; color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue); color: var(--cBlue, $fallback--cBlue);
} }
} }
} }
</style> </style>

View File

@ -1,33 +1,36 @@
<template> <template>
<div> <div class="RetweetButton">
<button <button
v-if="visibility !== 'private' && visibility !== 'direct' && loggedIn" v-if="visibility !== 'private' && visibility !== 'direct' && loggedIn"
class="button-unstyled -padded RetweetButton -interactive" class="button-unstyled interactive"
:class="status.repeated && '-repeated'" :class="status.repeated && '-repeated'"
:title="$t('tool_tip.repeat')"
@click.prevent="retweet()"
> >
<FAIcon <FAIcon
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="retweet" icon="retweet"
:spin="animated" :spin="animated"
:title="$t('tool_tip.repeat')"
@click.prevent="retweet()"
/> />
</button> </button>
<FAIcon <FAIcon
v-else-if="loggedIn" v-else-if="loggedIn"
:class="classes" class="fa-scale-110 fa-old-padding"
class="RetweetButton fa-scale-110 fa-old-padding"
icon="lock" icon="lock"
:title="$t('timeline.no_retweet_hint')" :title="$t('timeline.no_retweet_hint')"
/> />
<FAIcon <FAIcon
v-else v-else
:class="classes" class="fa-scale-110 fa-old-padding"
class="RetweetButton fa-scale-110 fa-old-padding"
icon="retweet" icon="retweet"
:title="$t('tool_tip.repeat')" :title="$t('tool_tip.repeat')"
/> />
<span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span> <span
v-if="!mergedConfig.hidePostStats && status.repeat_num > 0"
class="no-event"
>
{{ status.repeat_num }}
</span>
</div> </div>
</template> </template>
@ -37,8 +40,19 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.RetweetButton { .RetweetButton {
&.-interactive { display: flex;
> :first-child {
padding: 10px;
margin: -10px -5px -10px -10px;
}
.action-counter {
pointer-events: none;
user-select: none;
}
.interactive {
.svg-inline--fa { .svg-inline--fa {
animation-duration: 0.6s; animation-duration: 0.6s;
} }