Commit Graph

704 Commits

Author SHA1 Message Date
Tim Abbott 0bc47b1c77 invite: Display globe icon for web-public streams.
This requires both passing through the is_web_public parameter to the
template, and a bit of CSS to make the globe not huge.
2022-12-14 21:04:12 -08:00
Josh Klar 2e825f637d css: Apply negative spread radius to message box-shadows.
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
2022-12-14 17:28:37 -08:00
Sahil Batra 26b7e40ac5 invite: Add bootstrap CSS rules to emails textarea in invite overlay.
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.
2022-12-13 12:03:06 -08:00
Sahil Batra 264bfd4583 message_edit: Add bootstrap CSS rules to message edit textarea.
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.
2022-12-13 12:03:06 -08:00
Aman Agrawal 6a1ae465cc css: Let actions popover icon take maximum possible width & height.
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.
2022-12-06 09:58:40 -08:00
Anders Kaseorg 5cc92365b8 dark_theme: Declare color-scheme CSS property.
This allows the browser to select a more appropriate color for the
browser scrollbars, for example.

https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-11-27 13:18:52 -08:00
Sahil Batra ec1f41eb9d settings: Rename dependent-block class to dependent-settings-block.
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.
2022-11-22 17:14:35 -08:00
Tim Abbott 2a3f708e9a gear_menu: Delete unused Bootstrap tabs code.
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.
2022-11-22 13:55:21 -08:00
Tim Abbott 9b5fb74f90 css: Remove bootstrap form-search CSS.
Only a couple lines were effective on a single element, so we just
inline those to the element in question.
2022-11-22 13:55:21 -08:00
Aman Agrawal c876e12b86 unread_ops: Let server do the mark as unread for us.
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.
2022-11-17 00:46:26 -08:00
Aman Agrawal fbe9a9e539 left_side_userlist: Remove feature from frontend.
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.
2022-11-14 12:23:55 -08:00
Aman Agrawal b563fdc537 css: Fix hidden unread marker when a user mentioned message is focused.
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.
2022-11-14 09:46:44 -08:00
Aman Agrawal 784966b3bd css: Visual fixes to message feed notice.
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.
2022-10-31 14:33:50 -07:00
jai2201 6f9e97921d pm_section: Create collapsible private messages section.
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>
2022-10-26 13:47:08 -07:00
Tim Abbott 3d2a3f2593 popovers: Avoid focus outline on \vdots when actions popover is open.
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).
2022-10-24 10:47:56 -07:00
Eyuel Berga Woldemichael 019ff29daf message feed: Show the 3-dots icon while actions popover is open.
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
2022-10-24 10:29:23 -07:00
Akarsh Jain 9e74f9f1ce message_edit: Fix vertical alignment of input area in /me messages.
Fixes #23101.
2022-10-21 12:16:15 -07:00
Akarsh Jain 3d4a2eb468 message_feed: Fix alignment of EDITED notices in /me message.
Fixes part of #23101.
2022-10-21 12:15:52 -07:00
Akarsh Jain 065f5413ae message_feed: Fix /me message alignment of message actions.
These were apparently no longer aligned with the timestamp.

Fixes #23101.
2022-10-21 12:15:16 -07:00
Aman Agrawal 1267dce027 navbar: Add login and signup buttons for spectators.
Remove login buttons from right sidebar and add them to navbar
so that the user instantly notices them.
2022-10-21 10:10:40 -07:00
Yogesh Sirsat b28efaae76 tippy: Wrap overflowing content of tippy tooltips. 2022-10-20 10:35:11 -07:00
Ganesh Pawar 4df8c6610f gear menu: Add organization info.
Fixes #22205
2022-10-13 23:45:25 -07:00
Sahil Batra 35aab1efed message_edit: Set width to auto for propagate mode dropdown.
This commit sets the width to auto for propagate mode dropdown
in the move message modal such that width is enough to fit
all the options.
2022-10-12 10:50:05 -07:00
Yogesh Sirsat 8b6976331a popovers: Redesign user info popover.
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>
2022-10-07 15:52:23 -07:00
Aman Agrawal 87316a777a css: Fix background color of date_row in unread PMs.
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.
2022-10-07 09:54:42 -07:00
Aman Agrawal a80500cf5d css: Don't add unread indicator to the date row of first unread row.
Fixes #23030

If the first unread `.message_row` has a date_row, we don't show
unread indicator on it.
2022-10-03 11:31:35 -07:00
evykassirer 8dca83265d messagebox: Undo regression that removed higlights for mentions.
Regression introduced in 3f66a9ef2b

