ホバー時、リアクションした人も分かるように

traPtitech · Jan 4, 2025 · 8d05380 · 8d05380
1 parent c1c88b5
commit 8d05380
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 16 deletions.
diff --git a/src/components/Main/MainView/MessageElement/StampElement.vue b/src/components/Main/MainView/MessageElement/StampElement.vue
@@ -20,8 +20,6 @@
     <stamp-scaled-element
     :class="$style.scaleReaction"
     :show="isHovered && !isDetailShown"
-    :value="tooltip"
-    :stamp-id="stamp.id"
     :stamp="stamp"
     />
 </template>
@@ -137,15 +135,14 @@ const { isHovered, onMouseEnter, onMouseLeave } = useHover()
 .scaleReaction {
   @include background-tertiary;
   display: flex;
-  flex-direction: column;
   height: 3.5rem;
-  align-items: center;
+  align-items: flex-start;
   padding: 0.125rem 0.25rem;
   border-radius: 0.25rem;
   user-select: none;
   overflow: visible;
   contain: content;
   position: absolute;
-  bottom: 30px;
+  bottom: 105%;
 }
 </style>
diff --git a/src/components/Main/MainView/MessageElement/StampScaledElement.vue b/src/components/Main/MainView/MessageElement/StampScaledElement.vue
@@ -4,6 +4,7 @@
   :class="$style.scaleReaction"
   >
     <transition name="scale-reaction">
+      <!-- sizeを46より大きくすると見切れる -->
         <a-stamp
             :key="stamp.id"
             :stamp-id="stamp.id"
@@ -12,26 +13,22 @@
             without-title
         />
     </transition>
-    <div :class="$style.detail">{{ value }}</div>
+    <stamp-detail-element
+    :class="$style.detail"
+    :stamp="stamp"
+  />
   </div>
   </template>
 
   <script lang="ts" setup>
   import AStamp from '/@/components/UI/AStamp.vue'
-  import { computed } from 'vue'
-  import { useStampsStore } from '/@/store/entities/stamps'
   import type { MessageStampById } from '/@/lib/messageStampList'
+  import StampDetailElement from './StampDetailElement.vue'
 
 const props = defineProps<{
   stamp: MessageStampById
   show: boolean
 }>()
-
-const { stampsMap } = useStampsStore()
-
-const stampName = computed(
-  () => stampsMap.value.get(props.stamp.id)?.name ?? ''
-)
 </script>
 
 <style lang="scss" module>
@@ -41,19 +38,28 @@ const stampName = computed(
     display: flex;
     border-radius: 4px;
     contain: none;
+    flex-wrap: wrap;
     border: solid 2px $theme-ui-tertiary-default;
 }
 .stamp {
     margin: {
         right: 0.2rem;
         bottom: 0.2rem;
     }
-
     display: flex;
 }
 
 .detail {
-  display: flex;
+  color: var(--specific-count-text);
+  @include color-ui-primary;
+  max-width : 500px;
+  min-width: 0;
+  overflow: hidden;
+  overflow: clip;
+  margin: {
+    left: 6px;
+    right: 4px;
+  }
 }
 </style>