Commit Graph

46 Commits

Author SHA1 Message Date
Akarsh Jain 761ca16d6d
css: Add min-width to user presence dot. (#23526)
Previously user presence dot in the right sidebar becomes narrower 
when there is unread counter, and as such, this commit adds a min-width 
to the user presence dot.

Fixes: #23519
2022-12-06 16:15:55 -08:00
Riken Shah 51870f86da recent_topics: Show user status emoji in PMs messages.
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
2022-11-10 12:32:08 -08:00
Riken Shah 9d12a9c21e recent_topics: Show user presence status in PMs messages.
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.
2022-11-10 12:32:08 -08:00
Aman Agrawal 6e3d8c7733 recent_topics_row: Let pm status icons have its own class.
Some additional changes to make align them correctly after
the assigning the new class.
2022-11-10 12:32:08 -08:00
Aman Agrawal 7e8ebe3aa5 recent: Fix alignment of unread mention icon. 2022-11-01 08:24:24 -07:00
Aman Agrawal 42ff193e29 recent: Fix alignment of unread count in PM rows.
The alignment was off in both narrow and wide screens. Added
an invisible mute icon to PM rows to keep the unread counts aligned
with topic rows.
2022-10-31 14:21:24 -07:00
Aman Agrawal b23931bd66 recent: Fix unread counts wrappings to next line in long topic names.
We limit the word break to only text present inside the `a` tags
so that it doesn't apply to unread count.
2022-10-26 21:34:36 -07:00
Aman Agrawal ca36f23d9f recent_topics: Fix long topic and stream words squeezing other rows.
Topics and streams containing long words can cause horizontal
overflow and squeeze other columns too much.
2022-10-26 12:28:58 -07:00
Aman Agrawal 12d42320ff recent_topics_ui: Allow unread count click in PM row to mark row as read.
Fixes #23261

We now send user to next column after marking a row read. Added a
bit of bottom padding below unread count indicator.
2022-10-24 10:25:21 -07:00
Aman Agrawal e3f22a9907 recent_topics: Add mention indicator in row for unread topics.
Fixes #22984

Add an `@` icon in unread topics where user is mentioned.

We track a new set of `stream_id:topic` pairs for the unread mentions
so that recent topics instantly knows if a topic is unread and mentioned
or not.
2022-10-19 16:26:42 -07:00
madrix01 550a32bb20 recent_topics: Add Private message to recent_topics.
This commit adds private messages to the Recent topics view, to make
it an all-encompassing overview of recent activity visible to the user.

We add a filter "Include PM" to toggle whether PMs should be shown in
recent topics.

Fixes #19449.
2022-10-17 15:02:01 -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
Tim Abbott 7767ed217d recent_topics: Fix overly wide unread count focus outline. 2022-08-06 19:54:29 -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
madrix01 b5e21ceeaf recent_topics: Prevent topic name from extending into unread column.
Previously, when there were no unread messages in a topic, the topic
name was allowed to expand into the space allocated to the unread
count. This matched the behavior of the left sidebar. However, the
left sidebar has extremely limited horizontal space, and being able to
display a few extra characters is useful; recent topics does not have
this constraint. Further, recent topics wraps long topic names on
overflow, which looks ugly when using use the unread count's space.

So we switch to having the unread count element consume space even
when there is no count, using `visiblity:hidden`.

Fixes a part of #19449
2022-06-02 12:49:02 -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
yogesh sirsat f4e96f1071 recent_topics: Fix hover effect on recent topics table.
This changes recent topics to be consistent with our other tables. The
valus are copied from the common settings CSS for tables.

Ideally, we'd just share the CSS, but the existing table CSS is deep
inside a .settings-section CSS block, and it's a bit of a refactor to
share it.

Fixes: #21140.
2022-04-25 18:00:28 -07:00
Aman Agrawal d0a697fba7 recent_topics: Disable filter buttons for spectator.
Instead of setting `disable` attribute to the elements, we make
them look like disabled and remove interactions with them. This
helps us keep the hotkey handling logic for navigation easier
to manage.

Fixes #21279
2022-04-22 15:33:26 -07:00
Aman Agrawal e0aba4c639 recent_topics: Center align globe icon. 2022-03-01 21:00:36 -08:00
Aman Agrawal 5ae178b39c recent_topics: Show loading indicator before fetching initial messages.
Hide the loading indicator after initial fetch for recent topics.
2022-02-25 16:29:43 -08:00
Aman Agrawal 98c2038718 recent_topics: Position empty topic text independent of columns.
This avoids a column width change after initial loading of
messages finishes and "No topics match your current filter"
text is displayed.
2022-02-25 16:29:43 -08:00
jai2201 9288f00cd7 recent-topics: Add `width` CSS property in filter check icons.
This commit adds a width of 10px to fa-square and fa-check-square
icons in recent-topics table, so that on toggling between these icons
we can prevent the change in width of the whole button to make it look
good visually.
2022-02-25 11:15:54 -08:00
yogesh sirsat 8a1df07e64 recent topics: Display user info popover when clicking participants.
Tweaked by tabbott to do something reasonable for muted users and
display a cursor indicating clicking will do something.

Fixes #21154.
2022-02-17 15:49:24 -08:00
Anders Kaseorg 52ad928d3e styles: Fix shorthand-property-no-redundant-values.
Generated by stylelint --fix.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-11-05 17:34:13 -07:00
Anders Kaseorg ea88ec9e06 styles: Fix stylelint rule-empty-line-before.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-10-17 07:15:09 -07:00
Aman Agrawal 36051877a5 recent_topics: Optimize for mobile devices.
On small widths, add margin to right to action buttons so
that they don't they trigger scrollbar when clicked upon.

Make action buttons larger so that they are easier to click / tap on small
widths.
2021-06-01 08:32:06 -07:00
Aman Agrawal 91d32b1512 recent_topics: Extend the borders to bottom of window.
When height of topics is less than window height, the borders
don't reach bottom. So, we min-height for the table to make it
span to the bottom.
2021-05-12 15:45:08 -07:00
Tim Abbott 4dae2c53fb recent_topics: Make muted user avatars a bit less bright. 2021-05-12 09:38:36 -07:00
Abhijeet Prasad Bodas ed8faf1374 recent topics: Rename some HTML classes for readability. 2021-05-12 09:30:24 -07:00
Aman Agrawal 51acbefc8a recent_topics: Display compose box & enable compose hotkeys.
We move compose from being a part of message feed to
being a part of  middle column which is a common parent of recent
topics and message feed. This allows us to use a common compose
box for both the views. Fortunately, compose actions were
independent of this change so there weren't any evident
side effects.

Fixes #17543
2021-05-07 16:07:51 -07:00
Aman Agrawal 97496088c9 recent_topics: Use `unread_counts` class for showing unread count. 2021-04-14 10:57:16 -07:00
Aman Agrawal f7f5308986 recent_topics: Don't change background color on thead hover.
We expect to give recent topics a cleaner look by doing so.

Fixes #17934
2021-04-03 07:41:01 -07:00
Aman Agrawal fafbccfcd4 recent_topics: Stop last_msg_time_header::after from overflowing.
We change the text. This is an attempt to make the text space occupied by
the col header of last message timestamp smaller so that
it doesn't overflow to next line in some languages.

Also, add some extra padding.
2021-02-25 17:33:01 -08:00
Aman Agrawal d0a1d95c89 recent_topics: Fix search box not visible after wrapping in safari.
On safari, after search box wraps to next line on smaller widths,
it is not visible due to some flex box default property difference
between chrome and safari. We fix this by resetting default
property.
2021-02-25 17:31:33 -08:00
Aman Agrawal 56aa6673fe recent_topics: Use padding instead of line-height for spacing.
We need to increase a bit of spacing around text in rows at <750px
because row height is reduced after hiding avatars. We use
padding instead of line height so that this plays nice when text
is wrapped.

Note more padding is also required for >750px now because text
can be wrapped now and take more width than avatars.
2021-02-25 17:31:33 -08:00
Aman Agrawal 126b5dc186 recent_topics: Let text in wrap to enforce fix width behaviour.
If we don't allow text to wrap, it overrides the fix width of
the columns.
2021-02-25 17:31:33 -08:00
Aman Agrawal 876616f17b recent_topics: Fix % of space taken by columns.
This stops recent topics from adjusting column widths as new
messages are fetched, resulting in a better user experience.
2021-02-25 17:31:32 -08:00
Aman Agrawal 40d8a79ef4 recent_topics: Fill all vertical space available. 2021-02-25 17:31:32 -08:00
Aman Agrawal ad011272fe recent_topics: Remove top and bottom borders.
Don't show recent topics in a separate box.
2021-02-25 17:31:32 -08:00
Aman Agrawal 1eafb1d8b3 recent_topics: Move from overlay to a narrow-like view.
Recent Topics is no longer an overlay now, but note that it is
also not a typical messages narrow. It can reside between
an overlay and a Filter in the sense that it is dispalyed as
a typical Filter narrow but has properties of an Overlay.

Compose box is not visible in this view as it will be confusing
to many users and hence compose shortcuts have also been disabled.

Keyboard shortcuts that apply on messages have also been disabled.

The remaining shortcuts that apply to a narrow are still accessible
here.
2021-02-25 17:31:32 -08:00
Aman Agrawal 9ed3e47796 recent_topics: Show read topics in a darker shade. 2021-02-25 17:31:32 -08:00
Anders Kaseorg 64b78ad992 styles: Use range context queries to eliminate *_max variables.
On a high-DPI display or with a non-default zoom level, the browser
viewport may have a width strictly between md_max = 767px and md_min =
768px.  Use only the *_min bounds for consistency.

This requires queries with strict inequalities to express upper
bounds (width < md_min).  Fortunately, that functionality is provided
by range context queries.  Unfortunately, those are not supported in
all browsers.  Fortunately, we can compile them away using
postcss-media-minmax.  Unfortunately, postcss-media-minmax currently
subtracts 1px for strict inequalities anyway to work around a Safari
rounding bug.  Fortunately, 0.02px should be sufficient for that, so I
submitted a PR:

https://github.com/postcss/postcss-media-minmax/pull/28

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-05 09:23:59 -08:00
Aman Agrawal f8aea9aecb postcss_vars: Use underscore to follow better naming convention. 2021-01-25 14:49:32 -08:00
Aman Agrawal ac402428ed recent_topics: Use 767px for 750px as breakpoint for hiding columns.
There is no breaking change, just standardizing breakpoints.
2021-01-25 14:49:32 -08:00
Aman Agrawal a9be2f4067 recent_topics: Expand width at 767px instead of 700px.
This looks nice and doesn't break anything.
2021-01-25 14:49:32 -08:00
Anders Kaseorg a3d26d701e styles: Rename .scss files back to .css.
css-loader@4 broke @import statements referencing files with
extensions other than .css, unless those @import statements are
compiled away by another loader.  Upstream is more interested in
arguing that such @import statements are semantically incorrect than
applying the one line fix.

https://github.com/webpack-contrib/css-loader/issues/1164

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-09-15 16:33:28 -07:00