paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-02 04:53:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

search: Make search query a contenteditable div for search pill.

Browse Source 
Input pills require a contenteditable div with a class named input
to fall inside the pill container. On converting the input tag into
a div, the size of the input decreases which is compensated by a
line-height of 40px. Comment above letter-spacing:normal was removed
as chrome and firefox do not change the letter-spacing to normal
for a div via the default browser stylesheet.

NOTE: Currently writing something into the div will call the action
corresponding to that key in the keyboard shortcuts. The input will
work fine once the pills have been initiated.

For the casper tests, for now, we just use the legacy search code.
When we change that, $.val() cannot be used on contenteditable div, so
$.html() will need to be used instead in select_item_via_typeahead.
This commit is contained in:
Shubham Padia
2018-06-08 13:15:13 +05:30
committed by Tim Abbott
parent e1291cf839
commit e228687094
3 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
static/styles/zulip.scss
View File

@@ -1892,7 +1892,7 @@ nav a .no-style {
border-radius: 0px;
font-family: 'Source Sans Pro';
font-weight: 300;
line-height: 27px;
line-height: 40px;
}
#search_query:focus {
@@ -1948,9 +1948,7 @@ nav a .no-style {
letter-spacing: -.3em;
}
#search_arrows input {
/* Chrome and Firefox do this already via default browser stylesheet;
but Opera needs this to avoid smushed letters in the search box. */
#search_arrows .input {
letter-spacing: normal;
}
}

6
templates/zerver/app/navbar.html
View File

@@ -49,9 +49,9 @@
<div id="tab_bar" class="notdisplayed">
</div>
<form id="searchbox_form" class="form-search navbar-search">
<div id="search_arrows" class="input-append">
<input class="search-query input-block-level" id="search_query" type="text" placeholder="{{ _('Search') }}"
autocomplete="off" aria-label="{{ _('Search') }}" title="{{ _('Search') }} (/)"/>
<div id="search_arrows" class="pill-container input-append">
<div contenteditable="true" class="input search-query input-block-level" id="search_query" type="text" placeholder="{{ _('Search') }}"
autocomplete="off" aria-label="{{ _('Search') }}" title="{{ _('Search') }} (/)"> </div>
{# Start the button off disabled since there is no active search #}
<button class="btn search_button" type="button" id="search_exit" disabled="disabled" aria-label="{{ _('Exit search') }}"><i class="fa fa-remove" aria-hidden="true"></i></button>
<a class="search_icon" href="#search-operators" data-overlay-trigger="search-operators" title="{{ _('Search help') }}"><i class="fa fa-search" aria-hidden="true"></i></a>

2
zproject/test_settings.py
View File

@@ -46,6 +46,8 @@ else:
if "CASPER_TESTS" in os.environ:
CASPER_TESTS = True
# Disable search pills prototype for production use
SEARCH_PILLS_ENABLED = False
# Decrease the get_updates timeout to 1 second.
# This allows CasperJS to proceed quickly to the next test step.