CZO discussion https://chat.zulip.org/#narrow/stream/9-issues/topic/mention.20highlighting.20broken/near/1441212
2022-09-26 12:50:24 -07:00
Taiki 106b19ea42 css: Apply same margin to all 4 types of icons in message_view_header.
This `margin-left: 5px` was missing for globe icon. This change
ensures that all the 4 types of icons that are displayed have
the same margin.
2022-09-26 12:29:28 -07:00
Tim Abbott 155787512f css: Modal read receipts CSS to modal.css. 2022-09-23 16:21:31 -07:00
Riken Shah ff899e5c31 read_receipts: Disable showing read receipts for Notification Bot msgs.
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
2022-09-23 16:20:25 -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
Riken Shah 39a3944951 timepicker: Fix hours and minutes input getting squeeze in safari.
This issue is probably with the upstream bug in
`flatpickr` but we can fix it for us by specifying minimum
height to the input.

Fixes #22698
2022-09-06 12:57:24 -07:00
Sahil Batra bef9592d49 settings: Move custom input div inside the main setting div.
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.
2022-09-06 11:14:02 -07:00
Oliver Pham 2ed650f596 search_suggestion: Show profile pictures in autocomplete suggestions.
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
2022-08-16 14:17:42 -07:00
Dinesh 48d2783559 read_receipts: Add support for displaying read receipts.
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>
2022-08-12 13:16:35 -07:00
Tim Abbott 98c7427bfc message_edit: Remove Bootstrap cruft from message edit form.
* 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.
2022-08-06 22:28:40 -07:00
Tim Abbott 9c1c0016ed css: Clean up message edit form CSS somewhat.
* Remove Bootstrap `form-horizontal` class and !important override
  required by it.
* Standardize on 10px bottom margins; this fixes subtle bugs in some
  sizes.
2022-08-06 22:28:40 -07:00
anurastogiji 1921dce7c7 message_edit: Swap propagate_mode with checkboxes in message edit form.
Previously, we had you select where to send notifications before
specifying which messages you're moving, which seems like the wrong
decision hierarchy.

Fixes #19973.
2022-08-06 22:28:40 -07:00
Ganesh Pawar e16e7630e6 minor: Add `z-index` to `message_time` class.
This fixes the issue of the timestamp in a message not
being clickable at smaller widths.
2022-07-22 16:39:53 -07:00
Julia Bichler ccbdbe4e3b message-editing: Reword move message menu. 2022-07-19 11:50:28 -07:00
Riken Shah 3ba89e7779 message_scroll: Use CSS transition for scroll to bottom button.
We are abandoning jQuery animation because it build up queue
when there is continous switch in animation state.
i.e When user goes ↑↓↑↓↑↓… at the bottom.

Also added `aria-hidden` to `#scroll-to-bottom-button-container` so
that this widget doesn't interfere with screen readers.
2022-07-13 13:50:55 -07:00
evykassirer ce399cf08f mark as read: Fix button styling for medium-sized screens. 2022-07-12 16:28:34 -07:00
yogesh sirsat d7c5434827 tables: Cleanup of table-striped CSS block.
Making `table-striped` CSS block as a top level shared CSS inside
`app_components.css`, trying to make use of this block on every
table and also removing some dublicated CSS.

Follow-up of #21144
2022-06-30 11:25:26 -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
NerdyLucifer c31ab1bcb5 recent-topics: Mark as read using unread counters in Recent topics.
The PR changes the following behaviors and UI:
1. Removes the checkmark button to mark the topic as read in
"Recent Topics".
2. Make the unread messages counter be the button for marking
all messages in the topic as read. The unread messages counter
is made clickable and tooltip is set to "Mark as read".

In "recent_topic_row.hbs", remove the checkmark button and add
classes and attributes to ".unread_counter" to give it desirable
behaviour on clicking.

In "zulip.css" set "opacity: 0.7" for ".on_hover_topic_read".

In "recent_topics.css" we set the background-color of unread counter to
hsl(105, 2%, 50%) to decrease fading of unread counter.

Fixes: #21654
2022-06-08 11:58:25 -07:00
Aman Agrawal 59e676b1f5 gear_menu: Allow spectators to select their default language.
Set the default_language as cookie and reload the page so that
the spectator can immediately see the language change in effect.

We can reload the page forcefully for spectators since there is
no chance of any work being lost. It is possible that the spectator
may lose the selected message on doing so.

This requires a new dependency, to be able to set cookies from
frontend JavaScript.

Fixes #21961
2022-06-01 17:08:00 -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
Aman Agrawal ce62c11720 message_view_header: Add divider after stream name for spectator.
Since originally divider is a part of sub_count which is not
displayed for spectators, we need to add a new one for them.
2022-05-02 10:05:33 -07:00
Tim Abbott d0b3474ef6 login_to_access: Restore paragraph margin in modal.
Now that we have two paragraphs in some settings, this looks better.
2022-04-29 16:35:49 -07:00
Sahil Batra 77fd03e426 invite: Add custom option for invite expiration time in frontend. 2022-04-20 13:31:37 -07:00