Repository navigation
fix: show filenames on tight space - #65131
kristian-zendato wants to merge 2 commits into
Conversation
susnux
added
bug
3. to review
|
Screenshots ? 😊 |
|
@skjnldsv screenshots are added. |
| /** Row height of the files list, must match `--row-height` */ | ||
| const ROW_HEIGHT = 44 | ||
| /** Margin around cells after the actions cell, must match `--cell-margin` */ | ||
| const CELL_MARGIN = 14 |
There was a problem hiding this comment.
I am not really happy with this as this now causes two places to adjust in case we change anything on the styles.
Just asking: is it not possible to just have some break points even if not ideal?
If not then this is ok as well ;)
There was a problem hiding this comment.
@susnux When I implement it, I also feel it but I think it's the best way for this.
About breakpoints, it is not a perfect solution as well because we have different columns on different file list(for example, personal files and deleted files).
|
Hi @kristian-zendato @susnux any ETA on possible merge? |
| const renderActionsWidth = [...this.$el.querySelectorAll<HTMLElement>(':scope > .files-list__row-action--inline')] | ||
| .filter((element) => element.offsetWidth > 0) | ||
| .reduce((total, element) => total + element.offsetWidth + parseFloat(getComputedStyle(element).marginInlineEnd || '0'), 0) | ||
|
|
||
| reportInlineActionsWidth(this.inlineCapableActions.length * INLINE_ACTION_WIDTH + renderActionsWidth) | ||
| }, |
There was a problem hiding this comment.
I gotta say, not super fond of hard pixel computation in a reactive design like Files.
skjnldsv
left a comment
skjnldsv
left a comment
There was a problem hiding this comment.
So, I'm not against it, because I think it's a² nice addition and definitely something needed.
BUT, I ill only approve if many tests are added to ensure
- new columns added without matching tests fails, so we can caugh this and adjust accordingly
- various width computation and calculation are also tested, so that if something external changes, we also catch it
Signed-off-by: kristian-zendato <kristian.zendato@nextcloud.com>
07b82d5 to
6179611
Compare
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
|
Hello there, We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process. Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6 Thank you for contributing to Nextcloud and we hope to hear from you soon! (If you believe you should not receive this message, you can add yourself to the blocklist.) |
Inline row actions move into the row menu when the files list runs out of room for the name column, e.g. the trashbin "restore" action at the Playwright viewport. Let `triggerActionForFile` and `triggerActionForFileId` click the inline button when it is rendered and fall back to the menu otherwise, and drop the inline-only helpers. Assisted-by: ClaudeCode:claude-fable-5-1 Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
|
Added fixes for PW as some actions are now moved to the ... menu instead |
Summary
useFileListLayoutthat works out which parts of the list fit into the available width and hides them one at a time until the name column has at least 200pxFilesListVirtualcomputes the layout from the list width and the available columns. It thenprovides the layout toFileEntry,FileEntryActions,FilesListTableHeaderandFilesListTableFooter, so the header, rows and footer always show the same columns.FileEntryActionsreports how much width its inline actions need. That includes render actions, which are measured with aResizeObserverbecause they render asynchronously. The layout uses the largest width reported. That value is reset when the current folder or view changes.isNarrowis set. They are now hidden only when there isn't enough space for them.Screenshots
Checklist
3. to review, feature component)stable32)AI (if applicable)