Skip to content

Commit ac47861

Browse files
das-Abroxasdas-Abroxas
authored
Merge pull request #95 from ArunaStorage/feat/improve-upload-modal
merge: Improve upload modal
2 parents ca2d5eb + 1e88412 commit ac47861

File tree

3 files changed

+39
-32
lines changed

3 files changed

+39
-32
lines changed

‎components/card/downloads.vue‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ function toReplicationStatusColor(variant: storagemodelsv2ReplicationStatus | un
5454
<th scope="col" class="px-6 py-3 text-start text-sm font-medium text-gray-500 uppercase">
5555
Replication Status
5656
</th>
57-
<th scope="col" class="px-6 py-3 text-start text-sm font-medium text-gray-500 uppercase">
58-
<center>Download</center>
57+
<th scope="col" class="px-6 py-3 text-center text-sm font-medium text-gray-500 uppercase">
58+
Download
5959
</th>
6060
</tr>
6161
</thead>
@@ -69,17 +69,15 @@ function toReplicationStatusColor(variant: storagemodelsv2ReplicationStatus | un
6969
<span class="">{{ toReplicationStatusStr(endpoint.status) }}</span>
7070
<component :is="toReplicationStatusIcon(endpoint.status)" class="flex-shrink-0" :color="toReplicationStatusColor(endpoint.status)"></component>
7171
</td>
72-
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-200">
73-
<center>
74-
<button
75-
type="button"
76-
title="Download Object"
77-
@click="emit('download', endpoint.id)"
78-
:disabled="endpoint.status != storagemodelsv2ReplicationStatus.REPLICATION_STATUS_FINISHED"
79-
class="inline-flex grow justify-center font-semibold rounded-lg border border-transparent text-gray-600 dark:text-white hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none">
80-
<IconCloudDown class="flex-shrink-0"/>
81-
</button>
82-
</center>
72+
<td class="px-6 py-4 text-center whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-200">
73+
<button
74+
type="button"
75+
title="Download Object"
76+
@click="emit('download', endpoint.id)"
77+
:disabled="endpoint.status != storagemodelsv2ReplicationStatus.REPLICATION_STATUS_FINISHED"
78+
class="inline-flex grow justify-center font-semibold rounded-lg border border-transparent text-gray-600 dark:text-white hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none">
79+
<IconCloudDown class="flex-shrink-0"/>
80+
</button>
8381
</td>
8482
</tr>
8583
</tbody>

components/modal/object_display.vue renamed to components/modal/ObjectDisplay.vue

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ const props = defineProps<{
1212
const object = toRef(props, 'object')
1313
const progress = toRef(props, 'progress')
1414
const errorMsg = toRef(props, 'errorMsg')
15-
1615
</script>
1716

1817
<template>
@@ -37,47 +36,57 @@ const errorMsg = toRef(props, 'errorMsg')
3736
<div v-if="errorMsg" v-html="errorMsg" class="p-4 overflow-y-auto text-center text-red-500"></div>
3837

3938
<div v-else-if="object" class="p-4 overflow-y-auto">
40-
<div class="border-t border-gray-100">
41-
<dl class="divide-y divide-gray-100">
39+
<div class="">
40+
<dl class="border-y border-gray-100 divide-y divide-gray-100 mb-5">
4241
<div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
43-
<dt class="text-sm font-medium leading-6 text-gray-900">ID</dt>
42+
<dt class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-200">ID</dt>
4443
<dd class="mt-1 text-sm leading-6 font-bold text-aruna-800 dark:text-aruna-700 sm:col-span-2 sm:mt-0">
4544
{{ object.id }}
4645
</dd>
4746
</div>
4847
<div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
49-
<dt class="text-sm font-medium leading-6 text-gray-900">Name</dt>
50-
<dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{{ object.name }}</dd>
48+
<dt class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-200">Name</dt>
49+
<dd class="mt-1 text-sm leading-6 text-gray-700 dark:text-gray-300 sm:col-span-2 sm:mt-0">{{ object.name }}</dd>
5150
</div>
5251
<div v-if="object.title" class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
53-
<dt class="text-sm font-medium leading-6 text-gray-900">Title</dt>
54-
<dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{{ object.title }}</dd>
52+
<dt class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-200">Title</dt>
53+
<dd class="mt-1 text-sm leading-6 text-gray-700 dark:text-gray-300 sm:col-span-2 sm:mt-0">{{ object.title }}</dd>
5554
</div>
5655
<div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
57-
<dt class="text-sm font-medium leading-6 text-gray-900">Link</dt>
58-
<dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
56+
<dt class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-200">Link</dt>
57+
<dd class="mt-1 text-sm leading-6 text-gray-700 dark:text-gray-300 sm:col-span-2 sm:mt-0">
5958
<a :href="`/objects/${object.id}`">
6059
<IconExternalLink/>
6160
</a>
6261
</dd>
6362
</div>
6463
</dl>
65-
<div v-if="object.dataLicenseTag" class="text-sm text-center font-medium leading-6 text-orange-500">
66-
<hr class="border-gray-200 my-5">
67-
Please wait for your upload to finish before you leave the resource creation form.
64+
<div v-if="object.dataLicenseTag" class="text-sm text-center font-medium leading-6">
65+
<!-- <hr class="border-gray-200 my-5"> -->
66+
<span class="text-orange-500">Please wait for your upload to finish before you leave the resource creation form.</span>
67+
6868
<!-- Progress -->
6969
<div class="flex items-center my-2 gap-x-3 whitespace-nowrap">
70-
<div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700"
70+
<div class="flex w-5/6 h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700"
7171
role="progressbar"
7272
:aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100">
7373
<div
7474
class="flex flex-col justify-center rounded-full overflow-hidden bg-aruna-800 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500"
7575
:style="`width: ${progress}%`"></div>
7676
</div>
77-
<div class="w-10 text-end">
78-
<span v-if="progress <= 0" class="animate-spin inline-block size-4 border-[3px] border-current border-t-transparent text-gray-500 rounded-full" role="status" aria-label="loading"></span>
79-
<span v-else-if="progress < 100" class="text-sm text-gray-800 dark:text-white">{{ progress }}%</span>
80-
<IconCircleCheck v-else class="text-teal-500"/>
77+
<span v-if="progress < 100">
78+
{{ progress }}%
79+
</span>
80+
<IconCircleCheck v-else class="text-teal-500"/>
81+
<div class="ms-4 text-end">
82+
<button
83+
type="button"
84+
@click="closeModal(props.modalId)"
85+
:data-hs-overlay="`#${props.modalId}`"
86+
class="py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-aruna-800 text-white hover:bg-aruna-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none"
87+
:disabled="progress < 100">
88+
Close
89+
</button>
8190
</div>
8291
</div>
8392
<!-- End Progress -->

‎pages/objects/[id].vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -356,7 +356,7 @@ useHead({
356356
<!-- End Relations Row -->
357357

358358
<!-- Locations -->
359-
<div v-if="isDownloadable()" class="flex flex-wrap justify-center gap-x-4 gap-y-2 container mx-auto mb-6">
359+
<div v-if="objectInfo.variant == v2ResourceVariant.RESOURCE_VARIANT_OBJECT" class="flex flex-wrap justify-center gap-x-4 gap-y-2 container mx-auto mb-6">
360360
<div
361361
class="flex flex-col grow p-2 bg-white/[.5] border border-gray-400 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
362362
<div class="flex flex-row justify-start items-center p-4 font-bold text-xl">

0 commit comments

Comments
 (0)