Commit Graph

671 Commits

Author SHA1 Message Date
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
Aman Agrawal 0ce2ae1782 bookend: Use it to advertise recent topics for spectators.
We show a minimal text "Browse recent topics" at the end of
every narrow. This will help new users to find additional
content on the app.

Fixes #19844
2022-01-31 16:32:09 -08:00
Aman Agrawal b0dd063bb8 scroll_bar: Simplify module.
The content which is scrollable is moved left by the width of the
scrollbar when scrollbar is visible. The navbar, floating recipient bar
and composebox doesn't move. We reduce their width by scrollbar width
to adjust for the reduced width of the scrollable content.

Since floating recipient bar is center aligned (with margin: 0 auto)
we also have to move left by half the scrollbar width.

Group css classes having the same value being assigned together. This
makes the code easier to understand.
2022-01-28 09:50:27 -08:00
BIKI DAS 42dd58cffe
docs: Fix a few typos in documentation. 2021-12-28 09:36:59 -08:00
YashRE42 bc3d03730f message_controls: Inherit visibility from `.message_failed`.
Previously, there was a bug where a failed message would only show the
`.message_failed` icons on hover, the intent was for them to always be
visible if a message failed to send.

The cause of the above bug was that in
e7b1de8ace we modified the html
structure of the icons such that each icon was inside its own div,
which possessed the `message_control_button` class, and both such divs
were inside a `.message_failed` div. The unintended consequence of this
change was that the rule `.message_controls .message_control_button`
would apply `visibility: hidden` to the icons.

Hence, this commit explicitly sets the visibility of
`.message_failed .message_control_button` to `inherit`.
2021-12-12 11:14:46 -08:00
S-Abhishek 186d1a83e9 narrow_banner: Move empty narrow messages to handlebar templates.
Removed existing empty narrow divs from app/home.html and created
a new javascript module to dynamically load empty narrow messages
using handlebar template.

Fixes #18797
2021-12-07 13:38:48 -08:00
Aman Agrawal 50f916443d compose: Fix alignment of help link. 2021-12-02 15:11:15 -08:00
Aman Agrawal 7610b33963 flatpickr: Hide bottom arrow in dark mode.
Previous change didn't hide it in dark mode since this css was
being overridden.
2021-12-02 15:11:15 -08:00
Aman Agrawal 4ed6b441c7 flatpickr: Improve look of `Confirm` button.
Change text from OK to Confirm.
Remove icon.
2021-12-02 15:11:15 -08:00
Arch0125 7c4382bb06 dropdown_list_widget: Replaced pencil icon with chevron-down.
This is the standard way to indicate that something is a dropdown
menu, and in particular avoids confusion some folks had with the
pencil icon.

Tweaked by tabbott to unify CSS with all of our other dropdown list
widget instances.

Fixes #19888.
2021-12-01 13:35:15 -08:00
Ganesh Pawar f760850993 login_to_access_modal: Migrate modal to Micromodal. 2021-11-30 14:39:46 -08:00