From f4a2d5c65254eb267579f3c5ee896de9955fdd5a Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@protonmail.com>
Date: Mon, 19 Sep 2022 14:01:48 +0000
Subject: [PATCH] ui: dropdown as infobox

---
 apps/ui/src/lib/components/Explainer.svelte   | 30 +++++++++++++------
 .../routes/applications/[id]/storages.svelte  |  3 +-
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/apps/ui/src/lib/components/Explainer.svelte b/apps/ui/src/lib/components/Explainer.svelte
index 7339289fa..f504798e1 100644
--- a/apps/ui/src/lib/components/Explainer.svelte
+++ b/apps/ui/src/lib/components/Explainer.svelte
@@ -1,16 +1,28 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	// import { onMount } from 'svelte';
 
-	import Tooltip from './Tooltip.svelte';
+	// import Tooltip from './Tooltip.svelte';
 	export let explanation = '';
-	let id: any;
-	let self: any;
-	onMount(() => {
-		id = `info-${self.offsetLeft}-${self.offsetTop}`;
-	});
+	export let position = 'dropdown-right'
+	// let id: any;
+	// let self: any;
+	// onMount(() => {
+	// 	id = `info-${self.offsetLeft}-${self.offsetTop}`;
+	// });
 </script>
 
-<div {id} class="inline-block mx-2 cursor-pointer" bind:this={self}>
+<div class={`dropdown dropdown-end ${position}`}>
+	<label tabindex="0" class="btn btn-circle btn-ghost btn-xs text-sky-500">
+	  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+	</label>
+	<div tabindex="0" class="card compact dropdown-content shadow bg-coolgray-400 rounded w-64">
+	  <div class="card-body">
+		<!-- <h2 class="card-title">You needed more info?</h2>  -->
+		<p class="text-xs font-normal">{@html explanation}</p>
+	  </div>
+	</div>
+  </div>
+<!-- <div {id} class="inline-block mx-2 cursor-pointer" bind:this={self}>
 	<svg
 		fill="none"
 		height="14"
@@ -28,4 +40,4 @@
 </div>
 {#if id}
 	<Tooltip triggeredBy={`#${id}`}>{@html explanation}</Tooltip>
-{/if}
+{/if} -->
diff --git a/apps/ui/src/routes/applications/[id]/storages.svelte b/apps/ui/src/routes/applications/[id]/storages.svelte
index 62cd116f0..2433ec7d6 100644
--- a/apps/ui/src/routes/applications/[id]/storages.svelte
+++ b/apps/ui/src/routes/applications/[id]/storages.svelte
@@ -33,11 +33,10 @@
 </script>
 
 <div class="mx-auto max-w-6xl rounded-xl px-6 pt-4">
-
 	<table class="mx-auto border-separate text-left">
 		<thead>
 			<tr class="h-12">
-				<th scope="col">{$t('forms.path')} <Explainer explanation={$t('application.storage.persistent_storage_explainer')} /></th>
+				<th scope="col">{$t('forms.path')} <Explainer position="dropdown-bottom" explanation={$t('application.storage.persistent_storage_explainer')} /></th>
 			</tr>
 		</thead>
 		<tbody>