Skip to content

design(chat): rearrange file previews in combined message - #19005

Open
Antreesy wants to merge 3 commits into
mainfrom
fix/18989/multiple-files
Open

design(chat): rearrange file previews in combined message#19005
Antreesy wants to merge 3 commits into
mainfrom
fix/18989/multiple-files

Conversation

@Antreesy

@Antreesy Antreesy commented Aug 14, 2026

Copy link
Copy Markdown
Contributor

☑️ Resolves

AI (if applicable)

  • The content of this PR was partly or fully generated using AI

🖌️ UI Checklist

🖼️ Screenshots / Screencasts

🏚️ Before 🏡 After
2026-09-02_15h13_36 2026-09-02_15h15_10
image image

🚧 TODO

  • Individual file actions - complicated with each file being a link, we can't nest buttons inside

🏁 Checklist

  • 🌏 Tested with different browsers / clients:
    • Chromium (Chrome / Edge / Opera / Brave)
    • Firefox
    • Safari
    • Talk Desktop
    • Integrations with Files sidebar and other apps
    • Not risky to browser differences / client
  • 🖌️ Design was reviewed, approved or inspired by the design team
  • ⛑️ Tests are included or not possible
  • 📗 User documentation in https://github.com/nextcloud/documentation/tree/master/user_manual/talk has been updated or is not required

@Antreesy Antreesy added this to the ⛅ Next Beta/RC (35) milestone Aug 14, 2026
@Antreesy
Antreesy requested a review from nimishavijay August 14, 2026 12:43
@Antreesy Antreesy self-assigned this Aug 14, 2026
@Antreesy Antreesy added feature: frontend 🖌️ "Web UI" client feature: upload & shares & voice 📤🎙️ Sharing files into a chat and audio recordings design labels Aug 14, 2026
@nimishavijay

This comment was marked as resolved.

@Antreesy

This comment was marked as resolved.

@bentuna

This comment was marked as resolved.

@bentuna

This comment was marked as resolved.

@Antreesy

This comment was marked as resolved.

@Antreesy
Antreesy marked this pull request as draft August 17, 2026 16:41
@nimishavijay

This comment was marked as resolved.

@Antreesy
Antreesy force-pushed the fix/18989/multiple-files branch from 7c80ca6 to 13ff9f0 Compare August 25, 2026 17:04
@nickvergessen

This comment was marked as resolved.

- make a two-line layout (name / extension + size)
- increase mime-icon size to 32px

Assisted-by: ClaudeCode:claude-sonnet-5
@Antreesy
Antreesy force-pushed the fix/18989/multiple-files branch from 13ff9f0 to da786b1 Compare September 2, 2026 14:26
@Antreesy Antreesy changed the title fix(chat): limit multiple file message to a single row design(chat): rearrange file previews in combined message Sep 2, 2026
@Antreesy
Antreesy marked this pull request as ready for review September 2, 2026 14:27
@nextcloud-command nextcloud-command added the AI assisted This PR contains AI-assisted commits label Sep 2, 2026
Assisted-by: ClaudeCode:claude-sonnet-5
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
- allow to navigate left-right in the Viewer within a combined file message

Assisted-by: ClaudeCode:claude-sonnet-5
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
@Antreesy
Antreesy force-pushed the fix/18989/multiple-files branch from da786b1 to 8e885ee Compare September 2, 2026 14:44
<FilePreview
v-for="key in otherKeys"
:key="key"
rowLayout

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image

You forgot single messages :/

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks fine? Or you want large PDF mimeicon?)

let list = [this.file]
let loadMore = undefined

if (this.itemType === SHARED_ITEM.TYPES.MEDIA && this.isSharedItems) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This would prevent across messages media navigation. You can see in one pic message you cannot navigate to other media

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that was reported as confusing internally (esp. the direction left-right for new-old), and would be the goal. Other media still available from shared items tab (and they have to be loaded anyway)

height: calc(var(--preview-size) + var(--preview-name-height));
min-width: 0;
max-width: var(--preview-size);
aspect-ratio: 1;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

failed image previews in combined tiles. The tile now uses aspect-ratio:1; height:auto; line-height:0 and dropped the --preview-name-height reservation, so when a preview fails and shouldShowFileDetail flips true, the name renders inside a fixed square with line-height:0 and overflows/collapses.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

AI assisted This PR contains AI-assisted commits design feature: frontend 🖌️ "Web UI" client feature: upload & shares & voice 📤🎙️ Sharing files into a chat and audio recordings

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Group multiple images in one message - collage / canvas / grid layout

6 participants