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

Ensure CSS .dark rule selectors are applied (#7355)

Browse Source 
* fix ignored dark rules

* add changeset

* add changeset

* tweak

* test threshold

* test threshold again

* remove threshold and fix story

* test

* story tweak

* story test

* separate undo/redo from large interaction story

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
This commit is contained in:
Hannah 2024-02-09 00:39:40 +01:00 committed by GitHub
parent 9905e00e42
commit 2244059cdb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 62 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/lucky-files-bow.md Normal file
View File

@ -0,0 +1,6 @@
---
"@gradio/app": patch
"gradio": patch
---
fix:Ensure CSS `.dark` rule selectors are applied

6
js/app/src/css.ts
View File

@ -36,14 +36,18 @@ export function prefix_css(
for (let i = 0; i < rules.length; i++) {
const rule = rules[i];
let is_dark_rule = rule.cssText.includes(".dark");
if (rule instanceof CSSStyleRule) {
const selector = rule.selectorText;
if (selector) {
const new_selector = selector
.replace(".dark", "")
.split(",")
.map(
(s) =>
`gradio-app .gradio-container.gradio-container-${version} .contain ${s.trim()}`
`${
is_dark_rule ? ".dark" : ""
} gradio-app .gradio-container.gradio-container-${version} .contain ${s.trim()} `
)
.join(",");

55
js/imageeditor/ImageEditor.stories.svelte
View File

@ -50,7 +50,7 @@
/>
<Story
name="Image Editor Interactions"
name="Image Editor Drawing Interactions"
args={{
value: {
path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
@ -196,12 +196,59 @@
userEvent.click(canvas.getByLabelText("Add Layer"));
await userEvent.click(canvas.getByLabelText("Image button"));
await userEvent.click(canvas.getByLabelText("Clear canvas"));
}}
/>
<Story
name="Image Editor Undo/Redo Interactions"
args={{
value: {
path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
orig_name: "cheetah.jpg"
},
type: "pil",
sources: ["upload", "webcam"],
interactive: "true",
brush: {
default_size: "auto",
colors: ["#ff0000", "#00ff00", "#0000ff"],
default_color: "#ff0000",
color_mode: "defaults"
},
eraser: {
default_size: "auto"
}
}}
play={async ({ canvasElement }) => {
const canvas = within(canvasElement);
const drawButton = canvas.getAllByLabelText("Draw button")[0];
userEvent.click(drawButton);
const drawCanvas = document.getElementsByTagName("canvas")[0];
if (!drawCanvas) {
throw new Error("Could not find canvas");
}
await new Promise((r) => setTimeout(r, 1000));
await userEvent.pointer({
keys: "[MouseLeft][MouseRight]",
target: drawCanvas,
coords: { clientX: 300, clientY: 100 }
});
await userEvent.pointer({
keys: "[MouseLeft][MouseRight]",
target: drawCanvas,
coords: { clientX: 400, clientY: 200 }
});
await userEvent.click(canvas.getByLabelText("Undo"));
await userEvent.click(canvas.getByLabelText("Redo"));
await userEvent.click(canvas.getByLabelText("Erase button"));
}}
/>