feat: add size hint, fix #329 (#336)

Co-authored-by: Guillaume Chau <guillaume.b.chau@gmail.com>
histoire-dev · Oct 26, 2022 · df859a9 · df859a9
1 parent f045444
commit df859a9
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git 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
@@ -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)'"