Commit Graph

99 Commits

Author SHA1 Message Date
Aman Agrawal 7dbd2f74d9 resize: Simplify code to calculate max height of left sidebar blocks.
The `size_blocks` code was cool looking but wasn't working well.
Since we only have to place streams list and users list, we can
fix their `max-height` more easily without trying to solve the
`multi-block` case which `size_blocks` was trying to do.

This also fixes users list max-height being incorrectly set,
resulting in user unable to scroll to some user list items.
2022-11-09 16:55:19 -08:00
Aman Agrawal 244be5b71b resize: Increase minimum height for left sidebar blocks.
This function is only called to calculate the size of stream and
user list. Using 250px as minimum height for these blocks gives
them enough space to be usable regardless of their height ratio.
2022-11-05 15:15:44 -07:00
Aman Agrawal b6a9819395 resize: Update buddy list height when resizing streams list.
If the buddy list is displayed in the left sidebar, height of
both these blocks needs to be changed to accommodate for the
changes.

The fixes the bug that stream list and user list don't fill
left sidebar and have 80px height regardless of viewport height.
2022-11-05 15:15:42 -07:00
Aman Agrawal b8f7293dba resize: Use scroll element get the scroll height for streams.
Since streams and PMS now use left_sidebar_scroll_container
for scrolling, use it get the correct scroll height.
2022-11-05 15:15:25 -07:00
Aman Agrawal 470553b457 left_sidebar: Fix some PMs not being displayed when PMs are zoomed in.
We added sticky headers above the PM list but forgot to subtract
it from the max-height of the scrollable container.
2022-10-26 13:47:08 -07:00
jai2201 6f9e97921d pm_section: Create collapsible private messages section.
This commit introduces the change of rendering private messages
section as collapsible, whose data-fetching logic came with zulip#21357.

We now have separated out `Private messages` from `top_left_corner`
section and shifted it below the `global_filters` in a different
separate section along with stream list with common scroll bar
in left-sidebar.

The new PM section will be opened by-default on loading the page
and will have a toggle-icon in its header, clicking on which makes the
section collapse/expand accordingly.

In default view, only recent 5 PM threads would be shown
and would append the active conversation as the 6th one at last
if not present in those 5, similar to how topics list work.

In PM section with unreads, a maximum of 8 conversations
would be shown and rest of them would be hidden behind
the 'more conversations' li-item, clicking on which takes
to the zoomedIn view of PM section where all the present
PM threads would be visible and rest of the sections of left-sidebar
will get collapsed.

Fixes #20870.

Co-authored-by: Aman Agrawal <amanagr@zulip.com>
2022-10-26 13:47:08 -07:00
Lauryn Menard 95aa9a4f83 compose-box: Remove reset max-height calculation for preview click.
Removes call to reset_compose_message_max_height when clicking on
the markdown preview button, which due to the `#compose` div element
momentarily shrinking to be empty, caused the calculation of the
max-height to grow larger on each click.

Also refactors reset_compose_message_max_height to use the height
from `getBoundingClientRect`, which defaults to zero when empty.

And fixes a small discrepancy in how max-height is applied to
a div element vs a textarea element, so that the visible height
doesn't change between the preview and write modes in the compose
box.

Fixes #23277.
2022-10-25 13:49:29 -07:00
Aman Agrawal 814abf6764 resize: Don't use `visible` selector to find element states.
This change decreases the time required to open compose
after clicking a message. The amount of time reduced varies with pc.

The time reduction was around 0.4s to 0.6s for me after using a
6x CPU slowdown. This may not sound convincing but the profile
uploaded in #21979 clearly shows the root cause of having a message
click take 10s was the `:visible` query.

Fixes #21979
2022-05-03 09:19:01 -07:00
YashRE42 33af1c1cd6 resize: Fix expensive navbar.resize_app calls leaving recent_topics.
It turns out that the bug this call hopes to fix only happens when the
user first loads the page to recent_topics and then navigates to a
view with a message list (any other view), but we'd make this call
every time the recent topics table was hidden.

Hence, this commit makes it such that we only make that call if (1)
the page is loaded to recent_topics and (2) we're switching from
recent_topics to a message list view for the first time.  We achieve
(1) via binding a handler via ui_init.initialize_everything and (2) by
binding the handler as `.one`, so that it's unbound after its first
invocation.

Additionally, we use window.requestAnimationFrame to prevent this
forcing the browser to do a reflow unnecessarily.

Combined with other commits in this series, this fixes a major
performance problem when leaving recent topics for another view.

