dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 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

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

@@ -88,6 +88,7 @@
import { errorNotification } from '$lib/common';
import { appSession } from '$lib/store';
import Toasts from '$lib/components/Toasts.svelte';
import Tooltip from '$lib/components/Tooltip.svelte';
if (userId) $appSession.userId = userId;
if (teamId) $appSession.teamId = teamId;
@@ -132,12 +133,12 @@
{/if}
<div class="flex flex-col space-y-2 py-2" class:mt-2={$appSession.whiteLabeled}>
<a
id="dashboard"
sveltekit:prefetch
href="/"
class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200 hover:text-white"
class="icons bg-coolgray-200 hover:text-white"
class:text-white={$page.url.pathname === '/'}
class:bg-coolgray-500={$page.url.pathname === '/'}
data-tip="Dashboard"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -156,12 +157,13 @@
<path d="M16 15c-2.21 1.333 -5.792 1.333 -8 0" />
</svg>
</a>
<div class="border-t border-stone-700" />
<div class="border-t border-stone-700" />
<a
id="applications"
sveltekit:prefetch
href="/applications"
class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
class="icons bg-coolgray-200"
class:text-applications={$page.url.pathname.startsWith('/applications') ||
$page.url.pathname.startsWith('/new/application')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/applications') ||
@@ -186,10 +188,12 @@
<line x1="17" y1="4" x2="17" y2="10" />
</svg>
</a>
<a
id="sources"
sveltekit:prefetch
href="/sources"
class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
class="icons bg-coolgray-200"
class:text-sources={$page.url.pathname.startsWith('/sources') ||
$page.url.pathname.startsWith('/new/source')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/sources') ||
@@ -216,9 +220,10 @@
</svg>
</a>
<a
id="destinations"
sveltekit:prefetch
href="/destinations"
class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
class="icons bg-coolgray-200"
class:text-destinations={$page.url.pathname.startsWith('/destinations') ||
$page.url.pathname.startsWith('/new/destination')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/destinations') ||
@@ -251,9 +256,10 @@
</a>
<div class="border-t border-stone-700" />
<a
id="databases"
sveltekit:prefetch
href="/databases"
class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
class="icons bg-coolgray-200"
class:text-databases={$page.url.pathname.startsWith('/databases') ||
$page.url.pathname.startsWith('/new/database')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/databases') ||
@@ -277,9 +283,10 @@
</svg>
</a>
<a
id="services"
sveltekit:prefetch
href="/services"
class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
class="icons bg-coolgray-200"
class:text-services={$page.url.pathname.startsWith('/services') ||
$page.url.pathname.startsWith('/new/service')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/services') ||
@@ -306,9 +313,10 @@
<UpdateAvailable />
<div class="flex flex-col space-y-2 py-2">
<a
id="iam"
sveltekit:prefetch
href="/iam"
class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
class="icons bg-coolgray-200"
class:text-iam={$page.url.pathname.startsWith('/iam')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/iam')}
data-tip="IAM"
@@ -330,9 +338,10 @@
</svg>
</a>
<a
id="settings"
sveltekit:prefetch
href={$appSession.teamId === '0' ? '/settings/global' : '/settings/ssh-keys'}
class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
class="icons bg-coolgray-200"
class:text-settings={$page.url.pathname.startsWith('/settings')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/settings')}
data-tip="Settings"
@@ -356,7 +365,8 @@
</a>
<div
class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200 hover:text-error"
id="logout"
class="icons bg-coolgray-200 hover:text-error"
data-tip="Logout"
on:click={logout}
>
@@ -400,3 +410,16 @@
<slot />
</div>
</main>
<Tooltip triggeredBy="#dashboard" placement="right">Dashboard</Tooltip>
<Tooltip triggeredBy="#applications" placement="right" color="bg-applications">Applications</Tooltip
>
<Tooltip triggeredBy="#sources" placement="right" color="bg-sources">Git Sources</Tooltip>
<Tooltip triggeredBy="#destinations" placement="right" color="bg-destinations">Destinations</Tooltip
>
<Tooltip triggeredBy="#databases" placement="right" color="bg-databases">Databases</Tooltip>
<Tooltip triggeredBy="#services" placement="right" color="bg-services">Services</Tooltip>
<Tooltip triggeredBy="#iam" placement="right" color="bg-iam">IAM</Tooltip>
<Tooltip triggeredBy="#settings" placement="right" color="bg-settings text-black">Settings</Tooltip
>
<Tooltip triggeredBy="#logout" placement="right" color="bg-red-600">Logout</Tooltip>