cupcakearmy/coolify
1
0
Fork 0
mirror of https://github.com/cupcakearmy/coolify.git synced 2024-10-23 08:34:11 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #583 from coollabsio/ui

Browse Source 
UI updates
This commit is contained in:
Andras Bacsai 2022-08-31 15:07:01 +02:00 committed by GitHub
commit be16f76034
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 54 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Dockerfile
View File

@ -21,7 +21,7 @@ ENV PRISMA_QUERY_ENGINE_BINARY=/app/prisma-engines/query-engine \
PRISMA_CLI_QUERY_ENGINE_TYPE=binary \ PRISMA_CLI_QUERY_ENGINE_TYPE=binary \
PRISMA_CLIENT_ENGINE_TYPE=binary PRISMA_CLIENT_ENGINE_TYPE=binary
COPY --from=coollabsio/prisma-engine:4.2.0 /prisma-engines/query-engine /prisma-engines/migration-engine /prisma-engines/introspection-engine /prisma-engines/prisma-fmt /app/prisma-engines/ COPY --from=coollabsio/prisma-engine:3.15 /prisma-engines/query-engine /prisma-engines/migration-engine /prisma-engines/introspection-engine /prisma-engines/prisma-fmt /app/prisma-engines/
RUN apk add --no-cache git git-lfs openssh-client curl jq cmake sqlite openssl psmisc RUN apk add --no-cache git git-lfs openssh-client curl jq cmake sqlite openssl psmisc
RUN curl -sL https://unpkg.com/@pnpm/self-installer | node RUN curl -sL https://unpkg.com/@pnpm/self-installer | node

2
apps/ui/src/lib/components/Setting.svelte
View File

@ -10,7 +10,7 @@
export let loading = false; export let loading = false;
</script> </script>
<div class="flex items-center py-4 pr-8"> <div class="flex items-center py-4 pr-8 max-w-xs">
<div class="flex w-96 flex-col"> <div class="flex w-96 flex-col">
<div class="text-xs font-bold text-stone-100 md:text-base">{title}</div> <div class="text-xs font-bold text-stone-100 md:text-base">{title}</div>
<Explainer text={description} /> <Explainer text={description} />

4
apps/ui/src/routes/__layout.svelte
View File

@ -71,7 +71,7 @@
$appSession.version = baseSettings.version; $appSession.version = baseSettings.version;
$appSession.whiteLabeled = baseSettings.whiteLabeled; $appSession.whiteLabeled = baseSettings.whiteLabeled;
$appSession.whiteLabeledDetails.icon = baseSettings.whiteLabeledIcon; $appSession.whiteLabeledDetails.icon = baseSettings.whiteLabeledIcon;
$appSession.supportedServiceTypesAndVersions = supportedServiceTypesAndVersions $appSession.supportedServiceTypesAndVersions = supportedServiceTypesAndVersions;
export let userId: string; export let userId: string;
export let teamId: string; export let teamId: string;
@ -396,7 +396,7 @@
{/if} {/if}
{/if} {/if}
<main> <main>
<div class="px-20"> <div class="pl-14 lg:px-20">
<slot /> <slot />
</div> </div>
</main> </main>

10
apps/ui/src/routes/destinations/[id]/_LocalDocker.svelte
View File

