From df859a98716fe2e45614fe4917b06216d1186969 Mon Sep 17 00:00:00 2001
From: Hugo ATTAL <hugoattal@hotmail.fr>
Date: Wed, 26 Oct 2022 11:48:18 +0200
Subject: [PATCH] feat: add size hint, fix #329 (#336)

Co-authored-by: Guillaume Chau <guillaume.b.chau@gmail.com>
---
 .../src/app/components/story/StoryResponsivePreview.vue     | 6 ++++++
 .../src/app/components/toolbar/ToolbarResponsiveSize.vue    | 4 ++--
 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 5c2f1398..40f85580 100644
--- a/packages/histoire-app/src/app/components/story/StoryResponsivePreview.vue
+++ b/packages/histoire-app/src/app/components/story/StoryResponsivePreview.vue
@@ -6,6 +6,7 @@ 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 sizeTooltip = computed(() => (responsiveWidth.value ?? 'Auto') + ' × ' + (responsiveHeight.value ?? 'Auto'))
 </script>
 
 <template>
@@ -174,6 +177,7 @@ const isResponsiveEnabled = computed(() => !props.variant.responsiveDisabled)
           <template v-if="isResponsiveEnabled">
             <div
               ref="horizontalDragger"
+              v-tooltip.right="sizeTooltip"
               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
@@ -183,6 +187,7 @@ const isResponsiveEnabled = computed(() => !props.variant.responsiveDisabled)
             </div>
             <div
               ref="verticalDragger"
+              v-tooltip.bottom="sizeTooltip"
               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
@@ -192,6 +197,7 @@ const isResponsiveEnabled = computed(() => !props.variant.responsiveDisabled)
             </div>
             <div
               ref="cornerDragger"
+              v-tooltip.bottom="sizeTooltip"
               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/ToolbarResponsiveSize.vue b/packages/histoire-app/src/app/components/toolbar/ToolbarResponsiveSize.vue
index 0360d0fd..42dd1082 100644
--- a/packages/histoire-app/src/app/components/toolbar/ToolbarResponsiveSize.vue
+++ b/packages/histoire-app/src/app/components/toolbar/ToolbarResponsiveSize.vue
@@ -38,7 +38,7 @@ const settings = usePreviewSettingsStore().currentSettings
           Rotate
         </BaseCheckbox>
 
-        <div class="htw-flex htw-gap-2 htw-px-4 htw-py-3">
+        <div class="htw-flex htw-items-center htw-gap-2 htw-px-4 htw-py-3">
           <input
             v-model.number="settings.responsiveWidth"
             v-tooltip="'Responsive width (px)'"
@@ -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)'"