feat(grid): preview background

histoire-dev · Oct 6, 2022 · b2b0583 · b2b0583
1 parent e828f8c
commit b2b0583
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 27 deletions.
diff --git a/packages/histoire-app/src/app/components/story/StoryVariantGrid.vue b/packages/histoire-app/src/app/components/story/StoryVariantGrid.vue
@@ -2,7 +2,9 @@
 import { useResizeObserver } from '@vueuse/core'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useStoryStore } from '../../stores/story'
+import { isMobile } from '../../util/responsive'
 import StoryVariantGridItem from './StoryVariantGridItem.vue'
+import StoryVariantBackground from '../toolbar/StoryVariantBackground.vue'
 
 const storyStore = useStoryStore()
 
@@ -108,31 +110,41 @@ const columnCount = computed(() => Math.min(storyStore.currentStory.variants.len
 </script>
 
 <template>
- <div
- ref="el"
- class="htw-h-full htw-overflow-y-auto __histoire-pane-shadow-from-right htw-flex"
- @scroll="updateMaxCount()"
- >
+ <div class="htw-flex htw-flex-col htw-items-stretch htw-h-full">
+ <!-- Toolbar -->
  <div
- class="htw-m-auto"
- :style="{
- minHeight: `${(storyStore.currentStory.variants.length / countPerRow) * (maxItemHeight + gap) - gap}px`,
- }"
+ v-if="!isMobile"
+ class="htw-flex-none htw-flex htw-items-center htw-justify-end htw-h-8 htw-mx-2 htw-mt-1"
+ >
+ <StoryVariantBackground />
+ </div>
+
+ <div
+ ref="el"
+ class="htw-overflow-y-auto __histoire-pane-shadow-from-right htw-flex htw-flex-1"
+ @scroll="updateMaxCount()"
  >
  <div
- ref="gridEl"
- class="htw-grid htw-gap-4 htw-m-4"
+ class="htw-m-auto"
  :style="{
- gridTemplateColumns: `repeat(${columnCount}, ${gridTemplateWidth})`,
+ minHeight: `${(storyStore.currentStory.variants.length / countPerRow) * (maxItemHeight + gap) - gap}px`,
  }"
  >
- <StoryVariantGridItem
- v-for="(variant, index) of storyStore.currentStory.variants.slice(0, maxCount)"
- :key="index"
- :variant="variant"
- :story="storyStore.currentStory"
- @resize="onItemResize"
- />
+ <div
+ ref="gridEl"
+ class="htw-grid htw-gap-4 htw-m-4"
+ :style="{
+ gridTemplateColumns: `repeat(${columnCount}, ${gridTemplateWidth})`,
+ }"
+ >
+ <StoryVariantGridItem
+ v-for="(variant, index) of storyStore.currentStory.variants.slice(0, maxCount)"
+ :key="index"
+ :variant="variant"
+ :story="storyStore.currentStory"
+ @resize="onItemResize"
+ />
+ </div>
  </div>
  </div>
  </div>

diff --git a/packages/histoire-app/src/app/components/story/StoryVariantGridItem.vue b/packages/histoire-app/src/app/components/story/StoryVariantGridItem.vue
@@ -3,11 +3,13 @@ import { PropType, ref, toRefs } from 'vue'
 import { Icon } from '@iconify/vue'
 import { useRouter } from 'vue-router'
 import { useResizeObserver } from '@vueuse/core'
-import GenericRenderStory from './GenericRenderStory.vue'
 import { useCurrentVariantRoute } from '../../util/variant'
 import type { Story, Variant } from '../../types'
 import { useScrollOnActive } from '../../util/scroll'
+import { usePreviewSettingsStore } from '../../stores/preview-settings'
+import GenericRenderStory from './GenericRenderStory.vue'
 import StoryVariantNewTab from '../toolbar/StoryVariantNewTab.vue'
+import CheckerboardPattern from '../misc/CheckerboardPattern.vue'
 
 const props = defineProps({
  variant: {
@@ -56,6 +58,8 @@ useResizeObserver(el, () => {
  }
  }
 })
+
+const settings = usePreviewSettingsStore().currentSettings
 </script>
 
 <template>
@@ -86,7 +90,7 @@ useResizeObserver(el, () => {
  </RouterLink>
 
  <!-- Toolbar -->
- <div class="htw-flex-none htw-ml-auto htw-hidden group-hover:htw-flex htw-items-center htw-gap-1">
+ <div class="htw-flex-none htw-ml-auto htw-hidden group-hover:htw-flex htw-items-center">
  <StoryVariantNewTab
  :variant="variant"
  :story="story"
@@ -96,7 +100,7 @@ useResizeObserver(el, () => {
 
  <!-- Body -->
  <div
- class="htw-border htw-bg-white dark:htw-bg-gray-700 htw-rounded htw-flex-1 htw-p-4"
+ class="htw-border htw-bg-white dark:htw-bg-gray-700 htw-rounded htw-flex-1 htw-p-4 htw-relative"
  :class="{
  'htw-border-gray-100 dark:htw-border-gray-800': !isActive,
  'htw-border-primary-200 dark:htw-border-primary-900': isActive,
@@ -105,12 +109,21 @@ useResizeObserver(el, () => {
  @click.stop="selectVariant()"
  @keyup="selectVariant()"
  >
- <GenericRenderStory
- :key="`${story.id}-${variant.id}`"
-  :variant="variant"
- :story="story"
- @ready="onReady"
+ <div class="htw-absolute htw-inset-0 htw-rounded bind-preview-bg" />
+
+ <CheckerboardPattern
+ v-if="settings.checkerboard"
+ class="htw-absolute htw-inset-0 htw-w-full htw-h-full htw-text-gray-500/20"
  />
+
+ <div class="htw-relative htw-h-full">
+ <GenericRenderStory
+ :key="`${story.id}-${variant.id}`"
+ :variant="variant"
+ :story="story"
+ @ready="onReady"
+ />
+ </div>
  </div>
  </div>
 </template>
@@ -119,4 +132,8 @@ useResizeObserver(el, () => {
 .bind-icon-color {
  color: v-bind('variant.iconColor');
 }
+
+.bind-preview-bg {
+ background-color: v-bind('settings.backgroundColor');
+}
 </style>