Commit Graph

3880 Commits

Author SHA1 Message Date
Aman Agrawal c876e12b86 unread_ops: Let server do the mark as unread for us.
Previous algorithm was not correct if we didn't have full data for
the current narrow loaded from the server. #23512 adds the support
to mark messages in a narrow unread after a give message_id.

Added a new alert banner to indicate loading and success states of
an ongoing request. This is useful when requests can take a long
time to complete.
2022-11-17 00:46:26 -08:00
Aman Agrawal ec1a114c7e left_sidebar: Fix extra space between stream header and PM header. 2022-11-16 12:00:11 -08:00
Tim Abbott 6f1a341d2d compose: Increase z-index for compose box.
Following b563fdc537, the z-index of the
compose box (2) tied with that of unread date dividers within a topic;
this could lead to the dividers incorrectly appearing on top of the
compose box.

We don't have other elements that can overlap with compose with a
z-index between 2 and 4, so just increase it to 4.
2022-11-16 11:01:09 -08:00
Tim Abbott 23856433e4 popovers: Fix styling of user card/profile status dots.
The tweaks I made as part of merging
f204a4c592 apparently were wrong; the
CSS class .popover_user_presence had been shared between both the user
card and the profile.

Fix this by referencing the right CSS classes. Additionally, fix the
margins to have a square hover region around the presence dot.

Fixes #23588.
2022-11-14 13:03:53 -08:00
Aman Agrawal fbe9a9e539 left_side_userlist: Remove feature from frontend.
Fixes #23517.

While this feature was added to Zulip very early, it has been troubled
for most of that time; it never looked great visually, had a lot of
implementation complexity around resize.js, and has a weird model (a
setting that changes the UI only in certain window sizes).

This option is not commonly used; while a significant portion of users
have it enabled, many of them just don't use window sizes where it
actually has an effect. So it's not clear that it will be missed if
removed; we got very few bug reports when it was completely broken for
a few days after we first integrated the new left sidebar private
messages design.

Even with it no longer being broken, it does not work very well with
the addition of the new PMs section in the left sidebar. (Having two
scrollbars in the sidebar looks quite awkward.) The new private
messages section in the left sidebar also addresses some of the use
cases for always keeping the Users list always visible, even in narrow
windows.

This option is only removed from frontend for now. To make this
decision easily reversible, the backend code of this feature
is still kept.
2022-11-14 12:23:55 -08:00
Taiki a09014f1de modals: Fix modal buttons in Safari for some users.
Some Safari users users observed an issue where these modal buttons
appeared with an ugly white-on-grey format. Removing the CSS line with
`appearance: button` appears to fix this for affected users.

That line seems unlikely to have been constructive; as documented in
https://developer.mozilla.org/en-US/docs/Web/CSS/appearance, this is a
deprecated value equivalent to `auto`, and a bit of a misfeature.

Additionally, the "Log in" button was incorrectly underlined on hover;
override that style.
2022-11-14 11:08:55 -08:00
Aman Agrawal b563fdc537 css: Fix hidden unread marker when a user mentioned message is focused.
Increase z-index of unread-marker to always appear above the message and
focused outline. Also, z-index of date_row is increased to hide
unread marker for it in special conditions.
2022-11-14 09:46:44 -08:00
Riken Shah 51870f86da recent_topics: Show user status emoji in PMs messages.
To implement this, we are rendering users in PMs with
the status icon (via `user_with_status_icon.hbs`) and
then passing rendered HTML to the recent topics row.

Fixes #23262
2022-11-10 12:32:08 -08:00
Riken Shah 9d12a9c21e recent_topics: Show user presence status in PMs messages.
We have bound the `mouseenter` event with a circle
status parent element to render the tooltip. Instead of passing
the tooltip content directly in `data-tippy-content`, we
are rendering it via JS because when showing the bot
tooltip we want a multiline tooltip.

We have also made some minor changes to `do_render_buddy_list_tooltip`,
so we can append the tooltip to the target element and avoid adding
a observer to it.

This commit also sets the font weight for tippy content to
400 to avoid bold content.
2022-11-10 12:32:08 -08:00
Aman Agrawal 6e3d8c7733 recent_topics_row: Let pm status icons have its own class.
Some additional changes to make align them correctly after
the assigning the new class.
2022-11-10 12:32:08 -08:00
Sayam Samal f204a4c592 user_profile_modal: Move presence activity status to modal header.
Moving the last active status icon to the modal header, we obtain a
cleaner visual design for the user profile modal which is more
consistent with other parts of UI.
2022-11-10 12:03:59 -08:00
Aman Agrawal 542aea4b1c left_sidebar: Remove `chevron-left` from back to streams.
This will help us make `Back to streams` look better with PMs header.
2022-11-08 13:25:42 -08:00
Aman Agrawal 46967002dd left_sidebar: Show PM section in topics zoomed view.
This is important to preserve the invariant that the unread count for
private messages is always visible.

