dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

ui: improvements

Browse Source
This commit is contained in:
Andras Bacsai
2022-09-20 15:06:33 +02:00
parent 7949bbe66d
commit 18a95bf9ab
7 changed files with 44 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/ui/src/routes/databases/[id]/_Databases/_Databases.svelte
View File

@@ -121,7 +121,7 @@
> >
{/if} {/if}
</div> </div>
<div class="grid gap-4 grid-cols-2 auto-rows-max lg:px-10 px-2"> <div class="grid gap-2 grid-cols-2 auto-rows-max lg:px-10 px-2">
<label for="name">{$t('forms.name')}</label> <label for="name">{$t('forms.name')}</label>
<input <input
class="w-full" class="w-full"
@@ -225,7 +225,7 @@
<div class="flex space-x-1 pb-5 font-bold"> <div class="flex space-x-1 pb-5 font-bold">
<h1 class="title">{$t('application.features')}</h1> <h1 class="title">{$t('application.features')}</h1>
</div> </div>
<div class="grid gap-4 grid-cols-2 auto-rows-max lg:px-10 px-2"> <div class="grid gap-2 grid-cols-2 auto-rows-max lg:px-10 px-2">
<Setting <Setting
id="isPublic" id="isPublic"
loading={publicLoading} loading={publicLoading}

17
apps/ui/src/routes/destinations/[id]/_Destination.svelte
View File

