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.
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.
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>
Displaying custom profile fields in user profile popover, as mentioned
in the issue.
In `popovers.js` filtering out only those custom profile fields, which
are not `LONG_TEXT` or `USER` fields and their values are not empty.
Custom profile fields rendering in profile popover the same way use
similar rendering logic as in the user's full profile modal.
Fixes: #21215
When some value is very long as in the case of a long email address,
the text used to flow and hide under the profile avatar. We want the
values to be seen at all times, even if they need to be broken into
multiple lines.
The user status appears out of place among the profile fields and thus
placing it under the avatar avoids any discontinuity between the profile
fields. This also adds the status icon beside the user status.
The placement of the avatar on the right makes the full profile modal
UI consistent with Settings > Profile UI. This also helps the custom
profile fields appear more in line with the default profile fields.
Fixes#21805
We add `padding-right` to input field so that input do not overlap with
`x`and add `text-overflow: ellipsis` to make overflow less jarring.
Fixes#19765
The stream select dropdown's height was clipped by the modal
container which resulted in the dropdown only being displayed
partially. We could either move the dropdown to under `body` or use
`position: fixed` for it be able to show outside parent container.
We go for the later option.
This commit adds "Manage this user" option in the user-info popover
which simply opens the administrative user-info modal.
We show a spinner on submit button in this case as modal
is not closed immediately and thus we need some indicator
to show that the task is in progress. There is no spinner
on submit button in the modal opened from "Users" section
of organization settings.
Error handling for this case is different than when the
modal is opened from "Users" section of organization
settings because there is no overlay in the background
of modal in this case.
In this case, we show error inside the modal and do not
close it and in case the change is completed successfully
we just close the modal without showing any message.
Fixes part of #18944.
This is a prep commit to add the status emoji feature.
We update the templates associated with the emoji
picker to add class `status_emoji` to `emoji` in the
popover. So we can later add the events when the user
selects the emoji.
We also update the functions in `emoji_picker.js` to
support opening emoji picker popover in the 'set_status_
overlay`.
We also increase the `z-index` of the `popover-flex`
class (This class is only added to popover-emoji content
if the view is mobile), so in the mobile view the emoji
popover doesn't go behind the '#set_user_status_modal'.
Earlier, the `stream_header_colorblock` wasn't properly styled
with the dropdown toggle button from a UI perspective. This was so
because they had a few space between them due to inconsistencies
in their border radius.
This commit adds an border-radius property to the move topic
dropdown toggle button to eliminate the above issue and
improve it's overall look.
We add unsubscribe button in the stream list that allows
users and admins to unsubscribe them using profile modal.
If a user attempts to unsubscribe from a private stream
we redirect them to do so from stream setting overlay
to avoid a really confusing user experience as we ask
for confirmation before unsubscribing such streams.
We had stream and group tab inside a common div with class
`subscription-group-list` due to this adding any info
elements like alert boxes that were specific to one of them
became difficult. To fix this we keep them in their own
`.tabcontent` div. This change also makes the handling of
display of different tabs a lot easier and cleans
up unnecessary javascript code that was handling the
display of common parent div of stream and group tab.
Javier González
Tim Abbott
sayamsamal
Yogesh Sirsat
Aman Agrawal
Steve Howell
aadiljaleel
Anders Kaseorg
anurastogiji
Ganesh Pawar
Sahil Batra
Riken Shah
aryanshridhar
m-e-l-u-h-a-n