Benjamin Ottensten
fc76fd9f4f
* Update header navigation Logo, share button color, breadcrumb colors, spacings * Updates to main button component Shadows, border on secondary button, less spacings to icons * Update spacings in dialog after bew button styling * Use secondary button in embed dialog * Update select inputs Spacing, icon, border on dropdown, smaller avatars * Update inputs to use the new styling * Various copy updates * Update icons Smaller icons, outline instead of solid, removed some icons that were unnecessary * Switch order of actions in Delete dialog * Update styling of inline New model action * Remove strange BG effect on comments component * Update styling of hide/isolate actions in viewer Was necessary after the button styling change. But new copy also makes it more usable. * Fix alignment issue in selection info panel * Align styling in Viewer panel component * Clean up measure usage tips A permanent "Right click to cancel measurement" tip isn't needed * Panel spacing * Update actions in the add model to viewer dialog * Update permissions input in new project dialog * Two minor things * Remove unnecessary flex classes --------- Co-authored-by: andrewwallacespeckle <andrew@speckle.systems>
90 lines
2.4 KiB
Vue
90 lines
2.4 KiB
Vue
<template>
|
|
<LayoutDialog v-model:open="open" max-width="sm" :buttons="dialogButtons">
|
|
<template #header>Create new project</template>
|
|
<form class="flex flex-col text-foreground" @submit="onSubmit">
|
|
<div class="flex flex-col gap-3 mb-6">
|
|
<FormTextInput
|
|
name="name"
|
|
label="Project name"
|
|
placeholder="Project name"
|
|
color="foundation"
|
|
:rules="[isRequired, isStringOfLength({ maxLength: 512 })]"
|
|
show-required
|
|
auto-focus
|
|
autocomplete="off"
|
|
/>
|
|
<FormTextArea
|
|
name="description"
|
|
label="Project description"
|
|
placeholder="Description (optional)"
|
|
color="foundation"
|
|
size="lg"
|
|
:rules="[isStringOfLength({ maxLength: 65536 })]"
|
|
/>
|
|
</div>
|
|
<h3 class="label mb-3">Access permissions</h3>
|
|
<ProjectVisibilitySelect
|
|
v-model="visibility"
|
|
class="sm:max-w-none w-full"
|
|
mount-menu-on-body
|
|
/>
|
|
</form>
|
|
</LayoutDialog>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import type { LayoutDialogButton } from '@speckle/ui-components'
|
|
import { useForm } from 'vee-validate'
|
|
import { ProjectVisibility } from '~~/lib/common/generated/gql/graphql'
|
|
import { isRequired, isStringOfLength } from '~~/lib/common/helpers/validation'
|
|
import { useMixpanel } from '~~/lib/core/composables/mp'
|
|
import { useCreateProject } from '~~/lib/projects/composables/projectManagement'
|
|
|
|
type FormValues = {
|
|
name: string
|
|
description?: string
|
|
}
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'created'): void
|
|
}>()
|
|
|
|
const createProject = useCreateProject()
|
|
const { handleSubmit } = useForm<FormValues>()
|
|
|
|
const visibility = ref(ProjectVisibility.Unlisted)
|
|
|
|
const open = defineModel<boolean>('open', { required: true })
|
|
|
|
const mp = useMixpanel()
|
|
|
|
const onSubmit = handleSubmit(async (values) => {
|
|
await createProject({
|
|
...values,
|
|
visibility: visibility.value
|
|
})
|
|
emit('created')
|
|
mp.track('Stream Action', { type: 'action', name: 'create' })
|
|
open.value = false
|
|
})
|
|
|
|
const dialogButtons = computed((): LayoutDialogButton[] => [
|
|
{
|
|
text: 'Cancel',
|
|
props: { color: 'secondary', fullWidth: true },
|
|
onClick: () => {
|
|
open.value = false
|
|
}
|
|
},
|
|
{
|
|
text: 'Create',
|
|
props: {
|
|
color: 'default',
|
|
fullWidth: true,
|
|
outline: true,
|
|
submit: true
|
|
},
|
|
onClick: onSubmit
|
|
}
|
|
])
|
|
</script>
|