Allow custom cropping of profile pictures, organization logos, custom emoji at upload time #24324

alya · 2023-02-08T20:17:56Z

There are a few places in the settings where users can upload images, with specific requirements on the dimensions of the uploaded image (e.g., square) imposed by the Zulip app. To make this pleasant to manage, we should allow the user to select the desired image area to be used at upload time, using a draggable box with the correct dimensions to make the selection.

Notes:

The default selection should be the largest box (with correct dimensions) that fits completely within the image, centered inside the image. If the image already has the right dimensions, this means the whole image will be selected.
It should be possible to select the entire image, even if the dimensions don't match. In that case, a transparent background should be added to fill out the extra space around the image.

Possible extensions:

A "Scale to fit" option to adjust image dimensions.

CZO discussion

zulipbot · 2023-02-08T20:17:58Z

Hello @zulip/server-emoji, @zulip/server-settings members, this issue was labeled with the "area: emoji", "area: settings (user)", "area: settings (admin/org)" labels, so you may want to check it out!

akshatakulkarni25 · 2023-02-09T02:57:20Z

@zulipbot claim

zulipbot · 2023-02-09T02:57:21Z

Welcome to Zulip, @akshatakulkarni25! We just sent you an invite to collaborate on this repository at https://github.com/zulip/zulip/invitations. Please accept this invite in order to claim this issue and begin a fun, rewarding experience contributing to Zulip!

Here's some tips to get you off to a good start:

Join me on the Zulip developers' server, to get help, chat about this issue, and meet the other developers.
Unwatch this repository, so that you don't get 100 emails a day.

As you work on this issue, you'll also want to refer to the Zulip code contribution guide, as well as the rest of the developer documentation on that site.

See you on the other side (that is, the pull request side)!

akshatakulkarni25 · 2023-02-09T03:03:40Z

@zulipbot claim

zulipbot · 2023-02-09T03:03:42Z

Hello @akshatakulkarni25, it looks like we've already sent you a collaboration invite at https://github.com/zulip/zulip/invitations, but you haven't accepted it yet!

Please accept the invite and try to claim this issue again afterwards. We look forward to your contributions!

akshatakulkarni25 · 2023-02-09T03:05:20Z

@alya can i work on this issue

aman-gupta-03 · 2023-02-09T09:06:56Z

@zulipbot claim

zulipbot · 2023-02-09T09:07:05Z

Hello @aman-gupta-03, it looks like you've currently claimed 1 issue in this repository. We encourage new contributors to focus their efforts on at most 1 issue at a time, so please complete your work on your other claimed issues before trying to claim this issue again.

We look forward to your valuable contributions!

sarveshwar08 · 2023-02-09T09:13:48Z

@zulipbot claim

zulipbot · 2023-02-09T09:13:50Z

Welcome to Zulip, @sarveshwar08! We just sent you an invite to collaborate on this repository at https://github.com/zulip/zulip/invitations. Please accept this invite in order to claim this issue and begin a fun, rewarding experience contributing to Zulip!

Here's some tips to get you off to a good start:

Join me on the Zulip developers' server, to get help, chat about this issue, and meet the other developers.
Unwatch this repository, so that you don't get 100 emails a day.

As you work on this issue, you'll also want to refer to the Zulip code contribution guide, as well as the rest of the developer documentation on that site.

See you on the other side (that is, the pull request side)!

sarveshwar08 · 2023-02-09T09:16:37Z

@zulipbot claim

zulipbot · 2023-02-09T09:16:38Z

Hello @sarveshwar08, it looks like we've already sent you a collaboration invite at https://github.com/zulip/zulip/invitations, but you haven't accepted it yet!

Please accept the invite and try to claim this issue again afterwards. We look forward to your contributions!

akarsh-jain-790 · 2023-02-09T12:13:48Z

@zulipbot claim

zulipbot · 2023-02-09T12:13:49Z

@akarsh-jain-790 This issue cannot be claimed, as someone else is already working on it. Please see our contributor guide for advice on finding an issue to work on. Thanks!

andersk · 2023-02-18T08:03:03Z

Since we’re already using Uppy, I note that Uppy has a plugin for this: https://uppy.io/docs/image-editor/

added image editor from uppy for this feature this will allow users to custom crop their images at upload Fixes zulip#24324

added image editor from uppy for this feature this will allow users to custom crop their images at upload updated a puppeteer test admin.ts Fixes zulip#24324

This commit implements a feature to allow the user to crop an image whenever he uploads a new image in Zulip using the uppy library. This feature also implements an option to allow the user to scale the image to fit when necessary. For example, if the user tries to upload a rectangle shaped image as his profile picture, this image will be adjusted to completely fit the squared shape form of a profile picture. This feature is implemented for: adding a new profile picture, adding a new organization logo and icon, creating a custom emoji, creating a new bot, editing an existing bot. This feature also creates and modificates existing end-to-end tests that reproduce behaviour associated with the feature. Co-authored-by: Afonso Azaruja <afonso.azaruja@tecnico.ulisboa.pt> Fixes zulip#24324.

