Skip to content

Commit 4af144c

Browse files
TorstenDittmannTorstenDittmann
authored
Merge pull request #533 from appwrite/fix-design-QA-1.4
fix: even more design from 1.4 QA
2 parents aa8d9f6 + 256c1cf commit 4af144c

12 files changed

Lines changed: 170 additions & 191 deletions

File tree

‎src/lib/wizards/functions/steps/gitConfiguration.svelte‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { Box } from '$lib/components';
2+
import { Box, SvgIcon } from '$lib/components';
33
import { FormList, InputChoice, InputText } from '$lib/elements/forms';
44
import InputSelectSearch from '$lib/elements/forms/inputSelectSearch.svelte';
55
import { WizardStep } from '$lib/layout';
@@ -8,14 +8,6 @@
88
import { choices, installation, repository } from '../store';
99
1010
$choices.rootDir ??= '';
11-
function getProviderIcon(provider: string) {
12-
switch (provider) {
13-
case 'github':
14-
return 'icon-github';
15-
default:
16-
return '';
17-
}
18-
}
1911
2012
async function loadBranches() {
2113
const { branches } = await sdk.forProject.vcs.listRepositoryBranches(
@@ -40,13 +32,9 @@
4032
</svelte:fragment>
4133

4234
<Box radius="small">
43-
<div class="u-flex u-gap-16">
44-
<div class="avatar is-size-x-small">
45-
<span class={getProviderIcon($repository.provider)} />
46-
</div>
47-
<div class="u-cross-child-center u-line-height-1-5">
48-
<h6 class="u-bold u-trim-1">{$installation.organization}/{$repository.name}</h6>
49-
</div>
35+
<div class="u-flex u-gap-8 u-cross-center">
36+
<SvgIcon name={$repository.provider} iconSize="large" />
37+
<h6 class="u-bold u-trim-1">{$installation.organization}/{$repository.name}</h6>
5038
</div>
5139
{#await loadBranches()}
5240
<div class="u-flex u-gap-8 u-cross-center u-main-center">

‎src/routes/console/project-[project]/functions/function-[function]/createCli.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
}
8484
</script>
8585

86-
<Modal title="Create CLI deployment" size="big" bind:show>
86+
<Modal title="Create CLI deployment" size="big" bind:show headerDivider={false}>
8787
<p class="text">
8888
Deploy your function using the Appwrite CLI by running the following command inside your
8989
function's folder.

‎src/routes/console/project-[project]/functions/function-[function]/createGit.svelte‎

Lines changed: 45 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
export let show = false;
99
</script>
1010

11-
<Modal title="Create git deployment" size="big" bind:show headerDivider={false}>
11+
<Modal title="Create Git deployment" size="big" bind:show headerDivider={false}>
1212
{#if $func.installationId && $func.providerRepositoryId}
1313
<p class="text">
1414
Deploy your function from the Git provider of your choice by following the steps below.
@@ -19,52 +19,50 @@
1919
class="link">documentation</a
2020
>.
2121
</p>
22-
<Box>
23-
<NumericList>
24-
<NumericListItem fullWidth>
25-
<span class="text">Checkout your production branch.</span>
26-
<div class="u-margin-block-start-16">
27-
<Code
28-
language="sh"
29-
withCopy
30-
noMargin
31-
noBoxPadding
32-
code={`git checkout ${$func.providerBranch}`} />
33-
</div>
34-
</NumericListItem>
35-
<NumericListItem fullWidth>
36-
<span class="text"> Add your changes</span>
37-
<div class="u-margin-block-start-16">
38-
<Code language="sh" withCopy noMargin noBoxPadding code={`git add .`} />
39-
</div>
40-
</NumericListItem>
41-
<NumericListItem fullWidth>
42-
<span class="text"> Create a new commit </span>
43-
<div class="u-margin-block-start-16 u-min-width-0 u-grid">
44-
<Code
45-
language="sh"
46-
withCopy
47-
noMargin
48-
noBoxPadding
49-
code={`git commit -m "deploying with Appwrite"`} />
50-
</div>
51-
</NumericListItem>
52-
<NumericListItem fullWidth>
53-
<span class="text"> Push your new commit</span>
54-
<div class="u-margin-block-start-16">
55-
<Code
56-
language="sh"
57-
withCopy
58-
noMargin
59-
noBoxPadding
60-
code={`git push ${$func.providerBranch}`} />
61-
</div>
62-
</NumericListItem>
63-
<NumericListItem>
64-
<span class="text"> A new deployment will be triggered automatically. </span>
65-
</NumericListItem>
66-
</NumericList>
67-
</Box>
22+
<NumericList>
23+
<NumericListItem fullWidth>
24+
<span class="text">Checkout your production branch.</span>
25+
<div class="u-margin-block-start-16">
26+
<Code
27+
language="sh"
28+
withCopy
29+
noMargin
30+
noBoxPadding
31+
code={`git checkout ${$func.providerBranch}`} />
32+
</div>
33+
</NumericListItem>
34+
<NumericListItem fullWidth>
35+
<span class="text"> Add your changes</span>
36+
<div class="u-margin-block-start-16">
37+
<Code language="sh" withCopy noMargin noBoxPadding code={`git add .`} />
38+
</div>
39+
</NumericListItem>
40+
<NumericListItem fullWidth>
41+
<span class="text"> Create a new commit </span>
42+
<div class="u-margin-block-start-16 u-min-width-0 u-grid">
43+
<Code
44+
language="sh"
45+
withCopy
46+
noMargin
47+
noBoxPadding
48+
code={`git commit -m "deploying with Appwrite"`} />
49+
</div>
50+
</NumericListItem>
51+
<NumericListItem fullWidth>
52+
<span class="text"> Push your new commit</span>
53+
<div class="u-margin-block-start-16">
54+
<Code
55+
language="sh"
56+
withCopy
57+
noMargin
58+
noBoxPadding
59+
code={`git push ${$func.providerBranch}`} />
60+
</div>
61+
</NumericListItem>
62+
<NumericListItem>
63+
<span class="text"> A new deployment will be triggered automatically. </span>
64+
</NumericListItem>
65+
</NumericList>
6866
{:else}
6967
<Box>
7068
<div class="u-flex u-gap-16">

‎src/routes/console/project-[project]/functions/function-[function]/createManual.svelte‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
11
<script lang="ts">
2-
import {
3-
InputChoice,
4-
Button,
5-
InputFile,
6-
FormList,
7-
InputTextarea,
8-
InputText
9-
} from '$lib/elements/forms';
2+
import { InputChoice, Button, InputFile, FormList, InputText } from '$lib/elements/forms';
103
import { Alert, Collapsible, CollapsibleItem, Modal } from '$lib/components';
114
import { sdk } from '$lib/stores/sdk';
125
import { createEventDispatcher } from 'svelte';
@@ -55,7 +48,13 @@
5548
}
5649
</script>
5750

58-
<Modal title="Create manual deployment" {error} size="big" bind:show onSubmit={create}>
51+
<Modal
52+
title="Create manual deployment"
53+
{error}
54+
size="big"
55+
bind:show
56+
onSubmit={create}
57+
headerDivider={false}>
5958
<p class="text">
6059
Manually deploy a function by uploading a zip file containing the source code and a relative
6160
path to the entry point.
@@ -66,7 +65,7 @@
6665
class="link">Learn more about function deployments</a
6766
>.
6867
</p>
69-
<FormList>
68+
<FormList gap={16}>
7069
<InputFile
7170
label="Gzipped code (tar.gz)"
7271
allowedFileExtensions={['gz']}
@@ -93,8 +92,12 @@
9392
<CollapsibleItem>
9493
<svelte:fragment slot="title">Build settings</svelte:fragment>
9594
<svelte:fragment slot="subtitle">(optional)</svelte:fragment>
96-
<FormList>
97-
<InputTextarea
95+
<FormList gap={16}>
96+
<p class="text">
97+
Overwrite your function configuration for a single deployment or save
98+
commands for future use.
99+
</p>
100+
<InputText
98101
label="Commands"
99102
placeholder="Enter a build commad (e.g. 'npm install')"
100103
tooltip="Enter a single command or chain multiple commands with the && operator"

‎src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,13 +113,14 @@
113113
<Card>
114114
<div class="u-stretch u-overflow-hidden">
115115
<section class="code-panel">
116-
<header class="code-panel-header u-flex u-main-space-between u-width-full-line">
116+
<header
117+
class="code-panel-header u-flex u-main-space-between u-width-full-line u-flex-wrap u-gap-16">
117118
<div class="u-flex u-flex-vertical">
118119
<h4 class="u-bold">Build {$func.name}</h4>
119120
{#if $deployment.status === 'building'}
120121
<span>Building...</span>
121122
{:else}
122-
{$deployment.status}
123+
<span class="u-capitalize">{$deployment.status}</span>
123124
{/if}
124125
</div>
125126

‎src/routes/console/project-[project]/functions/function-[function]/execute.svelte‎

Lines changed: 61 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -147,66 +147,68 @@
147147
tooltip="Headers should contain alphanumeric characters (a-z, A-Z, and 0-9) and hyphens only (- and _).">
148148
Headers
149149
</Label>
150+
<div class="form u-grid u-gap-8 u-margin-block-start-8">
151+
<FormList>
152+
{#if headers}
153+
{#each headers as [name, value], index}
154+
<FormItem isMultiple>
155+
<InputText
156+
isMultiple
157+
fullWidth
158+
label="Name"
159+
placeholder="Enter Name"
160+
id={`key-${index}`}
161+
bind:value={name} />
162+
<InputText
163+
isMultiple
164+
fullWidth
165+
label="Value"
166+
placeholder="Enter value"
167+
id={`value-${index}`}
168+
bind:value />
169+
<FormItemPart alignEnd>
170+
<Button
171+
text
172+
noMargin
173+
disabled={(!name || !value) && index === 0}
174+
on:click={() => {
175+
if (index === 0) {
176+
headers = [['', '']];
177+
} else {
178+
headers.splice(index, 1);
179+
headers = headers;
180+
}
181+
}}>
182+
<span class="icon-x" aria-hidden="true" />
183+
</Button>
184+
</FormItemPart>
185+
</FormItem>
186+
{/each}
187+
{/if}
188+
</FormList>
189+
<Button
190+
noMargin
191+
text
192+
disabled={headers?.length &&
193+
headers[headers.length - 1][0] &&
194+
headers[headers.length - 1][1]
195+
? false
196+
: true}
197+
on:click={() => {
198+
if (
199+
headers[headers.length - 1][0] &&
200+
headers[headers.length - 1][1]
201+
) {
202+
headers.push(['', '']);
203+
headers = headers;
204+
}
205+
}}>
206+
<span class="icon-plus" aria-hidden="true" />
207+
<span class="text">Add Header</span>
208+
</Button>
209+
</div>
150210
</div>
151-
<div class="form u-grid u-gap-16">
152-
<FormList>
153-
{#if headers}
154-
{#each headers as [name, value], index}
155-
<FormItem isMultiple>
156-
<InputText
157-
isMultiple
158-
fullWidth
159-
label="Name"
160-
placeholder="Enter Name"
161-
id={`key-${index}`}
162-
bind:value={name} />
163-
<InputText
164-
isMultiple
165-
fullWidth
166-
label="Value"
167-
placeholder="Enter value"
168-
id={`value-${index}`}
169-
bind:value />
170-
<FormItemPart alignEnd>
171-
<Button
172-
text
173-
disabled={(!name || !value) && index === 0}
174-
on:click={() => {
175-
if (index === 0) {
176-
headers = [['', '']];
177-
} else {
178-
headers.splice(index, 1);
179-
headers = headers;
180-
}
181-
}}>
182-
<span class="icon-x" aria-hidden="true" />
183-
</Button>
184-
</FormItemPart>
185-
</FormItem>
186-
{/each}
187-
{/if}
188-
</FormList>
189-
<Button
190-
noMargin
191-
text
192-
disabled={headers?.length &&
193-
headers[headers.length - 1][0] &&
194-
headers[headers.length - 1][1]
195-
? false
196-
: true}
197-
on:click={() => {
198-
if (
199-
headers[headers.length - 1][0] &&
200-
headers[headers.length - 1][1]
201-
) {
202-
headers.push(['', '']);
203-
headers = headers;
204-
}
205-
}}>
206-
<span class="icon-plus" aria-hidden="true" />
207-
<span class="text">Add Header</span>
208-
</Button>
209-
</div>
211+
210212
<InputTextarea
211213
label="Body"
212214
placeholder={`{ "myKey": "myValue" }`}

‎src/routes/console/project-[project]/functions/function-[function]/settings/disconnectRepo.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,8 @@
6464
state="warning"
6565
headerDivider={false}>
6666
<p data-private>
67-
Are you sure you want to disconnect {$func.name}? This will affect future deployments to
68-
this function.
67+
Are you sure you want to disconnect <b>{$func.name}</b>? This will affect future deployments
68+
to this function.
6969
</p>
7070
<svelte:fragment slot="footer">
7171
<Button text on:click={() => (show = false)}>Cancel</Button>

0 commit comments

Comments
 (0)