Commit Graph

65 Commits

Author SHA1 Message Date
evykassirer
50b43421f1 search: Hide outline unless focus-visible.
Followup to https://github.com/zulip/zulip/pull/31647#discussion_r1767352535
2024-09-19 19:51:43 -07:00
evykassirer
56adeb335f search: Fix cutoff focus outline. 2024-09-19 10:50:21 -07:00
Karl Stolley
f55feae0ea search: Reset default iOS button styles. 2024-08-16 13:58:50 -07:00
Karl Stolley
9716ad9e84 search_box: Specify consistent, veritable height. 2024-07-23 14:00:32 -07:00
Karl Stolley
92fcd7cc9e search_box: Remove needless margin-right value. 2024-07-23 14:00:32 -07:00
Aman Agrawal
cc867de2c5 search: Fix outline of clear search button.
Fixed by including the margin and padding in the
`width: 100%` calculation.
2024-07-21 22:00:49 -07:00
evykassirer
26429a81e0 search: Remove freshly-opened logic.
Reverts 991c8451cd, to be
replaced with other logic in an upcoming commit.
2024-07-19 16:55:09 -07:00
Karl Stolley
a0f94d8142 search_pills: Add horizontal spacing to pills in typeahead list. 2024-07-19 09:45:41 -07:00
Karl Stolley
fa7592e9a1 search_pills: Correct multi-user DM pill container height. 2024-07-19 09:45:41 -07:00
Karl Stolley
325ab83edb navbar_search: Explicitly specify search input background color. 2024-07-18 16:02:02 -07:00
Karl Stolley
daadf28260 search_pills: Fix subtle but serious alignment bug on user pills. 2024-07-17 14:50:35 -07:00
Karl Stolley
27d5227e48 navbar_search: Make search bar conform to short viewports. 2024-07-17 14:50:35 -07:00
Karl Stolley
eb0f72ecef search_pills: Correct border radius to match images. 2024-07-17 10:31:01 -07:00
Karl Stolley
33d2c8fc4d search_pills: Improve grid for correct alignment. 2024-07-17 10:31:01 -07:00
Karl Stolley
f738a68bb1 pills: Make --height-input-pill authoritative. 2024-07-17 10:31:01 -07:00
Aman Agrawal
155f34412e search: Fix search suggestions not wrapping on overflow. 2024-07-16 23:29:45 -07:00
Anders Kaseorg
f5e2afd693 stylelint: Fix shorthand-property-no-redundant-values.
Signed-off-by: Anders Kaseorg <[email protected]>
2024-07-16 23:25:37 -07:00
evykassirer
f23fdede67 search pills: Align icons on top row.
This reverts #30804. We need a followup PR to address the
issue that PR was trying to solve without breaking icon
alignment.
2024-07-13 11:38:11 -07:00
evykassirer
2e3f11134e search: Fix bug where exit button jumps when clicked. 2024-07-12 15:14:05 -07:00
evykassirer
31ed5d597b search: Enlargen x button in search bar. 2024-07-12 13:36:42 -07:00
evykassirer
57cb4321b1 search pills: Align typeahead text with pills. 2024-07-12 13:25:36 -07:00
N-Shar-ma
82c2da8aae typeahead: Make menu scrollable with up to 50 options.
To increase the number of options available for the user to pick from,
we increase the limit of options shown to 50 for all typeaheads, and
make the menu scrollable. The max height is set to original height of
the composebox typeahead menu, which fit 8 options or to 95% of the
window height, whichever is smaller.

Fixes: #20620.
2024-07-11 16:05:30 -07:00
evykassirer
4280524904 search pills: Expand group DM pill vertically when it overflows. 2024-07-10 17:44:04 -07:00
evykassirer
9c45e43706 search pills: Prevent overflow in the typeahead for very long pills. 2024-07-10 17:44:04 -07:00
evykassirer
7cb00d171e search pills: Prevent overflow for very long pills. 2024-07-10 17:44:04 -07:00
Aman Agrawal
a5c922a99f search: Remove unintentional propagation of CSS properties.
This doesn't introduce any bugs yet but it can if left unchecked.
2024-07-10 12:56:58 -07:00
evykassirer
992ae6fdaf search: Vertically center search pills in search bar. 2024-07-09 18:37:05 -07:00
evykassirer
991c8451cd search pills: Allow typing new query just after opening search.
This simulates the user experience of a text input with the existing
content selected/highlighted.
2024-07-09 17:08:45 -07:00
evykassirer
d655ab8570 search pills: Rework pills sizes and layout. 2024-07-09 17:08:45 -07:00
evykassirer
11bb44c7cc search pills: Direct message group pill support.
This supports adding users to DM pills by simply typing
a user's name in the text input directly after a complete
dm pill. It only works for DM pills at the end of search
input.

