Skip to content

Show image previews side-by-side when consecutive #193

Closed
@gnprice

Description

@gnprice

Zulip web shows image previews that are fairly small. Then when a message has several images consecutively, it shows them next to each other in a row.

Currently we show image previews with a design that's modeled on Zulip web, except that we haven't implemented the logic to show several images next to each other on a row: we just show them one above the other, much like we would if there were text paragraphs in between.

(Specifically based on Zulip web with its old design — see #157 — but if this area has changed at all in the 2023 redesign, the changes were subtle. So I don't think they affect this issue, and we can handle this issue just as well before or after doing #157.)

As long as we're matching Zulip web's small previews, we should follow Zulip web in taking advantage of the small size to save vertical space, by showing multiple previews next to each other.

(Potentially we'll later decide to do something more different from Zulip web's approach instead. But for anything that's fancier than showing the previews one after the other vertically, we'll want the same code changes discussed below, so this work will be useful regardless.)


In the code, this may be a bit subtle because it will involve making some of our perhaps over-simple abstractions a bit less simple: currently we have a one-to-one mapping from the relevant HTML elements, via parseBlockContentList to ImageNode objects that go in a list, then via BlockContentList to MessageImage widgets that go in a Column. To have several images in a row, we'll need their widgets to have a common parent that goes in the Column, instead of each going directly into the Column.

On the principle of keeping complexity out of widget build time, let's let BlockContentList continue to have a simple one-to-one mapping from node inputs to widget outputs, and put the new complexity in the content nodes instead. We can add a new type of BlockContentNode that contains several images, and give parseBlockContentList the job of detecting runs of consecutive image-preview elements and putting them into a single such node.

Metadata

Metadata

Assignees

Labels

a-contentParsing and rendering Zulip HTML content, notably message contentsa-designVisual and UX design

Type

No type

Projects

Status

Done

Relationships

None yet

Development

No branches or pull requests

Issue actions