Description

Purpose

The purpose of this page is to provide a preview of the attachment, its metadata, and the actions that can be performed on the file.

Mockups

Here’s a mockup with the attachment tab selected at the bottom:

When the user interacts with any part of the attachment line, except the actions menu, the preview should open.

Desktop Experience

On desktop, the preview screen will open as a dialog to retain detailed context.

The default layout will be in landscape mode to optimize element distribution, with the preview occupying the larger portion of the screen. Metadata will be displayed in a vertical column, with actions for the file placed below it.

Mobile Experience

On mobile, the layout will be arranged vertically to accommodate the smaller screen size. The preview will be at the top, followed by metadata, and then actions at the bottom.

File Types and Previews

While the images above show an image preview, other file types like text can also be previewed:

No Preview

If a preview isn’t available, the interface will clearly indicate this. In such cases, there’s no need for a large preview window with “No preview available.” Instead, we’ll use the same condensed vertical layout for both desktop and mobile experiences.