Earlier, if pm_list or stream_list was zoomed in and hitting `q`
hotkey would seemingly do nothing but in the background would add
highlighted class to `stream_row` and toggle stream-list-filter.
This commit fixes this behaviour by bringing focus to currently
visible input filter field.
We refactor the following inputs to use a `placeholder-shown` CSS selector to
show/hide the close button, rather than custom JS logic:
- Filter topics field in the left sidebar
- Filter direct messages field under direct messages
- Stream message topic
We expose `is_zoomed_in` from `pm_list` in this PR.
We also explicitly trigger a `blur` now on clearing search.
Before, clicking on the `x` button was automatically removing
the focus from the input field, but pressing the `Esc` key was
not doing that and that's why the explicit blur.
Fixes#22113.
The search will only be visible when in the `more conversations`
view. Once we click `back to channels` and close the
`more conversations` view, the search will clear and the search
box will disappear.
We've chosen `pm_list_data.get_conversations` as the function
to which we will pass our search term. We could have technically
found the value of the filter element via JQuery in pm_list_data,
but pm_list_data does not handle any JQuery and we should keep
it that way.
`pm_list_data.get_list_info` also accepts the search_string so that
the info it returns in expanded view is accurate.
We've also added some code to `click_handlers` to make sure that
clicking the search input does not bring us into the DM narrow.
We clean up unnecessary nesting in this commit and replace one
usage of `#direct-messages-sticky-header` with
`#direct-messages-section-header`. Since `.direct-messages-container`
was being used along with `#direct-messages-sticky-header` at multiple
places, just removing the nesting would break those selectors. For those
selectors, they have been refactored to just look for
`#direct-messages-section-header` instead. `.direct-messages-container`
specific selectors still exist but they apply to both instances of
`.direct-messages-container`, the DM header and the DM list.
Rename `toggle_private_messages_section_icon` to
`toggle-direct-messages-section-icon`.
We've also hyphenated the attribute during the rename.
Part of the private_message to direct_message rename project.
Rename `private_messages_section_header` to
`direct-messages-section-header`.
We've also hyphenated the attribute during the rename.
Part of the private_message to direct_message rename project.
Rename `private_messages_section` to `direct-messages-section`.
We've also hyphenated the attribute during the rename.
Part of the private_message to direct_message rename project.
Rename `active_private_messages_section` to
`active-direct-messages-section`.
We've also hyphenated the attribute during the rename.
Part of the private_message to direct_message rename project.
Earlier, DM row remained highlighted when narrowed to different
part of left sidebar other than recent and inbox since on narrow
event, `handle_narrow_activate` wasn't properly handling unnarrow
events. It wasn't calling `update_private_messages` to update the
state of the DM list.
This commit fixes the behaviour by updating the state on narrowing
away from DM rows.
Fixes: zulip#27698.
Co-authored-by: Rinwaoluwa <peterodejobi9@gmail.com>
This was just debugging logic working around the fact that vdom.ts was
not originally implemented in TypeScript, and should not be polluting
our types.