Models empty state
This commit is contained in:
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<svg
|
||||
width="194"
|
||||
height="141"
|
||||
viewBox="0 0 194 141"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.99907 57.3669L124.822 17.7594C127.703 16.7988 131.551 17.9639 133.416 20.3616L189.592 92.5873C191.457 94.985 190.632 97.7074 187.751 98.668L68.928 138.276C66.0463 139.236 62.1984 138.071 60.3336 135.673L4.15799 63.4476C2.2931 61.0499 3.11738 58.3275 5.99907 57.3669Z"
|
||||
fill="currentColor"
|
||||
class="fill-foundation-2"
|
||||
/>
|
||||
<path
|
||||
d="M5.99907 57.3669L124.822 17.7594C127.703 16.7988 131.551 17.9639 133.416 20.3616L189.592 92.5873C191.457 94.985 190.632 97.7074 187.751 98.668L68.928 138.276C66.0463 139.236 62.1984 138.071 60.3336 135.673L4.15799 63.4476C2.2931 61.0499 3.11738 58.3275 5.99907 57.3669Z"
|
||||
stroke="currentColor"
|
||||
class="stroke-outline-5"
|
||||
/>
|
||||
<g clip-path="url(#clip0_1292_252810)">
|
||||
<g clip-path="url(#clip1_1292_252810)">
|
||||
<path
|
||||
d="M70.2824 95.2936L109.853 89.7543L91.3456 65.9597L57.4463 78.7901L70.2824 95.2936Z"
|
||||
fill="currentColor"
|
||||
class="fill-foundation stroke-outline-5"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M152.677 64.5977L109.852 89.7544L91.3454 65.9598L142.236 51.1736L152.677 64.5977Z"
|
||||
fill="currentColor"
|
||||
class="fill-foundation-2 stroke-outline-5"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M73.3716 50.6423L102.837 32.453L118.925 53.1365L85.5753 66.3329L73.3716 50.6423Z"
|
||||
fill="currentColor"
|
||||
class="fill-foundation stroke-outline-5"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M147.845 62.3606L109.582 81.6143L100.72 70.2207L142.424 55.3907L147.845 62.3606Z"
|
||||
fill="currentColor"
|
||||
class="fill-foundation stroke-outline-5"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M62.457 76.8958L76.129 94.4741"
|
||||
stroke="currentColor"
|
||||
class="stroke-outline-5"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M68.1668 74.735L82.7949 93.5427"
|
||||
stroke="currentColor"
|
||||
class="stroke-outline-5"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M74.7316 72.2502L90.4578 92.4696"
|
||||
stroke="currentColor"
|
||||
class="stroke-outline-5"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M82.365 69.3611L99.3682 91.2224"
|
||||
stroke="currentColor"
|
||||
class="stroke-outline-5"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M93.3629 68.5537L144.204 52.3733L140.504 47.6164L86.7189 60.0115L93.3629 68.5537Z"
|
||||
fill="currentColor"
|
||||
class="fill-foundation-2 stroke-outline-5"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M93.3629 68.5537L57.7381 80.9755L53.1962 75.1359L86.7189 60.0115L93.3629 68.5537Z"
|
||||
fill="currentColor"
|
||||
class="fill-foundation stroke-outline-5"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M137.004 48.4233L118.564 52.6725L102.838 32.453L124.515 32.3659L137.004 48.4233Z"
|
||||
fill="currentColor"
|
||||
class="fill-foundation-2 stroke-outline-5"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<rect
|
||||
x="0.585984"
|
||||
y="0.177422"
|
||||
width="136.5"
|
||||
height="102.75"
|
||||
rx="5.625"
|
||||
transform="matrix(0.948683 -0.316228 0.613941 0.789352 -0.0788556 44.0924)"
|
||||
stroke="currentColor"
|
||||
class="stroke-outline-5"
|
||||
stroke-width="0.75"
|
||||
stroke-dasharray="3 4"
|
||||
/>
|
||||
<defs>
|
||||
<clipPath id="clip0_1292_252810">
|
||||
<rect
|
||||
width="137.25"
|
||||
height="103.5"
|
||||
rx="6"
|
||||
transform="matrix(0.948683 -0.316228 0.613941 0.789352 0 43.8697)"
|
||||
fill="white"
|
||||
/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_1292_252810">
|
||||
<rect
|
||||
width="91"
|
||||
height="60"
|
||||
fill="white"
|
||||
transform="matrix(0.948683 -0.316228 0.613941 0.789352 37.0532 54.3806)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -117,9 +117,7 @@
|
||||
]"
|
||||
:style="`width: ${widthClass};`"
|
||||
>
|
||||
<ViewerModelsPanel
|
||||
v-if="resourceItems.length !== 0 && activePanel === 'models'"
|
||||
/>
|
||||
<ViewerModelsPanel v-if="activePanel === 'models'" />
|
||||
<KeepAlive v-show="resourceItems.length !== 0 && activePanel === 'filters'">
|
||||
<ViewerFiltersPanel />
|
||||
</KeepAlive>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="flex">
|
||||
<div v-tippy="'Versions'" class="flex">
|
||||
<div v-if="!hideVersions" v-tippy="'Versions'" class="flex">
|
||||
<button
|
||||
class="group-hover:opacity-100 hover:bg-highlight-3 rounded-md h-6 w-6 flex items-center justify-center shrink-0"
|
||||
@click="$emit('showVersions')"
|
||||
@@ -9,7 +9,7 @@
|
||||
<span class="sr-only">Versions</span>
|
||||
</button>
|
||||
</div>
|
||||
<div v-tippy="'Add model'" class="flex">
|
||||
<div v-if="!hideAddModel" v-tippy="'Add model'" class="flex">
|
||||
<button
|
||||
class="group-hover:opacity-100 hover:bg-highlight-3 rounded-md h-6 w-6 flex items-center justify-center shrink-0"
|
||||
@click="$emit('addModel')"
|
||||
@@ -22,6 +22,11 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
hideVersions?: boolean
|
||||
hideAddModel?: boolean
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
showVersions: []
|
||||
addModel: []
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
<template #actions>
|
||||
<ViewerModelsActions
|
||||
v-if="!hasObjects"
|
||||
:hide-versions="resourceItems.length === 0"
|
||||
@show-versions="showVersions = true"
|
||||
@add-model="showAddModel = true"
|
||||
/>
|
||||
@@ -52,10 +53,12 @@
|
||||
</template>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-else class="flex flex-col items-center justify-center gap-4 h-full">
|
||||
<IconViewerModels v-if="!showVersions" class="h-10 w-10 text-foreground-2" />
|
||||
<IconVersions v-else class="h-10 w-10 text-foreground-2" />
|
||||
<p class="text-body-xs text-foreground-2">No models loaded, yet.</p>
|
||||
<div
|
||||
v-else
|
||||
class="flex flex-col items-center justify-center gap-4 h-full -mt-8"
|
||||
>
|
||||
<IllustrationEmptystateModels />
|
||||
<span class="text-body-xs text-foreground-2">No models loaded, yet.</span>
|
||||
<FormButton @click="showAddModel = true">Add model</FormButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user