Commit Graph

336 Commits

Author SHA1 Message Date
Ganesh Pawar c220c01ad2 user_status: Migrate to handlebars.
We also reorganize the click handlers to live in the main UI file for
the element, and depend less on initialization order.
2021-06-15 11:32:33 -07:00
Aman Agrawal 88454307cd recent_topics: Split into three modules.
We split recent_topics module into recent_topics_(ui + data + util).

This allows us to reduce cyclical dependencies which were
created due to large list of imports in recent topics. Also, this
refactor on its own makes sense.
2021-06-10 15:53:05 -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
m-e-l-u-h-a-n 3f0ed46fa2 left-sidebar: Add topic filter input in zoomed topic view.
Fixes: #18505.
2021-06-08 15:09:26 -07:00
Aman Agrawal 4b4fdad0e3 left_sidebar: Replace cog icon with plus icon.
We add a popover on click which allows user to create or browse
streams too.

Reason for doing so:

At present, it is hard to discover how to join streams
and create new streams. In particular:

Users have a hard time finding the gear in the STREAMS
header in the left sidebar and realizing that it's relevant for them.
Even once a user is in the STREAMS menu, the Create
stream button is hard to spot.

Fixes #18694.
2021-06-08 14:55:48 -07:00
Ganesh Pawar 2965fec355 modals: Remove `in` class once modal is hidden.
Rapidly clicking a button that shows a modal cause a race condition
in Bootstrap. Specifically, Bootstrap adds an "in" class to a modal
on the "shown" event and removes it on the "hide" event. Frequent clicks
cause the "hide" event to trigger before the "shown" event. Therefore, the
"in" class isn't removed. We use the "in" class to check if a modal is
active in overlays.js

For now, we manually remove it once the modal is hidden.

Newer versions of Bootstrap probably handle this better internally.
Look into removing this once it's upgraded.

Fixes #15463
2021-06-07 13:40:37 -07:00
Priyank Patel 98cb0e339c click_handlers: Use e.key instead of deprecated e.which.
Tested by making sure Enter and Escape works as expected in the edit
stream name in the subscriptions modal.
2021-06-02 14:04:53 -07:00
Priyank Patel 5fdcf7b534 click_handlers: Use e.button instead of deceprated e.which.
The middle button click is represented by 1. Tested by clicking
middle button on zulip logo and making sure it is not focused.
2021-06-02 14:04:53 -07:00
Vishnu KS 3e62a793f7 user status: Remove data attributes from user status options.
I don't see any good reason why we have to store the status
values in data attributes when they are already stored as
the content of the buttons.
2021-05-26 11:04:04 -07:00
m-e-l-u-h-a-n 61cc26667d popovers: Hide message action popover on revealing muted user messsage.
When muted user's message is revealed, popover should have
an option for hiding the message again. But in case if the
popover is already open while message is being revealed then
option for undo reveal in the popover could be out of sync.

To avoid this, we hide the message actions popover before
revealing muted user's message.
2021-05-21 17:23:29 -07:00
Aman Agrawal 637c7e297c streams_filter_icon: Convert from id to class.
This will allow us repeat the class which we cannot do with id.
2021-05-20 14:41:40 -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
Anders Kaseorg fc9481a24e js: Remove some pointless IIFEs.
Some of these were there because they predate block-scoped const/let.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-05-06 14:38:57 -07:00
Abhijeet Prasad Bodas 9f6ad779e4 message view: Allow revealing hidden message from muted sender.
* We show a "Click here to reveal." hyperlink in the hidden
message dialog for user to click on and read a hidden message.

* The "reveal" action is temporary, in the sense that a revealed
message will again be hidden once the broswer tab reloads or
if the user renarrows.

* When a message is revealed, we make sure to show the sender
of that message, even if it isn't the first message of it's group.
This is because the first message of that message group (which
would have otherwise shown the sender) can still be hidden.

