The GIF icon was taking more height than it was alloted to.
The height taken also varied slighly based on external factors.
This pushed other buttons out of their desired position.
We don't hide popover on click for formatting buttons, emoji picker and time
picker.
Emoji and time picker popovers need a reference to be displayed,
hence we don't hide them.
Not hiding formatting buttons is based on past discussion.
The current instance of compose popover is stored locally
so that we can access it across different modules.
The basic approach for hiding / displaying a button is based on
width and is executed at `sm` breakpoint as per our
`css_variables.js`.
Used handlebars and `hide/show-sm` css class to make this
work. This avoids using too much JS to hide/display elements.
* We move enter sends into its own row separate from compose
control buttons and send button. This makes sure compose control
icons don't wrap on narrow widths.
* Move char limit indicator parallel to enter sends button.
* Left align character exceeded count at bottom.
`Press Enter to send` used to hide `Send` button, we remove that
behaviour.
We show the current state of `Enter` hotkey action via text below
`Send` button which can toggle behaviour on click.
* We use flexbox instead of `position: relative` to align elements.
* Increase clickable area of icons using more padding.
* Increase space between elements.
* Fix mobile compose box icon alignment.
A bug in the compose.css code resulted in showing the close button in
the banner in a wrong way. The previous logic to center the button
vertically didn't actually achieve our goals, since in cases where the
text line-wraps to two lines, it'd look oddly out of place.
Fixes#19770.
When expanding the compose box to full screen size, the buttons below
the compose box would unexpectedly jump because of how the 100% height
interacted with padding in the default box-sizing model.
Switching to border-box fixes this.
Fixes part of #19353.
The distance of compose-box from the top is hardcoded in the existing
code as `50px`, which only considers the height of the `.header`, plus the
padding-bottom of the header. This results in a bug where the top bar of
compose-box gets hidden behind the header if navbar_alerts is also present
in the view.
This commit calculates the top distance of the compose-box dynamically,
whenever the compose-box is opened and set the `top` property of the
compose-box accordingly.
Tested on my Ubuntu development environment.
Fixes: #19249.
The CSS properties used to make the `#compose-textarea` full-size
were missing for the `#preview_message_area`, thus, it was just
getting to the height as specified in the `max-height` property
of `#preview_compose_box`.
Adding the missing CSS properties resolved the problem, but only
for not-too-long messages. For very-long messages, the preview
message area was overflowing the parent container (attaining the
maximum height possible according to the content, due to the absence
of max-height), which led to the controls below compose-box to
disappear.
Adding an additional property of `height: 1.5em` solved this problem,
as if a height lower than min-height is set to an element, it attains
its min-height.
Tested manually on my Ubuntu Development environment.
Fixes: #19243.
The expand-compose icon currently overlaps with the
recipient input field of private message compose box.
Reduce the size of the division to fix overlap.
We improved it in the following ways:
* Show the error message with the maximum character
limit.
* Disable the send button.
* When the user tries to send the message via hotkeys
i.e, When "Press enter to send" is enabled or the user
uses "Shift" + "Enter" shortcut, Flash the red border
around the compose box.
Also renamed `check_and_set_overflow_text` to
`check_overflow_text` for better clarity.
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#17660
Fix a bug where the compose box cut the message without warning the user
the message pasted was longer than the allowed. It was fixed by stopping
cutting the message off and showing an indicator whenever the limit exceeds
and removing the indicator as soon as message gets less than that.
The cut off for showing the indicator is set as 90% of the limit.
Fixes#15909
Co-authored-by: João Maurício <carvalho.joaomauricio@gmail.com>
This should make it more intuitive to add
new elements to the compose box (such as
banners), and it also makes it a bit more
clear for styling purposes that the same
geometry happens whether the compose box
is open or the buttons are visible.
I lifted the #compose_container div into
the server template. It's not totally
clear to me why we need both #compose
and #compose_container, but there are
some scary comments about 1400px that
made me too timid to address that quirk.
In passing I removed a clearly redundant
click handler.
The old logic, inline in the compose area, has produced a very weird
effect where the buttons would move to fit the notification, ever
since design changes to use the full bottom row space.
We address this by just using a Tippy tooltip instead.
* Revert "frontend: Remove hover effect from small messagebox."
This reverts commit 27d9643274.
* Revert "frontend: Use placeholder style for small messagebox text."
This reverts commit 8453aac260.
* Revert "frontend: Make "Reply" button look more like a textbox."
This reverts commit 9fdd7184c6.
The 'reply' button shows the stream>topic or recipient(s) of the
selected message, for better UX. It also expands to fill the
remaining horizontal space in the button bar -- this should help make
it easier for new users to figure out how to reply.
Finally, it uses "Message" instead of "Reply", to better match the
compose box.
Fixes#17940.
There were some changes that were lost/added by mistake
during a rebase of #17707 after #18154 was merged.
Fixes the GIF icon being hidden / displayed incorrectly
with respect to the settings.
These changes were originally part of
67527a2517 but
were lost during the rebase.
We use an icon which is more clear for what it stands for.
Increase allowed size of message-control-buttons slightly so
that they are clearly visible. This is more important for
GIF icon to be visible properly than any other icon here.
Aman Agrawal
Anders Kaseorg
iampranavdhar
optimm
Priyansh Garg
Gaurav Pandey
Riken Shah
Signior-X
Tim Abbott
Priyam Seth
Steve Howell
Wesley Aptekar-Cassels
Ken Clary