From 417b615708ddc163b01ba6521781eb28ea361210 Mon Sep 17 00:00:00 2001
From: Hugo <hugoattal@hotmail.fr>
Date: Thu, 20 Oct 2022 00:51:40 +0200
Subject: [PATCH] Add size hint

---
 .../src/app/components/story/StoryResponsivePreview.vue   | 8 +++++++-
 .../app/components/toolbar/StoryVariantResponsiveSize.vue | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/histoire-app/src/app/components/story/StoryResponsivePreview.vue b/packages/histoire-app/src/app/components/story/StoryResponsivePreview.vue
index dbab1483..899fcdbe 100644
--- a/packages/histoire-app/src/app/components/story/StoryResponsivePreview.vue
+++ b/packages/histoire-app/src/app/components/story/StoryResponsivePreview.vue
@@ -1,11 +1,12 @@
 <script lang="ts" setup>
-import { computed, onUnmounted, Ref, ref } from 'vue'
+import { computed, onUnmounted, Ref, ref, reactive } from 'vue'
 import { useEventListener } from '@vueuse/core'
 import { Icon } from '@iconify/vue'
 import HatchedPattern from '../misc/HatchedPattern.vue'
 import CheckerboardPattern from '../misc/CheckerboardPattern.vue'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
 import { Variant } from '../../types'
+import { VTooltip as vTooltip } from 'floating-vue'
 
 const props = defineProps<{
   variant: Variant
@@ -115,6 +116,8 @@ const finalHeight = computed(() => settings.rotate ? settings.responsiveWidth :
 // Disabled responsive
 
 const isResponsiveEnabled = computed(() => !props.variant.responsiveDisabled)
+
+const vTooltipContent = computed(() => responsiveWidth.value + ' × ' + responsiveHeight.value)
 </script>
 
 <template>
@@ -171,6 +174,7 @@ const isResponsiveEnabled = computed(() => !props.variant.responsiveDisabled)
           <template v-if="isResponsiveEnabled">
             <div
               ref="horizontalDragger"
+              v-tooltip.right="vTooltipContent"
               class="htw-absolute htw-w-4 htw-top-0 htw-bottom-4 htw-right-0 hover:htw-bg-primary-500/30 htw-flex htw-items-center htw-justify-center htw-cursor-ew-resize htw-group hover:htw-text-primary-500"
             >
               <Icon
@@ -180,6 +184,7 @@ const isResponsiveEnabled = computed(() => !props.variant.responsiveDisabled)
             </div>
             <div
               ref="verticalDragger"
+              v-tooltip.bottom="vTooltipContent"
               class="htw-absolute htw-h-4 htw-left-0 htw-right-4 htw-bottom-0 hover:htw-bg-primary-500/30 htw-flex htw-items-center htw-justify-center htw-cursor-ns-resize htw-group hover:htw-text-primary-500"
             >
               <Icon
@@ -189,6 +194,7 @@ const isResponsiveEnabled = computed(() => !props.variant.responsiveDisabled)
             </div>
             <div
               ref="cornerDragger"
+              v-tooltip.bottom="vTooltipContent"
               class="htw-absolute htw-w-4 htw-h-4 htw-right-0 htw-bottom-0 hover:htw-bg-primary-500/30 htw-flex htw-items-center htw-justify-center htw-cursor-nwse-resize htw-group hover:htw-text-primary-500"
             />
           </template>
diff --git a/packages/histoire-app/src/app/components/toolbar/StoryVariantResponsiveSize.vue b/packages/histoire-app/src/app/components/toolbar/StoryVariantResponsiveSize.vue
index f69473a0..d23994f9 100644
--- a/packages/histoire-app/src/app/components/toolbar/StoryVariantResponsiveSize.vue
+++ b/packages/histoire-app/src/app/components/toolbar/StoryVariantResponsiveSize.vue
@@ -47,7 +47,7 @@ const settings = usePreviewSettingsStore().currentSettings
             step="16"
             placeholder="Auto"
           >
-          <span class="htw-opacity-50">x</span>
+          <span class="htw-opacity-50">×</span>
           <input
             v-model.number="settings.responsiveHeight"
             v-tooltip="'Responsive height (px)'"