* Reactions and background color after revealing a message are
the same as if the message hadn'e been hidden at all in the
first place.
2021-05-05 09:15:45 -07:00
Tim Abbott 638ffb36a4 refactor: Move click handlers to compose_closed_ui.js. 2021-05-04 20:55:58 -07:00
akshatdalton bf41f455cd message_view: Add support for unmuting of topic from its recipient bar.
Earlier, a user can only mute a topic from its recipient bar but can't
unmute it from there (and in fact we displayed an option to mute even
if the topic was already muted!). This commit fixes that bug and
allows a user also to unmute the topic from its recipient bar.

There are two core issues here;
* We did not have code, an icon, etc. for the "already muted" case in
  the recipient bar logic at all.
* We did not rerender messages in !excludes_muted_topics views when
  muting state changed.

See: 660475bd0c for background on when
we started only rerendering the streams with excludes_muted_topics
after muting changes.  Rerendering of newly muted topics are important
for live rendering if a user is narrowed to that topic itself, which
are essentially all excludes_muted_topics narrows anyway.

Hence, now, we rerender by calling the `rerender` function for muted
topics (which is done just before we update the items for muting via
the function: `update_items_for_topic_muting`).

Tweaked by tabbott to add comments explaining the reasoning and
long-term plans.

Fixes #15223.
2021-05-03 13:07:09 -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 54b31df1b6 emoji_map: Convert from id to class.
Since it can present in multiple elements, we use it as a class.
2021-04-27 10:06:25 -07:00
Aman Agrawal 84a7f08acc compose: Use `class` to find `markdown_preview` related elements.
We convert the following elements to use a class instead of
id for accessing them across the codebase:

* markdown_preview
* undo_markdown_preview
* markdown_preview_spinner
* message_edit_content
* preview_content

Converted them together since changes to one impacted the other in
some modules like click_handlers.

Also, added a function in rows to get `message_row`.
2021-04-27 10:06:25 -07:00
Aman Agrawal 8ebced2791 compose: Use `compose_upload_file` class for upload file icon.
We use `.compose_upload_file` across compose and message_edit_form
for file upload icon. This will help us share common code between
`compose` and `message_edit_form`.
2021-04-27 10:06:25 -07:00
Aman Agrawal 7ae04a6ba8 compose: Use `file_input` class for file input element.
In both compose and `message_edit_form` we use `file_input`
class to identify the file `input` element. This will help
to more easily share common elements between compose and message_edit.
2021-04-27 10:06:25 -07:00
Aman Agrawal eae1829ead message_edit_form: Convert from `id` to `class`.
Since we can have multiple instances of `message_edit_form`, it
makes sense to have it as a class.

We track the message_edit_form by setting an id to
`form` element dependent on message_id.
2021-04-27 10:06:25 -07:00
Anders Kaseorg 178736c8eb docs: Fix spelling errors caught by codespell.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-04-26 09:31:08 -07:00
akshatdalton 1229945add refactor: Add helper function to handle muting/unmuting of a topic.
This commit adds a helper function: `mute_or_unmute_topic`
in `click_handlers.js` to mute and unmute a topic. This function
is called when a user mutes/unmutes a topic from its recipient bar
or `recent topics`.

This is a prep commit for `Allow unmuting of a topic from its recipient bar`.

Related issue: #15223.
2021-04-24 12:21:43 -07:00
Aman Agrawal 489daa7f7c tippy: Append tooltips to the parent of the `reference`.
This allows us to hide tooltips automatically when the
parent container is hidden while tooltip is active.

In an overlay, when a tooltip is active and `esc` is pressed,
the tooltip will remain active without this commit.

This has side effects of some properties of parent applying to
tooltips if property is directly set to `div`. Through manual testing,
only area where this was found was fixed.
2021-04-23 11:59:18 -07:00
Aman Agrawal 3410ff2e64 buddy_tooltips: Destroy tooltips if `reference` is not visible.
We destroy the tooltips for which `reference` was either removed
from DOM or is hidden.

We only need to do this for tooltips
contained in simplebar containers for which tooltips can
overflow the boundary of the simplebar container.

There are 4 approaches we could have done this:
1. Asked tippy.js maintainers to do this for us.
In https://github.com/atomiks/tippyjs/issues/938 the
maintainer said that it is the responsibility of
the user to do so.

