1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
<template>
<v-popover
:popper-options="popperOptions"
:open="showTooltip"
trigger="manual"
placement="top"
class="react-button-popover"
@close-group="closeReactionSelect"
>
<div slot="popover">
<div class="reaction-picker">
<span
v-for="(emoji, key) in emojis"
:key="key"
class="emoji-reaction-button"
>
{{ emoji.replacement }}
</span>
<div class="reaction-bottom-fader" />
</div>
</div>
<div @click.prevent="openReactionSelect" v-if="loggedIn">
<i
:class="classes"
class="button-icon favorite-button fav-active"
:title="$t('tool_tip.add_reaction')"
/>
<span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
</div>
</v-popover>
</template>
<script src="./react_button.js" ></script>
<style lang="scss">
@import '../../_variables.scss';
.reaction-picker {
width: 10em;
height: 8em;
font-size: 1.5em;
overflow-y: scroll;
display: flex;
flex-wrap: wrap;
padding: 0.5em;
text-align:center;
mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
linear-gradient(to top, white, white);
transition: mask-size 150ms;
mask-size: 100% 20px, 100% 20px, auto;
// Autoprefixed seem to ignore this one, and also syntax is different
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.emoji-reaction-button {
flex-basis: 20%;
line-height: 1.5em;
align-content: center;
}
.fav-active {
cursor: pointer;
animation-duration: 0.6s;
&:hover {
color: $fallback--cOrange;
color: var(--cOrange, $fallback--cOrange);
}
}
.favorite-button.icon-star {
color: $fallback--cOrange;
color: var(--cOrange, $fallback--cOrange);
}
</style>
|
