Add download icon

This commit is contained in:
Vladimir 2026-07-07 13:48:54 +03:00
parent 63d8e7e5a6
commit c52941f2d5

View File

@ -15,7 +15,12 @@
<div class="font-bold text-gray-800 truncate">{{ doc.name || 'N/A' }}</div>
<div class="flex min-w-0">
<img src="@/shared/assets/icons/doc.svg" alt="Договор" class="w-5 h-5 shrink-0">
<a :href="downloadUrl" class="ml-2 underline document-file truncate">{{ doc.original_name || getFileName(doc.file) || 'N/A' }}</a>
<a :href="downloadUrl" class="ml-2 underline document-file truncate flex items-center gap-1">
{{ doc.original_name || getFileName(doc.file) || 'N/A' }}
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 shrink-0 download-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
@ -161,6 +166,15 @@ const confirmDelete = (event) => {
font-size: 12px;
color: #757575;
}
.download-icon {
opacity: 0.5;
transition: opacity 0.2s;
}
}
}
.document-card :hover > .download-icon,
.document-card a:hover .download-icon {
opacity: 1;
}
</style>