Commit Graph

3852 Commits

Author SHA1 Message Date
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
Aman Agrawal e3f22a9907 recent_topics: Add mention indicator in row for unread topics.
Fixes #22984

Add an `@` icon in unread topics where user is mentioned.

We track a new set of `stream_id:topic` pairs for the unread mentions
so that recent topics instantly knows if a topic is unread and mentioned
or not.
2022-10-19 16:26:42 -07:00
Aman Agrawal ed2ea4c8cc integrations: Increase font size of logo disclaimer.
Increased font size from 11px to 13px. This text was unreadable
on mobile as per Google report at 11px font size.
2022-10-19 12:03:16 -07:00
rixant 3c238c7b19 portico: Change deafult width of dropdowns to fit-content.
We seem to override this setting for most of the dropdowns, so this
common CSS only applies to the smaller dropdown shown to logged-in
users, where it was weirdly wide.
2022-10-19 11:59:34 -07:00
Aman Agrawal eec294b257 css: Fix color of filter buttons being changed on hover for spectators.
We don't want the color to change at all on hover since these buttons are
disabled. This only needed a fix for the dark theme.
2022-10-19 06:42:11 -07:00
Aman Agrawal 169f777b36 use_info_popover: Fix long words overflowing out of container.
The text will now break at the overflowing points. A hyphen maybe
inserted but is dependent on language and browser support.
2022-10-18 22:13:04 -07:00
Aman Agrawal a29009b4d9 realm_user_settings: Fix user status with emoji preview.
Fixed to reflect how user status with emoji will be displayed
in the right sidebar.
2022-10-18 22:13:04 -07:00
Aman Agrawal 5a5ec5518c right_sidebar: Fix full name overflowing its container.
User's name with status emoji was overflowing its container,
resulting in overflown text to not be converted into ellipsis
and pushing status emoji out of visible area.
2022-10-18 22:13:04 -07:00
madrix01 550a32bb20 recent_topics: Add Private message to recent_topics.
This commit adds private messages to the Recent topics view, to make
it an all-encompassing overview of recent activity visible to the user.

We add a filter "Include PM" to toggle whether PMs should be shown in
recent topics.

Fixes #19449.
2022-10-17 15:02:01 -07:00
Aman Agrawal a351d34462 portico_signin: Fix signup text overflowing to icon in Russian.
This is not the right fix for this, but a temporary adjustment
to make it look good with minimal impact on other languages and
other pages.

Right fix would require changing the structure of the button, which
was not easy to do and make it look similar to how it looks now.
2022-10-17 11:09:16 -07:00
Sahil Batra cebf43903c settings: Fix height of left sidebar for short screens.
It was not possible to scroll to the bottom of the list on
narrow-width when only single column was displayed on the
settings overlay. This commit fixes the height of the sidebar
and set to "100% - height of header - height of tab-container"
which fixes the scroll behavior.

This is not a issue for two-column overlay where height is set
to "100% - height of header" (the tab-container is already
inside the header).

This duplicates some CSS to avoid using "!important". While doing
this duplication, we remove "margin: 0" and "display: block" since
these are already set as default values.

Fixes #22876.
2022-10-16 19:16:53 -07:00
evykassirer 84aeb3a59a compose: Use consistent hover color for buttons in dark mode.
There is some old CSS that was only being applied to some buttons
and not others. This deletes those lines so that only the opacity
changes on hover and not also the color.

Following up from #23059.
2022-10-16 19:05:25 -07:00
Mateusz Mandera 9ee7ed7ce3 portico_signin: Tweak .alert to add a bit of bottom space.
That looks a bit better with extra space.
2022-10-14 13:07:58 -07:00
Ganesh Pawar 4df8c6610f gear menu: Add organization info.
Fixes #22205
2022-10-13 23:45:25 -07:00
Sahil Batra de257d434f settings: Set min width of role column.
We set minimum width for role column in users list,
deactivated users list and bots list such that role
value always fits in one line.

