huanld/speckle-server
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(fe2): adds embedded vids & refactors dialogs to use default component.

Browse Source
This commit is contained in:
Dimitrie Stefanescu
2023-06-13 15:59:38 +01:00
parent 4da3dcdcc7
commit f3ba44ddfe
5 changed files with 96 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend-2/components/onboarding/checklist/v1.vue
+17 -35
View File
@@ -143,40 +143,23 @@
</div>
<div
v-else
class="flex flex-col items-center justify-center flex-1 space-y-2 py-4"
class="flex flex-col sm:flex-row items-center justify-center flex-1 space-x-2 py-4"
>
<div class="w-6 h-6">
<!-- <CheckCircleIcon class="absolute w-6 h-6 text-primary" /> -->
<CheckCircleIcon
class="absolute w-6 h-6 text-primary animate-ping animate-pulse"
/>
<CheckCircleIcon class="w-6 h-6 text-primary animate-ping animate-pulse" />
</div>
<div class="text-sm max-w-lg">
<div class="text-sm max-w-lg grow">
<b>All done!</b>
<br />
Don't forget to join us in the
<FormButton
to="https://speckle.community"
target="_blank"
size="sm"
:icon-right="ArrowTopRightOnSquareIcon"
link
>
PS: the
<FormButton to="https://speckle.community" target="_blank" size="sm" link>
Community Forum
</FormButton>
, or check out the
<FormButton
to="https://speckle.systems/tutorials"
target="_blank"
size="sm"
:icon-right="ArrowTopRightOnSquareIcon"
link
>
Tutorials
</FormButton>
page for more inisghts.
is there to help!
</div>
<div>
<FormButton text size="sm" @click="closeChecklist()">Close</FormButton>
</div>
<FormButton text size="sm" @click="closeChecklist()">Close</FormButton>
</div>
</div>
@@ -192,19 +175,19 @@
</div>
<OnboardingDialogManager
v-show="showManagerDownloadDialog"
v-model:open="showManagerDownloadDialog"
@done="markComplete(0)"
@cancel="showManagerDownloadDialog = false"
></OnboardingDialogManager>
<OnboardingDialogAccountLink
v-show="showAccountLinkDialog"
v-model:open="showAccountLinkDialog"
@done="markComplete(1)"
@cancel="showAccountLinkDialog = false"
>
<template #header>Desktop Login</template>
</OnboardingDialogAccountLink>
<OnboardingDialogFirstSend
v-show="showFirstSendDialog"
v-model:open="showFirstSendDialog"
@done="markComplete(2)"
@cancel="showFirstSendDialog = false"
>
@@ -222,8 +205,7 @@ import {
ShareIcon,
ComputerDesktopIcon,
UserPlusIcon,
CloudArrowUpIcon,
ArrowTopRightOnSquareIcon
CloudArrowUpIcon
} from '@heroicons/vue/24/solid'
import { CheckCircleIcon as OutlineCheckCircleIcon } from '@heroicons/vue/24/outline'
import { useSynchronizedCookie } from '~~/lib/common/composables/reactiveCookie'
@@ -284,7 +266,7 @@ const getStatus = () => {
const steps = ref([
{
title: 'Get Connectors',
title: 'Install Manager ⚙️',
blurb: 'Use Manager to install the Speckle Connectors for your apps!',
active: false,
cta: "Let's go!",
@@ -306,7 +288,7 @@ const steps = ref([
icon: ComputerDesktopIcon
},
{
title: 'Desktop Login',
title: 'Log In 🔑',
blurb: 'Authorise our application connectors to send data to Speckle.',
active: false,
cta: "Let's go!",
@@ -328,7 +310,7 @@ const steps = ref([
icon: UserPlusIcon
},
{
title: 'Send your first model',
title: 'Your First Model Upload ⬆️',
blurb: 'Use your favourite design app to send your first model to Speckle.',
active: false,
cta: "Let's go!",
@@ -350,7 +332,7 @@ const steps = ref([
icon: CloudArrowUpIcon
},
{
title: 'Enable Multiplayer',
title: 'Enable Multiplayer 📢',
blurb: 'Share your project with your colleagues!',
active: false,
cta: "Let's go!",
packages/frontend-2/components/onboarding/dialog/AccountLink.vue
+13 -5
View File
@@ -1,9 +1,18 @@
<template>
<OnboardingDialogBase>
<template #header>One step away from sending a model to Speckle!</template>
<div class="w-full h-72 bg-primary rounded-xl flex items-center justify-center">
<PlayIcon class="w-10 h-10 text-white" />
<span class="text-xs">Install manager + How and why to login into manager</span>
<template #header>Log In 🔑</template>
<div
class="w-full h-[351px] bg-primary rounded-xl flex items-center justify-center overflow-hidden"
>
<iframe
width="560"
height="315"
src="https://www.youtube-nocookie.com/embed/enJk9lslnvs?rel=0&autoplay=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
class="w-full h-full"
></iframe>
</div>
<div class="flex justify-center">
@@ -14,7 +23,6 @@
</OnboardingDialogBase>
</template>
<script setup lang="ts">
import { PlayIcon } from '@heroicons/vue/24/solid'
import { useSynchronizedCookie } from '~~/lib/common/composables/reactiveCookie'
const emit = defineEmits(['done'])
packages/frontend-2/components/onboarding/dialog/Base.vue
+6 -26
View File
@@ -1,35 +1,15 @@
<template>
<div class="w-screen h-screen z-50 fixed inset-0">
<!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events -->
<div
class="w-screen h-screen fixed inset-0 bg-neutral-100/70 dark:bg-neutral-900/70"
@click="allowCancel ? emit('cancel') : ''"
></div>
<div
class="relative w-screen h-screen flex items-center justify-center pointer-events-none"
>
<LayoutDialog max-width="md">
<div>
<div class="max-w-2xl w-full flex flex-col justify-center pointer-events-auto">
<div
class="bg-blue-500/50 border-4 border-primary-muted text-foreground-on-primary backdrop-blur shadow-lg rounded-xl p-4 space-y-4 w-full"
>
<h2 class="text-center text-2xl font-bold">
<div class="space-y-4 w-full">
<h2 class="text-center text-3xl font-bold">
<slot name="header">Dialog Header</slot>
</h2>
<slot></slot>
</div>
<div v-if="allowCancel" class="pt-2 flex justify-center">
<FormButton size="sm" @click.stop="emit('cancel')">
{{ cancelPrompt }}
</FormButton>
</div>
</div>
</div>
</div>
</LayoutDialog>
</template>
<script setup lang="ts">
const emit = defineEmits(['cancel'])
withDefaults(defineProps<{ allowCancel?: boolean; cancelPrompt?: string }>(), {
allowCancel: true,
cancelPrompt: 'Cancel'
})
</script>
<script setup lang="ts"></script>
packages/frontend-2/components/onboarding/dialog/FirstSend.vue
+14 -7
View File
@@ -1,9 +1,18 @@
<template>
<OnboardingDialogBase @close="emit('close')" @cancel="emit('cancel')">
<template #header>How to do a first model upload</template>
<div class="w-full h-72 bg-primary rounded-xl flex items-center justify-center">
<PlayIcon class="w-10 h-10 text-white" />
<span class="text-xs">How to do a first model upload</span>
<OnboardingDialogBase>
<template #header>Your First Model Upload ⬆️</template>
<div
class="w-full h-[351px] bg-primary rounded-xl flex items-center justify-center overflow-hidden"
>
<iframe
width="560"
height="315"
src="https://www.youtube-nocookie.com/embed/SGnwuzieufw?rel=0&autoplay=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
class="w-full h-full"
></iframe>
</div>
<div class="flex justify-center">
<FormButton size="xl" class="shadow-md" @click="emit('done')">Got it!</FormButton>
@@ -11,7 +20,5 @@
</OnboardingDialogBase>
</template>
<script setup lang="ts">
import { PlayIcon } from '@heroicons/vue/24/solid'
const emit = defineEmits(['done', 'close', 'cancel'])
</script>
packages/frontend-2/components/onboarding/dialog/Manager.vue
+46 -33
View File
@@ -1,45 +1,54 @@
<template>
<OnboardingDialogBase>
<template #header>Ready to send your first model?</template>
<div class="w-full h-72 bg-primary rounded-xl flex items-center justify-center">
<PlayIcon class="w-10 h-10 text-white" />
<span class="text-xs">How and why to download manager</span>
<template #header>Install Manager ⚙️</template>
<div
class="w-full h-[351px] bg-primary rounded-xl flex items-center justify-center overflow-hidden"
>
<iframe
width="560"
height="315"
src="https://www.youtube-nocookie.com/embed/ckP97qTGXDQ?rel=0&autoplay=1&"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
class="w-full h-full"
></iframe>
</div>
<div v-if="hasSupportedOs" class="flex justify-center flex-col space-y-2">
<FormButton
size="xl"
class="shadow-md"
@click.stop="downloadManager(os === 'Windows' ? 'exe' : 'dmg')"
>
Download For {{ os }}
</FormButton>
<FormButton
size="xs"
text
@click.stop="downloadManager(os === 'Windows' ? 'dmg' : 'exe')"
>
Download for {{ os === 'Windows' ? 'Mac OS' : 'Windows' }}
</FormButton>
</div>
<div v-else class="flex justify-center flex-col space-y-2">
<p>
Speckle Connectors exist only for applications running on Windows or Mac OS. If
you want, you can still go ahead and download Speckle Manager for
<FormButton link color="invert" @click="downloadManager('exe')">
Windows
<div>
<div v-if="hasSupportedOs" class="flex justify-center flex-col space-y-2">
<FormButton
size="xl"
class="shadow-md"
@click.stop="downloadManager(os === 'Windows' ? 'exe' : 'dmg')"
>
Download For {{ os }}
</FormButton>
or
<FormButton link color="invert" @click="downloadManager('dmg')">
Mac OS
<FormButton
size="xs"
text
@click.stop="downloadManager(os === 'Windows' ? 'dmg' : 'exe')"
>
Download for {{ os === 'Windows' ? 'Mac OS' : 'Windows' }}
</FormButton>
.
</p>
</div>
<div v-else class="flex justify-center flex-col space-y-2">
<p>
Speckle Connectors exist only for applications running on Windows or Mac OS.
If you want, you can still go ahead and download Speckle Manager for
<FormButton link @click="downloadManager('exe')">Windows</FormButton>
or
<FormButton link @click="downloadManager('dmg')">Mac OS</FormButton>
.
</p>
</div>
</div>
<!-- <div v-if="hasDownloadedManager" class="flex justify-center flex-col space-y-2">
<FormButton size="xl" class="shadow-md" @click.stop="close">Close</FormButton>
</div> -->
</OnboardingDialogBase>
</template>
<script setup lang="ts">
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
import { PlayIcon } from '@heroicons/vue/24/solid'
import { useSynchronizedCookie } from '~~/lib/common/composables/reactiveCookie'
import { useMixpanel } from '~~/lib/core/composables/mp'
@@ -55,7 +64,7 @@ const getOs = () => {
// @ts-ignore
(window.navigator?.userAgentData?.platform as string) ||
(window.navigator.platform as string)
const macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K', 'MacOS']
const macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K', 'MacOS', 'macOS']
const windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE']
const iosPlatforms = ['iPhone', 'iPad', 'iPod']
let os = 'unknown'
@@ -110,4 +119,8 @@ const downloadManager = (ext: string | null = null) => {
hasDownloadedManager.value = true
emit('done')
}
// const close = () => {
// emit('done')
// }
</script>