v1s1n/akkoma-fe
1
0
Fork 0
forked from srxl/akkoma-fe
Code Pull requests Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/App.scss
View file

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

24
src/components/favorite_button/favorite_button.vue
View file

@ -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;
}

2
src/components/notifications/notifications.vue
View file

@ -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">

25
src/components/reply_button/reply_button.vue
View file

@ -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>

34
src/components/retweet_button/retweet_button.vue
View file

@ -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;
}