Open terpimost opened 7 months ago
Hello @zulip/design members, this issue was labeled with the "redesign" label, so you may want to check it out!
Hello @terpimost, I believe I can implement this new feature. Could you please provide guidance on where I should begin?
@zulipbot claim
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.
I request @terpimost to review my PR that solves the initial part of this issue. PR:https://github.com/zulip/zulip/pull/28490
hey @terpimost , if the issue is not resolved ,i can work on this
Could this also display SVG files, perhaps? (or any image type the browser supports, basically?)
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: @.***>
That would be nice - currently, it doesn't recognize SVG as image file, so only offers download.
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
Clarifications
Background
Media viewer is a modal so it covers the main app view with blurred background:
and in the dark theme of the app the background should be:
hsla(240, 4%, 35%, 0.6)
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:
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:For "transparent" background we should use this as repeatable background image:
Default background would look like this:![image](https://github.com/zulip/zulip/assets/1903309/9e642ff3-5150-47f0-b618-9c575fc4f123)
Black background:![image](https://github.com/zulip/zulip/assets/1903309/e83497ef-36ff-4d0b-8073-03bbcd3473c7)
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
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:
The button border radius is 4px, hover bg is
hsla(0, 0%, 0%, 0.08)
, active bg ishsla(0, 0%, 0%, 0.12)
, disabled is just text color is 50% alpha or opacity on button label.minus icon is 16px:
plus icon:
Font in zoom level % should have tabular numbers and the button (not yet clickable) min width should be 52px
24px close icon is sitting inside 28x28px transparent button
but hover and active states should be as in other buttons:
Close icon:
Layout
Prev Next buttons
24 px prev icon:
24 px next icon:
It is 100% round:
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:
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 couldobject-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:
![image](https://github.com/zulip/zulip/assets/1903309/4b1623f6-f1f3-48f3-a89c-2ea9ecaade0b)
But when the image is zoomed by the user we could leave top pane buttons on top and going over thumbnails: