Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Project Screen Minor Fixes #1259

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open

Project Screen Minor Fixes #1259

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
294b059
fix: colors for unsupported git services.
ItzNotABug Aug 4, 2024
1730182
fix: duplicate, inconsistent message.
ItzNotABug Aug 4, 2024
08dc387
fix: use correct icon component.
ItzNotABug Aug 4, 2024
888d7af
fix: content text.
ItzNotABug Aug 4, 2024
8f7db8c
fix: add spacing.
ItzNotABug Aug 4, 2024
4e39335
fix: make table scrollable.
ItzNotABug Aug 4, 2024
d3926ee
fix: content alignment.
ItzNotABug Aug 4, 2024
73bf412
ran: `npm run format`
ItzNotABug Aug 4, 2024
e372d5c
rebuild previews
ItzNotABug Aug 6, 2024
be3e9a1
another empty commit to rebuild previews
ItzNotABug Aug 6, 2024
b6ff3fb
Merge branch 'main' into project-screen-fixes
ItzNotABug Aug 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/lib/components/avatarGroup.svelte
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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>