@gradio/gallery 0.15.21 → 0.15.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/dist/shared/Gallery.svelte +19 -1
- package/package.json +7 -7
- package/shared/Gallery.svelte +22 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @gradio/gallery
|
|
2
2
|
|
|
3
|
+
## 0.15.23
|
|
4
|
+
|
|
5
|
+
### Fixes
|
|
6
|
+
|
|
7
|
+
- [#11362](https://github.com/gradio-app/gradio/pull/11362) [`1b88339`](https://github.com/gradio-app/gradio/commit/1b883395eb3feceed60ec79fcf19285269e2b171) - Fix Gallery thumbnail overflow. Thanks @freddyaboulton!
|
|
8
|
+
|
|
9
|
+
## 0.15.22
|
|
10
|
+
|
|
11
|
+
### Dependency updates
|
|
12
|
+
|
|
13
|
+
- @gradio/upload@0.16.7
|
|
14
|
+
- @gradio/video@0.14.17
|
|
15
|
+
- @gradio/client@1.15.2
|
|
16
|
+
- @gradio/file@0.12.20
|
|
17
|
+
- @gradio/image@0.22.9
|
|
18
|
+
|
|
3
19
|
## 0.15.21
|
|
4
20
|
|
|
5
21
|
### Dependency updates
|
|
@@ -172,11 +172,26 @@ async function download(file_url, name) {
|
|
|
172
172
|
}
|
|
173
173
|
$:
|
|
174
174
|
selected_media = selected_index != null && resolved_value != null ? resolved_value[selected_index] : null;
|
|
175
|
+
let thumbnails_overflow = false;
|
|
176
|
+
function check_thumbnails_overflow() {
|
|
177
|
+
if (container_element) {
|
|
178
|
+
thumbnails_overflow = container_element.scrollWidth > container_element.clientWidth;
|
|
179
|
+
}
|
|
180
|
+
}
|
|
175
181
|
onMount(() => {
|
|
182
|
+
check_thumbnails_overflow();
|
|
176
183
|
document.addEventListener("fullscreenchange", () => {
|
|
177
184
|
is_full_screen = !!document.fullscreenElement;
|
|
178
185
|
});
|
|
186
|
+
window.addEventListener("resize", check_thumbnails_overflow);
|
|
187
|
+
return () => window.removeEventListener("resize", check_thumbnails_overflow);
|
|
179
188
|
});
|
|
189
|
+
$:
|
|
190
|
+
resolved_value, check_thumbnails_overflow();
|
|
191
|
+
$:
|
|
192
|
+
if (container_element) {
|
|
193
|
+
check_thumbnails_overflow();
|
|
194
|
+
}
|
|
180
195
|
</script>
|
|
181
196
|
|
|
182
197
|
<svelte:window bind:innerHeight={window_height} />
|
|
@@ -284,6 +299,9 @@ onMount(() => {
|
|
|
284
299
|
bind:this={container_element}
|
|
285
300
|
class="thumbnails scroll-hide"
|
|
286
301
|
data-testid="container_el"
|
|
302
|
+
style="justify-content: {thumbnails_overflow
|
|
303
|
+
? 'flex-start'
|
|
304
|
+
: 'center'};"
|
|
287
305
|
>
|
|
288
306
|
{#each resolved_value as media, i}
|
|
289
307
|
<button
|
|
@@ -483,7 +501,7 @@ onMount(() => {
|
|
|
483
501
|
display: flex;
|
|
484
502
|
position: absolute;
|
|
485
503
|
bottom: 0;
|
|
486
|
-
justify-content:
|
|
504
|
+
justify-content: flex-start;
|
|
487
505
|
align-items: center;
|
|
488
506
|
gap: var(--spacing-lg);
|
|
489
507
|
width: var(--size-full);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/gallery",
|
|
3
|
-
"version": "0.15.
|
|
3
|
+
"version": "0.15.23",
|
|
4
4
|
"description": "Gradio UI packages",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "",
|
|
@@ -9,14 +9,14 @@
|
|
|
9
9
|
"dependencies": {
|
|
10
10
|
"dequal": "^2.0.2",
|
|
11
11
|
"@gradio/atoms": "^0.16.1",
|
|
12
|
-
"@gradio/client": "^1.15.
|
|
13
|
-
"@gradio/image": "^0.22.8",
|
|
12
|
+
"@gradio/client": "^1.15.2",
|
|
14
13
|
"@gradio/icons": "^0.12.0",
|
|
14
|
+
"@gradio/image": "^0.22.9",
|
|
15
15
|
"@gradio/statustracker": "^0.10.12",
|
|
16
|
-
"@gradio/
|
|
17
|
-
"@gradio/
|
|
18
|
-
"@gradio/video": "^0.14.
|
|
19
|
-
"@gradio/
|
|
16
|
+
"@gradio/utils": "^0.10.2",
|
|
17
|
+
"@gradio/upload": "^0.16.7",
|
|
18
|
+
"@gradio/video": "^0.14.17",
|
|
19
|
+
"@gradio/file": "^0.12.20"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
22
|
"@gradio/preview": "^0.13.1"
|
package/shared/Gallery.svelte
CHANGED
|
@@ -230,11 +230,29 @@
|
|
|
230
230
|
? resolved_value[selected_index]
|
|
231
231
|
: null;
|
|
232
232
|
|
|
233
|
+
let thumbnails_overflow = false;
|
|
234
|
+
|
|
235
|
+
function check_thumbnails_overflow(): void {
|
|
236
|
+
if (container_element) {
|
|
237
|
+
thumbnails_overflow =
|
|
238
|
+
container_element.scrollWidth > container_element.clientWidth;
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
|
|
233
242
|
onMount(() => {
|
|
243
|
+
check_thumbnails_overflow();
|
|
234
244
|
document.addEventListener("fullscreenchange", () => {
|
|
235
245
|
is_full_screen = !!document.fullscreenElement;
|
|
236
246
|
});
|
|
247
|
+
window.addEventListener("resize", check_thumbnails_overflow);
|
|
248
|
+
return () =>
|
|
249
|
+
window.removeEventListener("resize", check_thumbnails_overflow);
|
|
237
250
|
});
|
|
251
|
+
|
|
252
|
+
$: resolved_value, check_thumbnails_overflow();
|
|
253
|
+
$: if (container_element) {
|
|
254
|
+
check_thumbnails_overflow();
|
|
255
|
+
}
|
|
238
256
|
</script>
|
|
239
257
|
|
|
240
258
|
<svelte:window bind:innerHeight={window_height} />
|
|
@@ -342,6 +360,9 @@
|
|
|
342
360
|
bind:this={container_element}
|
|
343
361
|
class="thumbnails scroll-hide"
|
|
344
362
|
data-testid="container_el"
|
|
363
|
+
style="justify-content: {thumbnails_overflow
|
|
364
|
+
? 'flex-start'
|
|
365
|
+
: 'center'};"
|
|
345
366
|
>
|
|
346
367
|
{#each resolved_value as media, i}
|
|
347
368
|
<button
|
|
@@ -541,7 +562,7 @@
|
|
|
541
562
|
display: flex;
|
|
542
563
|
position: absolute;
|
|
543
564
|
bottom: 0;
|
|
544
|
-
justify-content:
|
|
565
|
+
justify-content: flex-start;
|
|
545
566
|
align-items: center;
|
|
546
567
|
gap: var(--spacing-lg);
|
|
547
568
|
width: var(--size-full);
|