Files
speckle-server/packages/frontend-2/components/project/page/Header.vue
T
Benjamin Ottensten de3f180830 Fix: Project page styling polish (#4666)
* Reduce heading size on project tabs

* Adjust spacings of project title area

* Adjust workspace icon on project page

- Don't link to workspace
- Only show if viewing a project from a workspace that you're not a member of
2025-05-05 21:57:33 +02:00

70 lines
1.7 KiB
Vue

<template>
<div>
<Portal to="navigation">
<HeaderNavLink
v-if="showWorkspaceLink"
:to="workspaceRoute(project.workspace?.slug)"
name="Projects"
:separator="false"
/>
<HeaderNavLink
v-else-if="!isWorkspacesEnabled"
:to="projectsRoute"
name="Projects"
:separator="false"
/>
<HeaderNavLink
:to="projectRoute(project.id)"
:name="project.name"
:separator="showWorkspaceLink || !isWorkspacesEnabled"
/>
</Portal>
<div class="flex gap-x-3">
<WorkspaceAvatar
v-if="project.workspace && isWorkspacesEnabled && !project.workspace.role"
v-tippy="project.workspace.name"
:logo="project.workspace.logo"
:name="project.workspace.name"
size="sm"
class="mt-0.5"
/>
<CommonTitleDescription
:title="project.name"
:description="project.description"
/>
</div>
</div>
</template>
<script setup lang="ts">
import { graphql } from '~~/lib/common/generated/gql'
import type { ProjectPageProjectHeaderFragment } from '~~/lib/common/generated/gql/graphql'
import { projectRoute, projectsRoute } from '~~/lib/common/helpers/route'
import { workspaceRoute } from '~/lib/common/helpers/route'
graphql(`
fragment ProjectPageProjectHeader on Project {
id
name
description
workspace {
id
slug
name
logo
role
}
}
`)
const props = defineProps<{
project: ProjectPageProjectHeaderFragment
}>()
const isWorkspacesEnabled = useIsWorkspacesEnabled()
const showWorkspaceLink = computed(
() => !!props.project.workspace?.role && isWorkspacesEnabled.value
)
</script>