Skip to content

Commit

Permalink
feat(files): true breadcrumbs
Browse files Browse the repository at this point in the history 
Signed-off-by: Evan Song <theevansong@gmail.com>
  • Loading branch information
@ferothefox
ferothefox committed Oct 27, 2024
1 parent 3a01a54 commit 8c256aa
Show file tree
Hide file tree
Showing 2 changed files with 152 additions and 59 deletions.
113 changes: 87 additions & 26 deletions apps/frontend/src/components/ui/servers/FilesBrowseNavbar.vue
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,70 @@
<template>
<div ref="pyroFilesSentinel" class="sentinel" data-pyro-files-sentinel />
<nav
<header
:class="[
'top-0 flex h-24 select-none flex-col justify-between bg-table-alternateRow p-3 transition-[border-radius] duration-200 sm:h-12 sm:flex-row',
!isStuck ? 'rounded-t-2xl' : 'sticky top-0 z-20',
]"
data-pyro-files-state="browsing"
aria-label="File navigation"
>
<ul class="m-0 flex list-none items-center p-0 text-contrast">
<a
v-tooltip="'Back to home'"
role="link"
class="group absolute left-0 top-0 grid h-12 w-14 place-content-center"
@click="$emit('navigate', -1)"
>
<li
class="grid size-8 place-content-center rounded-full bg-bg-raised p-[6px] group-hover:bg-brand-highlight group-hover:text-brand"
>
<HomeIcon class="h-5 w-5" />
<nav
aria-label="Breadcrumb navigation"
class="m-0 flex list-none items-center p-0 text-contrast"
>
<ol class="m-0 flex list-none items-center p-0">
<li class="-ml-1">
<ButtonStyled type="transparent">
<button
v-tooltip="'Back to home'"
type="button"
class="grid h-12 w-10 place-content-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
@click="$emit('navigate', -1)"
>
<span
class="grid size-8 place-content-center rounded-full bg-button-bg p-[6px] group-hover:bg-brand-highlight group-hover:text-brand"
>
<HomeIcon class="h-5 w-5" />
<span class="sr-only">Home</span>
</span>
</button>
</ButtonStyled>
</li>
<li class="m-0 -ml-2 p-0">
<ol class="m-0 flex items-center overflow-hidden p-0">
<TransitionGroup name="breadcrumb" tag="span" class="relative flex items-center">
<li
v-for="(segment, index) in breadcrumbSegments"
:key="`${segment || index}-group`"
class="relative flex items-center text-sm"
>
<div class="flex items-center">
<ButtonStyled type="transparent">
<button
class="cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
:aria-current="
index === breadcrumbSegments.length - 1 ? 'location' : undefined
"
:class="{
'!text-contrast': index === breadcrumbSegments.length - 1,
}"
@click="$emit('navigate', index)"
>
{{ segment || "" }}
</button>
</ButtonStyled>
<ChevronRightIcon
v-if="index < breadcrumbSegments.length - 1"
class="size-4 text-secondary"
aria-hidden="true"
/>
</div>
</li>
</TransitionGroup>
</ol>
</li>
</a>
<UiServersIconsSlashIcon class="ml-8 h-5 w-5" />
<li
v-for="(segment, index) in breadcrumbSegments"
:key="index"
class="breadcrumb-link flex cursor-pointer items-center"
@click="$emit('navigate', index)"
>
{{ segment || "" }}
<UiServersIconsSlashIcon class="h-5 w-5" />
</li>
</ul>
</ol>
</nav>
<div class="flex items-center gap-1">
<ButtonStyled type="transparent">
<UiServersTeleportOverflowMenu
Expand Down Expand Up @@ -92,7 +126,7 @@
</UiServersTeleportOverflowMenu>
</ButtonStyled>
</div>
</nav>
</header>
</template>