Fixes #23218.
2022-10-13 10:05:20 -07:00
Tim Abbott ad90157ec0 Revert "modal: Make the modal content scrollable instead of the whole modal."
This reverts commit c439b9d3af.
2022-10-12 17:20:33 -07:00
Julia Bichler 97fd4436da stream settings: Show stream header in narrow view.
This changes the streams overlay so that the header with the stream name or
with 'Create stream' is also visible in a narrow window.

Resolves #22963
2022-10-12 17:01:04 -07:00
Sahil Batra 35aab1efed message_edit: Set width to auto for propagate mode dropdown.
This commit sets the width to auto for propagate mode dropdown
in the move message modal such that width is enough to fit
all the options.
2022-10-12 10:50:05 -07:00
Sahil Batra 6f1d5a29aa stream_popover: Disable topic or stream input in move message modal.
We now disable the topic or stream input in move message modal if
user is not allowed to edit them. Topic input can be disabled only
in the modal opened from message actions popover since permission
to edit topic depends on message and we do not have any message
when we open topic from left sidebar since the message is fetched
from server while submitting.

This commit also does some changes to call ".trim()" on new_topic_name
only when it is undefined. new_topic_name can be undefined when
the new topic input is disabled because "serializeArray" only
considers enabled inputs.
2022-10-12 10:50:05 -07:00
Aman Agrawal 5fc5aa8625 communities: Add more space between realm rows. 2022-10-11 10:49:33 -07:00
Yogesh Sirsat 8b6976331a popovers: Redesign user info popover.
Following the addition of support for custom profile fields in the
user info popovers, we redesign the popover to have a cleaner look.

* Switch top section design from centered to left-aligned.
* Move mute/unmute and manage user options behind a \vdots menu.
* Move the local time and status into a new block.

Almost all design changes ideas are from discussion on chat.zulip.org;
see "#design > pronouns in profile card" for details.

Co-authored-by: evykassirer <evy.kassirer@gmail.com>
Co-authored-by: Tim Abbott <tabbott@zulip.com>
2022-10-07 15:52:23 -07:00
Lauryn Menard fdc1335e3a analytics: Move range selector buttons and hover information.
Because some button text is much longer in different languages,
there is an existing  bug when the charts are rendered with the
range selector buttons positioned on the right side of the chart.

This positions the range selector buttons to the left side of the
chart and the hover information to the right side of the chart.

For the pie charts and horizontal bar chart, the grouping buttons
labeled "Me" and "Everyone" are moved to the top of the chart, which
matches the grouping buttons on the vertical bar charts.

Adjusts some chart margins for new positioning of buttons and hover
information. Deduplicates some shared code for rangeselector buttons
in `stats.js` for the three vertical bar charts.
2022-10-07 11:34:01 -07:00
Lauryn Menard cdcef8b814 analytics: Remove "Aggregation" labels from stats page. 2022-10-07 11:34:01 -07:00
Lauryn Menard 396c7c3046 analytics: Remove unused CSS styling for `hr` tags.
There are no `<hr>` HTML tags in the stats / analytics page, so
removes the unused CSS rules for these elements.
2022-10-07 11:34:01 -07:00
Aman Agrawal 87316a777a css: Fix background color of date_row in unread PMs.
This was a regression introduced in the commit
a80500cf5d
where we forgot to change the color of for unread PM date rows
while change the color for the date row of unread stream messages.
2022-10-07 09:54:42 -07:00
Aman Agrawal ab9c5ae482 actions_popover: Only wrap content to next line on small width.
Fixes #23017

We try to keep the width of actions popover at `max-content` till
small widths.
2022-10-06 16:58:33 -07: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
evykassirer c321f57785 settings: Explain that Google blob emojis are deprecated.
Part of fixing #19371.
2022-10-04 12:29:35 -07:00
Aman Agrawal a80500cf5d css: Don't add unread indicator to the date row of first unread row.
Fixes #23030

If the first unread `.message_row` has a date_row, we don't show
unread indicator on it.
2022-10-03 11:31:35 -07:00