mirror/Hangar
2
0
Fork 0
mirror of https://github.com/HangarMC/Hangar.git synced 2025-01-06 13:56:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

Begin work on project navigation

Browse Source
This commit is contained in:
MD 2022-03-21 19:20:05 +00:00
parent 7bed534ecc
commit b52a41b51f
4 changed files with 73 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend-new/src/components/projects/ProjectHeader.vue
View File

@ -1,15 +1,11 @@
<script setup lang="ts">
import { PropType } from "vue";
import { Project, User } from "hangar-api";
import { Project } from "hangar-api";
import UserAvatar from "~/components/UserAvatar.vue";
import Button from "~/components/design/Button.vue";
import Card from "~/components/design/Card.vue";
defineProps({
user: {
type: Object as PropType<User>,
required: true,
},
project: {
type: Object as PropType<Project>,
required: true,

34
frontend-new/src/components/projects/ProjectNav.vue Normal file
View File

@ -0,0 +1,34 @@
<script setup lang="ts">
import ProjectNavItem from "~/components/projects/ProjectNavItem.vue";
import { Project } from "hangar-api";
import { computed } from "vue";
import { hasPerms } from "~/composables/usePerm";
import { NamedPermission } from "~/types/enums";
const props = defineProps<{
project: Project;
}>();
const slug = computed(() => {
if (props.project) return props.project.namespace.owner + "/" + props.project.name;
return "unknown/unknown";
});
function childRoute(route = ""): string {
return `/${slug.value}${route}`;
}
</script>
<template>
<nav class="pt-4 pb-2 flex flex-wrap">
<!-- TODO: vue-i18n -->
<ProjectNavItem :to="childRoute()">Home</ProjectNavItem>
<ProjectNavItem :to="childRoute('/versions')">Versions</ProjectNavItem>
<ProjectNavItem v-if="project.topicId" :to="childRoute('/discuss')">Discuss</ProjectNavItem>
<ProjectNavItem v-if="hasPerms(NamedPermission.EDIT_SUBJECT_SETTINGS)" :to="childRoute('/settings')">Settings</ProjectNavItem>
<ProjectNavItem v-if="props.project.settings.homepage" :href="props.project.settings.homepage">Website</ProjectNavItem>
<ProjectNavItem v-if="props.project.settings.issues" :href="props.project.settings.issues">Issues</ProjectNavItem>
<ProjectNavItem v-if="props.project.settings.source" :href="props.project.settings.source">Source</ProjectNavItem>
<ProjectNavItem v-if="props.project.settings.support" :href="props.project.settings.support">Support</ProjectNavItem>
</nav>
</template>

32
frontend-new/src/components/projects/ProjectNavItem.vue Normal file
View File

@ -0,0 +1,32 @@
<script setup lang="ts">
import { useRoute } from "vue-router";
import { computed } from "vue";
const props = defineProps<{
to?: string;
href?: string;
icon?: string;
}>();
const route = useRoute();
const selected = computed(() => {
return route.fullPath == props.to;
});
const clazz = computed(() => {
return "p-2 pb-1 mx-2 mb-1 rounded-sm border-b-3 flex items-center " + [selected.value ? "border-[#004ee9] font-medium" : "border-neutral-400"];
});
</script>
<template>
<router-link v-if="to" :to="to" :class="clazz">
<slot></slot>
</router-link>
<a v-if="href" :href="props.href" :class="clazz" target="_blank">
<span class="mx-1">
<slot></slot>
</span>
<IconMdiOpenInNew class="text-xs" />
</a>
</template>

6
frontend-new/src/pages/[user]/[project].vue
View File

@ -8,6 +8,7 @@ import { useRoute, useRouter } from "vue-router";
import { handleRequestError } from "~/composables/useErrorHandling";
import { useErrorRedirect } from "~/composables/useErrorRedirect";
import ProjectHeader from "~/components/projects/ProjectHeader.vue";
import ProjectNav from "~/components/projects/ProjectNav.vue";
defineProps({
user: {
@ -26,6 +27,9 @@ if (!project) {
</script>
<template>
<ProjectHeader :user="user" :project="project"></ProjectHeader>
<div>
<ProjectHeader :project="project"></ProjectHeader>
<ProjectNav :project="project"></ProjectNav>
<router-view :user="user" :project="project"></router-view>
</div>
</template>