Skip to content
Permalink
Browse files
feat: add size hint, fix #329 (#336)
Co-authored-by: Guillaume Chau <guillaume.b.chau@gmail.com>
  • Loading branch information
hugoattal and Akryum committed Oct 26, 2022
1 parent f045444 commit df859a98716fe2e45614fe4917b06216d1186969
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 2 deletions.
@@ -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>
@@ -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)'"

0 comments on commit df859a9

Please sign in to comment.