jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-03-16 17:10:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: update reaction panel ui

Browse Source
This commit is contained in:
tim
2025-07-11 13:42:19 +08:00
parent aa07e6d949
commit 56a6757190
1 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,9 +14,9 @@
</div> </div>
</div> </div>
<div class="make-reaction-container"> <div class="make-reaction-container">
<div class="make-reaction-item like-reaction" @click="toggleReaction('LIKE')" <div class="make-reaction-item like-reaction" @click="toggleReaction('LIKE')">
:class="{ selected: userReacted('LIKE') }"> <i v-if="!userReacted('LIKE')" class="far fa-heart"></i>
<i class="far fa-heart"></i> <i v-else class="fas fa-heart"></i>
<span class="reactions-count" v-if="likeCount">{{ likeCount }}</span> <span class="reactions-count" v-if="likeCount">{{ likeCount }}</span>
</div> </div>
<slot></slot> <slot></slot>
@@ -254,19 +254,25 @@ export default {
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 5px; border-radius: 5px;
padding: 5px; padding: 5px;
max-width: 240px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 5px; flex-wrap: wrap;
z-index: 10; z-index: 10;
gap: 2px;
} }
.reaction-option { .reaction-option {
cursor: pointer; cursor: pointer;
padding: 5px; padding: 2px 4px;
border-radius: 4px; border-radius: 4px;
display: flex;
flex-direction: row;
align-items: center;
gap: 2px;
} }
.reaction-option.selected { .reaction-option.selected {
background-color: #e2e2e2; background-color: rgb(236, 236, 236);
} }
</style> </style>