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.
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.
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>
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
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.
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>
This commit transitions all styles in app.css in the Django pipeline
to being compiled by webpack in an app-styles bundle, and renames the
various files to now be processed as SCSS.
To implement this transition, we move the old CSS file refernces in
settings.py and replace them with a bundle declared in
`webpack.assets.json` and includedn in the index.html template
Tweaked by tabbott to keep the list of files in `app.css` in
`webpack.assets.json`, and to preserve the ordering from the old
`settings.py`.
No need to have separate click handler for user_popovers and
message_info_popovers as the same user-id can be extracted similarly
from the target of both the click events.
Another refactor, `sender_info_popover` was confusing as it doesn't
fix into the context of rightbar user popovers so changed it to
`info_popover_actions` since that section of popovers contains popover
actions.
This adds a click handler to `.user-group-mention` which works in a
fashion that is quite similar to `.user-mention`. It generates and
displays a popover.
The popover has a list of members, their online status (if they are
not bots) or their bot status if they are bots (it's not clear whether
ultimately bots should be able to be members of usergroups, but I'm
able to add one, so I thought it would be worth supporting).
The popover's `UL` element has max-height and overflow-y atttributes
so large groups will grow a scrollbar.
Fixes#8300.
This applies the same overflow changes to “.message-info-popover” by
imposing a max width on the popover (so it doesn’t increase in width
when it gets larger) and adding the tooltip on hover.
The popovers for the message down chevron and left sidebar had
strange side padding and non-uniform padding between the top and
bottom. This changes them to all have the same padding as the
nav `#gear_menu`; none on the sides and 5px on the top and bottom.
This adds a centered layout for mobile and responsive screens where the
emoji picker is guaranteed to be in the center of the screen, and the
rest of the screen darkens behind it.
Fixes: #6291.
Before the user profile bounding box width was not set so it
would overflow the 240px and there would be grey space next to
the avatar. Now the width is always maintained and long text
is cut into multiple lines.
This changes the styling of the user profile popup to be responsive
to mobile devices. In this case it is converted to a modal form using
flex to center it on devices with screen sizes under 768px in width.
Fixes#4669.
Aman Agrawal
Ganesh Pawar
Sahil Batra
Anders Kaseorg
Riken Shah
aryanshridhar
m-e-l-u-h-a-n
Tim Abbott
sahil839
Armaan Ahluwalia
Vishnu Ks
Shubham Dhama
Eric Eslinger
Aditya Bansal
Brock Whittaker
Steve Howell
Cory Lynch
hackerkid