This is part several updates for #22524.
Testing note: I removed the test test_compose_all_everyone_confirm_clicked
since it heavily relies on the old way of rendering banners and is too
UI-focused (instead of logic focused) for me to feel like it's worth
testing that the banner is removed when clicking the button.
This is part several updates for #22524.
Testing note: I removed the tests test_compose_invite_users_clicked
and test_compose_invite_close_clicked, since they heavily relied on
the old way of rendering banners and were too UI-focused (instead of
logic focused) for me to feel like it was worth testing that the
banners removed when clicking the buttons.
Error banners were rendered in a different place than warnings.
Now compose errors and warnings share the same template and styling
in compose_banner.hbs
Testing notes:
* I removed test_message_overflow since it seemed not to test
anything that test_check_overflow_text wasn't already testing.
* private_message_recipient() can't be called to set emails to non-valid
emails, so `invalid_recipient` cannot be tested (and is likely very
difficult to trigger in production, if possible at all).
This is the beginning of a fix for #22524 which converts several
banners to a new style. As a part of that set of changes, this
commit creates the shared template and warning styling. The
resolved topic warning was picked (for no particular reason)
to migrate first. Further commits updating other banners
to follow.
We need to fill width of `actions_hover` with padding of
`zulip-icon`, so that hovering over `.actions_hover` shows you
tooltip and clicking on it shows popover.
We can remove the "padding-left: 0px" rule for
"label.radio" element now since the default value
for padding property is 0 and we have also removed
the bootstrap applied "padding-left: -20px" rule
in the previous commit.
We rewrite the CSS rules, handled by bootstrap for the radio buttons of
"Enter to send" setting, to compose.css as we are in process of
removing bootstrap.
The line-height property added to input element by bootstrap is not
added to subscriptions.css since it is already added for all inputs
in zulip.css.
We rewrite the CSS rules, handled by bootstrap for the radio buttons
for stream privacy choices (in both stream create and edit form),
to subscriptions.css as we are in process of removing bootstrap.
The settings-radio-input-parent block in subscriptions.css is moved
to be top-level instead of being nested inside "stream_privacy_modal"
and "stream-creation-body" block, such that we can use this class
in future for resusable components (like settings_checkbox).
The bootstrap CSS rules are also added to this
settings-radio-input-parent selector.
The max-height property added to label by bootstrap is not added
since it does not applies to non-replaced inline elements.
The line-height property added to input element by bootstrap is
not added to subscriptions.css since it is already added for all
inputs in zulip.css.
We rewrite the CSS rules, handled by bootstrap for the radio
buttons in display settings (both user and realm-level defaults),
to settings.css as we are in process of removing bootstrap.
This commit adds a new class "display-settings-radio-choice-label"
to radio label elements in the display settings and the bootstrap
CSS rules along with existing CSS defined by us for radio-type
display settings are added to this class.
This change will help us in future where we may want to have
reusable components (like settings_checkbox) for radio-type
settings with visual preview.
The line-height property added to input element by bootstrap is
not added to settings.css since it is already added for all inputs
in zulip.css.
This commit renames the radio-input-parent class for parent div of
stream privacy radio inputs to settings-radio-input-parent.
This change is done so that we can use this same class name for adding
other similarly styled radio inputs to be used in settings in future.
We add the CSS rules handled by bootstrap for the radio
buttons in forward email modal to email_log.css as we
are in process of removing bootstrap
The elements for which CSS rules have been added are label
with "radio" class and "radio" type input elements.
The max-height property added to label by bootstrap is not
added since it does not applies to non-replaced inline
elements.
Previously, CSS rules were added inline for emails page in
dev server. This commit adds a new file which contains
CSS rules for the emails page in dev server. This will
also help us in adding focus for the radio buttons in
the page, which cannot be added inline to the elements,
when we remove the use of bootstrap for this page.
It can sometimes be unclear to logged-out users why they
are not seeing all their subscribed streams in the left sidebar.
To reduce the chances of users being confused, added a login link
at the bottom of the streams list for logged-out users.
To avoid leaking any information, the link is shown regardless of
whether or not there are actually any additional streams in the
organization.
Fixes#22844.
This commit renames dependent-block class to dependent-settings-block
and also moves the CSS to app_components.css. This class will now
only be used for this particular type of custom inputs and thus
we do not need ID in the selectors for applying the CSS.
We move the css to app_components.css from settings.css because
we are going to add save-discard widget in stream settings as
well and thus we can reuse the CSS there.
This has no visual changes.
I hand-verified all the places we include these elements in the UI:
* Markdown rendered inside the app.
* Markdown rendered on portico pages.
* The only such element in our HTML templates is the <h5>s for
organization logos.
For a couple of these, we were relying on the default margins provided
by Bootstrap.
Before 2017, Zulip's manage streams and settings UIs were tab in the
same pane position as our current message feed and recent topics.
That original implementation was implemented using Bootstrap tabs;
while it hasn't been in use for years, we had a bunch of stale code
related to it leftover in this module.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
evykassirer
Aman Agrawal
Sahil Batra
Hemant Umre
Anders Kaseorg
Tim Abbott
Taiki
Riken Shah
Sayam Samal
Javier González
m-e-l-u-h-a-n
Julia Bichler