See #20255 for details.
2022-03-18 18:23:34 -07:00
Anders Kaseorg f84a2c08d5 js: Prefix jQuery object variable names with $.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-03-16 12:52:07 -07:00
jai2201 2281adc101 left-sidebar: Make subscription link non-sticky. 2022-02-11 14:28:09 -08:00
Aman Agrawal a38b11d188 resize: Rename reset_compose_textarea_max_height.
This no logner just resets the max-height of compose-textarea
but also preview_message_area.
2022-02-02 10:01:27 -08:00
Aman Agrawal 31dd1d554c compose: Avoid preview message area overlap with last message.
Instead of blindly adjusting `compose-textarea` on resize,
we adjust the height of `compose-textarea` or `preview_message_area`
based on which is visible.
2022-02-02 10:01:26 -08:00
Aman Agrawal a23cc709e8 resize: Hide popover on width change on mobile devices.
It is possible for user to change the width by using
screen rotation after the page has been loaded on mobile.

If only height has changed, it is most likely due to a
virtual keyboard, we don't hide popover in that case.

Fixes #20439
2021-12-06 10:36:20 -08:00
Sahil Batra 998d710275 frontend: Add new user_settings module for user's settings.
We add a new user_settings module similar to page_params
module in frontend and use it to access user's personal
settings instead of page_params.
2021-08-01 15:30:17 -07:00
Priyansh Garg 6cfe10fef2 compose-box: Fix compose-box from covering last messages of stream.
While writing a long message in compose-box, the last few messages of
the current stream gets covered by the compose-box and it gets pretty
annoying sometimes trying to figure out a way to read the last message
of the stream while writing. Right now, the only way to get past this
is to resize `compose-textarea` by using the resize tool at the
bottom-right corner of the `compose-textarea`. But, that small resize
tool is not always readily visible to the user.

The proposed solution in this commit is to reset the `max-height`
property of `#compose-textarea` everytime `bottom_whitespace_height`
is resized such that the total height of `#compose` is always less
than or equal to the height of `bottom_whitespace_height`.  Doing
this, the compose-box never covers the last message of the current
stream.

The only problem with this is that if the compose-box is closed at the
time of bottom-whitespace resize, we cannot find the
`compose_non_textarea_height` and so, we cannot reset the max-height
of `#compose-textarea`. To solve this, max-height of
`compose-textarea` is also reset everytime a new compose-box is opened
according to the value of `bottom_whitespace_height` at that time.

Thus, if the compose-box is already open at the time of
bottom-whitespace resize, the max-height of `#compose-textarea` will
also get reset at the same time, whereas, if the compose-box is closed
at the time of bottom-whitespace resize, the max-height of
`#compose-textarea` won't get reset at that time, but it will surely
get reset whenever the user will open the compose-box.

Tested on my Ubuntu Development Environment on Chrome and Firefox browsers.

Fixes: #16038.
2021-06-29 11:24:01 -07:00
Riken Shah 51e24519b8 refactor: Rename `panels.js` to `navbar_alerts.js` as it better explains it. 2021-05-21 17:49:12 -07:00
Gaurav Pandey 756ee2c055 right-sidebar: Replace invite-link height with shortcut height.
To calculate the max-height of buddy_list_wrapper, we use
invite-link-height. This works alright if inviting is enabled
for all. However for users who aren't permitted to invite,
the element does not render, hence the logic uses `0` as
default value for subtraction in `get_new_heights` function
under resize.js. This leads to the keyboard-shortcut icon
rendered below the browser window. Hence use the parent div
`right-sidebar-shortcuts` height for the logic.
2021-05-10 12:10:41 -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
ligmitz 91c81eadd0 sidebars: Fix truncated lists when notifications panel is visible.
When notifications panel is open at the top, the buddy list and
streams-filter container gets truncated due to max-height exceeding
the necessary value. The commit fixes the issue by subtracting the
panels height when it is visible.  The logic to do so is already
present, but we need to ensure that we trigger the full resize code
when we get into this situation.

