Appearance

GalleryQuickViewDialog Component ​

File Information ​

  • Path: app/components/dialogs/GalleryQuickViewDialog.vue
  • Purpose: Paged lightbox for the assets of a collage or folder: arrows, keyboard, swipe, thumbnail strip, download and open detail view
  • Type: Dialog Component
  • Added: PR #137 (RIV-1266), 2026-10-28

Overview ​

Used only by the collage detail and folder detail pages. Their asset cards are rendered with :external-quick-view="true", so the card emits quickView instead of opening its own QuickViewDialog, and the page opens this dialog with openGallery(file). The toolbar Preview button opens it for the selection with openGalleryForSelection(). Behaviour, paging rules, input and analytics are described in Asset Management - Gallery Quick View.

The dialog is a thin template over useGalleryQuickViewDialog.

Features ​

  • Previous / next buttons outside the card (.galleryNavPrev, .galleryNavNext, icons chevronLeftIcon / chevronRightIcon), disabled while a page is loading for the move, with a spinner on the button in that direction
  • Counter {position} of {total} across the whole collage or folder, not only the loaded rows
  • Slide transition gallery-stage-next / gallery-stage-prev keyed by asset id; image skeleton until the <img> fires load or error
  • Thumbnail strip (TransitionGroup galleryThumbSlide) centred on the current asset; skeleton for assets not loaded yet
  • Info tooltip, download (unless hideDownload), open detail view in a new tab, close
  • Description block when the asset has description
  • Single asset: arrows, counter and strip are hidden and swipe is off

Props ​

GalleryQuickViewProps (app/types/components.ts):

PropTypeDefaultMeaning
dialogbooleanrequiredOpen state
assetsany[]requiredAssets already available on the page (head of the list)
startAssetIdstring | number | nullnullAsset to show first; index 0 when not found
paginationGalleryPagination | nullnullServer paging; null limits the gallery to assets
hideDownloadbooleanfalseHide the download button
loopbooleantrueWrap from last to first and back

GalleryPagination: fetchPage(page) => Promise<{ items, total?, lastPage? }>, loadedPages, pageSize?, total?, lastPage?, prefetchRatio? (default 0.6). When lastPage is missing it is ceil(total / pageSize), else unbounded until an empty page.

Events ​

typescript
{
  'update:dialog': [v: boolean]  // false on close
  close: []                      // after Escape or the close button
}

Composables Used ​

  • useGalleryQuickViewDialog(props, emit) - state, gestures, preload, tracking, actions
  • useHelpers().toHumanlySize - file size in the tooltip

Usage Example ​

From app/pages/[brand_name]/folders/[id]/index.vue:

vue
<AssetCard
  :file="file"
  :external-quick-view="true"
  @quick-view="openGallery(file)"
/>

<GalleryQuickViewDialog
  :dialog="galleryDialog"
  :assets="galleryAssets"
  :start-asset-id="galleryStartId"
  :pagination="galleryPagination"
  @close="closeGallery()"
/>

Styling ​

app/assets/scss/components/_gallery-quick-view.scss (loaded from main.scss after components/dialogs):

SelectorRule
.v-dialog.galleryDialog .galleryDialogContentTop offset clamp(48px, 10vh, 96px) (clamp(32px, 10vh, 96px) at 600 px and below), side offset 24 px, overflow: visible so the arrows can sit outside
.galleryNavBtnWhite round button, vertically centred; left/right: -66px, -18px on tablet, -16px on mobile; nudges 2 px on hover; opacity: 0.4 when disabled
.galleryQuickViewDialog .assetsDetailBoxPreview height 60vh
.gallerySwipeStageGrab cursor while swiping; normal cursor for .single-asset
.gallery-stage-*0.4 s cubic-bezier(0.25, 0.8, 0.25, 1) slide
.galleryThumbSlot76 x 56 px, gap $gap-md (12 px); 62 x 42 px and gap 8 px at 960 px and below; 42 x 28 px at 600 px and below
.galleryThumbopacity: 0.6, 2 px transparent border; .active highlighted

_dialogs.scss keeps overflow: hidden !important on dialog content except .galleryDialogContent.