Commit Graph

29 Commits

Author SHA1 Message Date
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