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

feat: reaction ui

Browse Source
This commit is contained in:
tim
2025-07-11 13:13:51 +08:00
parent bde076a80c
commit abf0203b7c
2 changed files with 14 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,7 +17,7 @@
<div class="make-reaction-item like-reaction" @click="toggleReaction('LIKE')" <div class="make-reaction-item like-reaction" @click="toggleReaction('LIKE')"
:class="{ selected: userReacted('LIKE') }"> :class="{ selected: userReacted('LIKE') }">
<i class="far fa-heart"></i> <i class="far fa-heart"></i>
<span v-if="likeCount">{{ likeCount }}</span> <span class="reactions-count" v-if="likeCount">{{ likeCount }}</span>
</div> </div>
<slot></slot> <slot></slot>
</div> </div>
@@ -164,7 +164,7 @@ export default {
} }
</script> </script>
<style scoped> <style>
.reactions-container { .reactions-container {
position: relative; position: relative;
display: flex; display: flex;
@@ -188,6 +188,7 @@ export default {
gap: 2px; gap: 2px;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
color: #a2a2a2;
} }
.reactions-viewer-item { .reactions-viewer-item {
@@ -206,11 +207,6 @@ export default {
padding-left: 5px; padding-left: 5px;
} }
.reactions-count {
font-size: 16px;
opacity: 0.5;
}
.make-reaction-container { .make-reaction-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -220,19 +216,28 @@ export default {
.make-reaction-item { .make-reaction-item {
cursor: pointer; cursor: pointer;
padding: 10px; padding: 10px;
border-radius: 50%;
opacity: 0.5; opacity: 0.5;
border-radius: 8px;
font-size: 20px; font-size: 20px;
} }
.like-reaction { .like-reaction {
color: #ff0000; color: #ff0000;
display: flex;
flex-direction: row;
align-items: center;
gap: 5px;
} }
.like-reaction.selected { .make-reaction-item:hover {
background-color: #ffe2e2; background-color: #ffe2e2;
} }
.reactions-count {
font-size: 16px;
font-weight: bold;
}
.reactions-panel { .reactions-panel {
position: absolute; position: absolute;
bottom: 40px; bottom: 40px;

21
open-isle-cli/src/views/PostPageView.vue
View File

@@ -639,33 +639,12 @@ export default {
font-size: 16px; font-size: 16px;
} }
.reactions-count {
font-size: 16px;
opacity: 0.5;
}
.make-reaction-container { .make-reaction-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 10px; gap: 10px;
} }
.make-reaction-item {
cursor: pointer;
padding: 10px;
border-radius: 50%;
opacity: 0.5;
font-size: 20px;
}
.like-reaction {
color: #ff0000;
}
.like-reaction:hover {
background-color: #ffe2e2;
}
.copy-link:hover { .copy-link:hover {
background-color: #e2e2e2; background-color: #e2e2e2;
} }