mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-04-06 12:30:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix label placement in gr.HTML (#10069)

Browse Source 
* remove unneeded label-container

* add changeset

* add block padding to prevent breaking change

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
This commit is contained in:
Hannah 2024-11-28 19:13:56 +00:00 committed by GitHub
parent 368ba73106
commit afd75def9e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/new-taxis-flow.md Normal file
View File

@ -0,0 +1,6 @@
---
"@gradio/html": patch
"gradio": patch
---
fix:Fix label placement in gr.HTML

24
js/html/Index.svelte
View File

@ -7,7 +7,7 @@
import { Code as CodeIcon } from "@gradio/icons";
import { css_units } from "@gradio/utils";
export let label: string;
export let label = "HTML";
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
@ -25,11 +25,9 @@
$: label, gradio.dispatch("change");
</script>
<Block {visible} {elem_id} {elem_classes} {container}>
<Block {visible} {elem_id} {elem_classes} {container} padding={false}>
{#if show_label}
<span class="label-container">
<BlockLabel Icon={CodeIcon} {show_label} {label} float={true} />
</span>
<BlockLabel Icon={CodeIcon} {show_label} {label} float={false} />
{/if}
<StatusTracker
@ -40,6 +38,7 @@
on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
/>
<div
class="html-container"
class:pending={loading_status?.status === "pending"}
style:min-height={min_height && loading_status?.status !== "pending"
? css_units(min_height)
@ -56,6 +55,10 @@
</Block>
<style>
.html-container {
padding: var(--block-padding);
}
div {
transition: 150ms;
}
@ -63,15 +66,4 @@
.pending {
opacity: 0.2;
}
.label-container :global(label) {
top: -8px !important;
position: relative !important;
left: -8px !important;
background: var(--block-background-fill) !important;
border-top: var(--block-label-border-width) solid
var(--border-color-primary) !important;
border-left: var(--block-label-border-width) solid
var(--border-color-primary) !important;
}
</style>