mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
Merge branch 'main' into csv-imports-errors
This commit is contained in:
Darshan
@@ -23,14 +23,13 @@
|
||||
Navbar,
|
||||
Icon,
|
||||
Layout,
|
||||
Link,
|
||||
Tooltip,
|
||||
Card,
|
||||
ActionMenu,
|
||||
ToggleButton,
|
||||
Button,
|
||||
Avatar,
|
||||
Typography
|
||||
Typography,
|
||||
Popover
|
||||
} from '@appwrite.io/pink-svelte';
|
||||
import { toggleCommandCenter } from '$lib/commandCenter/commandCenter.svelte';
|
||||
import {
|
||||
@@ -209,91 +208,79 @@
|
||||
</Button.Button>
|
||||
<span slot="tooltip">{isMac() ? '⌘ + K' : 'Ctrl + K'}</span></Tooltip>
|
||||
</Layout.Stack>
|
||||
<Link.Button
|
||||
on:click={() => {
|
||||
showAccountMenu = !showAccountMenu;
|
||||
shouldAnimateThemeToggle = false;
|
||||
if (showAccountMenu) {
|
||||
trackEvent(Click.MenuDropDownClick);
|
||||
}
|
||||
}}>
|
||||
<div style:user-select="none">
|
||||
<Popover let:toggle let:showing>
|
||||
<button
|
||||
type="button"
|
||||
on:click|preventDefault={(e) => {
|
||||
toggle(e);
|
||||
shouldAnimateThemeToggle = false;
|
||||
if (showing) {
|
||||
trackEvent(Click.MenuDropDownClick);
|
||||
}
|
||||
}}
|
||||
style:user-select="none">
|
||||
<Avatar size="s" src={avatar} />
|
||||
</div>
|
||||
</Link.Button>
|
||||
{#if showAccountMenu}
|
||||
<div class="account-container">
|
||||
<Card.Base padding="xxxs" shadow={true}>
|
||||
</button>
|
||||
<svelte:fragment slot="tooltip" let:toggle>
|
||||
<ActionMenu.Root noPadding>
|
||||
<Layout.Stack gap="xxs">
|
||||
<ActionMenu.Root>
|
||||
<Layout.Stack gap="xxs">
|
||||
<div
|
||||
style:padding-inline-start="10px"
|
||||
style:padding-inline-end="8px"
|
||||
style:padding-block="4px">
|
||||
<Typography.Text variant="m-500">
|
||||
{$user.email}
|
||||
</Typography.Text>
|
||||
</div>
|
||||
<ActionMenu.Item.Anchor
|
||||
trailingIcon={IconUser}
|
||||
size="l"
|
||||
href={`${base}/account`}>
|
||||
Account</ActionMenu.Item.Anchor>
|
||||
<div
|
||||
style:padding-inline-start="10px"
|
||||
style:padding-inline-end="8px"
|
||||
style:padding-block="4px">
|
||||
<Typography.Text variant="m-500">
|
||||
{$user.email}
|
||||
</Typography.Text>
|
||||
</div>
|
||||
<ActionMenu.Item.Anchor
|
||||
trailingIcon={IconUser}
|
||||
on:click={toggle}
|
||||
size="l"
|
||||
href={`${base}/account`}>
|
||||
Account</ActionMenu.Item.Anchor>
|
||||
|
||||
<ActionMenu.Item.Button
|
||||
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>
|
||||
<div
|
||||
class:keepTransformTransition={shouldAnimateThemeToggle}>
|
||||
<ToggleButton
|
||||
bind:active={activeTheme}
|
||||
on:change={() => {
|
||||
setTimeout(() => {
|
||||
shouldAnimateThemeToggle = true;
|
||||
}, 150);
|
||||
}}
|
||||
buttons={[
|
||||
{
|
||||
id: 'light',
|
||||
label: 'Light',
|
||||
icon: IconSun
|
||||
},
|
||||
{
|
||||
id: 'dark',
|
||||
label: 'Dark',
|
||||
icon: IconMoon
|
||||
},
|
||||
{
|
||||
id: 'auto',
|
||||
label: 'System',
|
||||
icon: IconMode
|
||||
}
|
||||
]}></ToggleButton>
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
<ActionMenu.Item.Button
|
||||
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>
|
||||
<div class:keepTransformTransition={shouldAnimateThemeToggle}>
|
||||
<ToggleButton
|
||||
bind:active={activeTheme}
|
||||
on:change={() => {
|
||||
setTimeout(() => {
|
||||
shouldAnimateThemeToggle = true;
|
||||
}, 150);
|
||||
}}
|
||||
buttons={[
|
||||
{
|
||||
id: 'light',
|
||||
label: 'Light',
|
||||
icon: IconSun
|
||||
},
|
||||
{
|
||||
id: 'dark',
|
||||
label: 'Dark',
|
||||
icon: IconMoon
|
||||
},
|
||||
{
|
||||
id: 'auto',
|
||||
label: 'System',
|
||||
icon: IconMode
|
||||
}
|
||||
]}></ToggleButton>
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
</ActionMenu.Root>
|
||||
</div>
|
||||
</Layout.Stack>
|
||||
</Card.Base>
|
||||
</div>
|
||||
<button
|
||||
class="account-backdrop"
|
||||
aria-label="Account menu"
|
||||
on:click={() => {
|
||||
showAccountMenu = false;
|
||||
}}></button>
|
||||
{/if}
|
||||
</ActionMenu.Root>
|
||||
</svelte:fragment>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
</Navbar.Base>
|
||||
@@ -405,24 +392,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.account-container {
|
||||
position: absolute;
|
||||
right: var(--space-7);
|
||||
top: var(--base-44);
|
||||
width: 244px;
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.account-backdrop {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* The default drop list has a max-inline width of 280px, which squeezes the support modal. */
|
||||
:global(.extended-width) {
|
||||
max-inline-size: none;
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
let error: string;
|
||||
let showCustomId = false;
|
||||
let disabled: boolean = false;
|
||||
let name: string = 'Appwrite project';
|
||||
let name: string = 'New project';
|
||||
|
||||
async function create() {
|
||||
try {
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
export let showCreateProjectCloud: boolean;
|
||||
|
||||
let id: string = null;
|
||||
let name: string = 'Appwrite project';
|
||||
let name: string = 'New project';
|
||||
let region: string = Region.Fra;
|
||||
let error: string = null;
|
||||
|
||||
|
||||
+21
-7
@@ -39,12 +39,11 @@
|
||||
let showDelete = false;
|
||||
let selectedRecord: Models.DnsRecord = null;
|
||||
|
||||
function formatRecordName(name: string) {
|
||||
const limit = 30;
|
||||
function formatName(name: string, limit: number = 30) {
|
||||
return {
|
||||
value: name.length > limit ? `${name.slice(0, limit)}...` : name,
|
||||
truncated: name.length > limit,
|
||||
whole: name
|
||||
value: name ? (name.length > limit ? `${name.slice(0, limit)}...` : name) : '-',
|
||||
truncated: name ? name.length > limit : undefined,
|
||||
whole: name ?? '-'
|
||||
};
|
||||
}
|
||||
</script>
|
||||
@@ -65,7 +64,7 @@
|
||||
{#each $columns as column}
|
||||
<Table.Cell column={column.id} {root}>
|
||||
{#if column.id === 'name'}
|
||||
{@const formatted = formatRecordName(record.name)}
|
||||
{@const formatted = formatName(record.name)}
|
||||
<Tooltip placement="bottom" disabled={!formatted.truncated}>
|
||||
<Typography.Text truncate>{formatted.value}</Typography.Text>
|
||||
<span
|
||||
@@ -99,7 +98,22 @@
|
||||
</Typography.Text>
|
||||
{:else if column.id === 'comment'}
|
||||
<Typography.Text truncate>
|
||||
{record?.comment ?? '-'}
|
||||
{@const formatted = formatName(record?.comment)}
|
||||
<Tooltip
|
||||
placement="bottom"
|
||||
maxWidth="fit-content"
|
||||
disabled={!formatted.truncated}>
|
||||
<Typography.Text truncate>{formatted.value}</Typography.Text>
|
||||
<span
|
||||
slot="tooltip"
|
||||
let:showing
|
||||
style:white-space="pre-wrap"
|
||||
style:word-break="break-all">
|
||||
{#if showing}
|
||||
{formatted.whole}
|
||||
{/if}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</Typography.Text>
|
||||
{:else if column.id === '$createdAt'}
|
||||
<DualTimeView time={record.$createdAt} />
|
||||
|
||||
+34
-16
@@ -115,9 +115,11 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.reg
|
||||
projectId,
|
||||
platform,
|
||||
$createPlatform.name,
|
||||
$createPlatform.key || undefined,
|
||||
platform === PlatformType.Flutterweb ? undefined : $createPlatform.key || undefined,
|
||||
undefined,
|
||||
undefined
|
||||
platform === PlatformType.Flutterweb
|
||||
? $createPlatform.hostname || undefined
|
||||
: undefined
|
||||
);
|
||||
|
||||
isPlatformCreated = true;
|
||||
@@ -189,19 +191,35 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.reg
|
||||
bind:value={$createPlatform.name} />
|
||||
|
||||
<!-- Tooltips on InputText don't work as of now -->
|
||||
<InputText
|
||||
id="hostname"
|
||||
label={hostname[platform]}
|
||||
placeholder={placeholder[platform].hostname}
|
||||
required
|
||||
bind:value={$createPlatform.key}>
|
||||
<Tooltip slot="info" maxWidth="15rem">
|
||||
<Icon icon={IconInfo} size="s" />
|
||||
<Typography.Caption variant="400" slot="tooltip">
|
||||
{placeholder[platform].tooltip}
|
||||
</Typography.Caption>
|
||||
</Tooltip>
|
||||
</InputText>
|
||||
{#if platform === PlatformType.Flutterweb}
|
||||
<InputText
|
||||
id="hostname"
|
||||
label={hostname[platform]}
|
||||
placeholder={placeholder[platform].hostname}
|
||||
required
|
||||
bind:value={$createPlatform.hostname}>
|
||||
<Tooltip slot="info" maxWidth="15rem">
|
||||
<Icon icon={IconInfo} size="s" />
|
||||
<Typography.Caption variant="400" slot="tooltip">
|
||||
{placeholder[platform].tooltip}
|
||||
</Typography.Caption>
|
||||
</Tooltip>
|
||||
</InputText>
|
||||
{:else}
|
||||
<InputText
|
||||
id="key"
|
||||
label={hostname[platform]}
|
||||
placeholder={placeholder[platform].hostname}
|
||||
required
|
||||
bind:value={$createPlatform.key}>
|
||||
<Tooltip slot="info" maxWidth="15rem">
|
||||
<Icon icon={IconInfo} size="s" />
|
||||
<Typography.Caption variant="400" slot="tooltip">
|
||||
{placeholder[platform].tooltip}
|
||||
</Typography.Caption>
|
||||
</Tooltip>
|
||||
</InputText>
|
||||
{/if}
|
||||
</Layout.Stack>
|
||||
|
||||
<Button
|
||||
@@ -212,7 +230,7 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.reg
|
||||
submissionLoader={isCreatingPlatform}
|
||||
disabled={!platform ||
|
||||
!$createPlatform.name ||
|
||||
!$createPlatform.key ||
|
||||
(!$createPlatform.key && !$createPlatform.hostname) ||
|
||||
isCreatingPlatform}>
|
||||
Create platform
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user