Move icons into IconButtonWrapper (#9261)

* * update icon buttons * add image editor specific icon button * tweak hover * margin tweak * add changeset * improve gr.Video button UI * radius tweak * ensure even spacing * fix typechecks * add changeset * revert irrelevant changes * typefix * fix image editor buttons * fix download link icon * disable undo if no change events dispatched in model3d and video * use icons with iconbuttonwrapper * add iconbuttonwrapper around gallery share btn * Revert "add iconbuttonwrapper around gallery share btn" This reverts commit 4605302. * add changeset * design fixes * add changeset * move status tracker progress to bottom of component * add changeset * use iconbutton for like/dislike * fix lint error * fix type errors * type errors * fix test * revert undo icon change * btn spacing --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
gradio-app · Sep 16, 2024 · e57f086 · e57f086
1 parent f7f7885
commit e57f086
Show file tree

Hide file tree

Showing 13 changed files with 145 additions and 279 deletions.
diff --git a/.changeset/every-breads-float.md b/.changeset/every-breads-float.md
@@ -0,0 +1,9 @@
+---
+"@gradio/atoms": minor
+"@gradio/chatbot": minor
+"@gradio/icons": minor
+"@gradio/statustracker": minor
+"gradio": minor
+---
+
+feat:Move icons into `IconButtonWrapper`
diff --git a/js/atoms/src/IconButton.svelte b/js/atoms/src/IconButton.svelte
@@ -34,7 +34,6 @@
 		class:large={size === "large"}
 		class:medium={size === "medium"}
 	>
-		<!-- handles icon reactivity -->
 		<svelte:component this={Icon} />
 	</div>
 </button>
@@ -49,6 +48,7 @@
 		border-radius: var(--radius-xs);
 		color: var(--block-label-text-color);
 		border: 1px solid transparent;
+		padding: var(--spacing-xxs);
 	}
 
 	button:hover {
@@ -84,9 +84,9 @@
 	}
 
 	div {
-		padding: 2px;
 		display: flex;
-		align-items: flex-end;
+		align-items: center;
+		justify-content: center;
 		transition: filter 0.2s ease-in-out;
 	}
 

diff --git a/js/atoms/src/IconButtonWrapper.svelte b/js/atoms/src/IconButtonWrapper.svelte
@@ -1,14 +1,17 @@
-<div class="icon-button-wrapper">
+<script>
+	export let top_panel = true;
+</script>
+
+<div class={`icon-button-wrapper ${top_panel ? "top-panel" : ""}`}>
 	<slot></slot>
 </div>
 
 <style>
 	.icon-button-wrapper {
-		position: absolute;
 		display: flex;
 		flex-direction: row;
-		top: var(--block-label-margin);
-		right: var(--block-label-margin);
+		align-items: center;
+		justify-content: center;
 		z-index: var(--layer-2);
 		gap: var(--spacing-sm);
 		box-shadow: var(--shadow-drop);
@@ -20,6 +23,18 @@
 		padding: var(--spacing-xxs);
 	}
 
+	.icon-button-wrapper:not(.top-panel) {
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-sm);
+	}
+
+	.top-panel {
+		position: absolute;
+		top: var(--block-label-margin);
+		right: var(--block-label-margin);
+		margin: 0;
+	}
+
 	.icon-button-wrapper :global(button) {
 		margin: var(--spacing-xxs);
 		border-radius: var(--radius-xs);
@@ -35,14 +50,10 @@
 	.icon-button-wrapper :global(button:not(:last-child)::after) {
 		content: "";
 		position: absolute;
-		right: -5px;
+		right: -4.5px;
 		top: 15%;
 		height: 70%;
 		width: 1px;
 		background-color: var(--border-color-primary);
 	}
-
-	.icon-button-wrapper :global(a.download-link:not(:last-child)::after) {
-		right: -3px;
-	}
 </style>
diff --git a/js/chatbot/Index.svelte b/js/chatbot/Index.svelte
@@ -156,4 +156,8 @@
 		width: 100%;
 		height: 100%;
 	}
+
+	:global(.progress-text) {
+		right: auto;
+	}
 </style>
diff --git a/js/chatbot/shared/ActionButton.svelte b/js/chatbot/shared/ActionButton.svelte
diff --git a/js/chatbot/shared/ButtonPanel.svelte b/js/chatbot/shared/ButtonPanel.svelte
@@ -6,9 +6,8 @@
 	import { DownloadLink } from "@gradio/wasm/svelte";
 	import type { NormalisedMessage, TextMessage } from "../types";
 	import { is_component_message } from "./utils";
-	import ActionButton from "./ActionButton.svelte";
-	import { Retry } from "@gradio/icons";
-	import Remove from "./Remove.svelte";
+	import { Retry, Undo } from "@gradio/icons";
+	import { IconButtonWrapper, IconButton } from "@gradio/atoms";
 
 	export let likeable: boolean;
 	export let _retryable: boolean;
@@ -51,96 +50,57 @@
 
 {#if show}
 	<div
-		class="message-buttons-{position} {layout}  message-buttons {avatar !==
+		class="message-buttons-{position} {layout} message-buttons {avatar !==
 			null && 'with-avatar'}"
 	>
