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

Add support for fullscreen compose box #17660

Closed
timabbott opened this issue Mar 16, 2021 · 3 comments · Fixed by #17667
Closed

Add support for fullscreen compose box #17660

timabbott opened this issue Mar 16, 2021 · 3 comments · Fixed by #17667
Labels
area: compose (misc) design help wanted

Comments

@timabbott
Copy link
Sponsor Member

We've had a number of request for being able to make Zulip's compose box larger when writing a longer message and/or just wanting to not be distracted by the message feed.

The current theory is that we should have a button to expand compose box to fill the entire center panel; this has the following advantages:

  • We could use the existing compose box HTML element -- no need to duplicate code for a popover version of the compose box or deal with the possibility of it not being a singleton,
  • As a result, it'd be cheap to implement and maintain.

This is a good issue for someone used to doing frontend prototyping, and will require some care to make sure that we don't break error handling (i.e. leave space above the compose box for the purpose); one important detail is making sure autosize_textarea() interacts properly with the enlarged compose box.

We should be mindful of #16038 when thinking about this.

https://chat.zulip.org/#narrow/stream/137-feedback/topic/More.20full-featured.20compose.20box/near/1132898 has some discussion.
@zulipbot
Copy link
Member

Hello @zulip/server-compose members, this issue was labeled with the "area: compose" label, so you may want to check it out!

@Signior-X
Copy link
Member

I am working on compose box right now and have many ideas about this. Would love to try this one.
@zulipbot claim

Signior-X added a commit to Signior-X/zulip that referenced this issue Mar 17, 2021
@Signior-X
compose: Change the max-height for compose textarea
b976a56 
This commit change the max-height for new_message_textarea to
calc(50vh - 50px) in which 50vh will ensure at most half of the viewport
is taken by the compose box at max and the 50px is for the top header
that we have. This way, there will always be ample amount of space even in
small devices so that they can scroll.

Part of zulip#17660
Fixes zulip#16038
@Signior-X Signior-X mentioned this issue Mar 17, 2021
Merged
7 tasks
Signior-X added a commit to Signior-X/zulip that referenced this issue Mar 26, 2021
@Signior-X
compose: Change the max-height for compose textarea
80eeda9 
This commit change the max-height for new_message_textarea to
calc(50vh - 50px) in which 50vh will ensure at most half of the viewport
is taken by the compose box at max and the 50px is for the top header
that we have. This way, there will always be ample amount of space even in
small devices so that they can scroll.

Part of zulip#17660
Fixes zulip#16038
Signior-X added a commit to Signior-X/zulip that referenced this issue Mar 26, 2021
@Signior-X
compose: Change the max-height for compose textarea.
4a0109e 
This commit change the max-height for new_message_textarea to
calc(50vh - 50px) in which 50vh will ensure at most half of the viewport
is taken by the compose box at max and the 50px is for the top header
that we have. This way, there will always be ample amount of space even in
small devices so that they can scroll.

Part of zulip#17660
Fixes zulip#16038
Signior-X added a commit to Signior-X/zulip that referenced this issue Mar 26, 2021
@Signior-X
compose: Change the max-height for compose textarea.
e0ed88f 
This commit change the max-height for new_message_textarea to
calc(50vh - 50px) in which 50vh will ensure at most half of the viewport
is taken by the compose box at max and the 50px is for the top header
that we have. This way, there will always be ample amount of space even in
small devices so that they can scroll.

Part of zulip#17660
Fixes zulip#16038
Signior-X added a commit to Signior-X/zulip that referenced this issue Mar 26, 2021
@Signior-X
compose: Make a toggler for full screen size compose box.
04db46a 
This commit makes a working toggler in compose_actions that changes the
max height and max height accordingly making the compose box full size.
The compose_height.js maintains the state of the height of the compose
box and according to it, the toggler updates the height. Also, when the
compose box is closed, the compose box is reset to it's default behaviour
and height as expected. So, everytime user need not toggle for every
message.

