Commit Graph

71 Commits

Author SHA1 Message Date
yogesh sirsat cd71fdea60 popovers: Display custom profile fields in user profile popover.
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
2022-09-20 17:03:57 -07:00
Aman Agrawal 155540c0e3 popovers: Fix alignment of icons in sidebar and msg action popovers.
The regression was introduced in c8f346b5e5.
Reverted the change that caused the regression and introduced a
new fix.
2022-09-16 11:47:44 -07:00
Aman Agrawal 2aaf3c3c76 Revert "popovers: Align icons and content in middle."
This reverts commit 948dc3a629.
2022-09-16 11:47:44 -07:00
Aman Agrawal 948dc3a629 popovers: Align icons and content in middle.
The icons like `x` for delete message were displayed below the
text in alignment due to a regression.
2022-09-15 12:14:15 -07:00
aadiljaleel 654bab1d19
popovers: Replace full profile avatar border with box-shadow.
This makes the visual border appear outside the image, not overlapping its edges.

Fixes: #21265
2022-09-14 09:26:53 -07:00
sayamsamal c8f346b5e5 icons: Change mute icon from bell to speaker.
This icon is more standard, and lets us use a speaker icon for other
applications.

Fixes #21751
2022-09-09 17:32:19 -07:00
sayamsamal bfc1901289 user_profile_modal: Move profile avatar to the top on smaller screens.
Moving the profile avatar to the top on smaller screen sizes adds to
the general responsiveness of the profile modal.
2022-07-22 15:28:05 -07:00
sayamsamal a5088db6f1 user_profile_modal: Fix long values flowing under the profile avatar.
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.
2022-07-22 15:28:05 -07:00
sayamsamal d810c285e3 user_profile_modal: Move user status to right and add status icon.
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.
2022-07-22 15:28:05 -07:00
sayamsamal aebff0fd61 user_profile_modal: Move avatar in full profile to the right.
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
2022-07-22 15:28:05 -07:00
sayamsamal 2854eacc7f user_profile_modal: Fix label alignment for non-English languages.
This fixes the issue in which the lengthy labels would either overflow
or affect the alignment of the profile fields.
2022-07-22 15:28:05 -07:00
Aman Agrawal f28e89d8b7 popovers: Use css_variables for media queries. 2022-07-12 17:23:15 -07:00
Aman Agrawal df6ad8154a default_language_modal: Add more space around languages displayed.
We use 3 columns on wide screens and come down to 1 column on
narrow screens to ensure that the languages are properly
displayed.
2022-07-12 17:23:15 -07:00
Anders Kaseorg 1e6bc5b36b styles: Delete some unused CSS.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-06-10 12:27:48 -07:00
anurastogiji 7a24da70a1 search: Fix x icon overlap in search and filter inputs.
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
2022-05-05 17:12:23 -07:00
Sayam Samal 681414caf1 user_profile_modal: Interchange posititons of "Joined" and "Role" fields.
This commit swaps the posititon of "Joined" and "Role" fields in the
User Profile Modal to make it consistent with settings/profile.
2022-03-10 15:10:24 -08:00
Aman Agrawal 2eaf869949 move_topic_to_stream: Fix clipped stream select dropdown.
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.
2021-12-03 14:38:27 -08:00
Ganesh Pawar 19c4a63d51 move_topic_modal: Use `dialog_error` to display error.
Fixes #20210
2021-12-02 14:02:27 -08:00
Sahil Batra b23df8dc9b popovers: Add "Manage this user" option to user info popover.
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.
2021-12-01 12:13:06 -08:00
Ganesh Pawar 7a505e3857 user_profile_modal: Migrate modal to Micromodal. 2021-11-10 11:04:38 -08:00
Ganesh Pawar 41ddf29e76 move_topic_to_stream: Migrate modal to dialog_widget. 2021-11-09 10:02:43 -08:00
Anders Kaseorg 52ad928d3e styles: Fix shorthand-property-no-redundant-values.
Generated by stylelint --fix.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-11-05 17:34:13 -07:00
Anders Kaseorg ea88ec9e06 styles: Fix stylelint rule-empty-line-before.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-10-17 07:15:09 -07:00
Riken Shah cea961b129 user_info_popover: Show status emoji.
In this commit,

* We show status emoji alongside status text in the user
info popover.

* Updated clear status button to also clear status emoji.
2021-07-28 10:02:51 -07:00
Riken Shah b7b18cdfd3 emoji_picker: Update architecture to support status emoji.
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'.
2021-07-23 13:03:13 -07:00
aryanshridhar 594c66edc5 move_topic: Improve the style for dropdown toggle button.
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.
2021-07-16 12:58:15 -07:00
m-e-l-u-h-a-n a428e546b8 minor: Make stream tab selector in profile modal more specific.
It is changed to avoid having an id that is too generic
and could invite unwanted bugs.
2021-07-02 13:53:46 -07:00
m-e-l-u-h-a-n 5dfd11673a CSS: Fix alignment of private and web-public streams in profile modal. 2021-07-02 13:53:46 -07:00
m-e-l-u-h-a-n ee5aefee32 popovers: Add clear input button to stream search widget.
We show it only when it contains some text in it.