Fixes: #18221
Fixes: #17823
2021-04-28 08:34:59 -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
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
Gaurav Pandey ba14168d57 right-sidebar: Remove extra subtrahend from max-height of user-list. 2021-03-26 09:22:36 -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
Gaurav Pandey 7ddf6435a9 left-sidebar: Remove add-streams option out of scrollbar.
This commit removes the option to add more streams out of scrollbar
as it is not visible on mobile devices or organizations with large number of
streams until scrolled down.
2021-03-16 14:10:04 -07:00
Anders Kaseorg ea9ca6b7d0 js: Use jQuery as a module.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-03-12 10:08:25 -08:00
Anders Kaseorg 5cc1f8d289 js: Convert static/js/ui.js to ES6 module.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-03-02 17:06:35 -08:00
Anders Kaseorg 934d4e4e10 js: Convert static/js/panels.js to ES6 module.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-28 14:23:00 -08:00
Anders Kaseorg 0200f48a12 js: Convert static/js/navigate.js to ES6 module.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-28 14:23:00 -08:00
Anders Kaseorg b3f74af090 js: Convert static/js/popovers.js to ES6 module.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-28 14:23:00 -08:00
Anders Kaseorg 9f881ebe34 js: Convert static/js/resize.js to ES6 module.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-28 14:23:00 -08:00
Anders Kaseorg 5ba7153a3b js: Convert static/js/condense.js to ES6 module.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-28 14:23:00 -08:00
Anders Kaseorg fe4d1e839c js: Convert static/js/message_viewport.js to ES6 module.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-28 14:23:00 -08:00
Anders Kaseorg fb233bd994 eslint: Fix unicorn/prefer-number-properties.
https://github.com/sindresorhus/eslint-plugin-unicorn/blob/master/docs/rules/prefer-number-properties.md