<script setup lang="ts">
Expand All @@ -105,9 +139,10 @@ import {
SearchIcon,
SortAscendingIcon,
HomeIcon,
ChevronRightIcon,
} from "@modrinth/assets";
import { ButtonStyled } from "@modrinth/ui";
import { ref } from "vue";
import { ref, computed } from "vue";
import { useIntersectionObserver } from "@vueuse/core";
const props = defineProps<{
Expand Down Expand Up @@ -158,4 +193,30 @@ const sortMethodLabel = computed(() => {
height: 1px;
visibility: hidden;
}
.breadcrumb-move,
.breadcrumb-enter-active,
.breadcrumb-leave-active {
transition: all 0.2s ease;
}
.breadcrumb-enter-from {
opacity: 0;
transform: translateX(-10px) scale(0.9);
}
.breadcrumb-leave-to {
opacity: 0;
transform: translateX(-10px) scale(0.8);
filter: blur(4px);
}
.breadcrumb-leave-active {
position: relative;
pointer-events: none;
}
.breadcrumb-move {
z-index: 1;
}
</style>
98 changes: 65 additions & 33 deletions apps/frontend/src/components/ui/servers/FilesEditingNavbar.vue
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,69 @@
<template>
<nav
<header
data-pyro-files-state="editing"
class="flex h-12 select-none items-center justify-between rounded-t-2xl bg-table-alternateRow p-3"
aria-label="File editor navigation"
>
<ul class="m-0 flex list-none items-center p-0 text-contrast">
<a
v-tooltip="'Back to home'"
role="link"
class="group absolute left-0 top-0 grid h-12 w-14 place-content-center"
@click="goHome"
>
<li
class="grid size-8 place-content-center rounded-full bg-bg-raised p-[6px] group-hover:bg-brand-highlight group-hover:text-brand"
>
<HomeIcon class="h-5 w-5" />
<nav
aria-label="Breadcrumb navigation"
class="m-0 flex list-none items-center p-0 text-contrast"
>
<ol class="m-0 flex list-none items-center p-0">
<li class="-ml-1">
<ButtonStyled type="transparent">
<button
v-tooltip="'Back to home'"
type="button"
class="grid h-12 w-10 place-content-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
@click="goHome"
>
<span
class="grid size-8 place-content-center rounded-full bg-button-bg p-[6px] group-hover:bg-brand-highlight group-hover:text-brand"
>
<HomeIcon class="h-5 w-5" />
<span class="sr-only">Home</span>
</span>
</button>
</ButtonStyled>
</li>
</a>
<UiServersIconsSlashIcon class="ml-8 h-5 w-5" />
<li
v-for="(segment, index) in breadcrumbSegments"
:key="index"
class="breadcrumb-link flex cursor-pointer items-center"
@click="$emit('navigate', index)"
>
{{ segment || "" }}
<UiServersIconsSlashIcon class="h-5 w-5" />
</li>
<li class="breadcrumb-link flex cursor-pointer items-center">{{ fileName }}</li>
</ul>
<li class="m-0 -ml-2 p-0">
<ol class="m-0 flex items-center p-0">
<li
v-for="(segment, index) in breadcrumbSegments"
:key="index"
class="flex items-center text-sm"
>
<ButtonStyled type="transparent">
<button
class="cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
:class="{ '!text-contrast': index === breadcrumbSegments.length - 1 }"
@click="$emit('navigate', index)"
>
{{ segment || "" }}
</button>
</ButtonStyled>
<ChevronRightIcon
v-if="index < breadcrumbSegments.length"
class="size-4 text-secondary"
aria-hidden="true"
/>
</li>
<li class="flex items-center px-3 text-sm">
<span class="font-semibold !text-contrast" aria-current="location">{{
fileName
}}</span>
</li>
</ol>
</li>
</ol>
</nav>
<div v-if="!isImage" class="flex gap-2">
<ButtonStyled type="transparent">
<button @click="$emit('cancel')">
<LeftArrowIcon class="h-5 w-5" />
</button>
</ButtonStyled>
<Button
v-if="isLogFile"
v-tooltip="'Share to mclo.gs'"
icon-only
transparent
aria-label="Share to mclo.gs"
@click="$emit('share')"
>
<ShareIcon />
Expand All @@ -59,7 +84,12 @@
<template #save> <SaveIcon aria-hidden="true" /> Save </template>
<template #save-as> <SaveIcon aria-hidden="true" /> Save as... </template>
<template #save&restart>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z"
Expand All @@ -71,12 +101,14 @@
</UiServersTeleportOverflowMenu>
</ButtonStyled>
</div>
</nav>
</header>
</template>

<script setup lang="ts">
import { DropdownIcon, SaveIcon, ShareIcon, HomeIcon } from "@modrinth/assets";
import { DropdownIcon, SaveIcon, ShareIcon, HomeIcon, ChevronRightIcon } from "@modrinth/assets";
import { Button, ButtonStyled } from "@modrinth/ui";
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
const props = defineProps<{
breadcrumbSegments: string[];
Expand Down

0 comments on commit 8c256aa

Please sign in to comment.