Commit Graph

62 Commits

Author SHA1 Message Date
sayamsamal 9b1d4ca81e tooltips: Add italics styling to description of multi-line tooltips.
The second line of a multi-line tooltip generally desctribes the
additional information which helps the major text, i.e. the first
line of the multi-line tooltip, hence it would be a good idea to
add italics styling, to differentiate it from the main title. We
describe a simple ".italic" class for the same.

We also add a shorter line height to this description using the
".tooltip-inner-content" class.
2023-02-06 18:41:31 -08:00
sayamsamal 26fc108e16 tooltips: Add hotkey hints support to compose related buttons.
This commit adds the hotkey hints support to "Cancel compose",
"Cancel compose and save draft", "Scroll to bottom" and "Drafts"
button.
2023-02-06 18:41:31 -08:00
evykassirer 0d373e574b compose: Remove remaining instances of compose-send-status.
All banners that used to be rendered here are now in #compose_banners.
2023-02-06 16:01:51 -08:00
evykassirer ea9c4682a8 compose: Migrate out-of-view-notification to new banner style. 2023-02-04 18:53:35 -08:00
evykassirer f9c72701c6 compose: Migrate compose_private_stream_alert to use compose_banner.
This is part several updates for #22524.

Notes:

* data-stream_name isn't needed in the template (before or after),
  since there is not even an action button that could use it.
2022-12-06 15:43:34 -08:00
evykassirer 086f02a3ab compose: Migrate compose_not_subscribed to use compose_banner.
This is part several updates for #22524.

This commit also removes `compose_error.hide()` since there is only
one remaining use of it (which has been replaced by the contents of
`hide()`). Eventually `#compose-send-status` should be replaced
fully in a future PR, after we rewrite the upload banner to use
the new banner template.

Testing note: I removed the test test_compose_not_subscribed_clicked
since it heavily relies on the old way of rendering banners and is too
UI-focused (instead of logic focused) for me to feel like it's worth
testing that the banner is removed when clicking the button.
2022-12-06 15:43:34 -08:00
evykassirer 8ced075643 compose: Migrate compose-all-everyone to use compose_banner.
This is part several updates for #22524.

Testing note: I removed the test test_compose_all_everyone_confirm_clicked
since it heavily relies on the old way of rendering banners and is too
UI-focused (instead of logic focused) for me to feel like it's worth
testing that the banner is removed when clicking the button.
2022-12-06 15:43:34 -08:00
evykassirer ab5d088188 compose: Migrate compose_invite_users to use compose_banner.
This is part several updates for #22524.

Testing note: I removed the tests test_compose_invite_users_clicked
and test_compose_invite_close_clicked, since they heavily relied on
the old way of rendering banners and were too UI-focused (instead of
logic focused) for me to feel like it was worth testing that the
banners removed when clicking the buttons.
2022-12-06 15:43:34 -08:00
evykassirer 85cbd324eb compose: Create shared compose banner and use for resolved topic warning.
This is the beginning of a fix for #22524 which converts several
banners to a new style. As a part of that set of changes, this
commit creates the shared template and warning styling. The
resolved topic warning was picked (for no particular reason)
to migrate first. Further commits updating other banners
to follow.
2022-12-06 15:42:07 -08:00
evykassirer 553723e5d4 compose: Offer narrow to compose target button for private messages.
We already offer this for stream messages, but had been blocked on
adding it for private messages for visual design reasons. The dark
theme had a natural place to put this, since it had a box around the
private message recipient box; but the light theme didn't.

We add a border to the light theme private message recipient box to
allow us to add the same button to private messages, and implement
that button.

Fixes #21962.
2022-10-05 11:11:28 -07:00
Yogesh b8a760b14e compose: Improve tooltip on compose box "x" button.
In compose box, the "x" button tooltip text changed to
"Cancel compose and save draft" except when unsent
message length is short(<3).

Also in help(?) > keyboard shortcuts, text for `Esc`
changed to "Cancel compose and save draft".

The help center page updated with the above changes.