Clicking the X button removes a user from its user pill
container, and if that user was the last user left in the
container, then the whole container is also removed.
2024-07-09 17:08:45 -07:00
evykassirer
a39fe910d8 search pills: Use grid to support pill overflow styling.
Previously, search pill overflow was broken (sticking out of the
search box to the right) and now the search bar extends vertically to
allow pills to wrap when there are too many pills for one line.
2024-07-09 17:08:45 -07:00
evykassirer
38e58ea3d6 search: Use pills in the search bar.
This initial commit is fairly bare-bones, and does not have the full
contemplated functionality.
2024-07-09 17:08:45 -07:00
evykassirer
0ab4f84561 search: Move search from input field to contenteditable div for pills.
There's still a bug when opening the search bar where the input
isn't selected. But I'm not worrying too much about that because
that text is about to be replaced with pills.
2024-07-09 17:08:45 -07:00
Aman Agrawal
2a0dbd22a5 search: Allow typeahead item in search to occupy full width. 2024-07-09 09:42:10 -07:00
evykassirer
f6c9b515c7 input_pill: Redesign input pills.
This commit also replaces the close button with
an svg. This is part of the app redesign, and
preparation for the upcoming search pill project.
2024-06-20 15:16:17 -07:00
evykassirer
84cf7f8677 input pill: Remove pill-container-btn class in favor of search styling.
This style is currently only used for search suggestions. Soon,
styling for those suggestions will become more specific, and so
for now we'll keep those styles in search.css to be more clear
about what the new styles affect. If we want to repeat something
like this in the future somewhere else in the app, we can come
up with a generic styling then once we have a better idea of
what that will look like.
2024-06-20 15:16:17 -07:00
Karl Stolley
6fe15626ae search: Set base font-size on search input. 2024-06-18 10:14:27 -07:00
Aman Agrawal
c531631ecf navbar: Rename left sidebar toggle button unread count indicator.
Renamed to match the name with the wrapper element and used class
so that we can apply same CSS to other buttons.
2024-06-11 12:42:42 -07:00
evykassirer
128c12d0e2 search: Nest pill styling under the typeahead styles.
This is needed for adding pills to search, so that these
styles don't get applied to the search pills.
2024-01-14 15:07:24 -08:00
evykassirer
b68cb5b049 navbar: Show shorter navbar for short screens not narrow screens.
Fixes #27366.
2023-11-28 18:11:56 -08:00
Aman Agrawal
ce804fc37a navbar: Remove userlist unread count. 2023-10-24 13:57:27 -07:00
Aman Agrawal
8f716cd64a help_menu: Extract help items from gear menu into a separate popover.
Fixes #27202
2023-10-23 14:15:13 -07:00
Aman Agrawal
51797809c4 header-button: Add background effects to different states. 2023-10-20 12:36:39 -07:00
Karl Stolley
ad588e7441 navbar: Set search-container width in CSS vars. 2023-09-27 12:22:47 -07:00
evykassirer
ebdcbc28f6 search: Wrap long search suggestions.
CZO conversation: https://chat.zulip.org/#narrow/stream/101-design/topic/long.20search.20suggestions

This commit also changes some styling for the pills,
to ensure that they are properly aligned when search
results wrap.
2023-09-21 08:58:31 -07:00
evykassirer
da72c9069c search: Rename class to search-input to avoid bootstrap.
The class `search-query` is a bootstrap classname, and using
a name unique from that both lets us rely on bootstrap less
and also not have to override some boostrap styles.
2023-09-21 08:58:31 -07:00
YashRE42
cb04ae1f95 search: Redesign search box.
Fixes #21798.
2023-09-21 08:58:31 -07:00
evykassirer
aa9d5935ae search: Rename search_arrows to searchbox_container.
The terminology "arrows" comes from historical functionality
that is no longer relevant, so searchbox_container is a more
clear and accurate name.

It would be nice in the future to see if we can remove
some of the nesting of HTML (#searchbox, #searchbox_form,
and #searchbox_container).
2023-07-23 15:27:53 -07:00
Sahil Batra
918d00c2d4 search: Re-add bootstrap CSS for search input.
This commit re-adds required bootstrap CSS rules for
search box input element.

We also need to add the code to handle dark theme CSS
here to make sure the CSS for dark theme is prioritized
correctly.
2023-07-07 10:10:28 -07:00
Aman Agrawal
233b486618 css: Use variable font when using Source Sans 3.
This is to overcome the limitations of previous static font,
which didn't allow us to use various font widths.
2023-07-06 17:57:37 -07:00