MDN says these were added to Number for modularization of globals.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-10-07 16:00:33 -07:00
Anders Kaseorg d72423ef21 eslint: Replace empty-returns with consistent-return.
Instead of prohibiting ‘return undefined’ (#8669), we require that a
function must return an explicit value always or never.  This prevents
you from forgetting to return a value in some cases.  It will also be
important for TypeScript, which distinguishes between undefined and
void.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-09-25 15:17:59 -07:00
Anders Kaseorg 6ec808b8df js: Add "use strict" directive to CommonJS files.
ES and TypeScript modules are strict by default and don’t need this
directive.  ESLint will remind us to add it to new CommonJS files and
remove it from ES and TypeScript modules.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-07-31 22:09:46 -07:00
Anders Kaseorg e3b3df328d eslint: Replace sort-imports with import/order.
import/order sorts require() calls as well as import statements.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-07-24 09:42:56 -07:00
Anders Kaseorg 96dcc0ce6e js: Use ES6 object literal shorthand syntax.
Generated by ESLint.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-07-21 12:42:22 -07:00
Anders Kaseorg b65d2e063d js: Reformat with Prettier.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-07-17 14:31:25 -07:00
Anders Kaseorg a20c12366f js: Use inside variant of IIFE wrappers.
Prettier would do this anyway, but it’s separated out for a more
reviewable diff.  Generated by ESLint.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-07-17 14:31:25 -07:00
Anders Kaseorg f3726db89a js: Normalize strings to double quotes.
Prettier would do this anyway, but it’s separated out for a more
reviewable diff.  Generated by ESLint.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-07-17 14:31:24 -07:00
Anders Kaseorg a79322bc94 eslint: Enable prefer-arrow-callback.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-07-03 16:55:50 -07:00
Steve Howell 74c61984df Revert "buddy list: Adjust sizing calc for narrow mode."
This reverts commit 9f5725d265.

I was trying to fix how we size the buddy list in
narrow mode, which was off by 10px, but my fix worsened
things for regular mode.

Also, somebody reported a traceback related to my fix.
I didn't fully research the traceback,
but I suspect it was related to some media-query settings
for small screens or due to a put-buddy-list-in-left-pane
setting.  (Basically, `$('#right-sidebar').position()` may
be undefined in some cases, and I wasn't handling that.)

After reverting this, we still have the original
off-by-10px bug that I was trying to fix, but I will
attempt to do that more cleanly in a separate commit.

This should make it so that in normal situations where
the buddy list is in the right sidebar, we will be
able to see the "Invite more users" link again.

I am still a little puzzled how I didn't catch this in
testing, but it was toward the end of a long PR, so
it could easily just be simple human error.

Fortunally, this regression was only on master for a
couple days, and users could still invite users via
the gear menu.
2020-05-29 15:36:42 -04:00
Steve Howell 43e5b2d28b right sidebar: Remove "GROUP PMs" section.
We remove the "GROUP PMs" section that used
to be in the lower right sidebar.

Most of this is straightforward code removal.

A couple quick notes:

    - The message fetching code now just
      calls `huddle_data.process_loaded_messages`,
      which we still need for search suggestions.
      We removed `activity.process_loaded_messages`.

    - The `huddle_data.process_loaded_messages`
      function no longer needs to return `need_resize`.

    - In `resize.js` we now just calculate
      `res.buddy_list_wrapper_max_height` directly
      from `usable_height`.
2020-05-27 17:57:50 -07:00
Steve Howell 9f5725d265 buddy list: Adjust sizing calc for narrow mode.
This fixes the calculation for how far from the
top of the viewport we think #right_sidebar's
top is.  To fully explain this commit requires
some background info.

Normally `#right-sidebar` has 50px of top margin
and 0px of top padding.  And our `resize.js`
calculations have been accurate for the normal
case.

But when you are in the so-called `.expanded` mode
(i.e. when you're in a narrow window) we split up the
50px as follows:

    - 40px margin
    - 10px padding

Why don't I make the CSS just be more consistent here?

    - If you go to 50px in the "expanded" mode
      you mostly cover up the right scrollbar,
      except for the 10px gutter that is below
      the 40px-tall `.header` section.  To fully
      cover it we apparently want the padding;
      otherwise you see a small, unusable remnant
      of the scrollbar which just looks funny.

    - If we were to make the "regular" right sidebar
      just always have the 40/10 split, then we
      would start to diverge from the left sidebar,
      which is currently 50/0 as well.

    - If we went to make both the left and the right
      sidebars 40/10 split, well, that's just an
      even riskier change.

So instead I fix the resize calculation:

    I just calculate the actual `top` position.

Is any of this actually user-facing?

    Yes.  Now if a user is a narrow window and
    they open the buddy list, we will make
    the buddy list 10px smaller to account for
    the padding. This makes it less likely for
    the invite link to get squeezed out.
2020-05-27 17:57:50 -07:00
Steve Howell 7ed47e83fe resize: Extract resize_sidebars().
We'll use this in the next commit.

Note that there's a minor change in the order
in which we apply new heights--we now
do sidebars before bottom whitespace.
2020-05-27 17:57:50 -07:00
Steve Howell 9489960b73 dead code: Remove useless resize calls.
We had a bunch of places where we
were calling `resize.resize_bottom_whitespace`
with no arguments, which has been a no-op
since the below commit that removed support
for our `autoscroll_forever` option:

    fa44d2ea69

With the `autoscroll_forever` options things
like opening/closing the compose box could
alter how much bottom whitespace you'd want,
but we stopped supporting that feature in
2017.

Since then bottom_whitespace has just always
been 40% of the viewport size.  So we only need
to change it on actual resize events.

It's worth noting that we still call
`resize_bottom_whitespace` indirectly in many
places, via `resize_page_components`, and
the latter actually causes
`resize_bottom_whitespace` to do real work,
but that work is redundant for most of those
codepaths, since they're not triggered by
changes to the viewport.  So there are other
opportunities for cleanup.
2020-05-27 17:57:50 -07:00
Steve Howell ac3de453fb resize: Remove dead code.
The `buddy_list_wrapper` has zeros margins, so it's
just noise in the current calculations.  You can
verify this pretty easily with console statements,
as well as looking at the code.  I tried it with
various permutations of narrow windows and display
settings.
2020-05-27 17:57:50 -07:00
Steve Howell 5245aa457f condense/resize: Fix blueslip errors from drafts.
The selector we were passing to `condense_and_collapse`
included rows from our drafts UI, which don't have
zids and don't play nice with condense/collapse code
(which expects message ids for settings things like
`.condense` flags).

Now we just use a better selector.
2020-04-02 14:44:35 -07:00
Steve Howell 9ab07d1038 util.js: Remove util from window.
We now treat util like a leaf module and
use "require" to import it everywhere it's used.

An earlier version of this commit moved
util into our "shared" library, but we
decided to wait on that.  Once we're ready
to do that, we should only need to do a
simple search/replace on various
require/zrequire statements plus a small
tweak to one of the custom linter checks.

It turns out we don't really need util.js
for our most immediate code-sharing goal,
which is to reuse our markdown code on
mobile.  There's a little bit of cleanup
still remaining to break the dependency,
but it's minor.

The util module still calls the global
blueslip module in one place, but that
code is about to be removed in the next
few commits.

I am pretty confident that once we start
sharing things like the typeahead code
more aggressively, we'll start having
dependencies on util.  The module is barely
more than 300 lines long, so we'll probably
just move the whole thing into shared
rather than break it apart.  Also, we
can continue to nibble away at the
cruftier parts of the module.
2020-02-15 12:20:20 -08:00