-		{#if show_copy}
-			<Copy value={message_text} />
-		{/if}
-		{#if show_download && !Array.isArray(message) && is_component_message(message)}
-			<DownloadLink
-				href={message?.content?.value.url}
-				download={message.content.value.orig_name || "image"}
-			>
-				<span class="icon-wrap">
-					<DownloadIcon />
-				</span>
-			</DownloadLink>
-		{/if}
-		{#if _retryable}
-			<ActionButton
-				{handle_action}
-				action="retry"
-				disabled={disable}
-				height={"var(--size-3)"}
-			>
-				<Retry />
-			</ActionButton>
-		{/if}
-		{#if _undoable}
-			<ActionButton
-				{handle_action}
-				action="undo"
-				disabled={disable}
-				height="var(--size-3)"
-			>
-				<Remove />
-			</ActionButton>
-		{/if}
-		{#if likeable}
-			<LikeDislike {handle_action} padded={show_copy || show_download} />
-		{/if}
+		<IconButtonWrapper top_panel={false}>
+			{#if show_copy}
+				<Copy value={message_text} />
+			{/if}
+			{#if show_download && !Array.isArray(message) && is_component_message(message)}
+				<DownloadLink
+					href={message?.content?.value.url}
+					download={message.content.value.orig_name || "image"}
+				>
+					<IconButton Icon={DownloadIcon} />
+				</DownloadLink>
+			{/if}
+			{#if _retryable}
+				<IconButton
+					Icon={Retry}
+					on:click={() => handle_action("retry")}
+					disabled={disable}
+				/>
+			{/if}
+			{#if _undoable}
+				<IconButton
+					Icon={Undo}
+					on:click={() => handle_action("undo")}
+					disabled={disable}
+				/>
+			{/if}
+			{#if likeable}
+				<LikeDislike {handle_action} />
+			{/if}
+		</IconButtonWrapper>
 	</div>
 {/if}
 
 <style>
-	.icon-wrap {
-		display: block;
-		color: var(--body-text-color-subdued);
-	}
-
-	.icon-wrap:hover {
-		color: var(--body-text-color);
-	}
-
-	.message-buttons {
-		border-radius: var(--radius-md);
-		display: flex;
-		align-items: center;
-		height: var(--size-6);
-		align-self: self-end;
+	:global(.icon-button-wrapper) {
 		margin: 0px calc(var(--spacing-xl) * 2);
-		padding-left: 5px;
-		z-index: 1;
-		padding-bottom: var(--spacing-xl);
-		padding: var(--spacing-md) var(--spacing-md);
-		border: 1px solid var(--border-color-primary);
-		background: var(--border-color-secondary);
-		gap: var(--spacing-md);
 	}
+
 	.message-buttons-left {
-		align-self: start;
-		left: 0px;
+		align-self: flex-start;
 	}
 
-	.panel.message-buttons-left,
-	.panel.message-buttons-right {
-		margin: 10px 0 2px 0;
+	.message-buttons-right {
+		align-self: flex-end;
 	}
 
-	/* .message-buttons {
-		left: 0px;
-		right: 0px;
-		top: unset;
-		bottom: calc(-30px - var(--spacing-xl));
-		display: flex;
-		justify-content: flex-start;
-		align-items: center;
-		gap: 0px;
-	} */
-
-	.message-buttons :global(> *) {
-		margin-right: 0px;
+	.message-buttons-right :global(.icon-button-wrapper) {
+		margin-left: auto;
 	}
 
 	.with-avatar {

diff --git a/js/chatbot/shared/ChatBot.svelte b/js/chatbot/shared/ChatBot.svelte
@@ -20,14 +20,14 @@
 	import { Image } from "@gradio/image/shared";
 
 	import { Clear, Trash, Community } from "@gradio/icons";
+	import { IconButtonWrapper, IconButton } from "@gradio/atoms";
 	import type { SelectData, LikeData } from "@gradio/utils";
 	import type { MessageRole } from "../types";
 	import { MarkdownCode as Markdown } from "@gradio/markdown";
 	import type { FileData, Client } from "@gradio/client";
 	import type { I18nFormatter } from "js/core/src/gradio_helper";
 	import Pending from "./Pending.svelte";
 	import MessageBox from "./MessageBox.svelte";
-	import ActionButton from "./ActionButton.svelte";
 	import { ShareError } from "@gradio/utils";
 
 	export let value: NormalisedMessage[] | null = [];
@@ -316,11 +316,11 @@
 </script>
 
 {#if value !== null && value.length > 0}
-	<div class="button-row">
+	<IconButtonWrapper>
 		{#if show_share_button}
-			<ActionButton
-				action="share"
-				handle_action={async () => {
+			<IconButton
+				Icon={Community}
+				on:click={async () => {
 					try {
 						// @ts-ignore
 						const formatted = await format_chat_for_sharing(value);
@@ -335,15 +335,13 @@
 				}}
 			>
 				<Community />
-			</ActionButton>
+			</IconButton>
 		{/if}
-		<ActionButton handle_action={() => dispatch("clear")} action="clear">
-			<Trash />
-		</ActionButton>
+		<IconButton Icon={Trash} on:click={() => dispatch("clear")}></IconButton>
 		{#if show_copy_all_button}
 			<CopyAll {value} />
 		{/if}
-	</div>
+	</IconButtonWrapper>
 {/if}
 
 <div
@@ -728,23 +726,6 @@
 		padding: 6px;
 	}
 
-	.button-row {
-		display: flex;
-		position: absolute;
-		right: var(--size-4);
-		align-items: center;
-		justify-content: space-evenly;
-		gap: var(--spacing-md);
-		z-index: 2;
-		padding-left: var(--size-2);
-		padding-right: var(--size-2);
-		background: var(--block-label-background-fill);
-		border-radius: var(--radius-md);
-		box-shadow: none;
-		padding-top: var(--size-1);
-		padding-bottom: var(--size-1);
-	}
-
 	.selectable {
 		cursor: pointer;
 	}