Skip to content

Commit

Permalink
Merge pull request #1259 from ItzNotABug/project-screen-fixes
Browse files Browse the repository at this point in the history 
Project Screen Minor Fixes
  • Loading branch information
@ItzNotABug
ItzNotABug authored Dec 17, 2024
2 parents bd78eb6 + b6ff3fb commit 533604e
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 80 deletions.
5 changes: 4 additions & 1 deletion src/lib/components/avatarGroup.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@
export let bordered = false;
export let color = '';
let classes = '';
export { classes as class };
enum Sizes {
xsmall = 'is-size-x-small',
small = 'is-size-small',
Expand All @@ -18,7 +21,7 @@
}
</script>

<ul class="avatars-group" class:is-with-border={bordered}>
<ul class="avatars-group {classes}" class:is-with-border={bordered}>
{#each avatars as name, index}
{#if index < 2}
<li class="avatars-group-item">
Expand Down
13 changes: 7 additions & 6 deletions src/routes/(console)/project-[project]/settings/GitDisconnectModal.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,6 @@
bind:show={showGitDisconnect}
onSubmit={handleSubmit}
size="big">
<p>
Are you sure you want to disconnect this git installation? This will affect future
deployments to the following functions:
</p>

{#await loadFunctions()}
<div class="u-flex u-main-center">
<div class="avatar is-size-x-small">
Expand All @@ -64,6 +59,10 @@
</div>
{:then functions}
{#if functions.total}
<p>
Are you sure you want to disconnect this git installation? This will affect future
deployments to the following functions:
</p>
<div class="u-flex u-flex-vertical u-gap-12">
{#each functions.functions as func}
<div class="u-flex u-main-start u-gap-8">
Expand All @@ -73,7 +72,9 @@
<div
class="u-cross-child-center u-flex u-main-space-between u-flex-wrap u-gap-8 u-width-full-line">
<h6>{func.name}</h6>
<p class="u-x-small" style="color: hsl(var(--color-neutral-70));">
<p
class="u-x-small u-cross-child-center"
style="color: hsl(var(--color-neutral-70));">
Last deployed: {toLocaleDateTime(func.$updatedAt)}
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/routes/(console)/project-[project]/settings/GitInstallationModal.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
</script>

<Modal title="Install" headerDivider={false} bind:show={showGitInstall} size="big">
<p>Select a provider to import an existing git repositories.</p>
<p>Select a provider to import an existing git repository.</p>

<div class="u-flex u-cross-center u-flex-vertical u-gap-16">
<Button href={connectGitHub().toString()} fullWidth secondary>
Expand Down
159 changes: 87 additions & 72 deletions src/routes/(console)/project-[project]/settings/updateInstallations.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import { page } from '$app/stores';
import {
Alert,
Arrow,
AvatarGroup,
CardGrid,
DropList,
Expand Down Expand Up @@ -89,7 +90,7 @@
<svelte:fragment slot="aside">
{#if total > 0}
<div>
<div class="u-flex u-flex-vertical-mobile u-main-end">
<div class="u-flex u-flex-vertical-mobile u-main-end u-padding-block-end-16">
<ul class="buttons-list">
<li class="buttons-list-item">
<Button secondary on:click={() => (showGitIstall = true)}>
Expand All @@ -100,77 +101,81 @@
</ul>
</div>

<Table noMargin noStyles>
<TableHeader>
<TableCellHead width={150}>Installation ID</TableCellHead>
<TableCellHead>Repository</TableCellHead>
<TableCellHead>Updated</TableCellHead>
<TableCellHead width={40} />
</TableHeader>
<TableBody>
{#each installations as installation, i}
<TableRow>
<TableCell title="installations">
<Id value={installation.$id}>{installation.$id}</Id>
</TableCell>
<TableCell title="repository">
<div class="u-flex u-gap-8 u-cross-center">
<div class="avatar is-size-small">
<span
class={getProviderIcon(installation.provider)}
style="font-size: var(--icon-size-medium)!important" />
<div style="overflow: auto">
<Table noMargin noStyles isAutoLayout>
<TableHeader>
<TableCellHead width={150}>Installation ID</TableCellHead>
<TableCellHead>Repository</TableCellHead>
<TableCellHead>Updated</TableCellHead>
<TableCellHead width={40} />
</TableHeader>
<TableBody>
{#each installations as installation, i}
<TableRow>
<TableCell title="installations">
<Id value={installation.$id}>{installation.$id}</Id>
</TableCell>
<TableCell title="repository">
<div class="u-flex u-gap-8 u-cross-center">
<div class="avatar is-size-small">
<span
class={getProviderIcon(installation.provider)}
style="font-size: var(--icon-size-medium)!important" />
</div>
<a
href={getInstallationLink(installation)}
target="_blank"
class="u-flex u-gap-4 u-cross-center">
<span>{installation.organization}</span><span
style="font-size: 1rem; color: hsl(var(--color-neutral-70));"
class="icon-external-link" /></a>
</div>
<a
href={getInstallationLink(installation)}
target="_blank"
class="u-flex u-gap-4 u-cross-center">
<span>{installation.organization}</span><span
style="font-size: 1rem; color: hsl(var(--color-neutral-70));"
class="icon-external-link" /></a>
</div>
</TableCell>
<TableCellText title="updated">
{dayjs().to(installation.$updatedAt)}
</TableCellText>
</TableCell>
<TableCellText title="updated">
{dayjs().to(installation.$updatedAt)}
</TableCellText>

<TableCell>
<DropList
bind:show={showInstallationDropdown[i]}
placement="bottom-start"
noArrow>
<button
class="button is-text is-only-icon"
aria-label="more options"
on:click|preventDefault={() =>
(showInstallationDropdown[i] =
!showInstallationDropdown[i])}>
<span class="icon-dots-horizontal" aria-hidden="true" />
</button>
<svelte:fragment slot="list">
<DropListLink
href={configureGitHub()}
icon="external-link"
on:click={() => {
showInstallationDropdown[i] = false;
}}>
Configure
</DropListLink>
<DropListItem
icon="x-circle"
on:click={async () => {
showInstallationDropdown[i] = false;
showGitDisconnect = true;
selectedInstallation = installation;
}}>
Disconnect
</DropListItem>
</svelte:fragment>
</DropList>
</TableCell>
</TableRow>
{/each}
</TableBody>
</Table>
<TableCell>
<DropList
bind:show={showInstallationDropdown[i]}
placement="bottom-start"
noArrow>
<button
class="button is-text is-only-icon"
aria-label="more options"
on:click|preventDefault={() =>
(showInstallationDropdown[i] =
!showInstallationDropdown[i])}>
<span
class="icon-dots-horizontal"
aria-hidden="true" />
</button>
<svelte:fragment slot="list">
<DropListLink
href={configureGitHub()}
icon="external-link"
on:click={() => {
showInstallationDropdown[i] = false;
}}>
Configure
</DropListLink>
<DropListItem
icon="x-circle"
on:click={async () => {
showInstallationDropdown[i] = false;
showGitDisconnect = true;
selectedInstallation = installation;
}}>
Disconnect
</DropListItem>
</svelte:fragment>
</DropList>
</TableCell>
</TableRow>
{/each}
</TableBody>
</Table>
</div>
</div>
<div class="u-flex u-main-space-between">
<p class="text">Total installations: {total}</p>
Expand Down Expand Up @@ -201,8 +206,12 @@
<article class="card-git card is-border-dashed is-no-shadow">
<div class="u-flex u-cross-center u-flex-vertical u-gap-32">
<div class="u-flex u-cross-center u-flex-vertical u-gap-8">
<AvatarGroup bordered icons={['github', 'gitlab', 'bitBucket', 'azure']} />
<span class="icon-arrow-narrow-down" />
<AvatarGroup
class="git-installation-avatar-group"
bordered
icons={['github', 'gitlab', 'bitBucket', 'azure']} />

<Arrow direction="down" />

<div class="avatar"><SvgIcon name="appwrite" type="color" size={80} /></div>
</div>
Expand All @@ -225,3 +234,9 @@
{#if showGitDisconnect}
<GitDisconnectModal bind:showGitDisconnect {selectedInstallation} />
{/if}

<style>
:global(.git-installation-avatar-group .icon-gitlab, .icon-bitBucket, .icon-azure) {
color: hsl(var(--color-neutral-50));
}
</style>

0 comments on commit 533604e

Please sign in to comment.