eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Add transfer history and unify back elements with breadcrumbs (#1088)

Browse Source 
* Add transfer history and unify back elements with breadcrumbs

* Increase padding of breadcrumbs, include previous query params, more consistent link underlining

* Prettier

* Add project type text and link to project pages

* Remove console.log
This commit is contained in:
Prospector
2023-04-15 12:08:11 -07:00
committed by GitHub
parent 257b35e4ae
commit fd28da2a3b
10 changed files with 320 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
pages/[type]/[id].vue
View File

@@ -2,6 +2,17 @@
<div v-if="$route.name.startsWith('type-id-settings')" class="normal-page">
<div class="normal-page__sidebar">
<aside class="universal-card">
<Breadcrumbs
current-title="Settings"
:link-stack="[
{ href: `/dashboard/projects`, label: 'Projects' },
{
href: `/${project.project_type}/${project.slug ? project.slug : project.id}`,
label: project.title,
allowTrimming: true,
},
]"
/>
<div class="settings-header">
<Avatar
:src="project.icon_url"
@@ -18,64 +29,67 @@
</div>
<h2>Project settings</h2>
<NavStack>
<NavStackItem :link="`/${project.project_type}/${project.slug}/settings`" label="General">
<NavStackItem
:link="`/${project.project_type}/${project.slug ? project.slug : project.id}/settings`"
label="General"
>
<SettingsIcon />
</NavStackItem>
<NavStackItem
:link="`/${project.project_type}/${project.slug}/settings/tags`"
:link="`/${project.project_type}/${
project.slug ? project.slug : project.id
}/settings/tags`"
label="Tags"
>
<CategoriesIcon />
</NavStackItem>
<NavStackItem
:link="`/${project.project_type}/${project.slug}/settings/description`"
:link="`/${project.project_type}/${
project.slug ? project.slug : project.id
}/settings/description`"
label="Description"
>
<DescriptionIcon />
</NavStackItem>
<NavStackItem
:link="`/${project.project_type}/${project.slug}/settings/license`"
:link="`/${project.project_type}/${
project.slug ? project.slug : project.id
}/settings/license`"
label="License"
>
<LicenseIcon />
</NavStackItem>
<NavStackItem
:link="`/${project.project_type}/${project.slug}/settings/links`"
:link="`/${project.project_type}/${
project.slug ? project.slug : project.id
}/settings/links`"
label="Links"
>
<LinksIcon />
</NavStackItem>
<NavStackItem
:link="`/${project.project_type}/${project.slug}/settings/members`"
:link="`/${project.project_type}/${
project.slug ? project.slug : project.id
}/settings/members`"
label="Members"
>
<UsersIcon />
</NavStackItem>
<h3>Relevant pages</h3>
<h3>Upload</h3>
<NavStackItem
:link="`/${project.project_type}/${project.slug}`"
label="View project"
chevron
>
<EyeIcon />
</NavStackItem>
<NavStackItem
:link="`/${project.project_type}/${project.slug}/gallery`"
:link="`/${project.project_type}/${project.slug ? project.slug : project.id}/gallery`"
label="Gallery"
chevron
>
<GalleryIcon />
</NavStackItem>
<NavStackItem
:link="`/${project.project_type}/${project.slug}/versions`"
:link="`/${project.project_type}/${project.slug ? project.slug : project.id}/versions`"
label="Versions"
chevron
>
<VersionIcon />
</NavStackItem>
<NavStackItem link="/dashboard/projects" label="All projects" chevron>
<SettingsIcon />
</NavStackItem>
</NavStack>
</aside>
</div>
@@ -192,7 +206,17 @@
<h1 class="title">
{{ project.title }}
</h1>
<Badge v-if="$auth.user && currentMember" :type="project.status" class="status-badge" />
<nuxt-link
class="title-link project-type"
:to="`/${$getProjectTypeForUrl(project.actualProjectType, project.loaders)}s`"
>
<BoxIcon />
<span>{{
$formatProjectType(
$getProjectTypeForDisplay(project.actualProjectType, project.loaders)
)
}}</span>
</nuxt-link>
<p class="description">
{{ project.description }}
</p>
@@ -201,6 +225,11 @@
:type="project.actualProjectType"
class="categories"
>
<Badge
v-if="$auth.user && currentMember"
:type="project.status"
class="status-badge"
/>
<EnvironmentIndicator
:client-side="project.client_side"
:server-side="project.server_side"
@@ -442,7 +471,7 @@
<div class="featured-header">
<h2 class="card-header">Featured versions</h2>
<nuxt-link
v-if="versions.length > 0 || currentMember"
v-if="$route.name !== 'type-id-versions' && (versions.length > 0 || currentMember)"
:to="`/${project.project_type}/${
project.slug ? project.slug : project.id
}/versions#all-versions`"
@@ -645,7 +674,7 @@
/>
<div v-if="$auth.user && currentMember" class="input-group">
<nuxt-link
:to="`/${project.project_type}/${project.slug}/settings`"
:to="`/${project.project_type}/${project.slug ? project.slug : project.id}/settings`"
class="iconified-button"
>
<SettingsIcon /> Settings
@@ -685,6 +714,7 @@ import OpenCollectiveIcon from '~/assets/images/external/opencollective.svg'
import UnknownIcon from '~/assets/images/utils/unknown-donation.svg'
import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg'
import EyeIcon from '~/assets/images/utils/eye.svg'
import BoxIcon from '~/assets/images/utils/box.svg'
import Promotion from '~/components/ads/Promotion'
import Badge from '~/components/ui/Badge'
import Categories from '~/components/ui/search/Categories'
@@ -710,6 +740,7 @@ import CrossIcon from '~/assets/images/utils/x.svg'
import EditIcon from '~/assets/images/utils/edit.svg'
import ModerationIcon from '~/assets/images/sidebar/admin.svg'
import { renderString } from '~/helpers/parse'
import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
const data = useNuxtApp()
const route = useRoute()
@@ -1049,8 +1080,21 @@ const collapsedChecklist = ref(false)
font-size: var(--font-size-xl);
}
.status-badge {
margin-top: var(--spacing-card-sm);
.project-type {
text-decoration: none;
font-weight: 500;
svg {
vertical-align: top;
margin-right: 0.25em;
}
&:hover,
&:focus-visible {
span {
text-decoration: underline;
}
}
}
.description {

55
pages/[type]/[id]/version/[version].vue
View File

@@ -62,6 +62,15 @@
</div>
</Modal>
<div class="version-page__title universal-card">
<Breadcrumbs
:current-title="version.name"
:link-stack="[
{
href: getPreviousLink(),
label: getPreviousLabel(),
},
]"
/>
<div class="version-header">
<template v-if="isEditing">
<input
@@ -151,19 +160,6 @@
<DownloadIcon aria-hidden="true" />
Download
</a>
<nuxt-link
:to="
$router.options.history.state.back &&
($router.options.history.state.back.includes('changelog') ||
$router.options.history.state.back.includes('versions'))
? $router.options.history.state.back
: `/${project.project_type}/${project.slug ? project.slug : project.id}/versions`
"
class="iconified-button"
>
<BackIcon aria-hidden="true" />
Back to list
</nuxt-link>
<button
v-if="$auth.user && !currentMember"
class="iconified-button"
@@ -533,19 +529,19 @@
:allow-empty="false"
/>
<template v-else>
<VersionBadge
<Badge
v-if="version.version_type === 'release'"
class="value"
type="release"
color="green"
/>
<VersionBadge
<Badge
v-else-if="version.version_type === 'beta'"
class="value"
type="beta"
color="orange"
/>
<VersionBadge
<Badge
v-else-if="version.version_type === 'alpha'"
class="value"
type="alpha"
@@ -678,8 +674,9 @@ import { inferVersionInfo } from '~/helpers/infer'
import { createDataPackVersion } from '~/helpers/package'
import { renderHighlightedString } from '~/helpers/highlight'
import VersionBadge from '~/components/ui/Badge'
import Avatar from '~/components/ui/Avatar'
import Badge from '~/components/ui/Badge'
import Breadcrumbs from '~/components/ui/Breadcrumbs'
import CopyCode from '~/components/ui/CopyCode'
import Categories from '~/components/ui/search/Categories'
import ModalConfirm from '~/components/ui/ModalConfirm'
@@ -704,12 +701,14 @@ import BackIcon from '~/assets/images/utils/left-arrow.svg'
import BoxIcon from '~/assets/images/utils/box.svg'
import RightArrowIcon from '~/assets/images/utils/right-arrow.svg'
import Modal from '~/components/ui/Modal.vue'
import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg'
export default defineNuxtComponent({
components: {
Modal,
FileInput,
Checkbox,
ChevronRightIcon,
Chips,
Categories,
DownloadIcon,
@@ -725,8 +724,9 @@ export default defineNuxtComponent({
TransferIcon,
UploadIcon,
BackIcon,
VersionBadge,
Avatar,
Badge,
Breadcrumbs,
CopyCode,
ModalConfirm,
ModalReport,
@@ -961,6 +961,25 @@ export default defineNuxtComponent({
},
},
methods: {
getPreviousLink() {
if (this.$router.options.history.state.back) {
if (
this.$router.options.history.state.back.includes('/changelog') ||
this.$router.options.history.state.back.includes('/versions')
) {
return this.$router.options.history.state.back
}
}
return `/${this.project.project_type}/${
this.project.slug ? this.project.slug : this.project.id
}/versions`
},
getPreviousLabel() {
return this.$router.options.history.state.back &&
this.$router.options.history.state.back.endsWith('/changelog')
? 'Changelog'
: 'Versions'
},
acceptFileFromProjectType,
renderHighlightedString,
async addDependency(dependencyAddMode, newDependencyId, newDependencyType, hideErrors) {