Issue4299

src/components/Main/MainView/MessageElement/MessageStampList.vue

@@ -17,6 +17,7 @@
         <div v-for="stamp in stampList" :key="stamp.id" :class="$style.stamp">
           <stamp-element
             :stamp="stamp"
+            :is-detail-shown="isDetailShown"
             @add-stamp="addStamp"
             @remove-stamp="removeStamp"
           />
@@ -136,7 +137,7 @@ const { toggleStampPicker } = useStampPickerInvoker(
   &[data-show-details] {
     flex-direction: column;
   }
-  contain: content;
+  contain: none;
 }
 .stamp {
   margin: {

src/components/Main/MainView/MessageElement/StampElement.vue

@@ -4,6 +4,8 @@
     :title="tooltip"
     :data-include-me="$boolAttr(includeMe)"
     @click="onClick"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
   >
     <transition name="stamp-pressed" mode="out-in">
       <a-stamp
@@ -15,6 +17,11 @@
     </transition>
     <spin-number :value="stamp.sum" :class="$style.count" />
   </div>
+  <stamp-scaled-element
+    :class="$style.scaleReaction"
+    :show="isHovered && !isDetailShown"
+    :stamp="stamp"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -24,9 +31,12 @@ import { ref, computed, watch, onMounted } from 'vue'
 import { useStampsStore } from '/@/store/entities/stamps'
 import { useUsersStore } from '/@/store/entities/users'
 import type { MessageStampById } from '/@/lib/messageStampList'
+import StampScaledElement from './StampScaledElement.vue'
+import useHover from '/@/composables/dom/useHover'
 
 const props = defineProps<{
   stamp: MessageStampById
+  isDetailShown: boolean
 }>()
 
 const emit = defineEmits<{
@@ -85,6 +95,8 @@ watch(
     isProgress.value = false
   }
 )
+
+const { isHovered, onMouseEnter, onMouseLeave } = useHover()
 </script>
 
 <style lang="scss" module>
@@ -103,6 +115,7 @@ watch(
   user-select: none;
   overflow: hidden;
   contain: content;
+  position: relative;
 }
 
 .count {
@@ -118,4 +131,18 @@ watch(
     right: 4px;
   }
 }
+
+.scaleReaction {
+  @include background-tertiary;
+  display: flex;
+  height: 3.5rem;
+  align-items: flex-start;
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+  user-select: none;
+  overflow: visible;
+  contain: content;
+  position: absolute;
+  bottom: 105%;
+}
 </style>

src/components/Main/MainView/MessageElement/StampScaledElement.vue

@@ -0,0 +1,58 @@
+<template>
+  <div v-show="show" :class="$style.scaleReaction">
+    <transition name="scale-reaction">
+      <!-- sizeを46より大きくすると見切れる -->
+      <a-stamp
+        :key="stamp.id"
+        :stamp-id="stamp.id"
+        :size="46"
+        :class="$style.stamp"
+        without-title
+      />
+    </transition>
+    <stamp-detail-element :class="$style.detail" :stamp="stamp" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import AStamp from '/@/components/UI/AStamp.vue'
+import type { MessageStampById } from '/@/lib/messageStampList'
+import StampDetailElement from './StampDetailElement.vue'
+
+const props = defineProps<{
+  stamp: MessageStampById
+  show: boolean
+}>()
+</script>
+
+<style lang="scss" module>
+.scaleReaction {
+  @include color-ui-tertiary;
+  @include background-primary;
+  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 {
+  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>