Appearance

Quick View Dialog ​

File Information ​

  • Path: components/dam/Dialogs/QuickViewDialog.vue
  • Purpose: Quick asset preview with essential information and actions

Overview ​

The Quick View Dialog component provides a lightweight preview interface for quickly viewing assets without opening the full preview. It displays asset thumbnail, basic information, and quick actions in a compact dialog.

Key Features ​

  1. Quick Preview

    • Asset thumbnail display
    • Basic asset information
    • File type indicator
    • File size display

  2. Quick Actions

    • Download asset
    • Share asset
    • View full details
    • Edit asset (if permitted)

  3. Asset Information

    • Asset name
    • File type and size
    • Creation date
    • Last modified

  4. Lightweight

    • Fast loading
    • Minimal UI
    • Quick access
    • Efficient rendering

Props ​

javascript
{
  dialog: {
    type: Boolean,
    default: false
  },
  asset: {
    type: Object,
    required: true
  },
  workspaceId: {
    type: [String, Number],
    required: true
  }
}

Data Properties ​

javascript
{
  loading: false    // Loading state
}

Computed Properties ​

assetThumbnail ​

Returns asset thumbnail URL

assetName ​

Returns asset display name

fileSize ​

Returns formatted file size

fileType ​

Returns file type

Methods ​

openQuickView(asset) ​

Opens quick view for asset:

  • Sets current asset
  • Loads asset data
  • Displays preview
  • Handles errors

closeQuickView() ​

Closes quick view:

  • Emits close event
  • Clears state

downloadAsset() ​

Downloads asset:

  • Gets download URL
  • Triggers download
  • Handles errors

shareAsset() ​

Opens share dialog:

  • Emits share event
  • Opens share dialog
  • Closes quick view

viewFullDetails() ​

Opens full asset details:

  • Navigates to asset details page
  • Closes quick view

Events ​

  • close - Dialog closed
  • download - Asset download requested
  • share - Asset share requested
  • view-details - View full details requested
  • edit - Asset edit requested

Usage Examples ​

Basic Usage ​

vue
<template>
  <QuickViewDialog
    :dialog="showQuickView"
    :asset="selectedAsset"
    :workspace-id="workspaceId"
    @close="showQuickView = false"
    @share="openShareDialog"
    @view-details="navigateToAsset"
  />
</template>

<script>
import QuickViewDialog from '~/components/dam/Dialogs/QuickViewDialog.vue'

export default {
  components: {
    QuickViewDialog
  }
}
</script>

Integration Points ​

  • Asset List: Quick view from asset cards
  • Search Results: Quick preview from search
  • Folder Views: Quick view from folders
  • Preview Dialog: Alternative to full preview

Notes for Development ​

  • Lightweight and fast
  • Minimal data loading
  • Quick actions only
  • Thumbnail-based preview
  • Efficient rendering