aico-image-editor
Version:
Combine multiple image into and create single combined image
78 lines (72 loc) • 4.98 kB
HTML
<div class="block block-rounded block-transparent d-flex h-100 flex-column" x-data="versionPanel" >
<div class="block-header pb-0" x-bind="versionPanelTrigger">
<h6 class="block-title" x-text="getTranslatedHTML('restoreVersionBlockTitle')"></h6>
</div>
<div class="block-content block-content-full flex-grow-1 overflow-auto">
<div class="card">
<div class="card-body d-flex align-items-center">
<div>
<span x-show="defaultVersionUrl">
<img :src="defaultVersionUrl" class="img-avatar img-avatar32 rounded-0 img-contain border" alt="version image" />
</span>
<span x-show="!defaultVersionUrl">
<span class="img-avatar img-avatar32">
<span class="d-flex align-items-center w-100 h-100 bg-gray justify-content-center rounded-3">
<i class="fa-regular fa-image"></i>
</span>
</span>
</span>
</div>
<div class="mx-2 fs-sm">
<span x-text="formatDate(new Date())"></span>
</div>
<div class="ms-auto">
<a class="text-body" href="javascript:void(0)" @click="$store.canvas.resetCanvasData(__canvas)"
:title="getTranslatedHTML('viewRecordTitle')" x-data="tooltip" data-bs-toggle="tooltip"><i class="fas fa-eye fa-sm"></i> </a>
</div>
</div>
</div>
<div x-show="historyRecords.length > 0" class="mt-2">
<div class="row gy-2">
<template x-for="(historyRecord,index) in historyRecords" :key="historyRecord.id">
<div class="col-12">
<div class="card" x-init="async() => {
await preloadImage(historyRecord);
historyRecord.loadedImage = historyRecord.product3dImage;
}">
<template x-if="historyRecord.loadedImage">
<div class="card-body d-flex align-items-center">
<div>
<span x-show="historyRecord.product3dImage">
<img :src="historyRecord.loadedImage" class="img-avatar img-avatar32 rounded-0 img-contain border" alt="version image"
width="32" height="32"/>
</span>
<span x-show="!historyRecord.product3dImage">
<span class="img-avatar img-avatar32">
<span class="d-flex align-items-center w-100 h-100 bg-gray justify-content-center rounded-3">
<i class="fa-regular fa-image"></i>
</span>
</span>
</span>
</div>
<div class="mx-2 fs-sm">
<span x-text="formatDate(historyRecord.createdAt)"></span>
</div>
<div class="ms-auto d-flex align-items-center">
<a class="me-2 text-body" href="javascript:void(0)" @click="viewPreviousRecord(historyRecord)"
:title="getTranslatedHTML('viewRecordTitle')" x-data="tooltip" data-bs-toggle="tooltip"><i class="fas fa-eye fa-sm"></i> </a>
<a class="text-body" href="javascript:void(0)" @click="replacePreviousRecord(historyRecord)"
:title="getTranslatedHTML('restoreRecordTitle')" x-data="tooltip" data-bs-toggle="tooltip"><i class="fas fa-retweet fa-sm"></i> </a>
</div>
</div>
</template>
<template x-if="!historyRecord.loadedImage">
<div class="skeleton img-avatar img-avatar48 w-100 rounded-0 my-2"></div>
</template>
</div>
</div>
</template>
</div>
</div>
</div>
</div>