ershisan99/coolify
1
0
Fork 0
mirror of https://github.com/ershisan99/coolify.git synced 2026-01-07 20:52:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui: change tooltips and info boxes

Browse Source
This commit is contained in:
Andras Bacsai
2022-09-01 11:20:22 +02:00
parent e1697848a5
commit f6bb14f7c4
28 changed files with 428 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -196,14 +196,15 @@
/>
</div>
{#if $appSession.teamId === '0'}
<div class="grid lg:grid-cols-2 items-center">
<div class="grid lg:grid-cols-2 items-center px-10">
<Setting
id="changeProxySetting"
loading={loading.proxy}
disabled={cannotDisable}
bind:setting={destination.isCoolifyProxyUsed}
on:click={changeProxySetting}
title={$t('destination.use_coolify_proxy')}
description={`This will install a proxy on the destination to allow you to access your applications and services without any manual configuration. Databases will have their own proxy. <br><br>${
description={`This will install a proxy on the destination to allow you to access your applications and services without any manual configuration.${
cannotDisable
? '<span class="font-bold text-white">You cannot disable this proxy as FQDN is configured for Coolify.</span>'
: ''

11
apps/ui/src/routes/destinations/[id]/_NewLocalDocker.svelte
View File

@@ -33,11 +33,7 @@
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
<div class="flex items-center space-x-2 pb-5">
<div class="title font-bold">{$t('forms.configuration')}</div>
<button
type="submit"
class="btn btn-sm bg-destinations"
class:loading={loading}
disabled={loading}
<button type="submit" class="btn btn-sm bg-destinations" class:loading disabled={loading}
>{loading
? payload.isCoolifyProxyUsed
? $t('destination.new.saving_and_configuring_proxy')
@@ -69,12 +65,13 @@
/>
</div>
{#if $appSession.teamId === '0'}
<div class="grid grid-cols-2 items-center">
<div class="grid grid-cols-2 items-center px-10">
<Setting
id="changeProxySetting"
bind:setting={payload.isCoolifyProxyUsed}
on:click={() => (payload.isCoolifyProxyUsed = !payload.isCoolifyProxyUsed)}
title={$t('destination.use_coolify_proxy')}
description={$t('destination.new.install_proxy')}
description={'This will install a proxy on the destination to allow you to access your applications and services without any manual configuration.'}
/>
</div>
{/if}

13
apps/ui/src/routes/destinations/[id]/_NewRemoteDocker.svelte
View File

@@ -33,18 +33,14 @@
customClass="max-w-[32rem]"
text="Remote Docker Engines are using <span class='text-white font-bold'>SSH</span> to communicate with the remote docker engine.
You need to setup an <span class='text-white font-bold'>SSH key</span> in advance on the server and install Docker.
<br>See <a class='text-white' href='https://docs.coollabs.io/coolify/destinations#remote-docker-engine'>docs</a> for more details."
<br>See <a class='text-white' href='https://docs.coollabs.io/coolify/destinations#remote-docker-engine' target='blank'>docs</a> for more details."
/>
</div>
<div class="flex justify-center px-6 pb-8">
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
<div class="flex items-center space-x-2 pb-5">
<div class="title font-bold">{$t('forms.configuration')}</div>
<button
type="submit"
class="btn btn-sm bg-destinations"
class:loading={loading}
disabled={loading}
<button type="submit" class="btn btn-sm bg-destinations" class:loading disabled={loading}
>{loading
? payload.isCoolifyProxyUsed
? $t('destination.new.saving_and_configuring_proxy')
@@ -97,12 +93,13 @@
bind:value={payload.network}
/>
</div>
<div class="grid grid-cols-2 items-center">
<div class="grid grid-cols-2 items-center px-10">
<Setting
id="isCoolifyProxyUsed"
bind:setting={payload.isCoolifyProxyUsed}
on:click={() => (payload.isCoolifyProxyUsed = !payload.isCoolifyProxyUsed)}
title={$t('destination.use_coolify_proxy')}
description={$t('destination.new.install_proxy')}
description={'This will install a proxy on the destination to allow you to access your applications and services without any manual configuration.'}
/>
</div>
</form>

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

@@ -259,14 +259,15 @@
/></a
>
</div>
<div class="grid grid-cols-2 items-center">
<div class="grid grid-cols-2 items-center px-10">
<Setting
id="changeProxySetting"
disabled={cannotDisable}
loading={loading.proxy}
bind:setting={destination.isCoolifyProxyUsed}
on:click={changeProxySetting}
title={$t('destination.use_coolify_proxy')}
description={`This will install a proxy on the destination to allow you to access your applications and services without any manual configuration. Databases will have their own proxy. <br><br>${
description={`This will install a proxy on the destination to allow you to access your applications and services without any manual configuration.${
cannotDisable
? '<span class="font-bold text-white">You cannot disable this proxy as FQDN is configured for Coolify.</span>'
: ''

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

@@ -40,7 +40,7 @@
}
};
} catch (error) {
console.log(error)
console.log(error);
return handlerNotFoundLoad(error, url);
}
};
@@ -56,12 +56,16 @@
import { errorNotification, handlerNotFoundLoad } from '$lib/common';
import { appSession } from '$lib/store';
import DeleteIcon from '$lib/components/DeleteIcon.svelte';
import Tooltip from '$lib/components/Tooltip.svelte';
const { id } = $page.params;
const isDestinationDeletable = destination?.application.length === 0 && destination?.database.length === 0 && destination?.service.length === 0
const isDestinationDeletable =
destination?.application.length === 0 &&
destination?.database.length === 0 &&
destination?.service.length === 0;
async function deleteDestination(destination: any) {
if (!isDestinationDeletable) return
if (!isDestinationDeletable) return;
const sure = confirm($t('application.confirm_to_delete', { name: destination.name }));
if (sure) {
try {
@@ -74,12 +78,12 @@
}
function deletable() {
if (!isDestinationDeletable) {
return "Please delete all resources before deleting this."
return 'Please delete all resources before deleting this.';
}
if ($appSession.isAdmin) {
return $t('destination.delete_destination')
return $t('destination.delete_destination');
} else {
return $t('destination.permission_denied_delete_destination')
return $t('destination.permission_denied_delete_destination');
}
}
</script>
@@ -87,14 +91,15 @@
{#if id !== 'new'}
<nav class="nav-side">
<button
id="delete"
on:click={() => deleteDestination(destination)}
type="submit"
disabled={!$appSession.isAdmin && isDestinationDeletable}
class:hover:text-red-500={$appSession.isAdmin && isDestinationDeletable}
class="icons tooltip tooltip-primary tooltip-left bg-transparent text-sm"
class:text-stone-600={!isDestinationDeletable}
data-tip={deletable()}><DeleteIcon /></button
class="icons bg-transparent text-sm"
class:text-stone-600={!isDestinationDeletable}><DeleteIcon /></button
>
</nav>
<Tooltip triggeredBy="#delete">{deletable()}</Tooltip>
{/if}
<slot />