Fixes #23391.
2022-11-08 13:25:09 -08:00
Aman Agrawal 1b304c5296 left_sidebar: Match color of `show-all-streams` to other headers.
Specifically trying to match the color to PMs header.
2022-11-08 13:24:11 -08:00
Aman Agrawal fc7ec5d8f9 left_sidebar: Left align show all streams with other buttons.
This includes a slight color change to `show-all-streams` to
match with the other headers.
2022-11-08 13:24:11 -08:00
Aman Agrawal 1192488240 left_sidebar: Left align all the section headers with the icons. 2022-11-08 13:24:11 -08:00
Aman Agrawal 41a60f84b9 left_sidebar: Correctly align user status icon.
Align the user status icons with the other icons in the left
sidebar so that their center falls in the same vertical line.
2022-11-08 13:24:11 -08:00
Javier González 63355c2a34 popovers: Add bottom margin to input.
Fixes: #23114
2022-11-07 11:31:37 -08:00
m-e-l-u-h-a-n 06f0634ca5 css: Fix height issue for stream and user group creation forms.
Due to incorrect heights set for user-group creation and stream
creation body we had a UI bug because of which bottom part of
user group and stream creation forms were slightly visible
through the bottom.

It was due to somewhat fussy css height rules and incorrect
height calculations for that UI.
2022-11-06 22:02:41 -08:00
Julia Bichler 74f2d8ca7f stream settings: Allow modifying of email address.
This allows the user to modify the stream email address
by adding or removing tags before copying.

Fixes part of #19519.
2022-11-04 14:22:27 -07:00
Julia Bichler 6e163bb042 stream settings: Add copy email address modal.
This moves the stream email address to a modal
and adds a copy button.

Fixes part of #19519.
2022-11-04 14:22:27 -07:00
Aman Agrawal ef067eafad topic_list: Move topic filter out of topics list `ul`.
Instead of topic filter box being a part of the list when keeps
updating, we move it out and fix its position.

This should reduce rendering time of topics list and provide
a smoother experience to users when waiting for topics list to
load.
2022-11-04 13:40:46 -07:00
Anders Kaseorg b582d5886c stylelint: Fix import-notation.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-11-03 14:48:40 -07:00
Aman Agrawal 6042e91fe8 left_sidebar: Hide sub to more streams in topics list view (zoom-in). 2022-11-01 08:24:24 -07:00
Aman Agrawal 7e8ebe3aa5 recent: Fix alignment of unread mention icon. 2022-11-01 08:24:24 -07:00
Aman Agrawal 784966b3bd css: Visual fixes to message feed notice.
Fixes #23273

Removed height restriction to allow the box to grow when text wraps
to the next line.

Aligned wrapped lines to the text in the first line instead of the
icon.
2022-10-31 14:33:50 -07:00
Aman Agrawal 42ff193e29 recent: Fix alignment of unread count in PM rows.
The alignment was off in both narrow and wide screens. Added
an invisible mute icon to PM rows to keep the unread counts aligned
with topic rows.
2022-10-31 14:21:24 -07:00
Aman Agrawal d6c68ac82c css: Increase opacity of sidebar titles in dark theme.
0.5 opacity felt too light; it made these appear similar in color to
muted streams, not as the intended grey text.  This opacity reduction
is only applied in dark theme to sidebar titles.
2022-10-31 14:17:40 -07:00
Aman Agrawal 925fa4ca50 left_sidebar: Make topics list header sticky.
Fixes #22911

`Back to streams`, stream name and filter topics are all sticky
now and their color changes based on which filter is active and
the currently applied theme.
2022-10-28 17:43:33 -07:00
aparna-bhatt 5189826f27 css: Improve the dialog_widget loading spinner visuals.
Previously, when you clicked the confirmation button in a
dialog_widget, we'd display a loading spinner on top of an ugly grey
button background.

Remove the ugly grey background color, while making sure the loading
spinner inside the button looks good and doesn't resize the button.

Fixes: #22002
2022-10-27 16:29:22 -07:00
Raghav Luthra a8fc195402 reactions: Change color of reaction counter from blue to black.
The blue font color on the vote_text beside the reactions in
light mode made it seem like a link which it's not, so it has
been changed to regular font color.

We preserve the blue font color on hover, matching the add-reaction
button.
2022-10-27 12:41:51 -07:00
Raghav Luthra 477a1b5789 reactions: Refactor CSS to prepare for longer vote_text.
This fixes a bug where in narrow windows, long vote_text could extend
beyond the body of the reaction's allocated area.

