Mike
66 lines
1.9 KiB
Vue
66 lines
1.9 KiB
Vue
<template>
|
|
<LayoutDialog
|
|
v-model:open="isOpen"
|
|
:is-transparent="!condensed"
|
|
max-width="xs"
|
|
fullscreen="none"
|
|
:buttons="buttons"
|
|
:hide-closer="preventClose"
|
|
:prevent-close-on-click-outside="preventClose"
|
|
:title="condensed ? 'Plan limit reached' : undefined"
|
|
closer-classes="hover:!bg-transparent !text-white hover:opacity-65"
|
|
>
|
|
<div class="flex flex-col">
|
|
<div v-if="!condensed" class="relative bg-primary h-32 md:h-48 select-none">
|
|
<NuxtImg
|
|
src="/images/workspace/cubes.png"
|
|
alt="Speckle cubes"
|
|
class="w-full object-cover h-full"
|
|
/>
|
|
|
|
<div class="absolute top-0 left-0 w-full h-full limit-reached-gradient" />
|
|
|
|
<div class="absolute top-0 left-0 w-full h-full z-10">
|
|
<div class="flex flex-col justify-between h-full px-5 py-4">
|
|
<NuxtImg src="/images/logo.png" alt="Speckle logo" class="h-8 w-8" />
|
|
<h3 class="text-white limit-reached-text-shadow text-base">
|
|
Plan limit reached
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="w-full bg-foundation-page flex flex-col"
|
|
:class="condensed ? '' : 'p-6'"
|
|
>
|
|
<div class="flex flex-col gap-y-4 select-none">
|
|
<h4 v-if="subtitle" class="text-heading-sm text-foreground">
|
|
{{ subtitle }}
|
|
</h4>
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</LayoutDialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { LayoutDialog } from '@speckle/ui-components'
|
|
import type { LayoutDialogButton } from '@speckle/ui-components'
|
|
|
|
const isOpen = defineModel<boolean>('open', { required: true })
|
|
|
|
defineProps<{
|
|
subtitle?: string
|
|
buttons?: LayoutDialogButton[]
|
|
preventClose?: boolean
|
|
condensed?: boolean
|
|
}>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.limit-reached-gradient {
|
|
background: linear-gradient(319.64deg, rgb(5 52 255 / 0%) 34.17%, #010c3d 100%);
|
|
}
|
|
</style>
|