Fixes zulip#17660
Signior-X added a commit to Signior-X/zulip that referenced this issue Mar 31, 2021
@Signior-X
compose: Change the max-height for compose textarea.
caa27ae 
This commit change the max-height for new_message_textarea to
calc(50vh - 50px) in which 50vh will ensure at most half of the viewport
is taken by the compose box at max and the 50px is for the top header
that we have. This way, there will always be ample amount of space even in
small devices so that they can scroll.

Part of zulip#17660
Fixes zulip#16038
Signior-X added a commit to Signior-X/zulip that referenced this issue Mar 31, 2021
@Signior-X
compose: Make a toggler for full screen size compose box.
7731816 
This commit makes a working toggler in compose_actions that changes the
max height and max height accordingly making the compose box full size.
The compose_height.js maintains the state of the height of the compose
box and according to it, the toggler updates the height. Also, when the
compose box is closed, the compose box is reset to it's default behaviour
and height as expected. So, everytime user need not toggle for every
message.

Fixes zulip#17660
@Signior-X Signior-X mentioned this issue Apr 2, 2021
Merged
Signior-X added a commit to Signior-X/zulip that referenced this issue Apr 7, 2021
@Signior-X
compose: Change the max-height for compose textarea.
199d93b 
This commit change the max-height for new_message_textarea to
calc(50vh - 50px) in which 50vh will ensure at most half of the viewport
is taken by the compose box at max and the 50px is for the top header
that we have. This way, there will always be ample amount of space even in
small devices so that they can scroll.

Part of zulip#17660
Fixes zulip#16038
Signior-X added a commit to Signior-X/zulip that referenced this issue Apr 7, 2021
@Signior-X
compose: Make a toggler for full screen size compose box.
021be75 
This commit makes a working toggler in compose_actions that changes the
max height and max height accordingly making the compose box full size.
The compose_height.js maintains the state of the height of the compose
box and according to it, the toggler updates the height. Also, when the
compose box is closed, the compose box is reset to it's default behaviour
and height as expected. So, everytime user need not toggle for every
message.

Fixes zulip#17660
Signior-X added a commit to Signior-X/zulip that referenced this issue Apr 7, 2021
@Signior-X
compose: Add destroy autosize on compose_height state change.
9f6a092 
This commit destroys the autosize of textarea when the full
screen sized compose box is toggled on. And everytime when it is
turned off, it reinitialises the autosize. This also adds a
condition in autosize_textarea to only autosize when composebox
is not in full height state.

Fixes zulip#17660
Signior-X added a commit to Signior-X/zulip that referenced this issue Apr 7, 2021
@Signior-X
compose: Add destroy autosize on compose_height state change.
415bf5f 
This commit destroys the autosize of textarea when the full
screen sized compose box is toggled on. And everytime when it is
turned off, it reinitialises the autosize. This also adds a
condition in autosize_textarea to only autosize when composebox
is not in full height state.

Fixes zulip#17660
Signior-X added a commit to Signior-X/zulip that referenced this issue Apr 7, 2021
@Signior-X
compose: Add destroy autosize on compose_height state change.
e90ec35 
This commit destroys the autosize of textarea when the full
screen sized compose box is toggled on. And everytime when it is
turned off, it reinitialises the autosize. This also adds a
condition in autosize_textarea to only autosize when composebox
is not in full height state.

Fixes zulip#17660
Signior-X added a commit to Signior-X/zulip that referenced this issue Apr 13, 2021
@Signior-X
compose: Change the max-height for compose textarea.
96e40cb 
This commit change the max-height for new_message_textarea to
calc(50vh - 50px) in which 50vh will ensure at most half of the viewport
is taken by the compose box at max and the 50px is for the top header
that we have. This way, there will always be ample amount of space even in
small devices so that they can scroll.

