Skip to content

Commit

Permalink
Move icons into IconButtonWrapper (#9261)
Browse files Browse the repository at this point in the history
* * 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>
  • Loading branch information
2 people authored and freddyaboulton committed Sep 16, 2024
1 parent f7f7885 commit e57f086
Show file tree
Hide file tree
Showing 13 changed files with 145 additions and 279 deletions.
9 changes: 9 additions & 0 deletions .changeset/every-breads-float.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
"@gradio/atoms": minor
"@gradio/chatbot": minor
"@gradio/icons": minor
"@gradio/statustracker": minor
"gradio": minor
---

feat:Move icons into `IconButtonWrapper`
6 changes: 3 additions & 3 deletions js/atoms/src/IconButton.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@
class:large={size === "large"}
class:medium={size === "medium"}
>
<!-- handles icon reactivity -->
<svelte:component this={Icon} />
</div>
</button>
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
}
Expand Down
29 changes: 20 additions & 9 deletions js/atoms/src/IconButtonWrapper.svelte
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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);
Expand All @@ -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>
4 changes: 4 additions & 0 deletions js/chatbot/Index.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -156,4 +156,8 @@
width: 100%;
height: 100%;
}
:global(.progress-text) {
right: auto;
}
</style>
44 changes: 0 additions & 44 deletions js/chatbot/shared/ActionButton.svelte

This file was deleted.

120 changes: 40 additions & 80 deletions js/chatbot/shared/ButtonPanel.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down
35 changes: 8 additions & 27 deletions js/chatbot/shared/ChatBot.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [];
Expand Down Expand Up @@ -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);
Expand All @@ -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
Expand Down Expand Up @@ -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;
}
Expand Down
Loading

0 comments on commit e57f086

Please sign in to comment.