Fixes #21599.
2022-08-06 20:46:46 -07:00
Sahil Batra 74476317fd compose: Remove validation for stream named "announce".
Originally, DEFAULT_NOTIFICATION_STREAM_NAME was set to
"announce" and we also showed warning in frontend when
user was composing message to "announce" stream and if
the stream had more than 60 subscribers.

But we changed DEFAULT_NOTIFICATION_STREAM_NAME to "general"
in d46b125bf2. That commit did not remove the frontend code
for showing warning and this commit removes it since there
is no "announce" stream by default now, and we would not
want to show warning when sending to "general" since that
stream could be used for many discussions and it would not
be nice experience to show warning everytime.
2022-07-22 17:19:40 -07:00
jai2201 3853a65a4c compose: Avoid hardcoding maxlength for stream/topic names.
Note that previously, the limit for stream names was 30, even though
stream names have been up to 60 characters in length for years.
2022-07-15 15:15:48 -07:00
Riken Shah 3ba89e7779 message_scroll: Use CSS transition for scroll to bottom button.
We are abandoning jQuery animation because it build up queue
when there is continous switch in animation state.
i.e When user goes ↑↓↑↓↑↓… at the bottom.

Also added `aria-hidden` to `#scroll-to-bottom-button-container` so
that this widget doesn't interfere with screen readers.
2022-07-13 13:50:55 -07:00
madrix01 329f52ae82 compose: Make compose box tooltips consitent.
We make the tooltips of the button in the top row consistent.
This includes -
* Removing the bold formatting from the "Go to conversation" tooltip.
* Converting the "Expand compose" tooltip to Tippy.

Fixes #22132
2022-06-28 13:24:13 -07:00
Tim Abbott 75c64476b7 compose: Remove special button for spectators.
After playing with several options, it feels cleanest to just have the
closed-compose area look exactly how it would if you were logged in;
popping up the login_to_access modal when clicking those buttons feels
reasonable. The extra button felt buggy, and this customization helps
make the Zulip layout more consistent for spectators.

This effectively reverts 5ffc95f6bb.
2022-04-29 16:35:49 -07:00
Dinesh 68572e6bc8 compose: Display current narrow in go to conversation tooltip. 2022-04-28 12:57:42 -07:00
Dinesh 43107e1424 compose_box: Add button to go the narrow message is being composed to.
This'll be shown only when in a different narrow from what
you're composing to.

Takes care of updating display of the button on moving from
one narrow to another and also on changing inputs. This is
what contributes to majority of js code in this commit.

We are not displaying this for private messages since we do not
have a consistent design for both stream and private compose areas.
See https://chat.zulip.org/#narrow/stream/101-design/topic/narrow.20to.20topic.2Fpms.20when.20composing/near/1318548

Thanks to Vlad Korobov for the icon and for proposing various
designs.
2022-04-28 12:57:42 -07:00
Adam Sah 299995bd3a compose: Fix close icon in top right area.
There are two tangled issues addressed here:
* We were weirdly using a scaled up copy of fa-angle-up, rather than
  fa-chevron-up, for a chevron up, for the expand/collapse widget.
* We were previously using &times; for the close icon, which had
  visual and scaling issues next to the fa-angle icon.

Fixes #20403.
2022-04-25 18:26:37 -07:00
Anders Kaseorg 44767dd653 tippyjs: Avoid unsafe allowHTML API in favor of <template> elements.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-03-03 10:13:24 -08:00
jai2201 a8b948c086 tippy: Fix `cancel button` tooltip in compose box.
Add `data-tippy-allowHTML="true"` in button tag and fix the tooltip
for cancel button in compose box.
2022-03-02 09:39:15 -08:00
Anders Kaseorg e090027adc CVE-2022-23656: Fix cross-site scripting vulnerability in tooltips.
An attacker could maliciously craft a full name for their account and
send messages to a topic with several participants; a victim who then
opens an overflow tooltip including this full name on the recent
topics page could trigger execution of JavaScript code controlled by
the attacker.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-03-01 14:26:42 -08:00
Aman Agrawal 7e365f7ee3 icons: Replace fa-globe icon with a custom globe icon. 2022-03-01 11:36:38 -08:00
Aman Agrawal 0eafa6039b message_scroll: Show scroll to bottom button.
Show/hide scroll to bottom button when the last message is
not visible in the current scroll position.

