mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
Update action menu paddings
This commit is contained in:
ernstmul
+1
-1
@@ -23,7 +23,7 @@
|
||||
"@appwrite.io/pink-icons": "0.25.0",
|
||||
"@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5eac713f",
|
||||
"@appwrite.io/pink-legacy": "^1.0.0",
|
||||
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5eac713f",
|
||||
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@66d65aa",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@sentry/sveltekit": "^8.38.0",
|
||||
"@stripe/stripe-js": "^3.5.0",
|
||||
|
||||
Generated
+9
-9
@@ -21,8 +21,8 @@ importers:
|
||||
specifier: ^1.0.0
|
||||
version: 1.0.0
|
||||
'@appwrite.io/pink-svelte':
|
||||
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5eac713f
|
||||
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5eac713f(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
|
||||
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@66d65aa
|
||||
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@66d65aa(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
|
||||
'@popperjs/core':
|
||||
specifier: ^2.11.8
|
||||
version: 2.11.8
|
||||
@@ -221,8 +221,8 @@ packages:
|
||||
peerDependencies:
|
||||
svelte: ^4.0.0
|
||||
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5eac713f8e69d09316b297f98a772b4871245ed1':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5eac713f8e69d09316b297f98a772b4871245ed1}
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@66d65aa75bd39e90088f87ebd62f0ca344ae0430':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@66d65aa75bd39e90088f87ebd62f0ca344ae0430}
|
||||
version: 1.0.0-next.7
|
||||
peerDependencies:
|
||||
svelte: ^4.0.0
|
||||
@@ -236,8 +236,8 @@ packages:
|
||||
'@appwrite.io/pink-legacy@1.0.0':
|
||||
resolution: {integrity: sha512-EZk/wX8oDhIsCXf2A0oQjdNOaHvh5MnWbLQI4pAiGrdy5qQGPoU19AK6iVX6z3QoOq7geoEu0zVwAowBy5hZbQ==}
|
||||
|
||||
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5eac713f':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5eac713f}
|
||||
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@66d65aa':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@66d65aa}
|
||||
version: 1.0.0-next.85
|
||||
peerDependencies:
|
||||
react-dom: ^18.0.0
|
||||
@@ -4090,7 +4090,7 @@ snapshots:
|
||||
dependencies:
|
||||
svelte: 4.2.19
|
||||
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5eac713f8e69d09316b297f98a772b4871245ed1(svelte@4.2.19)':
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@66d65aa75bd39e90088f87ebd62f0ca344ae0430(svelte@4.2.19)':
|
||||
dependencies:
|
||||
svelte: 4.2.19
|
||||
|
||||
@@ -4103,9 +4103,9 @@ snapshots:
|
||||
'@appwrite.io/pink-icons': 1.0.0
|
||||
the-new-css-reset: 1.11.3
|
||||
|
||||
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5eac713f(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
|
||||
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@66d65aa(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
|
||||
dependencies:
|
||||
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5eac713f8e69d09316b297f98a772b4871245ed1(svelte@4.2.19)
|
||||
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@66d65aa75bd39e90088f87ebd62f0ca344ae0430(svelte@4.2.19)
|
||||
'@floating-ui/dom': 1.6.13
|
||||
'@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.2(svelte@4.2.19))(svelte@4.2.19)
|
||||
'@melt-ui/svelte': 0.86.2(svelte@4.2.19)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { createMenubar, melt } from '@melt-ui/svelte';
|
||||
import { Badge, Icon, type SheetMenu, ActionMenu } from '@appwrite.io/pink-svelte';
|
||||
import { Badge, Icon, type SheetMenu, ActionMenu, Card } from '@appwrite.io/pink-svelte';
|
||||
import {
|
||||
IconChevronDown,
|
||||
IconChevronRight,
|
||||
@@ -205,44 +205,66 @@
|
||||
{/if}
|
||||
|
||||
<div class="menu" use:melt={$menuOrganizations}>
|
||||
{#if selectedOrg}
|
||||
<div use:melt={$itemOrganizations}>
|
||||
<ActionMenu.Root>
|
||||
<ActionMenu.Item.Anchor href={`/console/organization-${selectedOrg?.$id}`}
|
||||
>Organization overview</ActionMenu.Item.Anchor
|
||||
></ActionMenu.Root>
|
||||
</div>
|
||||
{#if organizations.length > 1}
|
||||
<div class="separator" use:melt={$separatorOrganizations} />
|
||||
|
||||
<div use:melt={$subTriggerOrganizations}>
|
||||
<Card.Base padding="xxxs" shadow={true}>
|
||||
{#if selectedOrg}
|
||||
<div use:melt={$itemOrganizations}>
|
||||
<ActionMenu.Root>
|
||||
<ActionMenu.Item.Button trailingIcon={IconChevronRight}
|
||||
>Switch organization</ActionMenu.Item.Button>
|
||||
</ActionMenu.Root>
|
||||
<ActionMenu.Item.Anchor href={`/console/organization-${selectedOrg?.$id}`}
|
||||
>Organization overview</ActionMenu.Item.Anchor
|
||||
></ActionMenu.Root>
|
||||
</div>
|
||||
<div class="menu subMenu" use:melt={$subMenuOrganizations}>
|
||||
<div use:melt={$radioGroupOrganizations}>
|
||||
{#each organizations as organization}
|
||||
<div use:melt={$itemOrganizations}>
|
||||
<ActionMenu.Root>
|
||||
<ActionMenu.Item.Anchor
|
||||
href={`/console/organization-${organization?.$id}`}
|
||||
>{organization.name}</ActionMenu.Item.Anchor>
|
||||
</ActionMenu.Root>
|
||||
</div>
|
||||
{/each}
|
||||
<div class="separator" use:melt={$separatorOrganizations} />
|
||||
<div use:melt={$itemOrganizations}>
|
||||
<ActionMenu.Root>
|
||||
<ActionMenu.Item.Button
|
||||
leadingIcon={IconPlusSm}
|
||||
on:click={createOrg}>Create organization</ActionMenu.Item.Button
|
||||
></ActionMenu.Root>
|
||||
</div>
|
||||
{#if organizations.length > 1}
|
||||
<div class="separator" use:melt={$separatorOrganizations} />
|
||||
|
||||
<div use:melt={$subTriggerOrganizations}>
|
||||
<ActionMenu.Root>
|
||||
<ActionMenu.Item.Button trailingIcon={IconChevronRight}
|
||||
>Switch organization</ActionMenu.Item.Button>
|
||||
</ActionMenu.Root>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu subMenu" use:melt={$subMenuOrganizations}>
|
||||
<Card.Base padding="xxxs" shadow={true}>
|
||||
<div use:melt={$radioGroupOrganizations}>
|
||||
{#each organizations as organization}
|
||||
<div use:melt={$itemOrganizations}>
|
||||
<ActionMenu.Root>
|
||||
<ActionMenu.Item.Anchor
|
||||
href={`/console/organization-${organization?.$id}`}
|
||||
>{organization.name}</ActionMenu.Item.Anchor>
|
||||
</ActionMenu.Root>
|
||||
</div>
|
||||
{/each}
|
||||
<div class="separator" use:melt={$separatorOrganizations} />
|
||||
<div use:melt={$itemOrganizations}>
|
||||
<ActionMenu.Root>
|
||||
<ActionMenu.Item.Button
|
||||
leadingIcon={IconPlusSm}
|
||||
on:click={createOrg}
|
||||
>Create organization</ActionMenu.Item.Button
|
||||
></ActionMenu.Root>
|
||||
</div>
|
||||
</div>
|
||||
</Card.Base>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="separator" use:melt={$separatorOrganizations} />
|
||||
<div use:melt={$itemOrganizations}>
|
||||
<ActionMenu.Root>
|
||||
<ActionMenu.Item.Button leadingIcon={IconPlusSm} on:click={createOrg}
|
||||
>Create organization</ActionMenu.Item.Button
|
||||
></ActionMenu.Root>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
{#each organizations as organization}
|
||||
<div use:melt={$itemOrganizations}>
|
||||
<ActionMenu.Root>
|
||||
<ActionMenu.Item.Anchor
|
||||
href={`/console/organization-${organization?.$id}`}
|
||||
>{organization.name}</ActionMenu.Item.Anchor
|
||||
></ActionMenu.Root>
|
||||
</div>
|
||||
{/each}
|
||||
<div class="separator" use:melt={$separatorOrganizations} />
|
||||
<div use:melt={$itemOrganizations}>
|
||||
<ActionMenu.Root>
|
||||
@@ -251,23 +273,7 @@
|
||||
></ActionMenu.Root>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
{#each organizations as organization}
|
||||
<div use:melt={$itemOrganizations}>
|
||||
<ActionMenu.Root>
|
||||
<ActionMenu.Item.Anchor href={`/console/organization-${organization?.$id}`}
|
||||
>{organization.name}</ActionMenu.Item.Anchor
|
||||
></ActionMenu.Root>
|
||||
</div>
|
||||
{/each}
|
||||
<div class="separator" use:melt={$separatorOrganizations} />
|
||||
<div use:melt={$itemOrganizations}>
|
||||
<ActionMenu.Root>
|
||||
<ActionMenu.Item.Button leadingIcon={IconPlusSm} on:click={createOrg}
|
||||
>Create organization</ActionMenu.Item.Button
|
||||
></ActionMenu.Root>
|
||||
</div>
|
||||
{/if}
|
||||
</Card.Base>
|
||||
</div>
|
||||
|
||||
{#if selectedOrg && selectedProject}
|
||||
@@ -293,35 +299,37 @@
|
||||
{/if}
|
||||
|
||||
<div class="menu" use:melt={$menuProjects}>
|
||||
{#if selectedOrg.projects.length > 1}
|
||||
{#each selectedOrg.projects as project, index}
|
||||
{#if index < 4}
|
||||
<div use:melt={$itemProjects}>
|
||||
<ActionMenu.Root>
|
||||
<ActionMenu.Item.Anchor href={`/console/project-${project.$id}`}
|
||||
>{project.name}</ActionMenu.Item.Anchor
|
||||
></ActionMenu.Root>
|
||||
</div>
|
||||
{:else if index === 4}
|
||||
<div use:melt={$itemProjects}>
|
||||
<ActionMenu.Root>
|
||||
<ActionMenu.Item.Anchor
|
||||
href={`/console/organization-${selectedOrg.$id}`}
|
||||
>All projects</ActionMenu.Item.Anchor
|
||||
></ActionMenu.Root>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
<div class="separator" use:melt={$separatorProjects} />
|
||||
{/if}
|
||||
<div use:melt={$itemProjects}>
|
||||
<ActionMenu.Root>
|
||||
<ActionMenu.Item.Anchor
|
||||
leadingIcon={IconPlusSm}
|
||||
href={`/console/organization-${selectedOrg?.$id}?create-project`}
|
||||
>Create project</ActionMenu.Item.Anchor
|
||||
></ActionMenu.Root>
|
||||
</div>
|
||||
<Card.Base padding="xxxs" shadow={true}>
|
||||
{#if selectedOrg.projects.length > 1}
|
||||
{#each selectedOrg.projects as project, index}
|
||||
{#if index < 4}
|
||||
<div use:melt={$itemProjects}>
|
||||
<ActionMenu.Root>
|
||||
<ActionMenu.Item.Anchor href={`/console/project-${project.$id}`}
|
||||
>{project.name}</ActionMenu.Item.Anchor
|
||||
></ActionMenu.Root>
|
||||
</div>
|
||||
{:else if index === 4}
|
||||
<div use:melt={$itemProjects}>
|
||||
<ActionMenu.Root>
|
||||
<ActionMenu.Item.Anchor
|
||||
href={`/console/organization-${selectedOrg.$id}`}
|
||||
>All projects</ActionMenu.Item.Anchor
|
||||
></ActionMenu.Root>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
<div class="separator" use:melt={$separatorProjects} />
|
||||
{/if}
|
||||
<div use:melt={$itemProjects}>
|
||||
<ActionMenu.Root>
|
||||
<ActionMenu.Item.Anchor
|
||||
leadingIcon={IconPlusSm}
|
||||
href={`/console/organization-${selectedOrg?.$id}?create-project`}
|
||||
>Create project</ActionMenu.Item.Anchor
|
||||
></ActionMenu.Root>
|
||||
</div>
|
||||
</Card.Base>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -332,19 +340,19 @@
|
||||
|
||||
<style lang="scss">
|
||||
.menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
outline: none !important;
|
||||
//display: flex;
|
||||
//flex-direction: column;
|
||||
//outline: none !important;
|
||||
min-width: 220px;
|
||||
border-radius: var(--border-radius-m, 12px);
|
||||
border: 1px solid var(--color-border-neutral, #ededf0);
|
||||
background: var(--color-bgcolor-neutral-primary, #fff);
|
||||
//border-radius: var(--border-radius-m, 12px);
|
||||
//border: 1px solid var(--color-border-neutral, #ededf0);
|
||||
//background: var(--color-bgcolor-neutral-primary, #fff);
|
||||
z-index: 20;
|
||||
|
||||
/* box-shadow/neutral/L */
|
||||
box-shadow:
|
||||
-2px 8px 16px 0px rgba(0, 0, 0, 0.02),
|
||||
-2px 20px 24px 0px rgba(0, 0, 0, 0.02);
|
||||
//
|
||||
///* box-shadow/neutral/L */
|
||||
//box-shadow:
|
||||
// -2px 8px 16px 0px rgba(0, 0, 0, 0.02),
|
||||
// -2px 20px 24px 0px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.not-mobile {
|
||||
@@ -437,8 +445,10 @@
|
||||
0 0 0 4px var(--color-border-focus, #818186);
|
||||
}
|
||||
.separator {
|
||||
margin: 5px 0;
|
||||
height: 1px;
|
||||
margin-block: 2px;
|
||||
margin-inline-start: calc(var(--base-4) * -1);
|
||||
width: calc(100% + var(--base-8));
|
||||
background-color: var(--color-border-neutral);
|
||||
}
|
||||
.breadcrumb-separator {
|
||||
|
||||
@@ -160,7 +160,7 @@
|
||||
</Link.Button>
|
||||
{#if showAccountMenu}
|
||||
<div class="account-container">
|
||||
<Card.Base padding="xxs" shadow={true}>
|
||||
<Card.Base padding="xxxs" shadow={true}>
|
||||
<Layout.Stack gap="xxs">
|
||||
<ActionMenu.Root>
|
||||
<Layout.Stack gap="xxs">
|
||||
@@ -182,23 +182,29 @@
|
||||
trailingIcon={IconLogoutRight}
|
||||
size="l"
|
||||
on:click={logout}>Sign out</ActionMenu.Item.Button>
|
||||
<div
|
||||
style:padding-inline-start="10px"
|
||||
style:padding-inline-end="8px">
|
||||
<Layout.Stack
|
||||
justifyContent="space-between"
|
||||
direction="row"
|
||||
alignItems="center">
|
||||
<Typography.Text>Theme</Typography.Text>
|
||||
<ToggleButton
|
||||
bind:active={activeTheme}
|
||||
buttons={[
|
||||
{ id: 'light', label: 'Light', icon: IconSun },
|
||||
{ id: 'dark', label: 'Dark', icon: IconMoon },
|
||||
{
|
||||
id: 'system',
|
||||
label: 'System',
|
||||
icon: IconMode
|
||||
}
|
||||
]}></ToggleButton>
|
||||
</Layout.Stack>
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
</ActionMenu.Root>
|
||||
<div style:padding-inline-start="13px" style:padding-inline-end="8px">
|
||||
<Layout.Stack
|
||||
justifyContent="space-between"
|
||||
direction="row"
|
||||
alignItems="center">
|
||||
<Typography.Text>Theme</Typography.Text>
|
||||
<ToggleButton
|
||||
bind:active={activeTheme}
|
||||
buttons={[
|
||||
{ id: 'light', label: 'Light', icon: IconSun },
|
||||
{ id: 'dark', label: 'Dark', icon: IconMoon },
|
||||
{ id: 'system', label: 'System', icon: IconMode }
|
||||
]}></ToggleButton>
|
||||
</Layout.Stack>
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
</Card.Base>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user