Part of zulip#17660
Fixes zulip#16038
Signior-X added a commit to Signior-X/zulip that referenced this issue Apr 13, 2021
@Signior-X
compose: Make a toggler for full screen size compose box.
4d484de 
This commit makes a working toggler in compose_actions that changes the
max height and max height accordingly making the compose box full size.
The compose_height.js maintains the state of the height of the compose
box and according to it, the toggler updates the height. Also, when the
compose box is closed, the compose box is reset to it's default behaviour
and height as expected. So, everytime user need not toggle for every
message.

Fixes zulip#17660
Signior-X added a commit to Signior-X/zulip that referenced this issue Apr 13, 2021
@Signior-X
compose: Add destroy autosize on compose_height state change.
00a1562 
This commit destroys the autosize of textarea when the full
screen sized compose box is toggled on. And everytime when it is
turned off, it reinitialises the autosize. This also adds a
condition in autosize_textarea to only autosize when composebox
is not in full height state.

Fixes zulip#17660
Signior-X added a commit to Signior-X/zulip that referenced this issue Apr 14, 2021
@Signior-X
compose: Make a toggler for full screen size compose box.
c3146ee 
This commit makes a working toggler in compose_actions that changes the
max height and max height accordingly making the compose box full size.
The compose_height.js maintains the state of the height of the compose
box and according to it, the toggler updates the height. Also, when the
compose box is closed, the compose box is reset to it's default behaviour
and height as expected. So, everytime user need not toggle for every
message.

Fixes zulip#17660
Signior-X added a commit to Signior-X/zulip that referenced this issue Apr 14, 2021
@Signior-X
compose: Add destroy autosize on compose_height state change.
f31fb92 
This commit destroys the autosize of textarea when the full
screen sized compose box is toggled on. And everytime when it is
turned off, it reinitialises the autosize. This also adds a
condition in autosize_textarea to only autosize when composebox
is not in full height state.

Fixes zulip#17660
Signior-X added a commit to Signior-X/zulip that referenced this issue Apr 14, 2021
@Signior-X
compose: Change the max-height for compose textarea.
08053ee 
This commit change the max-height for new_message_textarea to
calc(50vh - 50px) in which 50vh will ensure at most half of the viewport
is taken by the compose box at max and the 50px is for the top header
that we have. This way, there will always be ample amount of space even in
small devices so that they can scroll.

Part of zulip#17660
Fixes zulip#16038
Signior-X added a commit to Signior-X/zulip that referenced this issue Apr 14, 2021
@Signior-X
compose: Make a toggler for full screen size compose box.
8a3c991 
This commit makes a working toggler in compose_actions that changes the
max height and max height accordingly making the compose box full size.
The compose_height.js maintains the state of the height of the compose
box and according to it, the toggler updates the height. Also, when the
compose box is closed, the compose box is reset to it's default behaviour
and height as expected. So, everytime user need not toggle for every
message.

Fixes zulip#17660
Signior-X added a commit to Signior-X/zulip that referenced this issue Apr 14, 2021
@Signior-X
compose: Add destroy autosize on compose_height state change.
0c558c3 
This commit destroys the autosize of textarea when the full
screen sized compose box is toggled on. And everytime when it is
turned off, it reinitialises the autosize. This also adds a
condition in autosize_textarea to only autosize when composebox
is not in full height state.

Fixes zulip#17660
@zulipbot
Copy link
Member

Hello @Signior-X, you claimed this issue to work on it, but this issue and any referenced pull requests haven't been updated for 10 days. Are you still working on this issue?

If so, please update this issue by leaving a comment on this issue to let me know that you're still working on it. Otherwise, I'll automatically remove you from this issue in 4 days.

If you've decided to work on something else, simply comment @zulipbot abandon so that someone else can claim it and continue from where you left off.

Thank you for your valuable contributions to Zulip!

Signior-X added a commit to Signior-X/zulip that referenced this issue May 16, 2021
@Signior-X
compose: Change the max-height for compose textarea.
4d499b6 
This commit change the max-height for new_message_textarea to
calc(50vh - 50px) in which 50vh will ensure at most half of the viewport
is taken by the compose box at max and the 50px is for the top header
that we have. This way, there will always be ample amount of space even in
small devices so that they can scroll.

