Files
speckle-server/packages/frontend-2/components/project/page/team/Block.vue
T
andrewwallacespeckle c2a95b484f refactor(ui-components): define and use new font styles (#2524)
* New Text Styles. Initial FE2 changes

* More fe2 styling classes

* Minor update

* Minor update

* Fix build

* More updates for discussion

* More styling updates

* Minor updates to inputs

* More text updates

* More font class swapping

* Revert dui3 changes

* Confirmed Lineheights

* Add story files for new text styles

* Minor copy changes

* Minor typo

* andrew/web-1371-misalignment-in-account-dropdown

* andrew/web-1374-settings-text-styles-are-not-right

* andrew/web-1375-nav-texts-should-be-14px

* andrew/web-1376-decrease-size-of-versions-header

* andrew/web-1377-version-card-title

* semibold>medium

* Measure mode

* Changes from PR

* Tweaked nav menu

* Revert prose change. Add prose-sm

---------

Co-authored-by: Mike Tasset <mike.tasset@gmail.com>
2024-07-30 15:06:48 +01:00

40 lines
1.4 KiB
Vue

<template>
<ProjectPageStatsBlock>
<template #top>
<div class="flex items-center">
<div class="flex items-center justify-between w-full">
<div class="flex items-center gap-1 flex-grow select-none">
<span class="text-heading-sm text-foreground">Collaborators</span>
</div>
<div class="text-body-xs flex items-center capitalize">
{{ project.role?.split(':').reverse()[0] }}
</div>
</div>
</div>
</template>
<template #bottom>
<div class="flex items-center justify-between mt-1">
<UserAvatarGroup :users="teamUsers" class="max-w-[104px]" />
<div v-if="canEdit">
<FormButton class="ml-2" :to="projectCollaboratorsRoute(project.id)">
Manage
</FormButton>
</div>
</div>
</template>
</ProjectPageStatsBlock>
</template>
<script setup lang="ts">
import { canEditProject } from '~~/lib/projects/helpers/permissions'
import type { ProjectPageTeamInternals_ProjectFragment } from '~~/lib/common/generated/gql/graphql'
import { projectCollaboratorsRoute } from '~~/lib/common/helpers/route'
const props = defineProps<{
project: ProjectPageTeamInternals_ProjectFragment
}>()
const canEdit = computed(() => canEditProject(props.project))
const teamUsers = computed(() => props.project.team.map((t) => t.user))
</script>