Commit Graph

117 Commits

Author SHA1 Message Date
Aman Agrawal e4b8b9a24e compose: Move `Help` icon beside `Enter send` button. 2022-01-05 16:03:53 -08:00
Aman Agrawal db09639f6c compose: Change UI which toggles `enter_sends` setting.
Use a popover which displays both the options instead of long text.
We only use a small text indicating the current state which user
can click on to trigger the popover.
2022-01-05 16:03:53 -08:00
Aman Agrawal d749438551 compose_ui: Use white spinner on both dark and light theme.
Fixed alignment slightly.
2021-12-04 06:52:18 -08:00
Aman Agrawal 24900ec7f8 compose: Don't fix width of send button.
Since the width of `send` text can vary based on language. We
shouldn't fix its width.
2021-12-03 14:29:26 -08:00
Aman Agrawal c7f27f6c94 compose: Fix height of GIF icon.
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.
2021-12-03 14:29:26 -08:00
Aman Agrawal 02053f1319 compose: Add side margin to fa-exchange icon. 2021-12-03 14:29:26 -08:00
Aman Agrawal 788bf8b32e compose: Fix overflowing `.enter_sends` text on `<375px` screens. 2021-12-02 15:11:15 -08:00
Aman Agrawal baa1b4ed1d compose: Fix angle-up icon overlapping with topic input field.
The previous calculations were based on just the cross icon.
Adjusted for the angle-up icon which is 16px in width.
2021-12-02 15:11:15 -08:00
Aman Agrawal 50f916443d compose: Fix alignment of help link. 2021-12-02 15:11:15 -08:00
Aman Agrawal a84869c078 compose: Use a ligther red for character limit exceeded text. 2021-12-02 15:11:15 -08:00
Aman Agrawal ffd9d18577 compose: Enclose hotkeys in `kbd` tag.
We change how `kdb` is displayed in dark-theme for
compose so that they don't take too much user attention
when composing.
2021-12-02 15:11:15 -08:00
Aman Agrawal aaa7150b8a compose: Move overflowing buttons to a popover.
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.
2021-12-02 15:11:15 -08:00
Aman Agrawal 065b905f87 compose: Slightly move send button upwards.
This may have got misaligned after my last minutes changes to
the compose refactor PR.
2021-12-02 15:11:15 -08:00
Aman Agrawal 63c3f74056 compose: Rearrange compose bottom to separate out enter sends.
* 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.
2021-12-02 15:11:15 -08:00
Aman Agrawal a64f6edc2a compose: Use loading spinner as loading indicator. 2021-12-02 15:11:15 -08:00
Aman Agrawal 25ee6a795e compose: Never hide send button.
`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.
2021-12-02 15:11:15 -08:00
Aman Agrawal bf93ae1644 ui: Align bottom components in the same horizontal line. 2021-11-22 18:44:32 -08:00
Aman Agrawal 061e274716 compose: Add dividers.
These improves the visual organization of the compose controls.

This is consistent with the divider we have for the navbar.
2021-11-22 18:44:32 -08:00
Aman Agrawal 2af933678c compose: Refactor bottom part of compose box.
* 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.
2021-11-22 18:29:45 -08:00
Aman Agrawal d9338a68d1 compose: Show globe icon for web public streams.
Fixes #20285.
2021-11-22 15:31:22 -08:00
Anders Kaseorg 52ad928d3e styles: Fix shorthand-property-no-redundant-values.
Generated by stylelint --fix.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-11-05 17:34:13 -07:00
iampranavdhar 5b7bb5142f compose: Fix alignment of close button in warning banner.
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.
2021-10-19 12:22:45 -07:00
Anders Kaseorg ea88ec9e06 styles: Fix stylelint rule-empty-line-before.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-10-17 07:15:09 -07:00
optimm d7ee69373c compose: Fix reduced space below compose box after expanding it.
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.
2021-09-29 15:07:04 -07:00
Priyansh Garg c541699b9b compose: Fix expanded compose un-collapsible in presence of navbar_alerts.
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.
2021-07-22 14:25:48 -07:00
Priyansh Garg 9fe61944e9 compose: Fix compose-preview size in expanded mode.
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.
2021-07-22 12:51:04 -07:00
Priyansh Garg 3136c08904 compose: Fix compose top-right buttons misalignment. 2021-07-15 14:12:29 -07:00
Gaurav Pandey 269f6fb577 compose: Fix overlaping expand-compose icon.
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.
2021-07-14 11:40:16 -07:00
Riken Shah 0dbc7e0d21 compose: Improve how we handle over character limit message error.
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.
2021-07-13 08:29:55 -07:00
Riken Shah 43e7c2c7fa css: Remove `important` rule from `over_limit` class.
The main reason for doing this is to allow flashing
`box_shadow` animation when the user tried to send
over character limit message.
2021-07-13 08:29:55 -07:00
Aman Agrawal 2e196fd5d3 compose: Restyle compose send button with logo colours.
Previous sea-green colour didn't meet the WCAG AA standard
guidelines for color contrast. This changes meets WCAG AAA
standard.
2021-07-08 12:06:55 -07:00
Signior-X 6cf33c4275 compose: Add support for full size compose box.
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
2021-07-07 16:47:30 -07:00
Tim Abbott 572dbafd06 lint: Fix useless units on 0. 2021-07-07 12:54:21 -07:00
Priyam Seth 62d9f28211 compose_area: Fix compose_area pasted message bigger than max_length.
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>
2021-07-07 12:18:18 -07:00
Tim Abbott 7010777d6c compose: Remove unnecessary 10x margin.
This margin was ignored and will become a liability with future
changes to the compose box HTML.
2021-06-29 11:28:49 -07:00
Tim Abbott 8efa8e378d css: Simplify preview_message_area CSS. 2021-06-11 16:03:39 -07:00
Tim Abbott 9a5b0b4f0a css: Remove useless undo_markdown_preview CSS.
These properties had no effect, since the compose_control_button CSS
has the same effect.
2021-06-11 16:03:39 -07:00
Steve Howell 842b14b916 layout: Introduce a #compose-content div.
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.
2021-06-10 11:22:05 -07:00
Wesley Aptekar-Cassels 5c4db6ec41 compose: Increase opacity of icons.
The icons at the bottom were previously too low-contrast, so bump the
opacity up to 0.7 from 0.4.
2021-06-07 17:53:44 -07:00
Tim Abbott 9239de408a compose: Remove now unused nonexistent_stream_reply_error.
This was a holdover from the legacy "reply" button behavior; with the
new wide button model, it just becomes a normal "compose" button.
2021-05-11 23:57:57 -07:00
Tim Abbott 6a374d6d28 drafts: Replace notification when saving a draft.
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.
2021-05-11 15:01:25 -07:00
Tim Abbott f83bea76a2 compose: Revert placeholder styling for bottom reply button.
* 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.
2021-05-10 12:54:30 -07:00
Wesley Aptekar-Cassels 27d9643274 frontend: Remove hover effect from small messagebox.
Textboxes shouldn't have hover effects.
2021-05-08 08:26:16 -07:00
Wesley Aptekar-Cassels 9fdd7184c6 frontend: Make "Reply" button look more like a textbox.
* Use "text" cursor effect
* Reduce padding
* Remove blue color in placeholder text
2021-05-08 07:59:31 -07:00
Tim Abbott 318dd8b408 css: Remove grey styling for day theme compose buttons.
This day theme styling was added in
74dbcdf2a8, and some users interpreted
this buttons styling as suggesting that these buttons were disabled.
2021-05-05 11:51:56 -07:00
Ken Clary 74dbcdf2a8 frontend: Change 'reply' button label to reflect selected message.
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.
2021-05-03 14:58:02 -07:00
Tim Abbott ed6d5dcf36 css: Extract variables for the widths of the sidebars. 2021-04-30 16:02:31 -07:00
Aman Agrawal 4a91d5ffdb compose_control_buttons: Change class name for GIF icon.
Since we no longer use giphy logo to open giphy
popover, this is a more appropriate name.
2021-04-29 16:06:51 -07:00
Aman Agrawal 374ce1094b giphy: Use `zulip-icon` font to render giphy icon. 2021-04-29 09:02:25 -07:00
Aman Agrawal 2a1bcd4b59 giphy: Fix incorrectly working show/hide behaviour.
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.
2021-04-29 09:02:25 -07:00