Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove artifacts from breadcrumbs and fix mobile menu accordingly

Browse Source
This commit is contained in:
ernstmul
2025-05-07 15:06:56 +02:00
parent 1938aa8539
commit ed1cd767ca
2 changed files with 2 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/breadcrumbs.svelte
-111
View File
@@ -78,13 +78,9 @@
) as Artifact[];
$: selectedOrg = organizations.find((organization) => organization.isSelected);
$: selectedProject = selectedOrg?.projects.find((project) => project.isSelected);
$: selectedArtifact = displayArtifacts.find(
(artifact) => $page.params.artifact === artifact.$id
) as Artifact;
let organisationBottomSheetOpen = false;
let projectsBottomSheetOpen = false;
let artifactsBottomSheetOpen = false;
function createOrg() {
trackEvent(Click.OrganizationClickCreate, { source: 'breadcrumbs' });
@@ -192,54 +188,6 @@
: undefined
};
let artifactsBottomSheet: SheetMenu;
$: artifactsBottomSheet = {
top:
displayArtifacts.length > 1
? {
title: 'Switch artifact',
items: !selectedOrg
? []
: displayArtifacts
.map((artifact, index) => {
if (index < 4) {
return {
name: artifact.name,
href: `${base}/project-${selectedProject.$id}/studio/artifact-${artifact.$id}`
};
} else if (index === 4) {
return {
name: 'All artifacts',
href: `${base}/project-${selectedProject.$id}/studio`
};
}
return null;
})
.filter((project) => project !== null)
}
: {
items: [
{
name: 'Create project',
trailingIcon: IconPlus,
href: `${base}/organization-${selectedOrg?.$id}?create-project`
}
]
},
bottom:
selectedOrg?.projects.length > 1
? {
items: [
{
name: 'Create project',
trailingIcon: IconPlus,
href: `${base}/organization-${selectedOrg?.$id}?create-project`
}
]
}
: undefined
};
function onResize() {
if ((organisationBottomSheetOpen || projectsBottomSheetOpen) && !$isSmallViewport) {
organisationBottomSheetOpen = false;
@@ -410,70 +358,11 @@
</Card.Base>
</div>
{/if}
{#if isStudio && displayArtifacts.length > 0 && selectedProject}
<span class="breadcrumb-separator">/</span>
{#if !$isSmallViewport}
<button
type="button"
class="trigger"
use:melt={$triggerArtifacts}
aria-label="Open artifacts tab">
<span class="projectName">{selectedArtifact?.name}</span>
<Icon icon={IconChevronDown} size="s" />
</button>
{:else}
<button
type="button"
class="trigger"
on:click={() => (artifactsBottomSheetOpen = true)}
aria-label="Open artifacts tab">
<span class="projectName">{selectedArtifact.name}</span>
<Icon icon={IconChevronDown} size="s" />
</button>
{/if}
<div class="menu" use:melt={$menuArtifacts}>
<Card.Base padding="xxxs" shadow={true}>
{#if displayArtifacts.length > 1}
{#each displayArtifacts as artifact, index}
{#if index < 4}
<div use:melt={$itemArtifacts}>
<ActionMenu.Root>
<ActionMenu.Item.Anchor
href={`${base}/project-${selectedProject.$id}/studio/artifact-${artifact.$id}`}
>{artifact.name}</ActionMenu.Item.Anchor
></ActionMenu.Root>
</div>
{:else if index === 4}
<div use:melt={$itemArtifacts}>
<ActionMenu.Root>
<ActionMenu.Item.Anchor
href={`${base}/project-${selectedProject.$id}/studio`}
>All artifacts</ActionMenu.Item.Anchor
></ActionMenu.Root>
</div>
{/if}
{/each}
<div class="separator" use:melt={$separatorArtifacts}></div>
{/if}
<div use:melt={$itemArtifacts}>
<ActionMenu.Root>
<ActionMenu.Item.Anchor
leadingIcon={IconPlusSm}
href={`${base}/project-${selectedProject.$id}/studio?create-project`}
>Create artifact</ActionMenu.Item.Anchor
></ActionMenu.Root>
</div>
</Card.Base>
</div>
{/if}
</div>
<BottomSheet.Menu bind:isOpen={organisationBottomSheetOpen} menu={organizationsBottomSheet}
></BottomSheet.Menu>
<BottomSheet.Menu bind:isOpen={projectsBottomSheetOpen} menu={projectsBottomSheet}
></BottomSheet.Menu>
<BottomSheet.Menu bind:isOpen={artifactsBottomSheetOpen} menu={artifactsBottomSheet}
></BottomSheet.Menu>
<style lang="scss">
.menu {
src/lib/layout/shellStudio.svelte
+2 -1
View File
@@ -476,7 +476,7 @@
.studio-content {
min-height: calc(100vh - 54px);
margin-top: 54px;
margin-top: 32px;
width: 100vw;
padding-right: var(--space-4);
@@ -485,6 +485,7 @@
@media (min-width: 1024px) {
width: calc(100vw - 200px);
margin-left: 200px;
margin-top: 54px;
padding-left: 0;
}