2. Tracked whenever we update the DOM for such elements and hide
tooltips when we were hiding the `reference` elements. This had
various problems like it is hard trigger events when certain elements have
been removed from DOM when `html()` method is used to render
new content.

3. Run an `optimized` periodic job to destroy tooltips when
`reference` elements are hidden. This isn't a good method to
do this since it sucks power and adds latency.

4. Use a `MutationObserver` on the parent element and watch
for changes. This methods seems to work well with no bad
side effects. We use this approach.
2021-04-23 11:59:15 -07:00
Aman Agrawal 4472986fae click_handlers: Delegate compose events to body.
This allows us to not rely on compose elements being present in
the DOM when we register these events.
2021-04-19 16:49:53 -07:00
Aman Agrawal f9e0ed98b8 buddy_list_tooltip: Directly trigger tooltip on parent of elements.
Instead of listing all the elements in `.selectable_sidebar_block`,
we directly use it to trigger showing tooltip.
2021-04-14 10:15:58 -07:00
Anders Kaseorg 2004a85fb1 i18n: Automatically convert remaining JavaScript messages to FormatJS.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-04-13 17:41:10 -07:00
Aryan Shridhar 1b5a16bd1f
click_handlers: Prevent compose opening when copying code blocks.
Previously, clicking the codeblock copy button also
triggered the compose box to open.

This is because of the fact that ClipBoard.js lacks the
ability to stopPropogate the event when clicked.

Rectified by explicitly defining the copy click event
within `is_clickable_message_element`, which disallows
the triggering of reply box.

Effectively a workaround for
https://github.com/zenorocha/clipboard.js/pull/475.

Fixes #17861.
2021-04-09 18:06:27 -07:00
Aman Agrawal d4fa938a23 giphy: Convert `compose_giphy_logo` from id to class.
Since there are multiple `compose_giphy_logo` elements, we should
use it as a class as per HTML spec.
2021-04-08 10:03:51 -07:00
Aman Agrawal a2140eb9b5 giphy: Delegate `compose_giphy_logo` click handler to `body`.
This will allow us to use use this handler in places like message
edit where elements are added to the DOM later on.
2021-04-08 10:03:51 -07:00
Aman Agrawal 0fd5bf49d6 buddy_list: Use tippy for showing tooltips.
There is no significant visual change other than arrows being
visible and the tooltip being a little darker.
2021-04-08 09:40:10 -07:00
Aman Agrawal 0e32454b1d message_reaction: Calculate and render tooltip using tippyjs.
Tippyjs automatically places it to bottom.

NOTE: placement of tooltip is changed from 'bottom' to `auto`.
Custom css was set here to avoid tooltip being partially hidden
on small screens. This change automatically takes care of it
by showing the tooltip on right side of message_reaction on
small screens if it is partially hidden from the left or
vice versa.
2021-04-07 17:38:40 -07:00
Abhijeet Prasad Bodas ace54f3c3b recent topics: Fix duplicate muting requests sent to server.
Previously, on clicking the "bell" icon from a recent
topics topic row, two click handlers were triggered-
1. The one for the bell in the recent-topics topic
   row.
2. The one for the bell in the floating recipient bar.
   This is intended to be triggered only when the user
   clicks on the bell icon in the floating recipient
   bar to mute a topic, but this was triggered on
   clicking the recent-topics topic row bell too,
   because it wasn't specific and we use the same
   HTML class for both the bells.

Because both these click handlers were triggered,
the webapp sent back-to-back duplicate requests to
the server to mute the topic, which caused the sever
to throw "HTTP 400: Topic already muted" error.

This commit fixes this by making the recipient bar
click handler more specific, so that it is triggered
only when the recipient bar bell icon is clicked.

There is also the issue that the recipient bar bell
icon only allows a user to mute the topic, not unmute.
So, when someone mutes a topic, and then clicks on
the recipient bar bell icon, the webapp sends a
request to mute the topic again (not to unmute),
leading to the same error as above.
This commit does not fix that. See #15223.
2021-04-05 17:58:38 -07:00
Signior-X 86eccfd20f left-sidebar: Add the new topic button in stream popover.
This commit adds an option to create new topic in stream
popovers. Then adds a click listener on them which triggers
the compose start function with the stream specified.