Part of zulip#17660
Fixes zulip#16038
Signior-X added a commit to Signior-X/zulip that referenced this issue May 16, 2021
@Signior-X
compose: Make a toggler for full screen size compose box.
ceb3451 
This commit makes a working toggler in compose_actions that changes the
max height and max height accordingly making the compose box full size.
The compose_height.js maintains the state of the height of the compose
box and according to it, the toggler updates the height. Also, when the
compose box is closed, the compose box is reset to it's default behaviour
and height as expected. So, everytime user need not toggle for every
message.

Fixes zulip#17660
Signior-X added a commit to Signior-X/zulip that referenced this issue May 16, 2021
@Signior-X
compose: Add destroy autosize on compose_height state change.
6cd845f 
This commit destroys the autosize of textarea when the full
screen sized compose box is toggled on. And everytime when it is
turned off, it reinitialises the autosize. This also adds a
condition in autosize_textarea to only autosize when composebox
is not in full height state.

Fixes zulip#17660
Signior-X added a commit to Signior-X/zulip that referenced this issue May 16, 2021
@Signior-X
compose: Add destroy autosize on compose_height state change.
acdddc6 
This commit destroys the autosize of textarea when the full
screen sized compose box is toggled on. And everytime when it is
turned off, it reinitialises the autosize. This also adds a
condition in autosize_textarea to only autosize when composebox
is not in full height state.

Fixes zulip#17660
Signior-X added a commit to Signior-X/zulip that referenced this issue May 17, 2021
@Signior-X
compose: Add support for full size compose box.
fd277ef 
This commit makes a working toggler in compose_actions that changes the
max height and max height accordingly making the compose box full size.
The compose_height.js maintains the state of the height of the compose
box and according to it, the toggler updates the height. Also, when the
compose box is closed, the compose box is reset to it's default behaviour
and height as expected. So, everytime user need not toggle for every
message.

It also adds destroy autosize on compose_height state change.
It destroys the autosize of textarea when the full
screen sized compose box is toggled on. And everytime when it is
turned off, it reinitialises the autosize. This also adds a
condition in autosize_textarea to only autosize when composebox
is not in full height state.

Fixes zulip#17660
Signior-X added a commit to Signior-X/zulip that referenced this issue May 29, 2021
@Signior-X
tests: Writing tests for compose height.
6a3ff0a 
Fixes zulip#17660
Signior-X added a commit to Signior-X/zulip that referenced this issue Jun 15, 2021
@Signior-X
compose: Change the max-height for compose textarea.
32b6214 
This commit change the max-height for new_message_textarea to
calc(50vh - 50px) in which 50vh will ensure at most half of the viewport
is taken by the compose box at max and the 50px is for the top header
that we have. This way, there will always be ample amount of space even in
small devices so that they can scroll.

Part of zulip#17660
Fixes zulip#16038
Signior-X added a commit to Signior-X/zulip that referenced this issue Jun 15, 2021
@Signior-X
compose: Add support for full size compose box.
0d1efd0 
This commit makes a working toggler in compose_actions that changes the
max height and max height accordingly making the compose box full size.
The compose_height.js maintains the state of the height of the compose
box and according to it, the toggler updates the height. Also, when the
compose box is closed, the compose box is reset to it's default behaviour
and height as expected. So, everytime user need not toggle for every
message.

It also adds destroy autosize on compose_height state change.
It destroys the autosize of textarea when the full
screen sized compose box is toggled on. And everytime when it is
turned off, it reinitialises the autosize. This also adds a
condition in autosize_textarea to only autosize when composebox
is not in full height state.

Fixes zulip#17660
Signior-X added a commit to Signior-X/zulip that referenced this issue Jun 15, 2021
@Signior-X
This commits changes the pattern of this PR.
ce26014 
Now this adds a class compose-fullscreen that makes
the height automatically adjust with the device
height as the display flex and heights are used.
This also makes the arrow appear everywhere and
node tests have been wrote for this.

