Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implement 3-way compose box resizing #29966

Open
Tracked by #24878
alya opened this issue May 6, 2024 · 1 comment · May be fixed by #30396
Open
Tracked by #24878

Implement 3-way compose box resizing #29966

alya opened this issue May 6, 2024 · 1 comment · May be fixed by #30396
Labels
area: compose (misc) redesign Part of the webapp redesign project, including blockers.

Comments

@alya
Copy link
Contributor

alya commented May 6, 2024 •
edited

As part of the compose box redesign, we should implement a 3-way compose box resizing button:

  • The first click expands the compose box half-way (new state).
  • The second click expands it all the way.
  • The third click collapses the compose box to its default (open) size.

There are different icons for each of these states. See live demo.

Notes:

  • We may need to experiment with how tall the intermediate-size compose box is; see demo for a starting point.
  • As a follow-up, we should be able to remove the ability to drag the corner to stretch the compose box. This is likely to be helpful for moving the compose box buttons into the text area and having that look good.

Blockers:

This issue is part of #24878.

CZO discussion

Live demo with the source code on Repl.it. Here is the decomposed source code archive:
compose-decomposed.zip

The css code is split to decomposed areas but all the js code is in a single file. The file isn't big so it is easier to follow the logic of interactions between html and js.
@alya alya added area: compose (misc) redesign Part of the webapp redesign project, including blockers. labels May 6, 2024
@zulipbot
Copy link
Member

zulipbot commented May 6, 2024

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

@alya alya mentioned this issue May 6, 2024
Open
15 tasks
N-Shar-ma added a commit to N-Shar-ma/zulip that referenced this issue Jun 11, 2024
@N-Shar-ma
compose: Allow 3-way compose box resizing, with new half screen state.
658125a 
Apart from the normal (collapsed) and full screen sizes, a new half-ish
screen intermediate size is now available. All three can be cycled
through by clicking the compose resize button in the order: collapsed ->
half screen -> full screen.

The vertical resize icon in the bottom right corner of the compose box
is no longer needed so has been removed.

Note that in the intermediate state, the compose box may cover the
bottom of the message feed, which cannot be scrolled into view.

Fixes: zulip#29966.
N-Shar-ma added a commit to N-Shar-ma/zulip that referenced this issue Jun 11, 2024
@N-Shar-ma
compose: Allow 3-way compose box resizing, with new half screen state.
81c13bb 
Apart from the normal (collapsed) and full screen sizes, a new half-ish
screen intermediate size is now available. All three can be cycled
through by clicking the compose resize button in the order: collapsed ->
half screen -> full screen.

The vertical resize icon in the bottom right corner of the compose box
is no longer needed so has been removed.

Note that in the intermediate state, the compose box may cover the
bottom of the message feed, which cannot be scrolled into view.

Fixes: zulip#29966.
N-Shar-ma added a commit to N-Shar-ma/zulip that referenced this issue Jun 11, 2024
@N-Shar-ma
compose: Allow 3-way compose box resizing, with new half screen state.
04ce4dd 
Apart from the normal (collapsed) and full screen sizes, a new half-ish
screen intermediate size is now available. All three can be cycled
through by clicking the compose resize button in the order: collapsed ->
half screen -> full screen.

The vertical resize icon in the bottom right corner of the compose box
is no longer needed so has been removed.

Note that in the intermediate state, the compose box may cover the
bottom of the message feed, which cannot be scrolled into view.

Fixes: zulip#29966.
@N-Shar-ma N-Shar-ma linked a pull request Jun 11, 2024 that will close this issue
Open
12 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area: compose (misc) redesign Part of the webapp redesign project, including blockers.
Projects
Zulip 9.0 priorities
Status: No status
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

compose: Allow 3-way compose box resizing, with new half screen state. N-Shar-ma/zulip
2 participants
@alya @zulipbot