@@ -1,25 +1,14 @@
<script lang="ts"> <script lang="ts">
export let destination: any; export let destination: any;
export let settings: any; export let settings: any;
export let state: any;
import LocalDocker from './_LocalDocker.svelte'; import LocalDocker from './_LocalDocker.svelte';
import RemoteDocker from './_RemoteDocker.svelte'; import RemoteDocker from './_RemoteDocker.svelte';
</script> </script>
<div class="flex h-20 items-center space-x-2 p-5 px-6 font-bold">
<div class="-mb-5 flex-col">
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
Configuration
</div>
<span class="text-xs">{destination.name}</span>
</div>
</div>
<div class="mx-auto max-w-6xl px-6"> <div class="mx-auto max-w-6xl px-6">
{#if destination.remoteEngine} {#if destination.remoteEngine}
<RemoteDocker bind:destination {settings} {state} /> <RemoteDocker bind:destination {settings} />
{:else} {:else}
<LocalDocker bind:destination {settings} {state} /> <LocalDocker bind:destination {settings} />
{/if} {/if}
</div> </div>

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

@@ -142,24 +142,24 @@
</script> </script>
<form on:submit|preventDefault={handleSubmit} class="py-4"> <form on:submit|preventDefault={handleSubmit} class="py-4">
<div class="grid gap-4 grid-cols-2 grid-rows-1"> <div class="flex space-x-2">
<button <button
type="submit" type="submit"
class="btn btn-sm w-full" class="btn btn-sm"
class:bg-destinations={!loading.save} class:bg-destinations={!loading.save}
class:loading={loading.save} class:loading={loading.save}
disabled={loading.save} disabled={loading.save}
>{$t('forms.save')} >{$t('forms.save')}
</button> </button>
<button <button
class="btn btn-sm w-full" class="btn btn-sm"
class:loading={loading.restart} class:loading={loading.restart}
class:bg-error={!loading.restart} class:bg-error={!loading.restart}
disabled={loading.restart} disabled={loading.restart}
on:click|preventDefault={forceRestartProxy}>{$t('destination.force_restart_proxy')}</button on:click|preventDefault={forceRestartProxy}>{$t('destination.force_restart_proxy')}</button
> >
</div> </div>
<div class="grid gap-4 grid-cols-2 auto-rows-max mt-10 items-center"> <div class="grid gap-2 grid-cols-2 auto-rows-max mt-10 items-center">
<label for="name" class="text-base font-bold text-stone-100 w-full">{$t('forms.name')}</label> <label for="name" class="text-base font-bold text-stone-100 w-full">{$t('forms.name')}</label>
<input <input
class="w-full" class="w-full"

1
apps/ui/src/routes/destinations/[id]/_RemoteDocker.svelte
View File

@@ -166,7 +166,6 @@
<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="flex space-x-1 pb-5">
<div class="title font-bold">{$t('forms.configuration')}</div>
{#if $appSession.isAdmin} {#if $appSession.isAdmin}
<button <button
type="submit" type="submit"

30
apps/ui/src/routes/destinations/[id]/__layout.svelte
View File

@@ -88,17 +88,25 @@
</script> </script>
{#if $page.params.id !== 'new'} {#if $page.params.id !== 'new'}
<nav class="nav-side"> <nav class="header lg:flex-row flex-col-reverse">
<button <div class="flex flex-row space-x-2 font-bold pt-10 lg:pt-0">
id="delete" <div class="flex flex-col items-center justify-center">
on:click={() => deleteDestination(destination)} <div class="title">Configurations</div>
type="submit" </div>
disabled={!$appSession.isAdmin && isDestinationDeletable} </div>
class:hover:text-red-500={$appSession.isAdmin && isDestinationDeletable} <div class="lg:block hidden flex-1" />
class="icons bg-transparent text-sm" <div class="flex flex-row flex-wrap space-x-3 justify-center lg:justify-start lg:py-0">
class:text-stone-600={!isDestinationDeletable}><DeleteIcon /></button <button
> id="delete"
on:click={() => deleteDestination(destination)}
type="submit"
disabled={!$appSession.isAdmin && isDestinationDeletable}
class:hover:text-red-500={$appSession.isAdmin && isDestinationDeletable}
class="icons bg-transparent text-sm"
class:text-stone-600={!isDestinationDeletable}><DeleteIcon /></button
>
<Tooltip triggeredBy="#delete">{deletable()}</Tooltip>
</div>
</nav> </nav>
<Tooltip triggeredBy="#delete">{deletable()}</Tooltip>
{/if} {/if}
<slot /> <slot />

27
apps/ui/src/routes/services/[id]/_Services/_Services.svelte
View File

@@ -260,7 +260,7 @@
</div> </div>
{/if} {/if}
<div class="grid gap-4 grid-cols-1 grid-rows-1 lg:px-10 px-2"> <div class="grid gap-2 grid-cols-1 grid-rows-1 lg:px-10 px-2">
<div class="mt-2 grid grid-cols-2 items-center"> <div class="mt-2 grid grid-cols-2 items-center">
<label for="name">{$t('forms.name')}</label> <label for="name">{$t('forms.name')}</label>
<input name="name" id="name" class="w-full" bind:value={service.name} required /> <input name="name" id="name" class="w-full" bind:value={service.name} required />
@@ -383,7 +383,18 @@
</div> </div>
{/if} {/if}
<div class="grid grid-flow-row gap-2 lg:px-10 px-2 pt-4"> <div class="grid grid-flow-row gap-2 lg:px-10 px-2 pt-2">
<div class="grid grid-cols-2 items-center">
<Setting
id="dualCerts"
disabled={$status.service.isRunning}
dataTooltip={$t('forms.must_be_stopped_to_modify')}
bind:setting={dualCerts}
title={$t('application.ssl_www_and_non_www')}
description={$t('services.generate_www_non_www_ssl')}
on:click={() => !$status.service.isRunning && changeSettings('dualCerts')}
/>
</div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="exposePort" <label for="exposePort"
>Exposed Port <Explainer >Exposed Port <Explainer
@@ -402,17 +413,7 @@
placeholder="12345" placeholder="12345"
/> />
</div> </div>
<div class="grid grid-cols-2 items-center">
<Setting
id="dualCerts"
disabled={$status.service.isRunning}
dataTooltip={$t('forms.must_be_stopped_to_modify')}
bind:setting={dualCerts}
title={$t('application.ssl_www_and_non_www')}
description={$t('services.generate_www_non_www_ssl')}
on:click={() => !$status.service.isRunning && changeSettings('dualCerts')}
/>
</div>
</div> </div>
{#if service.type === 'plausibleanalytics'} {#if service.type === 'plausibleanalytics'}
<PlausibleAnalytics bind:service {readOnly} /> <PlausibleAnalytics bind:service {readOnly} />

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

@@ -103,7 +103,7 @@
</div> </div>
{/if} {/if}
</div> </div>
<div class="grid gap-4 grid-cols-2 auto-rows-max"> <div class="grid gap-2 grid-cols-2 auto-rows-max">
<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 class="w-full" name="name" id="name" required bind:value={source.name} /> <input class="w-full" name="name" id="name" required bind:value={source.name} />
<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>
@@ -158,7 +158,7 @@
</div> </div>
{/if} {/if}
</div> </div>
<div class="grid gap-4 grid-cols-2 auto-rows-max mt-4"> <div class="grid gap-2 grid-cols-2 auto-rows-max mt-4">
<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 class="w-full" name="name" id="name" required bind:value={source.name} /> <input class="w-full" name="name" id="name" required bind:value={source.name} />
<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>