whenever he uploads a new image in Zulip using the uppy library. This feature also implements an option to allow the user to scale the image to fit when necessary. For example, if the user tries to upload a rectangle shaped image as his profile picture, this image will be adjusted to completely fit the squared shape form of a profile picture. This feature is implemented for: adding a new profile picture, adding a new organization logo and icon, creating a custom emoji, creating a new bot, editing an existing bot. This feature also creates and modificates existing end-to-end tests that reproduce behaviour associated with the feature. Fixes zulip#24324 Co-authored-by: Pedro Almeida <pedrorebeloalmeida@tecnico.ulisboa.pt>

This commit implements a feature to allow the user to crop an image whenever he uploads a new image in Zulip using the uppy library. This feature also implements an option to allow the user to scale the image to fit when necessary. For example, if the user tries to upload a rectangle shaped image as his profile picture, this image will be adjusted to completely fit the squared shape form of a profile picture. This feature is implemented for: adding a new profile picture, adding a new organization logo and icon, creating a custom emoji, creating a new bot, editing an existing bot. This feature also creates and modificates existing end-to-end tests that reproduce behaviour associated with the feature. Co-authored-by: Pedro Almeida <pedrorebeloalmeida@tecnico.ulisboa.pt> Fixes zulip#24324.

This commit implements a feature to allow the user to crop an image whenever he uploads a new image in Zulip using the uppy library. This feature also implements an option to allow the user to scale the image to fit when necessary. For example, if the user tries to upload a rectangle shaped image as his profile picture, this image will be adjusted to completely fit the squared shape form of a profile picture. This feature is implemented for: adding a new profile picture, adding a new organization logo and icon, creating a custom emoji, creating a new bot, editing an existing bot. This feature also creates and modificates existing end-to-end tests that reproduce behaviour associated with the feature. Co-authored-by: Pedro Almeida <pedrorebeloalmeida@tecnico.ulisboa.pt> Co-authored-by: Pedro Alemida <160421883+pedroiralmeida@users.noreply.github.com> Fixes zulip#24324.

This commit implements a feature to allow the user to crop an image whenever he uploads a new image in Zulip using the uppy library. This feature also implements an option to allow the user to scale the image to fit when necessary. For example, if the user tries to upload a rectangle shaped image as his profile picture, this image will be adjusted to completely fit the squared shape form of a profile picture. This feature is implemented for: adding a new profile picture, adding a new organization logo and icon, creating a custom emoji, creating a new bot, editing an existing bot. This feature also creates and modificates existing end-to-end tests that reproduce behaviour associated with the feature. Co-authored-by: Afonso Azaruja <afonso.azaruja@tecnico.ulisboa.pt> Fixes zulip#24324.

This commit implements a feature to allow the user to crop an image whenever he uploads a new image in Zulip using the uppy library. This feature also implements an option to allow the user to scale the image to fit when necessary. For example, if the user tries to upload a rectangle shaped image as his profile picture, this image will be adjusted to completely fit the squared shape form of a profile picture. This feature is implemented for: adding a new profile picture, adding a new organization logo and icon, creating a custom emoji, creating a new bot, editing an existing bot. This feature also creates and modifies existing end-to-end tests that reproduce behaviour associated with the feature. Co-authored-by: Afonso Azaruja <afonso.azaruja@tecnico.ulisboa.pt> Fixes zulip#24324.

This commit seeks to refactor some changes, such as unnecessary code movements, accidental comment deletions and change camel case to snake case. Fixes: zulip#24324.

This commit seeks to refactor some previous changes such as, unnecessary code movements, accidental comment deletions and change camel case to snake case. Fixes: zulip#24324.

Refactor the `other_elements_to_hide` constant for bot forms to use the .hideable class. This change replaces fragile lists of specific elements with a more maintainable and readable approach. Fixes part of zulip#24324.

This commit aims to simplify settings.css by using existing classes and implementing divs to separate buttons and make alignments easier. Fixes part of zulip#24324.

This commit adds translations for the following strings across all supported languages: - "New organization icon" - "New organization logo" - "New profile picture" Fixes part of zulip#24324.

This commit makes it so the caller of both `build_widget` functions passes the cropper options directly, using an exported type. Fixes part of zulip#24324.

Rename clear button on edit_bot_form to something more relevant. Fixes part of zulip#24324.

This commit undos a validation that was being made to bypass a warning in the console. This is now removable because the warning does not appear anymore regardless of the validation. Fixes part of zulip#24324.