Repository navigation
fix: show filenames on tight space - #65131
kristian-zendato wants to merge 1 commit 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}
This branch has not been deployed
5 participants
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)