It also provides a matching right margin around the count/name inside
the reaction pill, which looks better when we have strings inside them.
2022-10-27 12:41:51 -07:00
Aman Agrawal b23931bd66 recent: Fix unread counts wrappings to next line in long topic names.
We limit the word break to only text present inside the `a` tags
so that it doesn't apply to unread count.
2022-10-26 21:34:36 -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
Aman Agrawal ca36f23d9f recent_topics: Fix long topic and stream words squeezing other rows.
Topics and streams containing long words can cause horizontal
overflow and squeeze other columns too much.
2022-10-26 12:28:58 -07:00
Tim Abbott 3d2a3f2593 popovers: Avoid focus outline on \vdots when actions popover is open.
Now that we show the \vdots icon while the actions popover is open,
there's a weird looking behavior where a focus outline appears around
the \vdots icon, only if you clicked on the icon itself, not its
square containing click arrow.

Disable this unintended behavior, which disrupts the otherwise
simulated state where focus is in the popover (but no row is focused).
2022-10-24 10:47:56 -07:00
Eyuel Berga Woldemichael 1e4e0a8155 message feed UI: Remove redundant color declaration.
The color for the message control buttons is set in the
`message_control_button` class. The `reaction_button_visible` class
also sets a color declaration with the same value.

This commit removes this declaration because it doesn't change the
color of the reaction icon(the class is currently only used in
conjunction with `message_control_button` to toggle the button
visibility) nor does it override any inherited  style (hover color
remains the same regardless) as it lacks an `!important` rule.
2022-10-24 10:29:23 -07:00
Eyuel Berga Woldemichael c8cfef0581 left-sidebar: Show the 3-dots icon when the menu is selected.
This commit fixes the issue where the 3-dots menu icons on the left
sidebar disappear even though the associated popover is open by
toggling a special CSS class on the menu item. It follows the same
approach used by the emoji picker on the message feed UI.

Fixes  #23157
2022-10-24 10:29:23 -07:00
Eyuel Berga Woldemichael 019ff29daf message feed: Show the 3-dots icon while actions popover is open.
This commit enables the 3-dot menu to be visible while the associated
actions popover is open using the fact that the 'has_actions_popover'
class is attached to the message with an open popover. This approach
solves the bug without any additional JavaScript code.

Fixes part of #23157
2022-10-24 10:29:23 -07:00
Aman Agrawal 12d42320ff recent_topics_ui: Allow unread count click in PM row to mark row as read.
Fixes #23261

We now send user to next column after marking a row read. Added a
bit of bottom padding below unread count indicator.
2022-10-24 10:25:21 -07:00
Akarsh Jain 9e74f9f1ce message_edit: Fix vertical alignment of input area in /me messages.
Fixes #23101.
2022-10-21 12:16:15 -07:00
Akarsh Jain 3d4a2eb468 message_feed: Fix alignment of EDITED notices in /me message.
Fixes part of #23101.
2022-10-21 12:15:52 -07:00
Akarsh Jain 065f5413ae message_feed: Fix /me message alignment of message actions.
These were apparently no longer aligned with the timestamp.

Fixes #23101.
2022-10-21 12:15:16 -07:00
Aman Agrawal 1267dce027 navbar: Add login and signup buttons for spectators.
Remove login buttons from right sidebar and add them to navbar
so that the user instantly notices them.
2022-10-21 10:10:40 -07:00
Julia Bichler 91d86a8a6f stream-create: Use simplebar.
This changes the stream creation form so that it uses simplebar
instead of the native scroll bar.

resolves #21307
2022-10-20 17:54:46 -07:00
Tim Abbott 6266954229 user_profile: Remove stale no-fields CSS class.
Previously, we had some special CSS for the user profile modals in the
case that there were no custom profile fields, to do things like hide
the <hr> divider between the normal profile fields and custom ones.

The design has for some time treated custom profile fields as just
additional profile fields; so there's no longer a need for custom CSS.
2022-10-20 11:19:12 -07:00
sayamsamal aec8ef453c user_profile: Move title and tab switcher to a fixed header.
While going through the full profile of a user, we expect to find
that specific user's in-depth details. Thus, we should have a fixed
title displaying the name at the top of the modal to establish the
connection of the profile data with the user.

We also fix the tab switcher between "Profile/Streams/User groups" to
the top of the modal, for the added convinience of switching across
the three options at any point of time.
2022-10-20 11:19:02 -07:00
Yogesh Sirsat b28efaae76 tippy: Wrap overflowing content of tippy tooltips. 2022-10-20 10:35:11 -07:00
Yogesh Sirsat 0b0a8f4659 user_info_popover: Fix overflow of bot owner list item. 2022-10-20 10:35:11 -07:00