Add size hint

histoire-dev · Oct 19, 2022 · f7f08fe · f7f08fe
1 parent 3e0f7b8
commit f7f08fe
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
@@ -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/ToolbarResponsiveSize.vue b/packages/histoire-app/src/app/components/toolbar/ToolbarResponsiveSize.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)'"