mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-03-25 12:10:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: dark mode (#652)

Browse Source 
* swap postcss nested for tailwinf nesting plugin

* dark mode dataframe

* make background height expand with content

* updated test images

* fixed images

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
This commit is contained in:
pngwn 2022-02-17 21:21:18 +00:00 committed by GitHub
parent 21e0bd112c
commit 4f26051d35
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 44 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
gradio/templates/frontend/index.html
View File

@ -45,13 +45,13 @@
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
<title>Gradio</title>
<script type="module" crossorigin src="/assets/index.5b58beaf.js"></script>
<link rel="modulepreload" href="/assets/vendor.3cba5ef5.js">
<link rel="stylesheet" href="/assets/vendor.327fceeb.css">
<link rel="stylesheet" href="/assets/index.de6ac9a0.css">
<script type="module" crossorigin src="/assets/index.ec0db84a.js"></script>
<link rel="modulepreload" href="/assets/vendor.4bb909c3.js">
<link rel="stylesheet" href="/assets/vendor.c31bc17e.css">
<link rel="stylesheet" href="/assets/index.7ba6fc59.css">
</head>
<body style="height: 100%; margin: 0; padding: 0">
<div id="root" style="height: 100%"></div>
<div id="root" style="min-height: 100%"></div>
</body>
</html>

BIN
test/golden/diff_texts/magic_trick.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

BIN
test/golden/image_mod/cheetah1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 237 KiB

After

Width:  |  Height:  |  Size: 237 KiB

BIN
test/golden/longest_word/wonderful.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 33 KiB

2
ui/packages/app/index.html
View File

@ -48,6 +48,6 @@
</head>
<body style="height: 100%; margin: 0; padding: 0">
<div id="root" style="height: 100%"></div>
<div id="root" style="min-height: 100%"></div>
</body>
</html>

7
ui/packages/app/package.json
View File

@ -9,6 +9,10 @@
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.36",
"@types/d3-dsv": "^3.0.0",
"@types/d3-scale": "^4.0.2",
"@types/d3-shape": "^3.0.2",
"@types/tailwindcss": "^3.0.8",
"mime-types": "^2.1.34",
"postcss": "^8.4.5",
"postcss-nested": "^5.0.6",
@ -17,9 +21,6 @@
"vite": "^2.7.13"
},
"dependencies": {
"@types/d3-dsv": "^3.0.0",
"@types/d3-scale": "^4.0.2",
"@types/d3-shape": "^3.0.2",
"autoprefixer": "^9.8.8",
"cropperjs": "^1.5.12",
"d3-dsv": "^3.0.1",

8
ui/packages/app/postcss.config.js
View File

@ -1,8 +0,0 @@
module.exports = {
extract: "themes.css",
plugins: [
require("tailwindcss"),
require("postcss-nested"),
require("autoprefixer")
]
};

20
ui/packages/app/src/components/input/DataFrame/DataFrame.svelte
View File

@ -289,9 +289,9 @@
id="grid"
role="grid"
aria-labelledby="title"
class="min-w-full divide-y divide-gray-200 "
class="min-w-full divide-y divide-gray-200 dark:divide-gray-800"
>
<thead class="bg-gray-50">
<thead class="bg-gray-50 dark:bg-gray-800">
<tr>
{#each _headers as { value, id }, i (id)}
<th
@ -300,13 +300,13 @@
dblclick: () => edit_header(id)
}}
aria-sort={get_sort_status(value, sort_by, sort_direction)}
class="relative after:absolute after:opacity-0 after:content-['▲'] after:ml-2 after:inset-y-0 after:h-[1.05rem] after:m-auto relative px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
class="relative after:absolute after:opacity-0 after:content-['▲'] after:ml-2 after:inset-y-0 after:h-[1.05rem] after:m-auto relative px-6 py-3 text-left text-xs font-medium dark:text-gray-100 uppercase tracking-wider"
class:sorted={sort_by === i}
class:des={sort_by === i && sort_direction === "des"}
>
{#if header_edit === id}
<input
class="bg-transparent inset-y-0 left-6 w-full outline-none absolute p-0 w-3/4 text-xs font-medium text-gray-500 uppercase tracking-wider"
class="bg-transparent inset-y-0 left-6 w-full outline-none absolute p-0 w-3/4 text-xs font-medium text-gray-500 uppercase tracking-wider dark:bg-gray-600"
tabindex="-1"
bind:value
bind:this={els[id].input}
@ -324,7 +324,9 @@
</th>
{/each}
</tr></thead
><tbody class="bg-white divide-y divide-gray-200">
><tbody
class="bg-white divide-y divide-gray-200 dark:divide-gray-500 dark:bg-gray-600"
>
{#each data as row, i (row)}
<tr>
{#each row as { value, id }, j (id)}
@ -339,13 +341,15 @@
currentTarget.setAttribute("tabindex", "-1")}
>
<div
class:border-gray-600={selected === id}
class:border-transparent={selected !== id}
class="min-h-[3.3rem] px-5 py-3 border-[0.125rem]"
class="min-h-[3.3rem] px-5 py-3 border-[0.125rem] {selected ===
id
? 'border-gray-600 dark:border-gray-200'
: ''}"
>
{#if editing === id}
<input
class="w-full outline-none absolute p-0 w-3/4"
class="w-full outline-none absolute p-0 w-3/4 dark:bg-gray-600 dark:text-gray-50"
tabindex="-1"
bind:value
bind:this={els[id].input}

11
ui/packages/app/vite.config.js
View File

@ -4,9 +4,9 @@ import sveltePreprocess from "svelte-preprocess";
// this is dupe config, gonna try fix this
import tailwind from "tailwindcss";
import nested from "postcss-nested";
import autoprefix from "autoprefixer";
import nested from "tailwindcss/nesting";
//@ts-ignore
export default defineConfig(({ mode }) => {
const production = mode === "production";
@ -20,10 +20,15 @@ export default defineConfig(({ mode }) => {
? JSON.stringify("")
: JSON.stringify("http://localhost:7860/")
},
css: {
postcss: {
plugins: [nested, tailwind]
}
},
plugins: [
svelte({
preprocess: sveltePreprocess({
postcss: { plugins: [tailwind, nested, autoprefix] }
postcss: { plugins: [nested, tailwind] }
})
})
]

22
ui/pnpm-lock.yaml generated
View File

@ -24,6 +24,7 @@ importers:
'@types/d3-dsv': ^3.0.0
'@types/d3-scale': ^4.0.2
'@types/d3-shape': ^3.0.2
'@types/tailwindcss': ^3.0.8
autoprefixer: ^9.8.8
cropperjs: ^1.5.12
d3-dsv: ^3.0.1
@ -41,9 +42,6 @@ importers:
tui-image-editor: ^3.15.2
vite: ^2.7.13
dependencies:
'@types/d3-dsv': 3.0.0
'@types/d3-scale': 4.0.2
'@types/d3-shape': 3.0.2
autoprefixer: 9.8.8
cropperjs: 1.5.12
d3-dsv: 3.0.1
@ -57,6 +55,10 @@ importers:
tui-image-editor: 3.15.2
devDependencies:
'@sveltejs/vite-plugin-svelte': 1.0.0-next.36_svelte@3.46.3+vite@2.7.13
'@types/d3-dsv': 3.0.0
'@types/d3-scale': 4.0.2
'@types/d3-shape': 3.0.2
'@types/tailwindcss': 3.0.8
postcss: 8.4.6
postcss-nested: 5.0.6_postcss@8.4.6
svelte: 3.46.3
@ -202,27 +204,27 @@ packages:
/@types/d3-dsv/3.0.0:
resolution: {integrity: sha512-o0/7RlMl9p5n6FQDptuJVMxDf/7EDEv2SYEO/CwdG2tr1hTfUVi0Iavkk2ax+VpaQ/1jVhpnj5rq1nj8vwhn2A==}
dev: false
dev: true
/@types/d3-path/3.0.0:
resolution: {integrity: sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==}
dev: false
dev: true
/@types/d3-scale/4.0.2:
resolution: {integrity: sha512-Yk4htunhPAwN0XGlIwArRomOjdoBFXC3+kCxK2Ubg7I9shQlVSJy/pG/Ht5ASN+gdMIalpk8TJ5xV74jFsetLA==}
dependencies:
'@types/d3-time': 3.0.0
dev: false
dev: true
/@types/d3-shape/3.0.2:
resolution: {integrity: sha512-5+ButCmIfNX8id5seZ7jKj3igdcxx+S9IDBiT35fQGTLZUfkFgTv+oBH34xgeoWDKpWcMITSzBILWQtBoN5Piw==}
dependencies:
'@types/d3-path': 3.0.0
dev: false
dev: true
/@types/d3-time/3.0.0:
resolution: {integrity: sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==}
dev: false
dev: true
/@types/node/17.0.14:
resolution: {integrity: sha512-SbjLmERksKOGzWzPNuW7fJM7fk3YXVTFiZWB/Hs99gwhk+/dnrQRPBQjPW9aO+fi1tAffi9PrwFvsmOKmDTyng==}
@ -242,6 +244,10 @@ packages:
'@types/node': 17.0.14
dev: false
/@types/tailwindcss/3.0.8:
resolution: {integrity: sha512-3BKgtrXdr+E/lsz79Hbkb8X3kjlbsgw1m0x/ewhff+cqN059GpFWHtYuLJd2ToDTeWZa3OE2V4KIo//PnOrKlQ==}
dev: true
/abab/2.0.5:
resolution: {integrity: sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==}
dev: false