Fixes: #18878.
2021-07-01 14:30:31 -07:00
m-e-l-u-h-a-n 0d3f229283 popovers: Add filter widget for stream list in profile modal. 2021-07-01 14:30:30 -07:00
m-e-l-u-h-a-n 995048c4bc popovers: Add header to stream list in profile popover. 2021-07-01 14:30:06 -07:00
m-e-l-u-h-a-n c6f8b9d807 profile: Add unsubscribe button in user profile modal.
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.
2021-06-30 15:17:26 -07:00
Anders Kaseorg 5d64c21c38 styles: Globally set font-size and a unitless line-height.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-06-23 09:10:50 -07:00
m-e-l-u-h-a-n e10a315efd temaplate: Separate stream and user group tabs in user profile modal.
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.
2021-06-23 08:08:23 -07:00
Tim Abbott 579a9d60e9 css: Remove 15px font usage in full profile.
Together, these larger font size declarations made the modal look
worse, in addition to just being inconsistent with the rest of the
app.
2021-06-11 16:03:39 -07:00
m-e-l-u-h-a-n b080417960 popovers: Add tabs for profile, groups and streams in user_info modal.
Fixes: #16233.

Co-authored-by: Abhirup Pal <abhiruppalmethodist@gmail.com>
2021-06-11 07:56:32 -07:00
Tim Abbott 99636c36a3 css: Remove inconsistent topic edit modal margin.
Similar elements in both the compose box and main message edit UI have
no margin in this location, and look better.
2021-05-09 19:47:27 -07:00
Tim Abbott 3e4a819722 css: Centralize topic edit modal CSS. 2021-05-09 19:47:08 -07:00
Anders Kaseorg 178736c8eb docs: Fix spelling errors caught by codespell.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-04-26 09:31:08 -07:00
Aman Agrawal b1f8041c31 giphy: Use simplebar to replace browser scrollbar. 2021-04-14 10:50:47 -07:00
Aman Agrawal 35bd44ed2a giphy: Add clear search button.
Make the input more square looking to match with our other
input boxes.
2021-04-14 10:50:47 -07:00
Aman Agrawal 84f7bb85f6 giphy: Make footer background black to match to with attribution.
Adjust border-radius to make edges smooth.
2021-04-14 10:50:47 -07:00
Aman Agrawal 5e83965e80 giphy: Use GIPHY web SDK to allow inserting GIFs in compose box.
We use GIPHY web SDK to create popover containing GIFs in a
grid format. Simply clicking on the GIFs will insert the GIF in the compose
box.

We add GIPHY logo to compose box action icons which opens the GIPHY
picker popover containing GIFs with "Powered by GIPHY"
attribution.
2021-04-05 15:04:49 -07:00
Anders Kaseorg 64b78ad992 styles: Use range context queries to eliminate *_max variables.
On a high-DPI display or with a non-default zoom level, the browser
viewport may have a width strictly between md_max = 767px and md_min =
768px.  Use only the *_min bounds for consistency.

This requires queries with strict inequalities to express upper
bounds (width < md_min).  Fortunately, that functionality is provided
by range context queries.  Unfortunately, those are not supported in
all browsers.  Fortunately, we can compile them away using
postcss-media-minmax.  Unfortunately, postcss-media-minmax currently
subtracts 1px for strict inequalities anyway to work around a Safari
rounding bug.  Fortunately, 0.02px should be sufficient for that, so I
submitted a PR:

https://github.com/postcss/postcss-media-minmax/pull/28

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-05 09:23:59 -08:00
Aman Agrawal f8aea9aecb postcss_vars: Use underscore to follow better naming convention. 2021-01-25 14:49:32 -08:00
Aman Agrawal e404fea055 popovers: Use $md-max=767px for 769px breakpoint.
md == 768px so there si only 1px difference here which is not
noticeable here.
2021-01-25 14:49:32 -08:00
Aman Agrawal ac09572317 media_query: Use 575px instead of 500px to reduce spacing.
At 575px, we used to reduce spacing for
all components around webapp.

This is basically the standard breakpoint for mobile devices.
2021-01-25 14:49:32 -08:00
aryanshridhar c591141d7c popover: Fixed color-picker popover responsiveness.
Color-picker overflows the screen width when an user
attempts to change color of the stream in small devices.

Fixed by making it fullscreen in narrow devices.

Fixes #16477
2020-10-29 16:56:02 -07:00
sahil839 7525642507 popover: Show normal popover instead of extended profile one for bot owner.
We should show normal popover instead of extended profile one for the bot
owner in bots section of organization settings.

A new function show_user_info_popover is added, as it makes sense to keep
it separated from the function used to open popover for sender of a
message, which uses the message from which the popover is opened.
This added function can further be used for showing popover for
"invited_by" in invites table.
2020-09-22 15:42:53 -07:00
Anders Kaseorg a3d26d701e styles: Rename .scss files back to .css.
css-loader@4 broke @import statements referencing files with
extensions other than .css, unless those @import statements are
compiled away by another loader.  Upstream is more interested in
arguing that such @import statements are semantically incorrect than
applying the one line fix.

https://github.com/webpack-contrib/css-loader/issues/1164

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-09-15 16:33:28 -07:00