Use Dialog component for tooltips

svelte/src/filesystem/ShareDialog.svelte

@@ -4,6 +4,7 @@ import { fs_node_icon, fs_share_hotlink_url, fs_share_url, fs_update, type FSNod
 import { copy_text } from "util/Util.svelte";
 import CopyButton from "layout/CopyButton.svelte";
 import Dialog from "layout/Dialog.svelte";
+import { fade } from "svelte/transition";
 
 export let nav: FSNavigator
 
@@ -79,24 +80,9 @@ const share = async () => {
 
 <Dialog bind:this={dialog}>
 	<div class="dialog_inner">
-		{#if toast !== "" && !is_parent}
+		{#if toast !== ""}
-			<div class="highlight_green">{toast}</div>
+			<div class="highlight_green" transition:fade>{toast}</div>
-			<div class="separator"></div>
+			<div class="separator" transition:fade></div>
-		{/if}
-
-		{#if is_parent}
-			<div>
-				By sharing this link you also share the parent directory:
-				<img src={fs_node_icon(parent_node, 64, 64)} class="node_icon" alt="icon"/>
-				{parent_node.name}
-				<br/>
-				<button on:click={async e => {await make_public(); await share()}}>
-					Click here to only share
-					<img src={fs_node_icon(base, 64, 64)} class="node_icon" alt="icon"/>
-					{base.name}
-				</button>
-			</div>
-			<div class="separator"></div>
 		{/if}
 
 		<div>Sharing link</div>
@@ -114,6 +100,21 @@ const share = async () => {
 			</div>
 			<a href="{direct_share_url}">{direct_share_url}</a>
 		</div>
+
+		{#if is_parent}
+			<div class="separator"></div>
+			<div>
+				This link also gives access to
+				<img src={fs_node_icon(parent_node, 64, 64)} class="node_icon" alt="icon"/>
+				{parent_node.name}
+				<br/>
+				<button on:click={async e => {await make_public(); await share()}} style="display: inline;">
+					Only share
+					<img src={fs_node_icon(base, 64, 64)} class="node_icon" alt="icon"/>
+					{base.name}
+				</button>
+			</div>
+		{/if}
 	</div>
 </Dialog>
 
@@ -122,6 +123,7 @@ const share = async () => {
 	display: flex;
 	flex-direction: column;
 	text-align: center;
+	max-width: 40em;
 }
 .link_copy {
 	display: flex;
@@ -147,6 +149,7 @@ const share = async () => {
 	height: 1px;
 	border: none;
 	background-color: var(--separator);
-	margin: 0.5em;
+	margin-top: 0.5em;
+	margin-bottom: 0.5em;
 }
 </style>

svelte/src/layout/Dialog.svelte

@@ -1,20 +1,21 @@
 <script lang="ts">
 let dialog: HTMLDialogElement
 
-export const open = (location: DOMRect) => {
+export const open = (button_rect: DOMRect) => {
 	// Show the window so we can get the location
 	dialog.showModal()
 
-	const edge_offset = 5
+	const edge_offset = 2
 
 	// Get the egdes of the screen, so the window does not spawn off-screen
-	const window_rect = dialog.getBoundingClientRect()
+	const dialog_rect = dialog.getBoundingClientRect()
-	const max_left = window.innerWidth - window_rect.width - edge_offset
+	const max_left = window.innerWidth - dialog_rect.width - edge_offset
-	const max_top = window.innerHeight - window_rect.height - edge_offset
+	const max_top = window.innerHeight - dialog_rect.height - edge_offset
 
-	// Prevent the window from being glued to the edges
+	// Position the dialog in horizontally in the center of the button and
-	const min_left = Math.max(location.left, edge_offset)
+	// verticially below it
-	const min_top = Math.max(location.bottom, edge_offset)
+	const min_left = Math.max((button_rect.left + (button_rect.width/2)) - (dialog_rect.width/2), edge_offset)
+	const min_top = Math.max(button_rect.bottom, edge_offset)
 
 	// Place the window
 	dialog.style.left = Math.round(Math.min(min_left, max_left)) + "px"

svelte/src/layout/Tooltip.svelte

@@ -1,68 +1,27 @@
 <script lang="ts">
+import Dialog from "./Dialog.svelte";
+
 let button: HTMLButtonElement
-let dialog: HTMLDialogElement
+let dialog: Dialog
 
-export let style = ""
+const open = () => dialog.open(button.getBoundingClientRect())
-
-const open = () => {
-	// Show the window so we can get the location
-	dialog.showModal()
-
-	const edge_offset = 5
-
-	// Get the egdes of the screen, so the window does not spawn off-screen
-	const window_rect = dialog.getBoundingClientRect()
-	const max_left = window.innerWidth - window_rect.width - edge_offset
-	const max_top = window.innerHeight - window_rect.height - edge_offset
-
-	// Get the location of the button
-	const button_rect = button.getBoundingClientRect()
-
-	// Prevent the window from being glued to the edges
-	const min_left = Math.max((button_rect.left + (button_rect.width/2)) - (window_rect.width/2), edge_offset)
-	const min_top = Math.max(button_rect.bottom, edge_offset)
-
-	// Place the window
-	dialog.style.left = Math.round(Math.min(min_left, max_left)) + "px"
-	dialog.style.top = Math.round(Math.min(min_top, max_top)) + "px"
-}
-
-// Close the dialog when the user clicks the background
-const click = (e: Event) => {
-	if (e.target === dialog) {
-		dialog.close()
-	}
-}
 </script>
 
-<button bind:this={button} on:click={open} class="button round" style={style}>
+<button bind:this={button} on:click={open} class="button round">
 	<i class="icon">info</i><slot name="label"></slot>
 </button>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
+<Dialog bind:this={dialog}>
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<dialog bind:this={dialog} on:click={click}>
 	<div class="menu">
 		<slot></slot>
 	</div>
-</dialog>
+</Dialog>
 
 <style>
 .button {
 	flex: 0 0 content;
 	box-shadow: none;
 }
-
-dialog {
-	text-align: initial;
-	background-color: var(--card_color);
-	color: var(--body_text_color);
-	border-radius: 8px;
-	border: none;
-	padding: 0.5em;
-	margin: 0;
-	box-shadow: 2px 2px 10px var(--shadow_color);
-}
 .menu {
 	display: flex;
 	flex-direction: column;