Revert "Search: loading indicator, no result screen, extended search on enter"
This reverts commit 2639df5a97.
This commit is contained in:
Felix Niklas
parent
b411cabe5b
commit
23dd56feb1
|
|
@ -15,7 +15,7 @@ class App.Navigation extends App.ControllerWidgetPermanent
|
|||
'focus #global-search': 'searchFocus'
|
||||
'blur #global-search': 'searchBlur'
|
||||
'keyup #global-search': 'listNavigate'
|
||||
'click .js-global-search-result': 'emptyAndClose'
|
||||
'click .js-global-search-result': 'andClose'
|
||||
'click .js-details-link': 'openExtendedSearch'
|
||||
'change .js-menu .js-switch input': 'switch'
|
||||
|
||||
|
|
@ -156,31 +156,31 @@ class App.Navigation extends App.ControllerWidgetPermanent
|
|||
type: 'personal'
|
||||
)
|
||||
|
||||
renderResult: (result = [], noChange) =>
|
||||
if noChange
|
||||
return
|
||||
renderResult: (result = []) =>
|
||||
|
||||
# show no results placeholder if no result exists
|
||||
# remove result if not result exists
|
||||
if _.isEmpty(result)
|
||||
@searchContainer.addClass('no-match')
|
||||
@searchResult.html(App.view('navigation/no_result')())
|
||||
@searchContainer.removeClass('open')
|
||||
@globalSearch.close()
|
||||
@searchResult.html('')
|
||||
return
|
||||
|
||||
@searchContainer.removeClass('no-match')
|
||||
|
||||
# build markup
|
||||
html = App.view('navigation/result')(
|
||||
result: result
|
||||
)
|
||||
@searchResult.html(html)
|
||||
|
||||
# show result list
|
||||
@searchContainer.addClass('open')
|
||||
|
||||
# start ticket popups
|
||||
@ticketPopups()
|
||||
|
||||
# start user popups
|
||||
@userPopups()
|
||||
|
||||
# start organization popups
|
||||
# start oorganization popups
|
||||
@organizationPopups()
|
||||
|
||||
render: ->
|
||||
|
|
@ -205,22 +205,26 @@ class App.Navigation extends App.ControllerWidgetPermanent
|
|||
|
||||
searchFocus: (e) =>
|
||||
@query = '' # reset query cache
|
||||
@anyPopoversDestroy()
|
||||
@searchContainer.addClass('focused')
|
||||
@anyPopoversDestroy()
|
||||
@search()
|
||||
|
||||
searchBlur: (e) =>
|
||||
|
||||
# delay to be able to click x
|
||||
update = =>
|
||||
query = @searchInput.val().trim()
|
||||
if !query
|
||||
@emptyAndClose()
|
||||
return
|
||||
@searchContainer.removeClass('focused')
|
||||
|
||||
@delay(update, 100, 'removeFocused')
|
||||
|
||||
listNavigate: (e) =>
|
||||
if e.keyCode is 27 # close on esc
|
||||
@emptyAndClose()
|
||||
@searchInput.blur()
|
||||
return
|
||||
else if e.keyCode is 38 # up
|
||||
@nudge(e, -1)
|
||||
|
|
@ -229,13 +233,14 @@ class App.Navigation extends App.ControllerWidgetPermanent
|
|||
@nudge(e, 1)
|
||||
return
|
||||
else if e.keyCode is 13 # enter
|
||||
@searchInput.blur()
|
||||
href = @$('.global-search-result .nav-tab.is-hover').attr('href')
|
||||
if href
|
||||
@navigate(href)
|
||||
else
|
||||
if @$('.global-search-menu .js-details-link.is-hover').get(0)
|
||||
@openExtendedSearch()
|
||||
return
|
||||
href = @$('.global-search-result .nav-tab.is-hover').attr('href')
|
||||
return if !href
|
||||
@navigate(href)
|
||||
@emptyAndClose()
|
||||
@searchInput.blur()
|
||||
return
|
||||
|
||||
# on other keys, show result
|
||||
|
|
@ -279,33 +284,25 @@ class App.Navigation extends App.ControllerWidgetPermanent
|
|||
@scrollToIfNeeded(prev, false)
|
||||
|
||||
emptyAndClose: =>
|
||||
@query = ''
|
||||
@searchInput.val('')
|
||||
@searchContainer.removeClass('focused filled open no-match')
|
||||
@searchContainer.removeClass('filled').removeClass('open').removeClass('focused')
|
||||
@globalSearch.close()
|
||||
|
||||
# remove not needed popovers
|
||||
@delay(@anyPopoversDestroy, 100, 'removePopovers')
|
||||
|
||||
andClose: =>
|
||||
@query = ''
|
||||
@searchInput.blur()
|
||||
@searchContainer.removeClass('open no-match')
|
||||
@searchContainer.removeClass('open')
|
||||
@globalSearch.close()
|
||||
@delay(@anyPopoversDestroy, 100, 'removePopovers')
|
||||
|
||||
search: =>
|
||||
query = @searchInput.val().trim()
|
||||
@searchContainer.toggleClass('filled', !!query)
|
||||
# if we started a new search and already typed something in
|
||||
if @query == '' and query != ''
|
||||
@searchContainer.addClass('open no-match')
|
||||
@searchResult.html(App.view('navigation/search_placeholder')())
|
||||
|
||||
return if !query
|
||||
return if query is @query
|
||||
@query = query
|
||||
|
||||
if @query == ''
|
||||
@searchContainer.removeClass('open')
|
||||
return
|
||||
|
||||
@searchContainer.toggleClass('filled', !!@query)
|
||||
@globalSearch.search(query: @query)
|
||||
|
||||
filterNavbar: (values, user, parent = null) ->
|
||||
|
|
@ -405,11 +402,11 @@ class App.Navigation extends App.ControllerWidgetPermanent
|
|||
url = params.url
|
||||
type = params.type
|
||||
if type is 'menu'
|
||||
@$('.js-menu .is-active').removeClass('is-active')
|
||||
@$('.js-menu .is-active, .js-details-link.is-active').removeClass('is-active')
|
||||
else
|
||||
@$('.is-active').removeClass('is-active')
|
||||
return if !url || url is '#'
|
||||
@$(".js-menu [href=\"#{url}\"], .tasks [href=\"#{url}\"]").addClass('is-active')
|
||||
@$("[href=\"#{url}\"]").addClass('is-active')
|
||||
|
||||
recentViewNavbarItemsRebuild: =>
|
||||
|
||||
|
|
|
|||
|
|
@ -125,8 +125,7 @@ class App.Search extends App.Controller
|
|||
|
||||
@globalSearch.search(query: @query)
|
||||
|
||||
renderResult: (result = [], noChange) =>
|
||||
return if noChange
|
||||
renderResult: (result = []) =>
|
||||
@result = result
|
||||
for tab in @tabs
|
||||
count = 0
|
||||
|
|
|
|||
|
|
@ -45,12 +45,10 @@ class App.GlobalSearch extends App.Controller
|
|||
renderTry: (result, query) =>
|
||||
|
||||
# if result hasn't changed, do not rerender
|
||||
diff = false
|
||||
if @lastQuery is query && @searchResultCache[query]
|
||||
diff = difference(@searchResultCache[query].result, result)
|
||||
if _.isEmpty(diff)
|
||||
@render(result, true)
|
||||
return
|
||||
|
||||
return if diff isnt false && _.isEmpty(diff)
|
||||
@lastQuery = query
|
||||
|
||||
# cache search result
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
<li class="global-search-detail-no-result alert alert--warning horizontal" role="alert">
|
||||
<%- @Icon('mood-sad') %>
|
||||
<span><%= @T('There is no match for your search.') %></span>
|
||||
</li>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<li class="global-search-detail-placeholder">
|
||||
<a class="nav-tab nav-tab--search">
|
||||
<div class="nav-tab-icon">
|
||||
<%- @Icon('task-state') %>
|
||||
</div>
|
||||
<span class="nav-tab-name"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="global-search-detail-placeholder">
|
||||
<a class="nav-tab nav-tab--search">
|
||||
<div class="nav-tab-icon">
|
||||
<%- @Icon('task-state') %>
|
||||
</div>
|
||||
<span class="nav-tab-name"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="global-search-detail-placeholder">
|
||||
<a class="nav-tab nav-tab--search">
|
||||
<div class="nav-tab-icon">
|
||||
<%- @Icon('task-state') %>
|
||||
</div>
|
||||
<span class="nav-tab-name"></span>
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -1962,6 +1962,7 @@ input.has-error {
|
|||
border-radius: 19px;
|
||||
padding: 0 17px 0 42px;
|
||||
@include rtl(padding, 0 42px 0 17px);
|
||||
will-change: transform;
|
||||
|
||||
&.is-empty + .empty-search {
|
||||
visibility: hidden;
|
||||
|
|
@ -3278,6 +3279,10 @@ footer {
|
|||
.nav-tab.nav-tab--search.is-hover {
|
||||
background: #389ed9;
|
||||
color: white;
|
||||
|
||||
.nav-tab-icon .icon {
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tab.ui-sortable-helper {
|
||||
|
|
@ -3301,7 +3306,7 @@ footer {
|
|||
.nav-tab-icon .icon {
|
||||
max-width: 18px;
|
||||
max-height: 18px;
|
||||
fill: currentColor;
|
||||
fill: #808080;
|
||||
}
|
||||
|
||||
.nav-tab-icon .icon-diagonal-cross {
|
||||
|
|
@ -3427,8 +3432,7 @@ footer {
|
|||
flex: 1;
|
||||
border-radius: 15px;
|
||||
position: relative;
|
||||
transition: margin-right 120ms;
|
||||
will-change: margin-right;
|
||||
transition: 240ms;
|
||||
}
|
||||
|
||||
.empty-search {
|
||||
|
|
@ -3438,23 +3442,16 @@ footer {
|
|||
height: 30px;
|
||||
width: 40px;
|
||||
z-index: 1;
|
||||
visibility: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@extend %clickable;
|
||||
visibility: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
.icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: white;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.search .empty-search .icon-diagonal-cross {
|
||||
fill: white;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.filled.search .empty-search {
|
||||
|
|
@ -3492,8 +3489,7 @@ footer {
|
|||
}
|
||||
|
||||
.search.focused .search-holder {
|
||||
transition: margin-right 240ms;
|
||||
@include bidi-style(margin-right, -59px, margin-left, 0);
|
||||
@include bidi-style(margin-right, -46px, margin-left, 0);
|
||||
}
|
||||
|
||||
.search.focused .logo {
|
||||
|
|
@ -3559,10 +3555,6 @@ footer {
|
|||
padding: 9px 15px 8px 0;
|
||||
margin-bottom: 7px;
|
||||
height: auto !important;
|
||||
|
||||
.no-match & {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-tab-icon {
|
||||
width: 18px;
|
||||
|
|
@ -3590,62 +3582,6 @@ footer {
|
|||
list-style: none;
|
||||
}
|
||||
|
||||
.global-search-detail-no-result {
|
||||
margin: 0 10px;
|
||||
|
||||
.icon {
|
||||
width: 30px;
|
||||
height: 29px;
|
||||
}
|
||||
}
|
||||
|
||||
.global-search-detail-placeholder {
|
||||
pointer-events: none;
|
||||
color: inherit;
|
||||
|
||||
.nav-tab {
|
||||
animation: fade-in 4s forwards;
|
||||
}
|
||||
|
||||
.nav-tab-name {
|
||||
background: linear-gradient(to right, hsl(0,0%,50%) 50%, hsl(0,0%,70%));
|
||||
background-size: 200% 100%;
|
||||
height: 10px;
|
||||
width: 77%;
|
||||
animation: placeholder-background 1.4s infinite;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
.nav-tab-name {
|
||||
width: 54%;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
.nav-tab-name {
|
||||
width: 68%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes placeholder-background {
|
||||
from {
|
||||
background-position: 0% 0%;
|
||||
}
|
||||
to {
|
||||
background-position: -200% 0%;
|
||||
}
|
||||
}
|
||||
|
||||
.user-menu {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -5907,11 +5843,6 @@ footer {
|
|||
border-radius: 3px;
|
||||
color: white;
|
||||
border: none;
|
||||
|
||||
.icon {
|
||||
margin-right: 10px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
&.alert--info {
|
||||
background: hsl(203,65%,55%);
|
||||
|
|
|
|||
Loading…
Reference in a new issue