jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-05-11 13:17:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: update rection code

Browse Source
This commit is contained in:
tim
2025-07-11 13:05:02 +08:00
parent e6f53365b8
commit 4b39ed34b7
1 changed files with 97 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
open-isle-cli/src/components/ReactionsGroup.vue
View File

@@ -1,7 +1,8 @@
<template> <template>
<div class="reactions-container"> <div class="reactions-container">
<div class="reactions-viewer"> <div class="reactions-viewer">
<div class="reactions-viewer-item-container" @click="openPanel" @mouseenter="cancelHide" @mouseleave="scheduleHide"> <div class="reactions-viewer-item-container" @click="openPanel" @mouseenter="cancelHide"
@mouseleave="scheduleHide">
<template v-if="displayedReactions.length"> <template v-if="displayedReactions.length">
<div v-for="r in displayedReactions" :key="r.type" class="reactions-viewer-item">{{ iconMap[r.type] }}</div> <div v-for="r in displayedReactions" :key="r.type" class="reactions-viewer-item">{{ iconMap[r.type] }}</div>
<div class="reactions-count">{{ totalCount }}</div> <div class="reactions-count">{{ totalCount }}</div>
@@ -13,14 +14,16 @@
</div> </div>
</div> </div>
<div class="make-reaction-container"> <div class="make-reaction-container">
<div class="make-reaction-item like-reaction" @click="toggleReaction('LIKE')" :class="{ selected: userReacted('LIKE') }"> <div class="make-reaction-item like-reaction" @click="toggleReaction('LIKE')"
:class="{ selected: userReacted('LIKE') }">
<i class="far fa-heart"></i> <i class="far fa-heart"></i>
<span v-if="likeCount">{{ likeCount }}</span> <span v-if="likeCount">{{ likeCount }}</span>
</div> </div>
<slot></slot> <slot></slot>
</div> </div>
<div v-if="panelVisible" class="reactions-panel" @mouseenter="cancelHide" @mouseleave="scheduleHide"> <div v-if="panelVisible" class="reactions-panel" @mouseenter="cancelHide" @mouseleave="scheduleHide">
<div v-for="t in panelTypes" :key="t" class="reaction-option" @click="toggleReaction(t)" :class="{ selected: userReacted(t) }"> <div v-for="t in panelTypes" :key="t" class="reaction-option" @click="toggleReaction(t)"
:class="{ selected: userReacted(t) }">
{{ iconMap[t] }}<span v-if="counts[t]">{{ counts[t] }}</span> {{ iconMap[t] }}<span v-if="counts[t]">{{ counts[t] }}</span>
</div> </div>
</div> </div>
@@ -162,18 +165,95 @@ export default {
</script> </script>
<style scoped> <style scoped>
.reactions-container { position: relative; display: flex; flex-direction: row; gap: 10px; align-items: center; width: 100%; justify-content: space-between; } .reactions-container {
.reactions-viewer { display: flex; flex-direction: row; gap: 20px; align-items: center; } position: relative;
.reactions-viewer-item-container { display: flex; flex-direction: row; gap: 2px; align-items: center; cursor: pointer; } display: flex;
.reactions-viewer-item { font-size: 16px; } flex-direction: row;
.reactions-viewer-item.placeholder { opacity: 0.5; display: flex; flex-direction: row; align-items: center; } gap: 10px;
.reactions-viewer-item-placeholder-text { font-size: 14px; padding-left: 5px; } align-items: center;
.reactions-count { font-size: 16px; opacity: 0.5; } width: 100%;
.make-reaction-container { display: flex; flex-direction: row; gap: 10px; } justify-content: space-between;
.make-reaction-item { cursor: pointer; padding: 10px; border-radius: 50%; opacity: 0.5; font-size: 20px; } }
.like-reaction { color: #ff0000; }
.like-reaction.selected { background-color: #ffe2e2; } .reactions-viewer {
.reactions-panel { position: absolute; bottom: 30px; left: 0; background-color: var(--background-color); border: 1px solid #ccc; border-radius: 5px; padding: 5px; display: flex; flex-direction: row; gap: 5px; z-index: 10; } display: flex;
.reaction-option { cursor: pointer; padding: 5px; border-radius: 4px; } flex-direction: row;
.reaction-option.selected { background-color: #e2e2e2; } gap: 20px;
align-items: center;
}
.reactions-viewer-item-container {
display: flex;
flex-direction: row;
gap: 2px;
align-items: center;
cursor: pointer;
}
.reactions-viewer-item {
font-size: 16px;
}
.reactions-viewer-item.placeholder {
opacity: 0.5;
display: flex;
flex-direction: row;
align-items: center;
}
.reactions-viewer-item-placeholder-text {
font-size: 14px;
padding-left: 5px;
}
.reactions-count {
font-size: 16px;
opacity: 0.5;
}
.make-reaction-container {
display: flex;
flex-direction: row;
gap: 10px;
}
.make-reaction-item {
cursor: pointer;
padding: 10px;
border-radius: 50%;
opacity: 0.5;
font-size: 20px;
}
.like-reaction {
color: #ff0000;
}
.like-reaction.selected {
background-color: #ffe2e2;
}
.reactions-panel {
position: absolute;
bottom: 30px;
left: 0;
background-color: var(--background-color);
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
display: flex;
flex-direction: row;
gap: 5px;
z-index: 10;
}
.reaction-option {
cursor: pointer;
padding: 5px;
border-radius: 4px;
}
.reaction-option.selected {
background-color: #e2e2e2;
}
</style> </style>