andrewwallacespeckle
c2a95b484f
* 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>
76 lines
1.8 KiB
Vue
76 lines
1.8 KiB
Vue
<template>
|
|
<div class="pt-4 flex gap-4 flex-col sm:flex-row sm:items-center sm:justify-between">
|
|
<Portal to="navigation">
|
|
<HeaderNavLink
|
|
:to="automationFunctionsRoute"
|
|
:name="'Automate functions'"
|
|
></HeaderNavLink>
|
|
<HeaderNavLink
|
|
:to="automationFunctionRoute(fn.id)"
|
|
:name="fn.name"
|
|
></HeaderNavLink>
|
|
</Portal>
|
|
<div class="flex items-center gap-4">
|
|
<AutomateFunctionLogo :logo="fn.logo" />
|
|
<h1 class="text-heading-lg">{{ fn.name }}</h1>
|
|
<FormButton v-if="isOwner" size="sm" text class="mt-1" @click="$emit('edit')">
|
|
Edit
|
|
</FormButton>
|
|
</div>
|
|
<div
|
|
v-tippy="
|
|
hasReleases ? undefined : 'Your function needs to have at least one release'
|
|
"
|
|
class="flex gap-2 shrink-0"
|
|
>
|
|
<FormButton
|
|
:icon-left="BoltIcon"
|
|
class="shrink-0"
|
|
full-width
|
|
:disabled="!hasReleases"
|
|
@click="$emit('createAutomation')"
|
|
>
|
|
Use in an automation
|
|
</FormButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { BoltIcon } from '@heroicons/vue/24/outline'
|
|
import { graphql } from '~/lib/common/generated/gql'
|
|
import type { AutomateFunctionPageHeader_FunctionFragment } from '~/lib/common/generated/gql/graphql'
|
|
import {
|
|
automationFunctionRoute,
|
|
automationFunctionsRoute
|
|
} from '~/lib/common/helpers/route'
|
|
|
|
defineEmits<{
|
|
createAutomation: []
|
|
edit: []
|
|
}>()
|
|
|
|
graphql(`
|
|
fragment AutomateFunctionPageHeader_Function on AutomateFunction {
|
|
id
|
|
name
|
|
logo
|
|
repo {
|
|
id
|
|
url
|
|
owner
|
|
name
|
|
}
|
|
releases(limit: 1) {
|
|
totalCount
|
|
}
|
|
}
|
|
`)
|
|
|
|
const props = defineProps<{
|
|
fn: AutomateFunctionPageHeader_FunctionFragment
|
|
isOwner: boolean
|
|
}>()
|
|
|
|
const hasReleases = computed(() => props.fn.releases.totalCount > 0)
|
|
</script>
|