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

73
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,26 +260,52 @@ 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"
{{ loveCount }} @click="reactToContent(REACTIONS.DISLIKE)"
</v-btn> >
<v-btn variant="plain" icon @click="reactToContent(REACTIONS.HAHA)"> <v-icon :class="{'active-icon': currentReaction === REACTIONS.DISLIKE}">mdi-thumb-down-outline</v-icon>
<v-icon>mdi-emoticon-excited-outline</v-icon> </v-btn>
{{ hahaCount }}
</v-btn> <v-btn
<v-btn variant="plain" icon @click="reactToContent(REACTIONS.WOW)"> variant="plain"
<v-icon>mdi-emoticon-happy-outline</v-icon> @click="reactToContent(REACTIONS.LOVE)"
{{ wowCount }} >
</v-btn> <v-icon :class="{'active-icon': currentReaction === REACTIONS.LOVE}">mdi-heart-outline</v-icon>
<v-btn variant="plain" icon @click="reactToContent(REACTIONS.SAD)"> {{ loveCount }}
<v-icon>mdi-emoticon-sad-outline</v-icon> </v-btn>
{{ sadCount }}
</v-btn> <v-btn
<v-btn variant="plain" icon @click="reactToContent(REACTIONS.ANGRY)"> variant="plain"
<v-icon>mdi-emoticon-angry-outline</v-icon> @click="reactToContent(REACTIONS.HAHA)"
{{ angryCount }} >
</v-btn> <v-icon :class="{'active-icon': currentReaction === REACTIONS.HAHA}">mdi-emoticon-excited-outline</v-icon>
{{ hahaCount }}
</v-btn>
<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"
@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"
@click="reactToContent(REACTIONS.ANGRY)"
>
<v-icon :class="{'active-icon': currentReaction === REACTIONS.ANGRY}">mdi-emoticon-angry-outline</v-icon>
{{ angryCount }}
</v-btn>
</v-card> </v-card>
</v-menu> </v-menu>
</div> </div>
@@ -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>