Add thumbail only option to gallery card
This commit is contained in:
Julian Stirling
parent
aa10d52487
commit
6b17a61d55
1 changed files with 84 additions and 58 deletions
|
|
@ -1,11 +1,14 @@
|
|||
<template>
|
||||
<div class="uk-card">
|
||||
<div class="uk-card-body">
|
||||
<div class="uk-card-media-top">
|
||||
<div class="view-image uk-padding-remove uk-height-1-1">
|
||||
<div class="uk-card-body" :class="{ 'thumbnail-only-card': thumbnailOnly }">
|
||||
<div
|
||||
class="uk-card-media-top uk-flex uk-flex-center uk-flex-middle"
|
||||
:class="{ 'thumbnail-only-container': thumbnailOnly }"
|
||||
>
|
||||
<div class="uk-padding-remove">
|
||||
<img
|
||||
id="thumbnail-stitched-image"
|
||||
:class="[viewerAvailable ? 'thumbnail-fit clickable' : 'thumbnail-fit disabled']"
|
||||
:class="[viewerAvailable ? 'clickable' : 'disabled', thumbnailOnly && 'thumbnail-only']"
|
||||
class="thumbnail-fit"
|
||||
:src="thumbnailPath"
|
||||
onerror="this.src = '/titleiconpink.svg'"
|
||||
|
|
@ -13,66 +16,70 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="uk-card-title gallery-card-title">{{ itemData.name }}</h3>
|
||||
<div class="button-container">
|
||||
<div v-if="itemData.card_type === 'Scan'" class="uk-button-group gallery-card-buttons">
|
||||
<template v-if="!thumbnailOnly">
|
||||
<h3 class="uk-card-title gallery-card-title">{{ itemData.name }}</h3>
|
||||
<div class="button-container">
|
||||
<div v-if="itemData.card_type === 'Scan'" class="uk-button-group gallery-card-buttons">
|
||||
<action-button
|
||||
class="uk-width-1-2"
|
||||
thing="smart_scan"
|
||||
action="download_zip"
|
||||
submit-label="Download All"
|
||||
:can-terminate="false"
|
||||
:submit-data="{ scan_name: itemData.name }"
|
||||
:button-primary="true"
|
||||
@response="downloadZipFile"
|
||||
@error="modalError"
|
||||
/>
|
||||
<EndpointButton
|
||||
class="uk-width-1-2"
|
||||
:button-primary="true"
|
||||
:is-disabled="!itemData.stitch_available"
|
||||
:url="downloadStitchFile"
|
||||
button-label="Download JPEG"
|
||||
/>
|
||||
</div>
|
||||
<button class="uk-button uk-button-default uk-width-1-1" @click="deleteScan">
|
||||
Delete
|
||||
</button>
|
||||
<action-button
|
||||
class="uk-width-1-2"
|
||||
v-if="itemData.can_stitch | (itemData.stitch_available & !itemData.dzi)"
|
||||
submit-label="Stitch Images"
|
||||
thing="smart_scan"
|
||||
action="download_zip"
|
||||
submit-label="Download All"
|
||||
:can-terminate="false"
|
||||
action="stitch_scan"
|
||||
:can-terminate="true"
|
||||
:submit-data="{ scan_name: itemData.name }"
|
||||
:button-primary="true"
|
||||
@response="downloadZipFile"
|
||||
:button-primary="false"
|
||||
:modal-progress="true"
|
||||
@error="modalError"
|
||||
/>
|
||||
<EndpointButton
|
||||
class="uk-width-1-2"
|
||||
:button-primary="true"
|
||||
:is-disabled="!itemData.stitch_available"
|
||||
:url="downloadStitchFile"
|
||||
button-label="Download JPEG"
|
||||
/>
|
||||
<button
|
||||
v-if="itemData.dzi"
|
||||
class="uk-button uk-button-default uk-width-1-1"
|
||||
@click="requestViewer"
|
||||
>
|
||||
Show Stitched Scan
|
||||
</button>
|
||||
</div>
|
||||
<button class="uk-button uk-button-default uk-width-1-1" @click="deleteScan">Delete</button>
|
||||
<action-button
|
||||
v-if="itemData.can_stitch | (itemData.stitch_available & !itemData.dzi)"
|
||||
submit-label="Stitch Images"
|
||||
thing="smart_scan"
|
||||
action="stitch_scan"
|
||||
:can-terminate="true"
|
||||
:submit-data="{ scan_name: itemData.name }"
|
||||
:button-primary="false"
|
||||
:modal-progress="true"
|
||||
@error="modalError"
|
||||
/>
|
||||
<button
|
||||
v-if="itemData.dzi"
|
||||
class="uk-button uk-button-default uk-width-1-1"
|
||||
@click="requestViewer"
|
||||
>
|
||||
Show Stitched Scan
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="itemData.card_type === 'Scan'" class="item-info">
|
||||
<ul>
|
||||
<li>{{ itemData.number_of_images }} images</li>
|
||||
<li>Created: {{ formatDate(itemData.created) }}</li>
|
||||
<li>Duration: {{ formatDuration(itemData.duration) }}</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li v-if="itemData.number_of_images < 2" class="warning-msg">
|
||||
Not enough images to stitch
|
||||
</li>
|
||||
<li v-else-if="!itemData.dzi && itemData.stitch_available" class="alert-msg">
|
||||
Interactive preview not available
|
||||
</li>
|
||||
<li v-else-if="!itemData.stitch_available" class="alert-msg">
|
||||
High quality stitch not available
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="itemData.card_type === 'Scan'" class="item-info">
|
||||
<ul>
|
||||
<li>{{ itemData.number_of_images }} images</li>
|
||||
<li>Created: {{ formatDate(itemData.created) }}</li>
|
||||
<li>Duration: {{ formatDuration(itemData.duration) }}</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li v-if="itemData.number_of_images < 2" class="warning-msg">
|
||||
Not enough images to stitch
|
||||
</li>
|
||||
<li v-else-if="!itemData.dzi && itemData.stitch_available" class="alert-msg">
|
||||
Interactive preview not available
|
||||
</li>
|
||||
<li v-else-if="!itemData.stitch_available" class="alert-msg">
|
||||
High quality stitch not available
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -97,6 +104,11 @@ export default {
|
|||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
thumbnailOnly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
|
||||
emits: ["viewer-requested", "update-requested"],
|
||||
|
|
@ -210,6 +222,15 @@ ul {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.thumbnail-only-card {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.thumbnail-only-container {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.thumbnail-fit {
|
||||
max-height: 120px;
|
||||
max-width: 240px;
|
||||
|
|
@ -217,6 +238,11 @@ ul {
|
|||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.thumbnail-fit.thumbnail-only {
|
||||
max-height: 150px;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue