terpimost commented 7 months ago

CZO thread This issue could be separated to multiple PR's or other issues. The overall advice is to make deployable meaningful change, which is easy to review.

Primary Figma area about this design

UPDATE FEB 18, 2024

Decided to not have a stroke on buttons. So no

/* white stroke via shadow */
box-shadow: 0px 0px 2px 0px hsla(0, 0%, 100%, 0.50);

Clarifications

Background

Media viewer is a modal so it covers the main app view with blurred background:

background: hsla(240, 4%, 20%, 0.5);
backdrop-filter: blur(25px);

and in the dark theme of the app the background should be: hsla(240, 4%, 35%, 0.6)

Light	Dark

Switchable background

Once the main experience of image viewer is done we could implement a background switch: Which are 4 buttons of different background colors:

chessboard patter filled rectangle could use this svg as repeatable background:

<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none" viewBox="0 0 10 10"><path fill="#A3A3A3" d="M0 5h5v5H0zm5-5h5v5H5z"/><path fill="#666" d="M5 5h5v5H5zM0 0h5v5H0z"/></svg>

Every circle is 10x10px. And selection stroke is just a 80% white border hsla(0, 0%, 100%, 0.8) All buttons should be placed in flexbox with:

background: hsla(0, 0%, 0%, 0.18);
/* white stroke via shadow */
box-shadow: 0px 0px 2px 0px hsla(0, 0%, 100%, 0.50);

For "transparent" background we should use this as repeatable background image:

<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none" viewBox="0 0 10 10"><path fill="#777780" d="M0 5h5v5H0zm5-5h5v5H5z"/><path fill="#666670" d="M5 5h5v5H5zM0 0h5v5H0z"/></svg>

Default background would look like this:

Black background:

White background: Note that color of active thumbnail border, font color on top bars, close icon color, label color are pure black, also on the image label and the author there is no text shadow

Autotuned background

If there is a desire and time we could autotune default background color per image for example with https://www.npmjs.com/package/fast-average-color. So for example yellow images would have yellowish background:

We would want to convert color to LCH and tune the lightness to 20%, while transparency is 50%

Author and image label

color: #FFF;
font-family: Source Sans 3;
font-size: 16px;
font-style: normal;
font-weight: 400;

/* white text shadow */
box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.20);

Main image viewer panel

Buttons inside the panel don't have any background in the default state. All buttons should be placed in a container

some buttons might have disabled state. All buttons should be placed in flexbox with:

background: hsla(0, 0%, 0%, 0.18);
/* white stroke via shadow */
box-shadow: 0px 0px 2px 0px hsla(0, 0%, 100%, 0.50);

The button border radius is 4px, hover bg is hsla(0, 0%, 0%, 0.08), active bg is hsla(0, 0%, 0%, 0.12), disabled is just text color is 50% alpha or opacity on button label.

minus icon is 16px:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M2.668 8c0-.367.298-.665.665-.665h9.334a.665.665 0 0 1 0 1.33H3.333A.665.665 0 0 1 2.668 8Z"/></svg>

plus icon:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M8.665 3.333v4.002h4.002a.665.665 0 1 1 0 1.33H8.665v4.002a.665.665 0 0 1-1.33 0V8.665H3.333a.665.665 0 1 1 0-1.33h4.002V3.333a.665.665 0 0 1 1.33 0Z"/></svg>

Font in zoom level % should have tabular numbers and the button (not yet clickable) min width should be 52px

font-variant-numeric: proportional-nums; /* <numeric-spacing-values> */
font-variant-numeric: tabular-nums; /* <numeric-spacing-values> */

24px close icon is sitting inside 28x28px transparent button

but hover and active states should be as in other buttons:

Close icon:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#fff" d="M19.457 5.957 13.412 12l6.045 6.045a.997.997 0 1 1-1.41 1.41L12 13.413l-6.044 6.045a.997.997 0 1 1-1.41-1.41L10.59 12 4.546 5.957a.997.997 0 1 1 1.41-1.41l6.045 6.044 6.045-6.045a.997.997 0 1 1 1.41 1.41Z"/></svg>

Layout

Prev Next buttons

24 px prev icon:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#fff" d="M14.707 5.293a1 1 0 0 0-1.414 0l-6 6a1 1 0 0 0 0 1.414l6 6a1 1 0 0 0 1.414-1.414L9.414 12l5.293-5.293a1 1 0 0 0 0-1.414Z"/></svg>

24 px next icon:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#fff" d="M9.293 5.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414-1.414L14.586 12 9.293 6.707a1 1 0 0 1 0-1.414Z"/></svg>

It is 100% round:

border-radius: 100px;
background: rgba(0, 0, 0, 0.18);
box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 0.50);

Default:

Hover:

Active:

Thumbnails

Thumbnails are a fixed size rectangles 120x80 put in a flexbox with 1px gap: and about 10px padding on top (to space out from default image bottom border)

active thumbnail is selected with white frame which is always in the middle of the screen:

non active thumbnail is 50% transparency, while hovered thumbnail has 100% opacity, active thumbnail doesn't have the background (background: rgba(115, 115, 115, 0.50);)

Responsivity

More button icon 16px:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M8 1.667A1.667 1.667 0 1 0 8 5a1.667 1.667 0 0 0 0-3.333Zm0 4.666a1.667 1.667 0 1 0 0 3.334 1.667 1.667 0 0 0 0-3.334ZM8 11a1.667 1.667 0 1 0 0 3.333A1.667 1.667 0 0 0 8 11Z"/></svg>

Image and interactions

It helpful to give an image a white border/shadow so user would see transparent image border or dark image borders on dark background:

I used outside border of 50% white with 0.5 px width. It could be border: 0.5px solid rgba(255, 255, 255, 0.50); or similar effect with box shadow.

I suggest to place image with object-fit: scale-down; so we don't zoom in image if there is no need for that. But for small images which are less than 16px on a smaller side we could object-fit: contain; with reflecting zoom level in the panel.

We don't want to go outside the default maximum area of the image by default:

But when the image is zoomed by the user we could leave top pane buttons on top and going over thumbnails:

zulipbot commented 7 months ago

Hello @zulip/design members, this issue was labeled with the "redesign" label, so you may want to check it out!

sivasathyaseeelan commented 7 months ago

Hello @terpimost, I believe I can implement this new feature. Could you please provide guidance on where I should begin?

mk0904 commented 7 months ago

@zulipbot claim

zulipbot commented 7 months ago

Hello @mk0904!

Thanks for your interest in Zulip! You have attempted to claim an issue without the label "help wanted". You can only claim and submit pull requests for issues with the help wanted label.

If this is your first time here, we recommend reading our guide for new contributors before getting started.

vighneshbhat9945 commented 7 months ago

I request @terpimost to review my PR that solves the initial part of this issue. PR:https://github.com/zulip/zulip/pull/28490

Thanush19 commented 5 months ago

hey @terpimost , if the issue is not resolved ,i can work on this

Moini commented 1 month ago

Could this also display SVG files, perhaps? (or any image type the browser supports, basically?)

terpimost commented 1 month ago

I think yes

On Sun, Jul 21, 2024 at 3:00 PM Moini @.***> wrote:

Could this also display SVG files, perhaps? (or any image type the browser supports, basically?)

— Reply to this email directly, view it on GitHub https://github.com/zulip/zulip/issues/28479#issuecomment-2241742582, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAOQVTLGLRIMDMRJFU5MWOTZNQAL3AVCNFSM6AAAAABBQQJ4X6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENBRG42DENJYGI . You are receiving this because you were mentioned.Message ID: @.***>