Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add size hint, fix #329 #336

Merged
merged 10 commits into from Oct 26, 2022
Merged

feat: add size hint, fix #329 #336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
72983ea
Add highlighter
hugoattal Oct 8, 2022
50d71d7
Replace modelValue control with Json
hugoattal Oct 8, 2022
3e0f7b8
Small cleaning
hugoattal Oct 8, 2022
f7f08fe
Add size hint
hugoattal Oct 19, 2022
015a300
Remove unecessary import
hugoattal Oct 19, 2022
e72c682
Revert lockfile
hugoattal Oct 19, 2022
75de627
Merge remote-tracking branch 'origin/main' into add-size-hint
Akryum Oct 26, 2022
174af11
fix: align
Akryum Oct 26, 2022
a30c28a
fix: 'Auto' labels
Akryum Oct 26, 2022
71d3be7
refactor: rename to sizeTooltip
Akryum Oct 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/histoire-app/src/app/components/story/StoryResponsivePreview.vue
View file
Open in desktop
Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions packages/histoire-app/src/app/components/toolbar/ToolbarResponsiveSize.vue
View file
Open in desktop
Expand Up @@ -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)'"
Expand All @@ -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)'"
Expand Down