Commit Graph

681 Commits

Author SHA1 Message Date
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
Aman Agrawal 41b7b3d7a4 css: Adjust vertical alignment of globe and lock icons. 2022-03-25 17:02:18 -07:00
YashRE42 07df504c79 status_emoji: Bump margin-left on status emoji by 1 px.
While the 2px value that we had previously chosen looked alright for
most emoji (😀, 😃, etc) some emoji such as 🐙
used more of the width available to them and as such still looked too
close to the user name. As such this commit bumps the value to 3px
(4px was a bit too much space).
2022-03-24 11:07:37 -07:00
Aman Agrawal d006b6cc3d message_list_view: For spectators, show login button for failed images.
We render a login button for images that failed to load for
spectators. The image failed to load most likely due to being
rate limited by the server.

Fixes #19840
2022-03-24 10:50:00 -07:00
Aman Agrawal bae5f016bf compose_control_menu: Allow to enter press to open the menu.
Make `compose_control_menu_wrapper` clickable and allow tab focus
on it. Disable tab focus on `compose_control_menu` icon. Fix outline
for `compose_control_menu_wrapper`.

Extend out custom outline property to all `[role="button"]` elements.
2022-03-15 16:14:25 -07:00
Anders Kaseorg cbca80c846 styles: Fix some invalid CSS.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-03-09 09:37:31 -08:00
Steve Howell c43d48b22f stream create: Overhaul create-stream add-subscribers UI.
The most notable change here is that when you are adding
subscribers to a stream as part of creating the stream,
you can now use the same essential pill-based UI for
adding users as we do when you edit subscribers for an
existing stream.

We don't try to exactly mimic the edit-stream UI or
implementation, since when you are adding subscribers
during create-stream, we are just updating a list in
memory, whereas in the edit-stream UI, we immediately
send info to the server.

Fixes #20499
2022-03-07 16:58:58 -08:00
Tim Abbott 0c015c7bf3 css: Deduplicate CSS for .always_visible_topic_edit. 2022-03-04 13:25:30 -08:00
Junchen Liu e3237ae7e1 css: Fix hover color for "Edit topic" icon in recipient bars.
Previously, this had different hover behavior from the adjacent
elements, which seems like a bug.

The CSS for this component is shared with Recent Topics; we migrate
the styling for on_hover_topic_read for consistency.

Fixes #21273.
2022-03-04 13:25:30 -08:00
NerdyLucifer a5d22b1d1e message_feed_ui: Make unread marker line continuous.
Make the unread marker lines at the side of messages continuous by
adding "height: 100%" to ".unread-marker".

This provides a nicer visual experience by not highlighting the
boundaries between messages. (One can see that information using the
timestamps or by moving the selection cursor, where appropriate).

Fixes #20981.
2022-03-02 17:21:30 -08:00
Anders Kaseorg d4d277bd1f styles: Remove legacy IE gradient filters.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-03-01 23:09:46 -08:00
Aman Agrawal 7e365f7ee3 icons: Replace fa-globe icon with a custom globe icon. 2022-03-01 11:36:38 -08:00
Aman Agrawal bab9e50581 scroll_to_bottom_button: Use unicode icon for right arrow. 2022-02-25 14:57:22 -08:00
Dinesh 6afdf2410d message feed: Notify user when messages are not being marked as read.
Notifies user when messages are not being marked as read through a
banner that lets them mark all messages in the narrow as read. Note
that the banner is only displayed if the user's actions, like
scrolling, would've actually marked the messages as read.

This avoids distracting the user when viewing a thread they've already
read.

tabbott has verified that if new messages come in, the banner will reappear.

Fixes: #18768.
2022-02-18 14:48:31 -08:00
Aman Agrawal 0eafa6039b message_scroll: Show scroll to bottom button.
Show/hide scroll to bottom button when the last message is
not visible in the current scroll position.

We adjust the bottom offset of the button based on compose box
height.

Fixes #19862
2022-02-18 13:29:57 -08:00
Aman Agrawal 9b622b7d25 gear_menu: Allow user to configure preferred theme.
We save the preferred theme in localstorage so that user doesn't
have to re-select the theme on every reload. Users on slow
computers might see flash of a theme change, if it happens.
2022-02-18 11:29:48 -08:00
Aman Agrawal ad555f2feb tippy: Only change background color of tooltips with no theme.
This change was not aimed at popovers that use tippy. Since
popovers use light theme and tooltips don't, we use this
`not[data-theme]` selector to exclude popovers from being
affected by this change.
2022-02-18 10:51:35 -08:00
Jai soni 9cd27fd773
right sidebar: Add word-wrap property in tooltips.
This prevents the overflow of tooltips on hovering over buddy list.

Fixes #21119.
2022-02-16 12:59:38 -08:00
Aman Agrawal 430d1a411e tippy: Make background color of tooltips close to black.
This is aimed towards increasing the contrast for tooltips in
dark theme.
2022-02-14 11:57:04 -08:00
Tim Abbott 93ce3396ac status emoji: Adjust margin for common element.
After some experimentation, these styles look better in all the places
we're displaying status emoji.  See the comments for justification.
2022-02-11 13:29:32 -08:00
Tim Abbott 68055048a0 message feed: Add 4px left margin to edited notices.
This makes them not look squished up against the name.
2022-02-10 13:52:24 -08:00
Parth e3ddd662ab message_editing: Fix topic edit propagate option cut-off.
In the topic changing UI, the 'Change later messages to this topic'
and other options in the drop down were cut off when selected in some
languages like Russian.

Make the selection box width adjust appropriately according to the
length of the text, and also place it on its own line unconditionally.
users.

With tweaks by tabbott to use the same approach we already use in the
"Move topic" modal to have the bottom margin for the color block match
that of the dropdown_list_widget itself, of having them share CSS.

Fixes #19739.
2022-02-09 14:06:49 -08:00
AnushaNathRoy 5e05dcbc8f status_emoji: Extract status emoji template.
Currently the emoji_status set by the user is only seen in the buddy
list, it would be useful to show the emoji_status in other places as
well.

As such this commit does the prep work of extracting a template which
will be used in all places that need to show the status emoji.

With refactor and minor edits by Yash RE.

Co-authored-by: YashRE42 <33805964+YashRE42@users.noreply.github.com>
2022-02-08 16:52:49 -08:00
Anders Kaseorg b0ce4f1bce docs: Fix many spelling mistakes.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-02-07 18:51:06 -08:00