Fixes zulip#17660
Signior-X added a commit to Signior-X/zulip that referenced this issue Jun 16, 2021
@Signior-X
compose: Add support for full size compose box.
b15febe 
This commit makes a working toggler in compose_actions that adds the
compose-fullscreen class to the compose that removes the max-height
from the compose textarea and adds flex elements above so that the
height automatically adjust with the device height. This results in
making the compose box full screen sized.

The compose_height.js maintains the state of the height of the compose
box. Also, when the compose box is closed, the compose box is reset to
it's default behaviour and original height. So, everytime user need
not toggle off the compose full size and only for specific message
it is used.

It also adds destroy autosize on compose_height state change.
It destroys the autosize of textarea when the full
screen sized compose box is toggled on. And everytime when it is
turned off, it reinitialises the autosize. This also adds a
condition in autosize_textarea to only autosize when composebox
is not in full height state.

Fixes zulip#17660
timabbott pushed a commit to Signior-X/zulip that referenced this issue Jun 26, 2021
@Signior-X @timabbott
compose: Change the max-height for compose textarea.
8d4c867 
This commit change the max-height for new_message_textarea to
calc(50vh - 50px) in which 50vh will ensure at most half of the viewport
is taken by the compose box at max and the 50px is for the top header
that we have. This way, there will always be ample amount of space even in
small devices so that they can scroll.

Part of zulip#17660
Fixes zulip#16038
timabbott pushed a commit to Signior-X/zulip that referenced this issue Jun 26, 2021
@Signior-X @timabbott
compose: Add support for full size compose box.
1c1dfbb 
This commit makes a working toggler in compose_actions that adds the
compose-fullscreen class to the compose that removes the max-height
from the compose textarea and adds flex elements above so that the
height automatically adjust with the device height. This results in
making the compose box full screen sized.

The compose_height.js maintains the state of the height of the compose
box. Also, when the compose box is closed, the compose box is reset to
it's default behaviour and original height. So, everytime user need
not toggle off the compose full size and only for specific message
it is used.

It also adds destroy autosize on compose_height state change.
It destroys the autosize of textarea when the full
screen sized compose box is toggled on. And everytime when it is
turned off, it reinitialises the autosize. This also adds a
condition in autosize_textarea to only autosize when composebox
is not in full height state.

Fixes zulip#17660
timabbott pushed a commit to Signior-X/zulip that referenced this issue Jun 29, 2021
@Signior-X @timabbott
compose: Add support for full size compose box.
c1fbd24 
This commit makes a working toggler in compose_actions that adds the
compose-fullscreen class to the compose that removes the max-height
from the compose textarea and adds flex elements above so that the
height automatically adjust with the device height. This results in
making the compose box full screen sized.

The compose_height.js maintains the state of the height of the compose
box. Also, when the compose box is closed, the compose box is reset to
it's default behaviour and original height. So, everytime user need
not toggle off the compose full size and only for specific message
it is used.

It also adds destroy autosize on compose_height state change.
It destroys the autosize of textarea when the full
screen sized compose box is toggled on. And everytime when it is
turned off, it reinitialises the autosize. This also adds a
condition in autosize_textarea to only autosize when composebox
is not in full height state.

Fixes zulip#17660
Signior-X added a commit to Signior-X/zulip that referenced this issue Jul 4, 2021
@Signior-X
compose: Add support for full size compose box.
6be2469 
This commit makes a working toggler in compose_actions that adds the
compose-fullscreen class to the compose that removes the max-height
from the compose textarea and adds flex elements above so that the
height automatically adjust with the device height. This results in
making the compose box full screen sized.

The compose_height.js maintains the state of the height of the compose
box. Also, when the compose box is closed, the compose box is reset to
it's default behaviour and original height. So, everytime user need
not toggle off the compose full size and only for specific message
it is used.

