forked from AkkomaGang/akkoma-fe
fix retweet event handler, fix text being selectable for status action counters
This commit is contained in:
parent
ebe3b38a90
commit
bee77ffdb2
5 changed files with 65 additions and 25 deletions
|
@ -173,11 +173,6 @@ a {
|
|||
color: var(--link, $fallback--link);
|
||||
}
|
||||
|
||||
&.-padded {
|
||||
padding: 10px;
|
||||
margin: -10px;
|
||||
}
|
||||
|
||||
&.-fullwidth {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="FavoriteButton">
|
||||
<button
|
||||
v-if="loggedIn"
|
||||
class="FavoriteButton -interactive button-unstyled -padded"
|
||||
class="button-unstyled interactive"
|
||||
:class="status.favorited && '-favorited'"
|
||||
:title="$t('tool_tip.favorite')"
|
||||
@click.prevent="favorite()"
|
||||
|
@ -19,7 +19,12 @@
|
|||
:title="$t('tool_tip.favorite')"
|
||||
: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>
|
||||
</template>
|
||||
|
||||
|
@ -29,8 +34,19 @@
|
|||
@import '../../_variables.scss';
|
||||
|
||||
.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 {
|
||||
animation-duration: 0.6s;
|
||||
}
|
||||
|
|
|
@ -43,7 +43,7 @@
|
|||
</div>
|
||||
<button
|
||||
v-else-if="!loading"
|
||||
class="button-unstyled -link -fullwidth"
|
||||
class="button-unstyled -link -block"
|
||||
@click.prevent="fetchOlderNotifications()"
|
||||
>
|
||||
<div class="new-status-notification text-center panel-footer">
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="ReplyButton">
|
||||
<button
|
||||
v-if="loggedIn"
|
||||
class="button-unstyled ReplyButton -padded -interactive"
|
||||
class="button-unstyled interactive"
|
||||
:class="{'-active': replying}"
|
||||
:title="$t('tool_tip.reply')"
|
||||
@click.prevent="$emit('toggle')"
|
||||
|
@ -15,10 +15,13 @@
|
|||
<FAIcon
|
||||
v-else
|
||||
icon="reply"
|
||||
class="ReplyButton fa-scale-110 fa-old-padding"
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
: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 }}
|
||||
</span>
|
||||
</div>
|
||||
|
@ -30,13 +33,25 @@
|
|||
@import '../../_variables.scss';
|
||||
|
||||
.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,
|
||||
&.-active .svg-inline--fa {
|
||||
color: $fallback--cBlue;
|
||||
color: var(--cBlue, $fallback--cBlue);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,33 +1,36 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="RetweetButton">
|
||||
<button
|
||||
v-if="visibility !== 'private' && visibility !== 'direct' && loggedIn"
|
||||
class="button-unstyled -padded RetweetButton -interactive"
|
||||
class="button-unstyled interactive"
|
||||
:class="status.repeated && '-repeated'"
|
||||
:title="$t('tool_tip.repeat')"
|
||||
@click.prevent="retweet()"
|
||||
>
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="retweet"
|
||||
:spin="animated"
|
||||
:title="$t('tool_tip.repeat')"
|
||||
@click.prevent="retweet()"
|
||||
/>
|
||||
</button>
|
||||
<FAIcon
|
||||
v-else-if="loggedIn"
|
||||
:class="classes"
|
||||
class="RetweetButton fa-scale-110 fa-old-padding"
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="lock"
|
||||
:title="$t('timeline.no_retweet_hint')"
|
||||
/>
|
||||
<FAIcon
|
||||
v-else
|
||||
:class="classes"
|
||||
class="RetweetButton fa-scale-110 fa-old-padding"
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="retweet"
|
||||
: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>
|
||||
</template>
|
||||
|
||||
|
@ -37,8 +40,19 @@
|
|||
@import '../../_variables.scss';
|
||||
|
||||
.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 {
|
||||
animation-duration: 0.6s;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue