jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged PR 115: Color to let the user know his reaction

Browse Source 
Color to let the user know his reaction
This commit is contained in:
Dominic Villemure
2024-08-25 14:52:48 +00:00
parent e16a670322 e52b31bf1a
commit 3d7b0380bd
1 changed files with 52 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/views/contents/Reaction.vue
View File

@@ -251,7 +251,7 @@ function isMobileDevice() {
@mouseleave="onMouseLeave"
@click="reactToContent(REACTIONS.LIKE)"
>
<v-icon>mdi-thumb-up-outline</v-icon>
<v-icon :class="{'active-icon': currentReaction === REACTIONS.LIKE}">mdi-thumb-up-outline</v-icon>
{{ likeCount }}
</v-btn>
</template>
@@ -260,24 +260,50 @@ function isMobileDevice() {
@mouseover="keepReactionMenuOpen"
@mouseleave="hideReactions"
>
<v-btn variant="plain" icon @click="reactToContent(REACTIONS.LOVE)">
<v-icon>mdi-heart-outline</v-icon>
<v-btn
variant="plain"
@click="reactToContent(REACTIONS.DISLIKE)"
>
<v-icon :class="{'active-icon': currentReaction === REACTIONS.DISLIKE}">mdi-thumb-down-outline</v-icon>
</v-btn>
<v-btn
variant="plain"
@click="reactToContent(REACTIONS.LOVE)"
>
<v-icon :class="{'active-icon': currentReaction === REACTIONS.LOVE}">mdi-heart-outline</v-icon>
{{ loveCount }}
</v-btn>
<v-btn variant="plain" icon @click="reactToContent(REACTIONS.HAHA)">
<v-icon>mdi-emoticon-excited-outline</v-icon>
<v-btn
variant="plain"
@click="reactToContent(REACTIONS.HAHA)"
>
<v-icon :class="{'active-icon': currentReaction === REACTIONS.HAHA}">mdi-emoticon-excited-outline</v-icon>
{{ hahaCount }}
</v-btn>
<v-btn variant="plain" icon @click="reactToContent(REACTIONS.WOW)">
<v-icon>mdi-emoticon-happy-outline</v-icon>
<v-btn
variant="plain"
@click="reactToContent(REACTIONS.WOW)"
>
<v-icon :class="{'active-icon': currentReaction === REACTIONS.WOW}">mdi-emoticon-happy-outline</v-icon>
{{ wowCount }}
</v-btn>
<v-btn variant="plain" icon @click="reactToContent(REACTIONS.SAD)">
<v-icon>mdi-emoticon-sad-outline</v-icon>
<v-btn
variant="plain"
@click="reactToContent(REACTIONS.SAD)"
>
<v-icon :class="{'active-icon': currentReaction === REACTIONS.SAD}">mdi-emoticon-sad-outline</v-icon>
{{ sadCount }}
</v-btn>
<v-btn variant="plain" icon @click="reactToContent(REACTIONS.ANGRY)">
<v-icon>mdi-emoticon-angry-outline</v-icon>
<v-btn
variant="plain"
@click="reactToContent(REACTIONS.ANGRY)"
>
<v-icon :class="{'active-icon': currentReaction === REACTIONS.ANGRY}">mdi-emoticon-angry-outline</v-icon>
{{ angryCount }}
</v-btn>
</v-card>
@@ -293,4 +319,9 @@ function isMobileDevice() {
margin-top: -35px;
margin-left: 50px;
}
.active-icon {
color: blue;
stroke: blue;
}
</style>