mirror of
https://github.com/gradio-app/gradio.git
synced 2025-04-18 12:50:30 +08:00
ensure login form has correct styles (#5324)
This commit is contained in:
pngwn
GitHub
parent
2592d4e380
commit
31996c991d
.changeset
.devcontainer
demo/markdown_example
js
_website/src
lib/components
routes/[[version]]/docs/[doc=valid_doc]
app/src
markdown/static
storybook
textbox/interactive
9
.changeset/itchy-needles-float.md
Normal file
9
.changeset/itchy-needles-float.md
Normal file
@ -0,0 +1,9 @@
|
||||
---
|
||||
"@gradio/app": patch
|
||||
"@gradio/markdown": patch
|
||||
"@gradio/textbox": patch
|
||||
"gradio": patch
|
||||
"website": patch
|
||||
---
|
||||
|
||||
fix:ensure login form has correct styles
|
||||
@ -14,7 +14,7 @@
|
||||
"cpus": 4,
|
||||
"memory": "8gb",
|
||||
"storage": "32gb"
|
||||
},
|
||||
},
|
||||
|
||||
"customizations": {
|
||||
"vscode": {
|
||||
@ -38,5 +38,4 @@
|
||||
},
|
||||
|
||||
"postCreateCommand": "export NODE_OPTIONS=\"--max-old-space-size=8192\" && chmod +x scripts/install_gradio.sh scripts/install_test_requirements.sh scripts/build_frontend.sh && ./scripts/install_gradio.sh && ./scripts/install_test_requirements.sh && ./scripts/build_frontend.sh"
|
||||
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -9,6 +9,8 @@ css = (
|
||||
md = """# Dillinger
|
||||
## _The Last Markdown Editor, Ever_
|
||||
|
||||
This is some `inline code`, it is good.
|
||||
|
||||
[](https://travis-ci.org/joemccann/dillinger)
|
||||
|
||||
Dillinger is a cloud-enabled, mobile-ready, offline-storage compatible,
|
||||
|
||||
@ -2,96 +2,100 @@
|
||||
export let fns: any[];
|
||||
</script>
|
||||
|
||||
|
||||
<div id="event-listeners-description">
|
||||
<h4 class="mt-8 text-xl text-orange-500 font-light group">
|
||||
Description
|
||||
</h4>
|
||||
<p class="mb-2 text-lg text-gray-600">Event listeners allow you to capture and respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called.</p>
|
||||
<h4 class="mt-8 text-xl text-orange-500 font-light group">Description</h4>
|
||||
<p class="mb-2 text-lg text-gray-600">
|
||||
Event listeners allow you to capture and respond to user interactions with
|
||||
the UI components you've defined in a Gradio Blocks app. When a user
|
||||
interacts with an element, such as changing a slider value or uploading an
|
||||
image, a function is called.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="event-listeners-list">
|
||||
<h4
|
||||
class="text-xl text-orange-500 font-light group"
|
||||
id="supported-event-listeners"
|
||||
>
|
||||
Supported Event Listeners
|
||||
</h4>
|
||||
<p class="mb-4 text-lg text-gray-600"> The <span class="font-mono">{fns[0].parent.replace("gradio.","")}</span> component supports the following event listeners. Each event listener takes the same parameters, which are listed in the <a href="#event-listeners-arguments" class="text-orange-500 font-light">Event Arguments</a> table below.</p>
|
||||
<h4
|
||||
class="text-xl text-orange-500 font-light group"
|
||||
id="supported-event-listeners"
|
||||
>
|
||||
Supported Event Listeners
|
||||
</h4>
|
||||
<p class="mb-4 text-lg text-gray-600">
|
||||
The <span class="font-mono">{fns[0].parent.replace("gradio.", "")}</span>
|
||||
component supports the following event listeners. Each event listener takes
|
||||
the same parameters, which are listed in the
|
||||
<a href="#event-listeners-arguments" class="text-orange-500 font-light"
|
||||
>Event Arguments</a
|
||||
> table below.
|
||||
</p>
|
||||
|
||||
<table class="mb-4 table-fixed w-full">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th class="px-3 pb-3 text-gray-700 font-semibold w-2/5"
|
||||
>Listener</th
|
||||
>
|
||||
<th class="px-3 pb-3 text-gray-700 font-semibold"
|
||||
>Description</th
|
||||
>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden"
|
||||
>
|
||||
{#each fns as fn}
|
||||
<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80 align-top ">
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<p>
|
||||
<code class="lang-python">{fn.parent}.{fn.name}(fn, ···)</code
|
||||
>
|
||||
</p>
|
||||
</td>
|
||||
<td class="p-3 break-words text-gray-700">
|
||||
<p>{fn.description}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="mb-4 table-fixed w-full">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th class="px-3 pb-3 text-gray-700 font-semibold w-2/5">Listener</th>
|
||||
<th class="px-3 pb-3 text-gray-700 font-semibold">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden"
|
||||
>
|
||||
{#each fns as fn}
|
||||
<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80 align-top">
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<p>
|
||||
<code class="lang-python">{fn.parent}.{fn.name}(fn, ···)</code>
|
||||
</p>
|
||||
</td>
|
||||
<td class="p-3 break-words text-gray-700">
|
||||
<p>{fn.description}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="event-listeners-arguments">
|
||||
<h4
|
||||
class="text-xl text-orange-500 font-light group"
|
||||
id="event-listener-arguments"
|
||||
>
|
||||
Event Arguments
|
||||
</h4>
|
||||
<h4
|
||||
class="text-xl text-orange-500 font-light group"
|
||||
id="event-listener-arguments"
|
||||
>
|
||||
Event Arguments
|
||||
</h4>
|
||||
|
||||
<table class="table-fixed w-full leading-loose">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th class="px-3 pb-3 font-semibold text-gray-700 w-2/5">Parameter</th>
|
||||
<th class="px-3 pb-3 font-semibold text-gray-700">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y"
|
||||
>
|
||||
{#each fns[0].parameters as param}
|
||||
{#if param["name"] != "self"}
|
||||
<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<code class="block">
|
||||
{param["name"]}
|
||||
</code>
|
||||
<p class="text-gray-500 italic">{param["annotation"]}</p>
|
||||
{#if "default" in param}
|
||||
<p class="text-gray-500 font-semibold">
|
||||
default: {param["default"]}
|
||||
</p>
|
||||
{:else if !("kwargs" in param)}
|
||||
<p class="text-orange-600 font-semibold italic">required</p>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="p-3 text-gray-700 break-words">
|
||||
<p>{param["doc"] || ""}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="table-fixed w-full leading-loose">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th class="px-3 pb-3 font-semibold text-gray-700 w-2/5">Parameter</th>
|
||||
<th class="px-3 pb-3 font-semibold text-gray-700">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y"
|
||||
>
|
||||
{#each fns[0].parameters as param}
|
||||
{#if param["name"] != "self"}
|
||||
<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<code class="block">
|
||||
{param["name"]}
|
||||
</code>
|
||||
<p class="text-gray-500 italic">{param["annotation"]}</p>
|
||||
{#if "default" in param}
|
||||
<p class="text-gray-500 font-semibold">
|
||||
default: {param["default"]}
|
||||
</p>
|
||||
{:else if !("kwargs" in param)}
|
||||
<p class="text-orange-600 font-semibold italic">required</p>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="p-3 text-gray-700 break-words">
|
||||
<p>{param["doc"] || ""}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
@ -134,4 +134,4 @@
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -115,4 +115,4 @@ export async function load({ params, parent }) {
|
||||
headers,
|
||||
method_headers
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,7 +18,6 @@
|
||||
let routes = data.routes;
|
||||
let py_client = data.py_client;
|
||||
|
||||
|
||||
let headers: [string, string][];
|
||||
let method_headers: [string, string][];
|
||||
$: headers = data.headers;
|
||||
@ -401,15 +400,15 @@
|
||||
Event Listeners
|
||||
<a
|
||||
href="#event-listeners"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<div class="flex flex-col gap-8 pl-12">
|
||||
<EventListeners fns={obj.fns} />
|
||||
<div class="ml-12" />
|
||||
</div>
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<div class="flex flex-col gap-8 pl-12">
|
||||
<EventListeners fns={obj.fns} />
|
||||
<div class="ml-12" />
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div id="methods">
|
||||
@ -424,7 +423,7 @@
|
||||
</h4>
|
||||
<div class="flex flex-col gap-8 pl-12">
|
||||
{#each obj.fns as fn}
|
||||
<FunctionDoc {fn} />
|
||||
<FunctionDoc {fn} />
|
||||
{/each}
|
||||
<div class="ml-12" />
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import Form from "@gradio/form";
|
||||
import { BaseTextbox as Textbox } from "@gradio/textbox/interactive";
|
||||
import Textbox from "@gradio/textbox/interactive";
|
||||
import { BaseButton } from "@gradio/button/static";
|
||||
import Column from "@gradio/column";
|
||||
import { _ } from "svelte-i18n";
|
||||
|
||||
@ -86,10 +86,13 @@ th {
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
.md :not(pre) > code[class*="language-"] {
|
||||
.md :not(pre) > code {
|
||||
padding: 0.1em;
|
||||
border-radius: var(--radius-xs);
|
||||
white-space: normal;
|
||||
background-color: var(--chatbot-code-background-color);
|
||||
border: 1px solid var(--panel-border-color);
|
||||
padding: var(--spacing-xxs) var(--spacing-xs);
|
||||
}
|
||||
|
||||
.md .token.comment,
|
||||
|
||||
@ -1,10 +1,26 @@
|
||||
import type { Preview } from "@storybook/svelte";
|
||||
import "./theme.css";
|
||||
import { setupi18n } from "../app/src/i18n";
|
||||
|
||||
import { Gradio } from "../app/src/gradio_helper";
|
||||
setupi18n();
|
||||
|
||||
const preview: Preview = {
|
||||
args: {
|
||||
gradio: new Gradio(
|
||||
0,
|
||||
document.createElement("div"),
|
||||
"light",
|
||||
"1.1.1",
|
||||
"localhost:9876"
|
||||
)
|
||||
},
|
||||
argTypes: {
|
||||
gradio: {
|
||||
table: {
|
||||
disable: true
|
||||
}
|
||||
}
|
||||
},
|
||||
parameters: {
|
||||
actions: { argTypesRegex: "^on[A-Z].*" },
|
||||
controls: {
|
||||
|
||||
@ -2,20 +2,33 @@
|
||||
|
||||
<script lang="ts">
|
||||
import type { Gradio, SelectData } from "@gradio/utils";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
|
||||
import TextBox from "../shared";
|
||||
import { Block } from "@gradio/atoms";
|
||||
import { StatusTracker } from "@gradio/statustracker";
|
||||
import type { LoadingStatus } from "@gradio/statustracker";
|
||||
|
||||
export let gradio: Gradio<{
|
||||
const dispatch = createEventDispatcher<{
|
||||
change: string;
|
||||
submit: never;
|
||||
blur: never;
|
||||
select: SelectData;
|
||||
input: never;
|
||||
focus: never;
|
||||
}>;
|
||||
}>();
|
||||
|
||||
export let gradio:
|
||||
| Gradio<{
|
||||
change: string;
|
||||
submit: never;
|
||||
blur: never;
|
||||
select: SelectData;
|
||||
input: never;
|
||||
focus: never;
|
||||
}>
|
||||
| { dispatch: typeof dispatch } = {
|
||||
dispatch
|
||||
};
|
||||
export let label = "Textbox";
|
||||
export let info: string | undefined = undefined;
|
||||
export let elem_id = "";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user