Fixes #13480.
Fixes #2507.
2021-04-05 17:32:44 -07:00
Aman Agrawal 1a83112cf9 giphy: Register click events inside giphy module.
Primary reason for this is to allow us more control over
creation of giphy popover as will be evident in future commits.
2021-04-05 15:04:50 -07:00
Aman Agrawal 4593ca9ed7 click_handlers: Export convert_enter_to_click from ui_util.
This allows us to use this function in other places without
importing click_handlers which depends on a lot of other modules.
2021-04-05 15:04:50 -07:00
Aman Agrawal 5e83965e80 giphy: Use GIPHY web SDK to allow inserting GIFs in compose box.
We use GIPHY web SDK to create popover containing GIFs in a
grid format. Simply clicking on the GIFs will insert the GIF in the compose
box.

We add GIPHY logo to compose box action icons which opens the GIPHY
picker popover containing GIFs with "Powered by GIPHY"
attribution.
2021-04-05 15:04:49 -07:00
sahil839 f73d101854 stream: Use 'hidden.bs.modal' event for enabling mouse background events.
We now unconditionally enable backgroung events when 'hidden.bs.modal'
event is triggered on closing of modal. We do not need to handle them
separateley for closing modal by close_modal, data-dismiss or escape.
We handle this by single handler for modals in settings and subscription
overlay.

Fixes #16688.
2021-03-30 17:02:46 -07:00
Anders Kaseorg d43ac7357a js: Move current_msg_list, home_msg_list to ES6 module message_lists.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-03-29 18:23:47 -07:00
Tim Abbott a092e96bff message_edit: Rename start_inline_topic_edit.
This function should be named similarly to the well-named
end_inline_topic_edit; previously the main hint that this was the
inline code path was just that the recipient_row was the parameter.
2021-03-29 09:39:28 -07:00
Anders Kaseorg 38ffd47b90 js: Convert static/js/page_params.js to ES6 module.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-03-26 10:17:56 -07:00
Anders Kaseorg bb1b2048bd js: Convert static/js/i18n.js to ES6 module.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-03-26 10:17:56 -07:00
PIG208 36e90195e0 static: Move click handlers for alert-box to a separate module.
ui_init is also modified to ensure that the click handlers will still
be correctly initialized.
2021-03-26 09:24:41 -07:00
Anders Kaseorg d22a61443e notifications: Remove in_browser_notify and bootstrap-notify.
Follow up to #14768.  This feature was already non-functional due to
.alert-display { display: none; }, and if we want to reimplement it,
we should do it using a modern library.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-03-22 23:40:38 -07:00
Steve Howell 746cc9e1f6 refactor: Extract browser_history module.
This mainly extracts a new module called
browser_history. It has much fewer dependencies
than hashchange.js, so any modules that just
need the smaller API from browser_history now
have fewer transitive dependencies.

Here are some details:
    * Move is_overlay_hash to hash_util.
    * Rename hashchange.update_browser_history to
      brower_history.update
    * Move go_to_location verbatim.
    * Remove unused argument for exit_overlay.
    * Introduce helper functions:
        * old_hash()
        * set_hash_before_overlay()
        * save_old_hash()

We now have 100% line coverage on the extracted
code.
2021-03-22 13:29:32 -07:00
Anders Kaseorg 3ef6f6e2e2 js: Convert static/js/blueslip.js to ES6 module.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-03-17 08:47:15 -04:00
Aman Agrawal f79a59d5f8 recent_topics: Directly pass jquery element instead of event object. 2021-03-16 14:54:22 -07:00
Aman Agrawal 493c00f2ad recent_topics: Set focus to element on click.
The scroll position of recent topics table is according to the
element which is in focus.

While this behaviour is correct, when
user clicks on an element in recent topics after scrolling to
a different position, the scroll position is lost as the focus
was not being set on the element. This commit ensures that
we set focus on the element when user clicks on it. Thus, the
scroll position being lost is naturally fixed.

Fixes #17587
2021-03-16 14:54:22 -07:00