From 663597c3f31592980f018f331fa3297b4605b875 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Mon, 29 Jul 2024 22:23:46 +0200
Subject: [PATCH] style(frontend): Add action dropdown to UpObject banner in
 Inspect column

---
 webui/src/lib/components/Inspect.svelte       | 16 ++--
 .../lib/components/display/UpObject.svelte    | 93 ++++++++++++++++---
 .../layout/HeaderUserDropdown.svelte          |  2 +-
 3 files changed, 90 insertions(+), 21 deletions(-)

diff --git a/webui/src/lib/components/Inspect.svelte b/webui/src/lib/components/Inspect.svelte
index 18a7105..ab6a3c4 100644
--- a/webui/src/lib/components/Inspect.svelte
+++ b/webui/src/lib/components/Inspect.svelte
@@ -405,7 +405,13 @@
 		<h2>
 			{#if $entity}
 				{#key $entity}
-					<UpObject banner {address} on:resolved={onResolved} on:change={onChange} />
+					<UpObject
+						banner
+						{address}
+						on:resolved={onResolved}
+						on:change={onChange}
+						on:delete={deleteObject}
+					/>
 				{/key}
 			{:else}
 				<Spinner centered />
@@ -542,14 +548,6 @@
 			on:click={() => (showAsEntries = !showAsEntries)}
 		/>
 	</div>
-	<IconButton
-		name="trash"
-		outline
-		subdued
-		color="#dc322f"
-		on:click={deleteObject}
-		title={$i18n.t('Delete object') || ''}
-	/>
 </div>
 
 <style lang="scss">
diff --git a/webui/src/lib/components/display/UpObject.svelte b/webui/src/lib/components/display/UpObject.svelte
index 689f7bd..b1d31c9 100644
--- a/webui/src/lib/components/display/UpObject.svelte
+++ b/webui/src/lib/components/display/UpObject.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { createEventDispatcher, getContext } from 'svelte';
-
 	import HashBadge from './HashBadge.svelte';
 	import UpObjectLabel from './UpObjectLabel.svelte';
 	import UpLink from './UpLink.svelte';
@@ -22,8 +21,13 @@
 	import Editable from '$lib/components/utils/Editable.svelte';
 	import type { WidgetChange } from '$lib/types/base';
 	import type { SelectorValue } from '$lib/components/utils/Selector.svelte';
+	import { slide } from 'svelte/transition';
 
-	const dispatch = createEventDispatcher<{ change: WidgetChange; resolved: string[] }>();
+	const dispatch = createEventDispatcher<{
+		change: WidgetChange;
+		resolved: string[];
+		delete: null;
+	}>();
 
 	export let address: string;
 	export let labels: string[] | undefined = undefined;
@@ -55,6 +59,8 @@
 		}
 	}
 
+	let openActions = false;
+
 	// Identification
 	let inferredIds: string[] = [];
 	$: inferredIds = $entity?.identify() || [];
@@ -170,6 +176,12 @@
 	}
 </script>
 
+<svelte:body
+	on:click={() => {
+		openActions = false;
+	}}
+/>
+
 <div
 	class="upobject"
 	class:left-active={address == $addresses[$index - 1]}
@@ -236,15 +248,34 @@
 						<Icon name="download" />
 					</a>
 				</div>
-				{#if $vaultInfo?.desktop && hasFile}
-					<div class="icon">
-						<IconButton
-							name="window-alt"
-							on:click={nativeOpen}
-							title={$i18n.t('Open in default application...') || ''}
-						/>
-					</div>
-				{/if}
+			{/if}
+			<IconButton
+				name="shape-circle"
+				title={$i18n.t('Actions') || ''}
+				on:click={() => (openActions = true)}
+			/>
+			{#if openActions}
+				<ul class="actions" transition:slide>
+					{#if $vaultInfo?.desktop && hasFile}
+						<li>
+							<button on:click={nativeOpen}>
+								<Icon name="window-alt" />
+								{$i18n.t('Open in default application...')}
+							</button>
+						</li>
+						<hr />
+					{/if}
+					<slot name="actions" />
+					{#if $$slots.actions}
+						<hr />
+					{/if}
+					<li>
+						<button on:click={() => dispatch('delete')} style="color: #dc322f">
+							<Icon name="trash" />
+							{$i18n.t('Delete object')}
+						</button>
+					</li>
+				</ul>
 			{/if}
 		{/if}
 	</div>
@@ -418,4 +449,44 @@
 		opacity: 0.7;
 		pointer-events: none;
 	}
+
+	.actions {
+		display: flex;
+		z-index: 99;
+		position: absolute;
+		top: 2.2em;
+		right: 0.2em;
+		flex-direction: column;
+		padding: 0.5em;
+		border: 1px solid var(--foreground);
+		border-radius: 0.2em;
+		background: var(--background);
+		box-shadow: 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.5);
+		font-size: 1rem;
+		list-style: none;
+
+		& li {
+			display: contents;
+		}
+
+		& hr {
+			width: 100%;
+			margin: 0.25em auto;
+			opacity: 0.2;
+		}
+
+		& button {
+			display: block;
+			padding: 0.25em 1em;
+			border: 1px solid transparent;
+			transition:
+				background 0.2s,
+				border-color 0.2s;
+
+			&:hover {
+				border-color: var(--foreground);
+				background: var(--background-lightest);
+			}
+		}
+	}
 </style>
diff --git a/webui/src/lib/components/layout/HeaderUserDropdown.svelte b/webui/src/lib/components/layout/HeaderUserDropdown.svelte
index 852ad33..e52f0b1 100644
--- a/webui/src/lib/components/layout/HeaderUserDropdown.svelte
+++ b/webui/src/lib/components/layout/HeaderUserDropdown.svelte
@@ -95,7 +95,7 @@
 		border-radius: 4px;
 
 		background: var(--background);
-		box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
+		box-shadow: 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.5);
 	}
 
 	.user {