Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

emoji_picker: Format search bar same as dropdown widget.

This commit is contained in:
Aman Agrawal 2024-06-28 10:09:31 +00:00 committed by Tim Abbott
parent be6650f035
commit 772969e68c
5 changed files with 18 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/styles/dark_theme.css
View File

@ -411,7 +411,7 @@
color: inherit;
}
.dropdown-list-search .dropdown-list-search-input:focus {
.popover-filter-input-wrapper .popover-filter-input:focus {
background-color: hsl(225deg 6% 7%);
border: 1px solid hsl(0deg 0% 100% / 50%);
box-shadow: 0 0 5px hsl(0deg 0% 100% / 40%);

26
web/styles/reactions.css
View File

@ -171,32 +171,6 @@
.emoji-popover {
width: 250px;
.emoji-popover-top {
position: relative;
padding: 8px 10px;
margin-bottom: 0;
background-color: var(--color-background-emoji-picker-popover);
border-radius: 3px 3px 0 0;
.fa-search {
position: absolute;
color: hsl(0deg 0% 73%);
top: 15px;
left: 17px;
z-index: 3;
}
#emoji-popover-filter {
margin: auto;
padding-left: 22px;
width: calc(100% - 22px - 8px);
font-size: 90%;
}
}
.emoji-popover-category-tabs {
/* Flex needed here to work around #7511 (90% zoom issues in firefox) */
display: flex;

26
web/styles/zulip.css
View File

@ -2218,24 +2218,24 @@ body:not(.hide-left-sidebar) {
overscroll-behavior: contain;
}
.dropdown-list-container {
.dropdown-list-search {
display: flex;
.popover-filter-input-wrapper {
display: flex;
.dropdown-list-search-input {
background: var(--color-background-widget-input);
color: var(--color-text-dropdown-input);
width: 100%;
margin: 4px 4px 2px;
.popover-filter-input {
background: var(--color-background-widget-input);
color: var(--color-text-dropdown-input);
width: 100%;
margin: 4px 4px 2px;
&:focus {
background: hsl(0deg 0% 100%);
border: 1px solid hsl(229.09deg 21.57% 10% / 80%);
box-shadow: 0 0 6px hsl(228deg 9.8% 20% / 30%);
}
&:focus {
background: hsl(0deg 0% 100%);
border: 1px solid hsl(229.09deg 21.57% 10% / 80%);
box-shadow: 0 0 6px hsl(228deg 9.8% 20% / 30%);
}
}
}
.dropdown-list-container {
.dropdown-list-wrapper {
/* Sync with `max-height` in dropdown_widget. */
max-height: 210px;

4
web/templates/dropdown_list_container.hbs
View File

@ -1,6 +1,6 @@
<div class="dropdown-list-container {{widget_name}}-dropdown-list-container">
<div class="dropdown-list-search">
<input class="dropdown-list-search-input filter_text_input{{#if hide_search_box}} hide{{/if}}" type="text" placeholder="{{t 'Filter' }}" autofocus/>
<div class="dropdown-list-search popover-filter-input-wrapper">
<input class="dropdown-list-search-input popover-filter-input filter_text_input{{#if hide_search_box}} hide{{/if}}" type="text" placeholder="{{t 'Filter' }}" autofocus/>
</div>
<div class="dropdown-list-wrapper" data-simplebar data-simplebar-tab-index="-1">
<ul class="dropdown-list"></ul>

5
web/templates/popovers/emoji/emoji_popover.hbs
View File

@ -1,8 +1,7 @@
<div class="emoji-picker-popover" data-emoji-destination="{{#if message_id }}reaction{{else if is_status_emoji_popover}}status{{else}}composition{{/if}}">
<div class="emoji-popover">
<div class="emoji-popover-top">
<input id="emoji-popover-filter" class="filter_text_input" type="text" placeholder="{{t 'Search' }}" />
<i class="fa fa-search" aria-hidden="true"></i>
<div class="popover-filter-input-wrapper">
<input id="emoji-popover-filter" class="popover-filter-input filter_text_input" type="text" placeholder="{{t 'Filter' }}" autofocus/>
</div>
<div class="emoji-popover-category-tabs">
{{#each emoji_categories}}