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

Color to let the user know his reaction

Browse Source
This commit is contained in:
Dominic Villemure
2024-08-25 10:51:55 -04:00
parent 795cc1181b
commit e52b31bf1a
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" @mouseleave="onMouseLeave"
@click="reactToContent(REACTIONS.LIKE)" @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 }} {{ likeCount }}
</v-btn> </v-btn>
</template> </template>
@@ -260,24 +260,50 @@ function isMobileDevice() {
@mouseover="keepReactionMenuOpen" @mouseover="keepReactionMenuOpen"
@mouseleave="hideReactions" @mouseleave="hideReactions"
> >
<v-btn variant="plain" icon @click="reactToContent(REACTIONS.LOVE)"> <v-btn
<v-icon>mdi-heart-outline</v-icon> 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 }} {{ loveCount }}
</v-btn> </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 }} {{ hahaCount }}
</v-btn> </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 }} {{ wowCount }}
</v-btn> </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 }} {{ sadCount }}
</v-btn> </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 }} {{ angryCount }}
</v-btn> </v-btn>
</v-card> </v-card>
@@ -293,4 +319,9 @@ function isMobileDevice() {
margin-top: -35px; margin-top: -35px;
margin-left: 50px; margin-left: 50px;
} }
.active-icon {
color: blue;
stroke: blue;
}
</style> </style>