feat: cutomize file picker icon size - #2580
Conversation
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #2580 +/- ##
==========================================
+ Coverage 59.86% 61.16% +1.29%
==========================================
Files 15 15
Lines 461 479 +18
Branches 96 105 +9
==========================================
+ Hits 276 293 +17
- Misses 164 165 +1
Partials 21 21 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
a0443ec to
e3b37d1
Compare
e3b37d1 to
7f75f7c
Compare
| mimeFallback: true, | ||
| ...options, | ||
| // Keep request resolution in sync with CSS display size (avoids blurry upscales) | ||
| size: options.size ?? getFilePickerPreviewSize(), |
There was a problem hiding this comment.
We can do a performance improvement here and always query 64px by default.
Because this is the size pregenerated on the backend, scaling can then be done with CSS.
In general we have two pregenerated (cheap) sizes:
- 64px
- 256px
There was a problem hiding this comment.
But if we always query 64px, the preview icon would be blurry for bigger icons size(e.g. 128px or 256px).
There was a problem hiding this comment.
sure but the use case is is basically our default of ~34px (?) and 10px.
This method would be called hundreds or thousands of times for big folders.
So the value should be at least only calculated once on first usage (css should not change anymore) and then clamped size <= 64px -> use 64px, size > 64px -> use 256px.
Otherwise this will generate too many previews causing troubles on big instances
7f75f7c to
6e38e42
Compare
6e38e42 to
6365742
Compare
| /** | ||
| * Cached snapped preview *request* size (64 or 256). | ||
| * CSS is read once — display size does not change at runtime. | ||
| */ | ||
| let previewRequestSize: number | undefined | ||
|
|
||
| /** | ||
| * Map a display size to a backend-pregenerated request size. | ||
| * size ≤ 64 → 64, size > 64 → 256 (avoids generating arbitrary preview sizes). | ||
| * | ||
| * @param size - Desired display or request size in px | ||
| */ | ||
| function toPregeneratedPreviewSize(size: number): number { | ||
| return size <= PREGENERATED_PREVIEW_SIZE_SMALL | ||
| ? PREGENERATED_PREVIEW_SIZE_SMALL | ||
| : PREGENERATED_PREVIEW_SIZE_LARGE | ||
| } | ||
|
|
||
| /** | ||
| * Resolve the preview request size from CSS display size (once), snapped to 64 or 256. | ||
| */ | ||
| function getFilePickerPreviewRequestSize(): number { | ||
| if (previewRequestSize !== undefined) { | ||
| return previewRequestSize | ||
| } | ||
|
|
||
| const raw = getComputedStyle(document.documentElement) | ||
| .getPropertyValue(FILE_PICKER_PREVIEW_SIZE_VAR) | ||
| .trim() | ||
| const parsed = Number.parseFloat(raw) | ||
| const displaySize = Number.isFinite(parsed) && parsed > 0 | ||
| ? Math.round(parsed) | ||
| : PREGENERATED_PREVIEW_SIZE_SMALL | ||
|
|
||
| previewRequestSize = toPregeneratedPreviewSize(displaySize) | ||
| return previewRequestSize | ||
| } |
There was a problem hiding this comment.
Makes sense, but for readability I would move all this below the exported stuff, as this is just helper methods (and function is hoisted in JS any ways).
Signed-off-by: kristian-zendato <kristian.zendato@nextcloud.com>
6365742 to
c3037e4
Compare
|
/backport to stable6 |
2 participants
Fixes: https://github.com/nextcloud-gmbh/customer-feature-requests/issues/1876
Summary
Make the FilePicker list thumbnails configurable via the CSS custom property
--file-picker-preview-size(default:32px), so instances can change size through theming without a public API.🤖 AI (if applicable)