We adjust the bottom offset of the button based on compose box
height.

Fixes #19862
2022-02-18 13:29:57 -08:00
Aman Agrawal e1e9708ea8 compose: Remove keyboard focus from stream color block.
This make `shift-tab` from stream input to `compose_top_right`
buttons directly possible.
2022-02-07 22:23:13 -08:00
Aman Agrawal d2a96e905c compose: Reorder compose_top_right buttons in DOM.
User should be able to tab from topic/pm input to textarea and back.
Moving `compose_top_right` button before the stream, topic and PM
input structurally in DOM but keeping them visually in the same
place, allows us to do so.
2022-02-07 22:23:13 -08:00
Aman Agrawal 42d5f51a4c compose: Move help link beside formatting buttons.
We advertise it as message formatting button with `Aa` icon
instead of `?` help icon.
2022-02-07 09:46:19 -08:00
Aman Agrawal acbfdb1c36 compose: Use flexbox to align items in compose top right.
This will help us align components on compose box top better
on small screen sizes.

We also center align the compose_top elements.
2022-02-02 10:04:38 -08:00
Aman Agrawal 1f812df0d2 compose: Use tippy to show tooltips for top right compose icons. 2022-02-02 10:02:49 -08:00
Priyam Seth 17f74a3f57 compose: Show warning while composing to a resolved topic.
This commit creates the function warn_if_topic_resolved that checks if
the topic to which the user is composing is resolved or not. First it
checks if the stream exists and then if the topic name starts with the
RESOLVED_TOPIC_PREFIX. If the conditions are true, a warning banner is
shown to the user.

It also shows to the user a button to unresolve the topic, if he has
the permission to do so.

Fixes #20584.
2022-02-01 17:50:17 -08:00
Anders Kaseorg 90e202cd38 docs: Consistently hyphenate “web-public”.
In English, compound adjectives should essentially always be
hyphenated.  This makes them easier to parse, especially for users who
might not recognize that the words “web public” go together as a
phrase.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-01-28 17:45:45 -08:00
Anders Kaseorg 03f073d762 compose: Fix Enter to send switch internationalization.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-01-07 14:38:10 -08:00
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 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 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 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
Wesley Aptekar-Cassels fe89dee284 compose: Remove "Drafts" button.
Now that this is in the left sidebar, we can remove the now-redundant
compose area button for it.  This also changes where the "Saved as
draft" tooltip appears.
2021-11-10 12:53:44 -08:00
Aman Agrawal 8b692943e7 css: Directly use `only-visible-for-spectaros` class to hide elements. 2021-07-08 12:33:56 -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
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
Aman Agrawal 5ffc95f6bb compose: Show login and hide drafts for spectators. 2021-06-16 10:18:22 -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
Tim Abbott 20c629f327 compose: Clarify title for wide reply button.
This changes the button text from "Reply" to "Reply to selected
message". Here's the thinking:

* The title "Reply" was a little confusing/inconsistent with the
  button's label.

* If you're hovering over the button, it's because you want more
  information about what it does -- not just a repeat of the button's
  label.

* The "Message foo > bar" content of the button already cleanly
  expresses what the button will do if you click it right now.

* The hover text "Reply to selected message (r)" explains to you what
  that button's role is in all situation, not just with the current
  selection, and thus documents the concept.  And it also gives you
  clarify if you're thinking "but how do I reply to something in
  Zulip?" and try hovering over the buttons at the bottom to find out.
2021-06-04 09:18:59 -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
Aman Agrawal 0d8a7efa09 compose_closed_ui: Show default label for empty narrows.
The default label for empty narrows depends on whether it's a
stream/topic narrow or a PMs narrow.

We leave some default text in compose.hbs for reply label
because it take some time for the js to display the
correct label.
2021-05-11 23:57:57 -07:00