pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use Dialog component for tooltips

Browse Source
This commit is contained in:
Wim Brand
2025-06-12 11:32:56 +02:00
parent dd1a038bca
commit 26a30482ae
3 changed files with 38 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
svelte/src/filesystem/ShareDialog.svelte
View File

@@ -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}
<div class="highlight_green">{toast}</div>
<div class="separator"></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 toast !== ""}
<div class="highlight_green" transition:fade>{toast}</div>
<div class="separator" transition:fade></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>

17
svelte/src/layout/Dialog.svelte
View File

@@ -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 max_left = window.innerWidth - window_rect.width - edge_offset
const max_top = window.innerHeight - window_rect.height - edge_offset
const dialog_rect = dialog.getBoundingClientRect()
const max_left = window.innerWidth - dialog_rect.width - edge_offset
const max_top = window.innerHeight - dialog_rect.height - edge_offset
// Prevent the window from being glued to the edges
const min_left = Math.max(location.left, edge_offset)
const min_top = Math.max(location.bottom, edge_offset)
// Position the dialog in horizontally in the center of the button and
// verticially below it
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"

55
svelte/src/layout/Tooltip.svelte
View File

@@ -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 = () => {
// 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()
}
}
const open = () => dialog.open(button.getBoundingClientRect())
</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 -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<dialog bind:this={dialog} on:click={click}>
<Dialog bind:this={dialog}>
<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;