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

fix: tooltip

Browse Source
This commit is contained in:
Andras Bacsai
2022-09-19 12:14:14 +02:00
parent 449548654d
commit 1e1566082f
2 changed files with 26 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { Tooltip } from 'flowbite-svelte'; import { Tooltip } from 'flowbite-svelte';
export let placement = 'bottom'; export let placement = 'bottom';
export let color = 'bg-coolgray-300 font-thin text-left'; export let color = 'bg-coollabs font-thin text-left';
export let triggeredBy = '#tooltip-default'; export let triggeredBy = '#tooltip-default';
</script> </script>

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

@@ -141,8 +141,8 @@
id="dashboard" id="dashboard"
sveltekit:prefetch sveltekit:prefetch
href="/" href="/"
class="icons hover:text-white" class="icons hover:text-pink-500"
class:text-white={$page.url.pathname === '/'} class:text-pink-500={$page.url.pathname === '/'}
class:bg-coolgray-500={$page.url.pathname === '/'} class:bg-coolgray-500={$page.url.pathname === '/'}
class:bg-coolgray-200={!($page.url.pathname === '/')} class:bg-coolgray-200={!($page.url.pathname === '/')}
> >
@@ -168,8 +168,8 @@
id="servers" id="servers"
sveltekit:prefetch sveltekit:prefetch
href="/servers" href="/servers"
class="icons hover:text-white" class="icons hover:text-sky-500"
class:text-white={$page.url.pathname === '/servers'} class:text-sky-500={$page.url.pathname === '/servers'}
class:bg-coolgray-500={$page.url.pathname === '/servers'} class:bg-coolgray-500={$page.url.pathname === '/servers'}
class:bg-coolgray-200={!($page.url.pathname === '/servers')} class:bg-coolgray-200={!($page.url.pathname === '/servers')}
> >
@@ -202,7 +202,7 @@
id="iam" id="iam"
sveltekit:prefetch sveltekit:prefetch
href="/iam" href="/iam"
class="icons bg-coolgray-200" class="icons hover:text-iam"
class:text-iam={$page.url.pathname.startsWith('/iam')} class:text-iam={$page.url.pathname.startsWith('/iam')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/iam')} class:bg-coolgray-500={$page.url.pathname.startsWith('/iam')}
><svg ><svg
@@ -226,7 +226,7 @@
id="settings" id="settings"
sveltekit:prefetch sveltekit:prefetch
href={$appSession.teamId === '0' ? '/settings/global' : '/settings/ssh-keys'} href={$appSession.teamId === '0' ? '/settings/global' : '/settings/ssh-keys'}
class="icons bg-coolgray-200" class="icons hover:text-settings"
class:text-settings={$page.url.pathname.startsWith('/settings')} class:text-settings={$page.url.pathname.startsWith('/settings')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/settings')} class:bg-coolgray-500={$page.url.pathname.startsWith('/settings')}
> >
@@ -248,7 +248,11 @@
</svg> </svg>
</a> </a>
<div id="logout" class="icons bg-coolgray-200 hover:text-error" on:click={logout}> <div
id="logout"
class="icons bg-coolgray-200 hover:text-error cursor-pointer"
on:click={logout}
>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="ml-1 h-8 w-8" class="ml-1 h-8 w-8"
@@ -311,12 +315,10 @@
<ul class="menu bg-coolgray-300 w-60 p-2 space-y-3 pt-4 "> <ul class="menu bg-coolgray-300 w-60 p-2 space-y-3 pt-4 ">
<li> <li>
<a <a
class="no-underline icons hover:text-white" class="no-underline icons hover:text-white hover:bg-pink-500"
sveltekit:prefetch sveltekit:prefetch
href="/" href="/"
class:text-pink-500={$page.url.pathname === '/'} class:bg-pink-500={$page.url.pathname === '/'}
class:bg-coolgray-500={$page.url.pathname === '/'}
class:bg-coolgray-200={!($page.url.pathname === '/')}
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -340,10 +342,10 @@
<li> <li>
<a <a
class="no-underline icons hover:text-white" class="no-underline icons hover:text-white hover:bg-sky-500"
sveltekit:prefetch sveltekit:prefetch
href="/servers" href="/servers"
class:bg-applications={$page.url.pathname.startsWith('/servers')} class:bg-sky-500={$page.url.pathname.startsWith('/servers')}
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -365,7 +367,10 @@
</a> </a>
</li> </li>
<li> <li>
<a class="no-underline icons hover:text-white" href="/iam" class:bg-iam={$page.url.pathname.startsWith('/iam')} <a
class="no-underline icons hover:text-white hover:bg-iam"
href="/iam"
class:bg-iam={$page.url.pathname.startsWith('/iam')}
><svg ><svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@@ -384,11 +389,10 @@
</svg> </svg>
IAM IAM
</a> </a>
<Tooltip triggeredBy="#iam" placement="right" color="bg-iam">IAM</Tooltip>
</li> </li>
<li> <li>
<a <a
class="no-underline icons hover:text-white" class="no-underline icons hover:text-black hover:bg-settings"
href={$appSession.teamId === '0' ? '/settings/global' : '/settings/ssh-keys'} href={$appSession.teamId === '0' ? '/settings/global' : '/settings/ssh-keys'}
class:bg-settings={$page.url.pathname.startsWith('/settings')} class:bg-settings={$page.url.pathname.startsWith('/settings')}
class:text-black={$page.url.pathname.startsWith('/settings')} class:text-black={$page.url.pathname.startsWith('/settings')}
@@ -411,9 +415,6 @@
</svg> </svg>
Settings Settings
</a> </a>
<Tooltip triggeredBy="#settings" placement="right" color="bg-settings text-black"
>Settings</Tooltip
>
</li> </li>
<li> <li>
<div class="no-underline icons hover:bg-error" on:click={logout}> <div class="no-underline icons hover:bg-error" on:click={logout}>
@@ -435,7 +436,6 @@
</svg> </svg>
<div class="-ml-1">Logout</div> <div class="-ml-1">Logout</div>
</div> </div>
<Tooltip triggeredBy="#logout" placement="right" color="bg-red-600">Logout</Tooltip>
</li> </li>
<li class="flex-1 bg-transparent" /> <li class="flex-1 bg-transparent" />
<li class="w-full justify-center"> <li class="w-full justify-center">
@@ -448,3 +448,7 @@
</ul> </ul>
</div> </div>
</div> </div>
<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>