This removes the focus outline on `simplebar-content-wrapper` in
the left sidebar and other places in the app when focused since
it doesn't look visually nice.
We add the support for hotkey hints for the tippyjs tooltips through
the hotkey_hints handlebar helper.
The hotkey_hints helper takes space seperated string arguments and
returns a span containing all the hotkeys with the required classes
for styling.
We also add a simple node test for the hotkey_hints handlebar helper.
Part of #21753
This commit removes the margin-bottom CSS added for
select elements to override the margin added by bootstrap.
Since we have removed the bootstrap CSS rules for
select elements in previous commits, we can remove
the overridden CSS in this commit.
This commit also removes margin-bottom CSS for input
element in one case, because CSS in app_components.css
already overrides the current bootstrap CSS for input
element.
This commit adds bootstrap CSS rules used for select elements
used in different modals in modal.css.
This change is done so we can safely remove select CSS
rules from bootstrap.css as a part of our process to
remove bootstrap.
This commit also changes the CSS for propagate mode select
element in "Move messages" modal to use ID as selector
instead of class such that the width property can be
overridden correctly.
This commit adds bootstrap CSS rules used for select elements in
invite UI in zulip.css.
This change is done so we can safely remove select CSS rules from
bootstrap.css as a part of our process to remove bootstrap.
This commit also adds class to a couple of select elements in invite
UI such that we can use those class to write CSS as using IDs would
lead to the dark-theme background not being applied correctly.
This commit removes form-horizontal class from invite_user
template. We can safely remove this class as vertical-align
property is already handled for input and select elements
by other bootstrap CSS.
For checkbox type inputs, the display property is already
set to inline-block by browser for all input elements but
it is eventually computed to "block" since float property
for this element is set to left. So, setting display
property is not necessary for checkbox input.
We add margin-bottom property CSS for now and that can
eventually be removed when we remove bootstrap CSS for
these elements completely.
We used to make message failed button (retry / cancel) invisible
when the message is successfully send instead of not rendering them.
This resulted in them being accessible via keyboard when they are not
visible. I couldn't find a reason for retry and cancel buttons to
use `visibility` to be hidden instead of just being not rendered via
`display: none`.
The focus rectangle would spin along with the arrows, which looked bad.
We do want to allow focus rectangles on this element for keyboard interaction,
so we just disable the focus rectangle during the animation.
Fixes#24110.
Since fbe9a9e539, the top_navbar element
unconditionally has the rightside_userlist class. There's some CSS
associated with this class NOT being present, which can be deleted as having
no effect, and then we can remove the class as having no effect as well,
The `next_is_same_sender` has no effect on the CSS of the message
displayed and the JS changes seem to have no effect too.
See cc8021a742 for more details.
Using grid layout moves us away from fixed widths
and position for items where possible, which will
make it easier to make messagebox changes without
breaking formatting.
Visual changes expected in this commit:
- When the action buttons overlap the message content,
it will no longer visually overlap but completely cut off
the content — which is good, but means the messages can’t
be as wide on narrow width views. There’s a slight improvement
to this in an upcoming commit.
Also removes the `last_message` CSS, which was busted due to the
`last_message` calculation not correctly being updated for new
messages arriving, and didn't improve styling.
This fixes a visual regression in newer Electron builds (without
regressing Firefox) for which I still don't entirely know the root
cause, where extra "borders" were being applied to messages in both
streams and PMs. Applying a negative "spread radius" to the box-shadow
properties of these elements, and moving that pixel to the "horizontal
shadow" aspect of the property (which is used to create the left-side
"ruler" effect), restores the expected look and feel.
Tested in qutebrowser (Chromium 87-based), Electron v18+v19, and Firefox
107.
Refs (and should unblock) zulip/zulip-desktop#1251
This commit adds required bootstrap CSS rules used for emails
textarea element in invite modal with existing CSS for that
element in zulip.css. We also change the selector to use class
instead of ID such that the dark theme CSS can take precedence
when using dark theme.
This change is done so we can safely remove textarea CSS rules
for bootstrap.css as a part of our process to remove bootstrap
without changing existing design.
This commit adds required bootstrap CSS rules used for message-edit
textarea element with existing CSS for that element in zulip.css.
This change is done so we can safely remove textarea CSS rules
for bootstrap.css as a part of our process to remove bootstrap
without changing existing design.
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.
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.
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.
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.
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.
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.
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>
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).
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
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>
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.
The implementation is simple, we just check if the
the message sender is a notification bot to decide if we
should show the read receipts list.
We also update the modal content styling to match the padding at the
top of the modal.
Fixes#22905
This commit moves "dependent-block" div inside the main
setting "input-group" div as the custom input is part of
that setting only. Also this will help in further refactoring
of settings code which will be done in next couple of PRs.
There are no changes visually, the space between settings
and inputs remain same.
Because the typeahead.js list items are currently just text, a user's
full name and avatar should be displayed in `input_pill`. To use
`input_pill`, a separate Handlebars partial view was created to
provide a mandatory container (`<div class="pill-container">`) for
`input_pill` and a flex container (`<div class="search_list_item">`)
for vertically aligning the text.
The description of each suggestion (i.e `description_html`) is
rendered as raw HTML, so every special character (e.g. whitespace)
should be HTML-escaped. This enables highlighting the substring in
each search suggestion that matches the query.
Fixes: #20267
Adds an API endpoint for accessing read receipts for other users, as
well as a modal UI for displaying that information.
Enables the previously merged privacy settings UI for managing whether
a user makes read receipts data available to other users.
Documentation is pending, and we'll likely want to link to the
documentation with help_settings_link once it is complete.
Fixes#3618.
Co-authored-by: Tim Abbott <tabbott@zulip.com>
* Remove likely useless use of `controls` Bootstrap class.
* Remove outer control-group elements, which just added 10px bottom margin, and
were always used with .no-margin, which removed that margin :).
* Rename message-edit-timer-control-group to message-edit-timer, since
it isn't a control-group.
* Remove Bootstrap `form-horizontal` class and !important override
required by it.
* Standardize on 10px bottom margins; this fixes subtle bugs in some
sizes.
Aman Agrawal
sayamsamal
Sahil Batra
Praveen Kumar
Evy Kassirer
Anders Kaseorg
Tim Abbott
Josh Klar
jai2201
Eyuel Berga Woldemichael
Akarsh Jain
Yogesh Sirsat
Ganesh Pawar
evykassirer
Taiki
Riken Shah
Oliver Pham
Dinesh