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

Merge pull request #2178 from HarshMN2345/fix-replace-all-instances-of-pill-with-badge

Browse Source
This commit is contained in:
Darshan
2025-08-05 14:28:51 +05:30
committed by GitHub
parent 9e9662db35 6f88916e71
commit cd468d7dcf
17 changed files with 112 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/code.svelte
+20 -5
View File
@@ -8,7 +8,8 @@
</script>
<script lang="ts">
import { Pill } from '$lib/elements';
import { Badge, Icon } from '@appwrite.io/pink-svelte';
import { IconCode, IconAndroid, IconFlutter, IconApple } from '@appwrite.io/pink-icons-svelte';
import Prism from 'prismjs';
import 'prismjs/components/prism-dart';
import 'prismjs/components/prism-kotlin';
@@ -24,6 +25,21 @@
export let label: string = null;
export let labelIcon: 'code' | 'android' | 'flutter' | 'apple' = null;
function getIcon(iconName: string) {
switch (iconName) {
case 'code':
return IconCode;
case 'android':
return IconAndroid;
case 'flutter':
return IconFlutter;
case 'apple':
return IconApple;
default:
return null;
}
}
export let code: string;
export let language: 'js' | 'html' | 'dart' | 'kotlin' | 'json' | 'sh' | 'yml' | 'swift';
export let withLineNumbers = false;
@@ -49,12 +65,11 @@
<div
class="controls u-position-absolute u-inset-inline-end-8 u-inset-block-start-8 u-flex u-gap-8">
{#if label}
<Pill>
<Badge variant="secondary" content={label}>
{#if labelIcon}
<span class={`icon-${labelIcon}`} aria-hidden="true"></span>
<Icon icon={getIcon(labelIcon)} size="s" slot="start" />
{/if}
{label}
</Pill>
</Badge>
{/if}
{#if withCopy}
<Copy value={code}>
src/lib/components/eventModal.svelte
+2 -4
View File
@@ -1,7 +1,6 @@
<script lang="ts">
import { Button } from '$lib/elements/forms';
import { Modal } from '$lib/components';
import { Pill } from '$lib/elements';
import { createEventDispatcher } from 'svelte';
import { at, empty } from '$lib/helpers/array';
import { singular } from '$lib/helpers/string';
@@ -295,13 +294,12 @@
<Typography.Text variant="m-500">Choose an attribute (optional)</Typography.Text>
<Layout.Stack gap="s" wrap="wrap" direction="row">
{#each available.attributes as attribute}
<Pill
<Tag
disabled={showInput}
selected={selected.attribute === attribute}
button
on:click={() => select('attribute', attribute)}>
{attribute}
</Pill>
</Tag>
{/each}
</Layout.Stack>
</Layout.Stack>
src/lib/elements/index.ts
-1
View File
@@ -1,4 +1,3 @@
export { default as Pill } from './pill.svelte';
export { default as SelectSearchItem } from './selectSearchItem.svelte';
export { default as Flag } from './flag.svelte';
export { default as SelectSearchCheckbox } from './selectSearchCheckbox.svelte';
src/lib/elements/pill.svelte
-83
View File
@@ -1,83 +0,0 @@
<script lang="ts">
import { trackEvent } from '$lib/actions/analytics';
export let disabled = false;
export let selected = false;
export let success = false;
export let warning = false;
export let danger = false;
export let info = false;
export let button = false;
export let submit = false;
export let external = false;
export let href: string = null;
export let event: string = null;
export let eventData: Record<string, unknown> = {};
export let style = '';
let classes = '';
export { classes as class };
function track() {
if (!event) {
return;
}
trackEvent(`click_${event}`, {
from: 'tag',
...eventData
});
}
</script>
{#if href}
<a
{style}
{href}
target={external ? '_blank' : '_self'}
rel={external ? 'noopener noreferrer' : ''}
class="tag {classes}"
class:is-disabled={disabled}
class:is-selected={selected}
class:is-success={success}
class:is-warning={warning}
class:is-danger={danger}
class:is-info={info}>
<slot />
</a>
{:else if button}
<button
on:click
on:click={track}
{style}
{disabled}
type={submit ? 'submit' : 'button'}
class="tag {classes}"
class:is-disabled={disabled}
class:is-selected={selected}
class:is-success={success}
class:is-warning={warning}
class:is-danger={danger}
class:is-info={info}>
<slot />
</button>
{:else}
<div
class="tag {classes}"
{style}
class:is-disabled={disabled}
class:is-selected={selected}
class:is-success={success}
class:is-warning={warning}
class:is-danger={danger}
class:is-info={info}>
<slot />
</div>
{/if}
<style>
/* button and anchor tags seem to have special dimens, this should be auto fixed in pink2. */
:global(.tag):where(button, a) {
--p-tag-height: 2.125rem;
--p-tag-content-height: 2.024rem;
}
</style>
src/lib/layout/containerHeader.svelte
+15 -7
View File
@@ -1,7 +1,9 @@
<script lang="ts">
import { DropList } from '$lib/components';
import { BillingPlan } from '$lib/constants';
import { Link, Pill } from '$lib/elements';
import { Link } from '$lib/elements';
import { Badge, Icon } from '@appwrite.io/pink-svelte';
import { IconInfo } from '@appwrite.io/pink-icons-svelte';
import { Alert } from '@appwrite.io/pink-svelte';
import {
checkForProjectLimitation,
@@ -125,13 +127,19 @@
{#if isCloud && isLimited}
<DropList bind:show={showDropdown} width="16">
{#if hasProjectLimitation}
<Pill button on:click={() => (showDropdown = !showDropdown)}>
<span class="icon-info"></span>{total}/{limit} created
</Pill>
<Badge
variant="secondary"
content={`${total}/${limit} created`}
on:click={() => (showDropdown = !showDropdown)}>
<Icon icon={IconInfo} size="s" slot="start" />
</Badge>
{:else if $organization?.billingPlan !== BillingPlan.SCALE}
<Pill button on:click={() => (showDropdown = !showDropdown)}>
<span class="icon-info"></span>Limits applied
</Pill>
<Badge
variant="secondary"
content="Limits applied"
on:click={() => (showDropdown = !showDropdown)}>
<Icon icon={IconInfo} size="s" slot="start" />
</Badge>
{/if}
<svelte:fragment slot="list">
<slot name="tooltip" {limit} {tier} {title} {upgradeMethod} {hasUsageFees}>
src/routes/(console)/account/organizations/+page.svelte
+9 -4
View File
@@ -13,7 +13,7 @@
import { sdk } from '$lib/stores/sdk';
import type { PageData } from './$types';
import { isCloud } from '$lib/system';
import { Pill } from '$lib/elements';
import { Badge } from '@appwrite.io/pink-svelte';
import type { Models } from '@appwrite.io/console';
import type { Organization } from '$lib/stores/organization';
import { daysLeftInTrial, plansInfo, tierToPlan } from '$lib/stores/billing';
@@ -75,8 +75,10 @@
{#if organization?.billingPlan === BillingPlan.FREE || organization?.billingPlan === BillingPlan.GITHUB_EDUCATION}
<Tooltip>
<div class="u-flex u-cross-center">
<Pill class="eyebrow-heading-3"
>{tierToPlan(organization?.billingPlan)?.name}</Pill>
<Badge
variant="secondary"
content={tierToPlan(organization?.billingPlan)?.name}
class="eyebrow-heading-3" />
</div>
<span slot="tooltip"
>You are limited to 1 free organization per account</span>
@@ -85,7 +87,10 @@
{#if organization?.billingTrialStartDate && $daysLeftInTrial > 0 && organization.billingPlan !== BillingPlan.FREE && $plansInfo.get(organization.billingPlan)?.trialDays}
<Tooltip>
<div class="u-flex u-cross-center">
<Pill class="eyebrow-heading-3">TRIAL</Pill>
<Badge
class="eyebrow-heading-3"
variant="secondary"
content="TRIAL" />
</div>
<span slot="tooltip"
>{`Your trial ends on ${toLocaleDate(
src/routes/(console)/organization-[organization]/billing/availableCredit.svelte
+2 -2
View File
@@ -14,7 +14,7 @@
import { BillingPlan } from '$lib/constants';
import { Click, trackEvent } from '$lib/actions/analytics';
import { upgradeURL } from '$lib/stores/billing';
import { Pill } from '$lib/elements';
import { Alert, Badge, Icon, Link, Table, Tooltip, Typography } from '@appwrite.io/pink-svelte';
import { IconPlus } from '@appwrite.io/pink-icons-svelte';
@@ -152,7 +152,7 @@
{#if credit.status === 'expired'}
<Tooltip>
<span>
<Pill>Expired</Pill>
<Badge variant="secondary" content="Expired" />
</span>
<span slot="tooltip"
>{toLocaleDate(credit.expiration)}</span>
src/routes/(console)/project-[region]-[project]/auth/user-[user]/sessions/+page.svelte
+5 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { EmptySearch } from '$lib/components';
import { Pill } from '$lib/elements';
import { Badge } from '@appwrite.io/pink-svelte';
import { Button } from '$lib/elements/forms';
import {
TableBody,
@@ -77,7 +77,10 @@
{session.osVersion}
</p>
{#if session.current}
<Pill success>current session</Pill>
<Badge
variant="secondary"
type="success"
content="current session" />
{/if}
</div>
</TableCell>
src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/create.svelte
+8 -5
View File
@@ -4,7 +4,8 @@
import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
import { Modal, CustomId } from '$lib/components';
import { Dependencies } from '$lib/constants';
import { Pill } from '$lib/elements';
import { Badge, Icon } from '@appwrite.io/pink-svelte';
import { IconPencil } from '@appwrite.io/pink-icons-svelte';
import { Button, InputText, InputSelect, InputPhone } from '$lib/elements/forms';
import InputEmail from '$lib/elements/forms/inputEmail.svelte';
import { addNotification } from '$lib/stores/notifications';
@@ -116,10 +117,12 @@
{#if !showCustomId}
<div>
<Pill button on:click={() => (showCustomId = !showCustomId)}
><span class="icon-pencil" aria-hidden="true"></span><span class="text">
Target ID
</span></Pill>
<Badge
variant="secondary"
content="Target ID"
on:click={() => (showCustomId = !showCustomId)}>
<Icon icon={IconPencil} size="s" slot="start" />
</Badge>
</div>
{:else}
<CustomId bind:show={showCustomId} name="Target" bind:id autofocus={false} />
src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/containerHeader.svelte
+6 -7
View File
@@ -1,5 +1,4 @@
<script lang="ts">
import { Pill } from '$lib/elements';
import { DropList } from '$lib/components';
import { Button } from '$lib/elements/forms';
import { IconInfo, IconPlus } from '@appwrite.io/pink-icons-svelte';
@@ -41,12 +40,12 @@
{#if title === 'Policies' && policiesCreated >= maxPolicies}
<div style:height="40px;" style:padding-block-start="4px">
<DropList bind:show={showDropdown} width="16">
<Pill disabled={buttonDisabled} button on:click={() => (showDropdown = true)}>
<Layout.Stack direction="row" gap="xs" alignItems="center" inline>
<Icon icon={IconInfo} size="s" />
{policiesCreated}/{maxPolicies} created
</Layout.Stack>
</Pill>
<Badge
variant="secondary"
content={`${policiesCreated}/${maxPolicies} created`}
on:click={() => (showDropdown = true)}>
<Icon icon={IconInfo} size="s" slot="start" />
</Badge>
<svelte:fragment slot="list">
<slot name="tooltip">
<span>
src/routes/(console)/project-[region]-[project]/databases/database-[database]/grid.svelte
+2 -2
View File
@@ -2,7 +2,7 @@
import { base } from '$app/paths';
import { page } from '$app/state';
import { CardContainer, GridItem1, Id } from '$lib/components';
import { Pill } from '$lib/elements';
import { Badge } from '@appwrite.io/pink-svelte';
import { canWriteCollections } from '$lib/stores/roles';
import type { PageData } from './$types';
export let data: PageData;
@@ -22,7 +22,7 @@
<svelte:fragment slot="title">{collection.name}</svelte:fragment>
<svelte:fragment slot="status">
{#if !collection.enabled}
<Pill>disabled</Pill>
<Badge variant="secondary" content="disabled" />
{/if}</svelte:fragment>
<Id value={collection.$id}>{collection.$id}</Id>
src/routes/(console)/project-[region]-[project]/messaging/providers/wizard/provider.svelte
+8 -5
View File
@@ -4,7 +4,8 @@
import { CustomId, LabelCard } from '$lib/components';
import { providers } from '../store';
import { InputText } from '$lib/elements/forms';
import { Pill } from '$lib/elements';
import { Badge, Icon } from '@appwrite.io/pink-svelte';
import { IconPencil } from '@appwrite.io/pink-icons-svelte';
import { Providers } from '../../provider.svelte';
import { SmtpEncryption } from '@appwrite.io/console';
@@ -151,10 +152,12 @@
{#if !showCustomId}
<div>
<Pill button on:click={() => (showCustomId = !showCustomId)}
><span class="icon-pencil" aria-hidden="true"></span><span class="text">
Provider ID
</span></Pill>
<Badge
variant="secondary"
content="Provider ID"
on:click={() => (showCustomId = !showCustomId)}>
<Icon icon={IconPencil} size="s" slot="start" />
</Badge>
</div>
{:else}
<CustomId bind:show={showCustomId} name="Provider" bind:id autofocus={false} />
src/routes/(console)/project-[region]-[project]/messaging/wizard/emailFormList.svelte
+8 -5
View File
@@ -8,7 +8,8 @@
InputText,
InputTextarea
} from '$lib/elements/forms';
import { Pill } from '$lib/elements';
import { Badge, Icon } from '@appwrite.io/pink-svelte';
import { IconPencil } from '@appwrite.io/pink-icons-svelte';
import { CustomId, Modal } from '$lib/components';
import { user } from '$lib/stores/user';
import { clickOnEnter } from '$lib/helpers/a11y';
@@ -104,10 +105,12 @@
</InputSwitch>
{#if !showCustomId}
<div>
<Pill button on:click={() => (showCustomId = !showCustomId)}
><span class="icon-pencil" aria-hidden="true"></span><span class="text">
Message ID
</span></Pill>
<Badge
variant="secondary"
content="Message ID"
on:click={() => (showCustomId = !showCustomId)}>
<Icon icon={IconPencil} size="s" slot="start" />
</Badge>
</div>
{:else}
<CustomId
src/routes/(console)/project-[region]-[project]/messaging/wizard/pushFormList.svelte
+8 -7
View File
@@ -34,7 +34,8 @@
InputTextarea,
Label
} from '$lib/elements/forms';
import { Pill } from '$lib/elements';
import { Badge, Icon } from '@appwrite.io/pink-svelte';
import { IconPencil, IconPlus } from '@appwrite.io/pink-icons-svelte';
import { CustomId, Modal } from '$lib/components';
import { user } from '$lib/stores/user';
import { clickOnEnter } from '$lib/helpers/a11y';
@@ -43,8 +44,6 @@
import PushPhone from '../pushPhone.svelte';
import { onMount } from 'svelte';
import InputFilePicker from '$lib/elements/forms/inputFilePicker.svelte';
import { Icon } from '@appwrite.io/pink-svelte';
import { IconPlus } from '@appwrite.io/pink-icons-svelte';
import { page } from '$app/state';
let showCustomId = false;
@@ -196,10 +195,12 @@
</form>
{#if !showCustomId}
<div>
<Pill button on:click={() => (showCustomId = !showCustomId)}
><span class="icon-pencil" aria-hidden="true"></span><span class="text">
Message ID
</span></Pill>
<Badge
variant="secondary"
content="Message ID"
on:click={() => (showCustomId = !showCustomId)}>
<Icon icon={IconPencil} size="s" slot="start" />
</Badge>
</div>
{:else}
<CustomId
src/routes/(console)/project-[region]-[project]/messaging/wizard/smsFormList.svelte
+8 -5
View File
@@ -1,7 +1,8 @@
<script lang="ts">
import { messageParams, providerType } from './store';
import { Button, InputEmail, InputRadio, InputTextarea } from '$lib/elements/forms';
import { Pill } from '$lib/elements';
import { Badge, Icon } from '@appwrite.io/pink-svelte';
import { IconPencil } from '@appwrite.io/pink-icons-svelte';
import { CustomId, Modal } from '$lib/components';
import { user } from '$lib/stores/user';
import { clickOnEnter } from '$lib/helpers/a11y';
@@ -83,10 +84,12 @@
</div>
{#if !showCustomId}
<div>
<Pill button on:click={() => (showCustomId = !showCustomId)}
><span class="icon-pencil" aria-hidden="true"></span><span class="text">
Message ID
</span></Pill>
<Badge
variant="secondary"
content="Message ID"
on:click={() => (showCustomId = !showCustomId)}>
<Icon icon={IconPencil} size="s" slot="start" />
</Badge>
</div>
{:else}
<CustomId
src/routes/(console)/project-[region]-[project]/settings/webhooks/messageStatusPill.svelte
+9 -11
View File
@@ -1,16 +1,14 @@
<script lang="ts">
import { Pill } from '$lib/elements';
import { Badge, Icon } from '@appwrite.io/pink-svelte';
import { IconCheckCircle, IconExclamationCircle } from '@appwrite.io/pink-icons-svelte';
export let enabled: boolean;
$: style = `color: ${enabled ? 'hsl(var(--color-success-120))' : 'hsl(var(--color-danger-120))'}`;
$: iconClass = (enabled ? 'icon-check-circle' : 'icon-exclamation-circle') + ' u-font-size-12';
</script>
<Pill success={enabled} danger={!enabled} on:click>
<span class="text u-font-size-12 u-trim">
<span class={iconClass} aria-hidden="true" {style}></span>
<span>{enabled ? 'enabled' : 'stopped'}</span>
</span>
</Pill>
<Badge
variant="secondary"
type={enabled ? 'success' : 'error'}
content={enabled ? 'enabled' : 'stopped'}
on:click>
<Icon icon={enabled ? IconCheckCircle : IconExclamationCircle} size="s" slot="start" />
</Badge>
src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte
+2 -2
View File
@@ -5,7 +5,7 @@
import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
import { Avatar, Empty, EmptySearch, PaginationWithLimit, SearchQuery } from '$lib/components';
import { Dependencies } from '$lib/constants';
import { Pill } from '$lib/elements';
import { Badge } from '@appwrite.io/pink-svelte';
import { Button } from '$lib/elements/forms';
import { calculateSize } from '$lib/helpers/sizeConvertion';
import { Container } from '$lib/layout';
@@ -129,7 +129,7 @@
<span class="avatar is-size-small is-color-empty"></span>
<span class="text u-trim">{file.name}</span>
<div>
<Pill warning>Pending</Pill>
<Badge variant="secondary" type="warning" content="Pending" />
</div>
</Layout.Stack>
</Table.Cell>