@ -142,7 +142,7 @@
</script> </script>
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4"> <form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
<div class="flex space-x-1 pb-5"> <div class="grid gap-1 lg:grid-flow-col lg:w-96 w-64">
<div class="title font-bold">{$t('forms.configuration')}</div> <div class="title font-bold">{$t('forms.configuration')}</div>
{#if $appSession.isAdmin} {#if $appSession.isAdmin}
<button <button
@ -162,7 +162,7 @@
> >
{/if} {/if}
</div> </div>
<div class="grid grid-cols-2 items-center px-10 "> <div class="grid lg:grid-cols-2 items-center px-10 ">
<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label> <label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
<input <input
name="name" name="name"
@ -173,7 +173,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid lg:grid-cols-2 items-center px-10">
<label for="engine" class="text-base font-bold text-stone-100">{$t('forms.engine')}</label> <label for="engine" class="text-base font-bold text-stone-100">{$t('forms.engine')}</label>
<CopyPasswordField <CopyPasswordField
id="engine" id="engine"
@ -184,7 +184,7 @@
value={destination.engine} value={destination.engine}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid lg:grid-cols-2 items-center px-10">
<label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label> <label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label>
<CopyPasswordField <CopyPasswordField
id="network" id="network"
@ -196,7 +196,7 @@
/> />
</div> </div>
{#if $appSession.teamId === '0'} {#if $appSession.teamId === '0'}
<div class="grid grid-cols-2 items-center"> <div class="grid lg:grid-cols-2 items-center">
<Setting <Setting
loading={loading.proxy} loading={loading.proxy}
disabled={cannotDisable} disabled={cannotDisable}

38
apps/ui/src/routes/iam/index.svelte
View File

@ -108,24 +108,21 @@
<div class="flex space-x-1 p-6 font-bold"> <div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl tracking-tight">Identity and Access Management</div> <div class="mr-4 text-2xl tracking-tight">Identity and Access Management</div>
<button <button on:click={newTeam} class="btn btn-square btn-sm bg-iam">
on:click={newTeam} <svg
class="btn btn-square btn-sm bg-iam" class="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/></svg
> >
<svg </button>
class="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/></svg
>
</button>
</div> </div>
{#if invitations.length > 0} {#if invitations.length > 0}
@ -170,14 +167,11 @@
<tbody> <tbody>
{#each accounts as account} {#each accounts as account}
<tr> <tr class="grid items-center justify-center gap-2 lg:grid-flow-col">
<td class="px-2">{account.email}</td> <td class="px-2">{account.email}</td>
<td class="flex space-x-2"> <td class="flex space-x-2">
<form on:submit|preventDefault={() => resetPassword(account.id)}> <form on:submit|preventDefault={() => resetPassword(account.id)}>
<button <button class="my-4 btn btn-sm bg-iam">Reset Password</button>
class="my-4 btn btn-sm bg-iam"
>Reset Password</button
>
</form> </form>
<form on:submit|preventDefault={() => deleteUser(account.id)}> <form on:submit|preventDefault={() => deleteUser(account.id)}>
<button <button

46
apps/ui/src/routes/sources/[id]/_Github.svelte
View File

@ -24,7 +24,7 @@
apiUrl: source.apiUrl.replace(/\/$/, '') apiUrl: source.apiUrl.replace(/\/$/, '')
}); });
return addToast({ return addToast({
message:'Configuration saved.', message: 'Configuration saved.',
type: 'success' type: 'success'
}); });
} catch (error) { } catch (error) {
@ -93,7 +93,7 @@
<div class="mx-auto max-w-4xl px-6"> <div class="mx-auto max-w-4xl px-6">
{#if !source.githubAppId} {#if !source.githubAppId}
<form on:submit|preventDefault={newGithubApp} class="py-4"> <form on:submit|preventDefault={newGithubApp} class="py-4">
<div class="flex space-x-1 pb-7"> <div class="grid gap-1 lg:grid-flow-col pb-7">
<div class="title">General</div> <div class="title">General</div>
{#if !source.githubAppId} {#if !source.githubAppId}
<button class="btn btn-sm bg-sources" type="submit">Save & Redirect to GitHub</button> <button class="btn btn-sm bg-sources" type="submit">Save & Redirect to GitHub</button>
@ -101,20 +101,20 @@
</div> </div>
<div class="grid grid-flow-row gap-2 px-10"> <div class="grid grid-flow-row gap-2 px-10">
<div class="grid grid-flow-row gap-2"> <div class="grid grid-flow-row gap-2">
<div class="mt-2 grid grid-cols-2 items-center"> <div class="mt-2 grid lg:grid-cols-2 items-center">
<label for="name" class="text-base font-bold text-stone-100">Name</label> <label for="name" class="text-base font-bold text-stone-100">Name</label>
<input name="name" id="name" required bind:value={source.name} /> <input name="name" id="name" required bind:value={source.name} />
</div> </div>
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid lg:grid-cols-2 items-center">
<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label> <label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
<input name="htmlUrl" id="htmlUrl" required bind:value={source.htmlUrl} /> <input name="htmlUrl" id="htmlUrl" required bind:value={source.htmlUrl} />
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid lg:grid-cols-2 items-center">
<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label> <label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
<input name="apiUrl" id="apiUrl" required bind:value={source.apiUrl} /> <input name="apiUrl" id="apiUrl" required bind:value={source.apiUrl} />
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid lg:grid-cols-2 items-center">
<label for="customPort" class="text-base font-bold text-stone-100">Custom SSH Port</label> <label for="customPort" class="text-base font-bold text-stone-100">Custom SSH Port</label>
<input <input
name="customPort" name="customPort"
@ -128,7 +128,7 @@
text="If you use a self-hosted version of Git, you can provide custom port for all the Git related actions." text="If you use a self-hosted version of Git, you can provide custom port for all the Git related actions."
/> />
</div> </div>
<div class="grid grid-cols-2"> <div class="grid lg:grid-cols-2">
<div class="flex flex-col"> <div class="flex flex-col">
<label for="organization" class="pt-2 text-base font-bold text-stone-100" <label for="organization" class="pt-2 text-base font-bold text-stone-100"
>Organization</label >Organization</label
@ -148,29 +148,29 @@
</form> </form>
{:else if source.githubApp?.installationId} {:else if source.githubApp?.installationId}
<form on:submit|preventDefault={handleSubmit} class="py-4"> <form on:submit|preventDefault={handleSubmit} class="py-4">
<div class="flex space-x-1 pb-5 "> <div class="grid gap-1 lg:grid-flow-col pb-5 ">
<div class="title">{$t('general')}</div> <div class="title">{$t('general')}</div>
{#if $appSession.isAdmin} {#if $appSession.isAdmin}
<button <button class="btn btn-sm bg-sources" type="submit" disabled={loading}
class="btn btn-sm bg-sources" >{loading ? 'Saving...' : 'Save'}</button
type="submit"
disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
> >
<a <a
class="btn btn-sm" class="btn btn-sm"
href={`${source.htmlUrl}/${source.htmlUrl === 'https://github.com' ? 'apps' : 'github-apps'}/${source.githubApp.name}/installations/new`} href={`${source.htmlUrl}/${
source.htmlUrl === 'https://github.com' ? 'apps' : 'github-apps'
}/${source.githubApp.name}/installations/new`}
>{$t('source.change_app_settings', { name: 'GitHub' })}</a >{$t('source.change_app_settings', { name: 'GitHub' })}</a
> >
{/if} {/if}
</div> </div>
<div class="grid grid-flow-row gap-2 px-10"> <div class="grid grid-flow-row gap-2 px-10">
<div class="grid grid-flow-row gap-2"> <div class="grid grid-flow-row gap-2">
<div class="mt-2 grid grid-cols-2 items-center"> <div class="mt-2 grid lg:grid-cols-2 items-center">
<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label> <label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
<input name="name" id="name" required bind:value={source.name} /> <input name="name" id="name" required bind:value={source.name} />
</div> </div>
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid lg:grid-cols-2 items-center">
<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label> <label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
<input <input
name="htmlUrl" name="htmlUrl"
@ -181,7 +181,7 @@
bind:value={source.htmlUrl} bind:value={source.htmlUrl}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid lg:grid-cols-2 items-center">
<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label> <label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
<input <input
name="apiUrl" name="apiUrl"
@ -193,7 +193,7 @@
/> />
</div> </div>
{#if selfHosted} {#if selfHosted}
<div class="grid grid-cols-2 items-center"> <div class="grid lg:grid-cols-2 items-center">
<label for="customPort" class="text-base font-bold text-stone-100" <label for="customPort" class="text-base font-bold text-stone-100"
>Custom SSH Port</label >Custom SSH Port</label
> >
@ -210,7 +210,7 @@
/> />
</div> </div>
{/if} {/if}
<div class="grid grid-cols-2"> <div class="grid lg:grid-cols-2">
<div class="flex flex-col"> <div class="flex flex-col">
<label for="organization" class="pt-2 text-base font-bold text-stone-100" <label for="organization" class="pt-2 text-base font-bold text-stone-100"
>Organization</label >Organization</label
@ -229,10 +229,12 @@
</form> </form>
{:else} {:else}
<div class="text-center"> <div class="text-center">
<a href={`${source.htmlUrl}/${source.htmlUrl === 'https://github.com' ? 'apps' : 'github-apps'}/${source.githubApp.name}/installations/new`}> <a
<button class="box-selection bg-sources text-xl font-bold" href={`${source.htmlUrl}/${
>Install Repositories</button source.htmlUrl === 'https://github.com' ? 'apps' : 'github-apps'
></a }/${source.githubApp.name}/installations/new`}
>
<button class="box-selection bg-sources text-xl font-bold">Install Repositories</button></a
> >
</div> </div>
{/if} {/if}

6
apps/ui/src/tailwind.css
View File

@ -85,7 +85,7 @@ label {
@apply inline-block w-64 text-xs tracking-tight md:text-sm; @apply inline-block w-64 text-xs tracking-tight md:text-sm;
} }
.btn { .btn {
@apply text-white text-base; @apply text-white text-base min-w-fit h-12;
} }
a { a {
@ -196,3 +196,7 @@ .table thead th{
.table *{ .table *{
border: none; border: none;
} }
input {
@apply w-48 lg:w-96;
}