From f9002604fecea910d17a0599014fb024a9146599 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Fri, 5 Apr 2024 23:31:39 +0200
Subject: [PATCH] style(webui): link UpObject can be clicked whole

also slight refactor on UpObject especially banner and button sizing fixes
---
 .../lib/components/display/UpObject.svelte    | 49 ++++++++-----------
 .../components/display/UpObjectLabel.svelte   |  3 +-
 .../lib/components/utils/IconButton.svelte    |  1 +
 webui/src/stories/UpObject.stories.ts         | 13 +++++
 4 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/webui/src/lib/components/display/UpObject.svelte b/webui/src/lib/components/display/UpObject.svelte
index c501d2f..35f5cac 100644
--- a/webui/src/lib/components/display/UpObject.svelte
+++ b/webui/src/lib/components/display/UpObject.svelte
@@ -191,24 +191,17 @@
 		{/if}
 		<HashBadge {address} />
 		<div class="label" class:resolving title={displayLabel}>
-			<Editable
-				value={{ t: 'String', c: displayLabel }}
-				editable={banner}
-				types={['String']}
-				on:edit={onLabelEdit}
-			>
-				<div class="label-inner">
-					{#if banner && hasFile}
-						<UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
-					{:else if link}
-						<UpLink to={{ entity: address }}>
-							<UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
-						</UpLink>
-					{:else}
-						<UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
-					{/if}
-				</div>
-			</Editable>
+			{#if banner && !link}
+				<Editable value={{ t: 'String', c: displayLabel }} types={['String']} on:edit={onLabelEdit}>
+					<UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
+				</Editable>
+			{:else if link}
+				<UpLink passthrough to={{ entity: address }}>
+					<UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
+				</UpLink>
+			{:else}
+				<UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
+			{/if}
 			{#if $entity?.get(ATTR_KEY) && !$entity?.get(ATTR_KEY)?.toString()?.startsWith('TYPE_')}
 				<div class="key">{$entity.get(ATTR_KEY)}</div>
 			{/if}
@@ -314,10 +307,17 @@
 		}
 
 		.label {
+			flex-grow: 1;
+			min-width: 0;
+
 			display: flex;
 			flex-wrap: wrap;
 			align-items: baseline;
 			margin-left: 0.25em;
+
+			:global(a) {
+				text-decoration: none;
+			}
 		}
 
 		.label-inner {
@@ -351,8 +351,7 @@
 		}
 
 		&:not(.banner) .key {
-			flex-grow: 1;
-			text-align: right;
+			display: inline-block;
 		}
 
 		&.show-type .secondary,
@@ -384,15 +383,6 @@
 		}
 	}
 
-	.label {
-		flex-grow: 1;
-		min-width: 0;
-
-		:global(a) {
-			text-decoration: none;
-		}
-	}
-
 	.icon {
 		margin: 0 0.1em;
 	}
@@ -402,6 +392,7 @@
 	}
 
 	.link-button {
+		padding: 0.25em;
 		opacity: 0.66;
 		transition:
 			opacity 0.2s,
diff --git a/webui/src/lib/components/display/UpObjectLabel.svelte b/webui/src/lib/components/display/UpObjectLabel.svelte
index 47bb547..089d660 100644
--- a/webui/src/lib/components/display/UpObjectLabel.svelte
+++ b/webui/src/lib/components/display/UpObjectLabel.svelte
@@ -24,7 +24,8 @@
 
 <style lang="scss">
 	.upobject-label {
-		max-width: 100%;
+		flex-grow: 1;
+		min-width: 0;
 	}
 
 	.backpath {
diff --git a/webui/src/lib/components/utils/IconButton.svelte b/webui/src/lib/components/utils/IconButton.svelte
index 7166a9c..375f588 100644
--- a/webui/src/lib/components/utils/IconButton.svelte
+++ b/webui/src/lib/components/utils/IconButton.svelte
@@ -35,6 +35,7 @@
 		flex-direction: column;
 		align-items: center;
 
+		padding: 0.25em;
 		border: 0;
 		background: transparent;
 		cursor: pointer;
diff --git a/webui/src/stories/UpObject.stories.ts b/webui/src/stories/UpObject.stories.ts
index 504dab9..2c4f988 100644
--- a/webui/src/stories/UpObject.stories.ts
+++ b/webui/src/stories/UpObject.stories.ts
@@ -42,6 +42,12 @@ export const Link: Story = {
 	}
 };
 
+export const Keyed: Story = {
+	args: {
+		address: 'zb2rhmpmTFPxdhaxTQg5Ug3KHFU8DZNUPh8TaPY2v8UQVJbQk'
+	}
+};
+
 export const Banner: Story = {
 	args: {
 		banner: true
@@ -55,6 +61,13 @@ export const BannerWithLabels: Story = {
 	}
 };
 
+export const KeyedBanner: Story = {
+	args: {
+		address: 'zb2rhmpmTFPxdhaxTQg5Ug3KHFU8DZNUPh8TaPY2v8UQVJbQk',
+		banner: true
+	}
+};
+
 export const Overflow: Story = {
 	args: {
 		labels: ['qwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnm'.repeat(3)]