It also adds destroy autosize on compose_height state change.
It destroys the autosize of textarea when the full
screen sized compose box is toggled on. And everytime when it is
turned off, it reinitialises the autosize. This also adds a
condition in autosize_textarea to only autosize when composebox
is not in full height state.

Fixes zulip#17660
Signior-X added a commit to Signior-X/zulip that referenced this issue Jul 4, 2021
@Signior-X
compose: Add support for full size compose box.
da9bf7d 
This commit makes a working toggler in compose_actions that adds the
compose-fullscreen class to the compose that removes the max-height
from the compose textarea and adds flex elements above so that the
height automatically adjust with the device height. This results in
making the compose box full screen sized.

The compose_height.js maintains the state of the height of the compose
box. Also, when the compose box is closed, the compose box is reset to
it's default behaviour and original height. So, everytime user need
not toggle off the compose full size and only for specific message
it is used.

It also adds destroy autosize on compose_height state change.
It destroys the autosize of textarea when the full
screen sized compose box is toggled on. And everytime when it is
turned off, it reinitialises the autosize. This also adds a
condition in autosize_textarea to only autosize when composebox
is not in full height state.

Fixes zulip#17660
Signior-X added a commit to Signior-X/zulip that referenced this issue Jul 4, 2021
@Signior-X
compose: Refractor compose_height can be toggled with less CSS change.
4888999 
This commit tries to reduce the CSS that needs to be changed in the
special mode of compose height full screen.

Fixes zulip#17660
Signior-X added a commit to Signior-X/zulip that referenced this issue Jul 4, 2021
@Signior-X
compose: Add support for full size compose box.
b25691a 
This commit makes a working toggler in compose_actions that adds the
compose-fullscreen class to the compose that removes the max-height
from the compose textarea and adds flex elements above so that the
height automatically adjust with the device height. This results in
making the compose box full screen sized.

The compose_height.js maintains the state of the height of the compose
box. Also, when the compose box is closed, the compose box is reset to
it's default behaviour and original height. So, everytime user need
not toggle off the compose full size and only for specific message
it is used.

It also adds destroy autosize on compose_height state change.
It destroys the autosize of textarea when the full
screen sized compose box is toggled on. And everytime when it is
turned off, it reinitialises the autosize. This also adds a
condition in autosize_textarea to only autosize when composebox
is not in full height state.

Fixes zulip#17660
Signior-X added a commit to Signior-X/zulip that referenced this issue Jul 4, 2021
@Signior-X
compose: Refractor compose_height can be toggled with less CSS change.
377e0b0 
This commit tries to reduce the CSS that needs to be changed in the
special mode of compose height full screen.

Fixes zulip#17660
Signior-X added a commit to Signior-X/zulip that referenced this issue Jul 7, 2021
@Signior-X
compose: Add support for full size compose box.
cadc47c 
This commit makes a working toggler in compose_actions that adds the
compose-fullscreen class to the compose that removes the max-height
from the compose textarea and adds flex elements above so that the
height automatically adjust with the device height. This results in
making the compose box full screen sized.

The compose_height.js maintains the state of the height of the compose
box. Also, when the compose box is closed, the compose box is reset to
it's default behaviour and original height. So, everytime user need
not toggle off the compose full size and only for specific message
it is used.

It also adds destroy autosize on compose_height state change.
It destroys the autosize of textarea when the full
screen sized compose box is toggled on. And everytime when it is
turned off, it reinitialises the autosize. This also adds a
condition in autosize_textarea to only autosize when composebox
is not in full height state.

Fixes zulip#17660
Signior-X added a commit to Signior-X/zulip that referenced this issue Jul 7, 2021
@Signior-X
compose: Refractor compose_height can be toggled with less CSS change.
43af1db 
This commit tries to reduce the CSS that needs to be changed in the
special mode of compose height full screen.

Fixes zulip#17660
@timabbott timabbott mentioned this issue Jul 7, 2021
Open
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) design help wanted
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

compose: Add support for full-screen compose box Signior-X/zulip
3 participants
@timabbott @zulipbot @Signior-X