Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Revert "Search: loading indicator, no result screen, extended search on enter"

Browse source 
This reverts commit 2639df5a97.
This commit is contained in:
Felix Niklas 2018-07-28 15:33:53 +02:00
parent b411cabe5b
commit 23dd56feb1
6 changed files with 46 additions and 149 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
app/assets/javascripts/app/controllers/navigation.coffee
View file

@ -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: =>

3
app/assets/javascripts/app/controllers/search.coffee
View file

@ -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

6
app/assets/javascripts/app/lib/app_post/global_search.coffee
View file

@ -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

4
app/assets/javascripts/app/views/navigation/no_result.jst.eco
View file

@ -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>

24
app/assets/javascripts/app/views/navigation/search_placeholder.jst.eco
View file

@ -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>

95
app/assets/stylesheets/zammad.scss
View file

@ -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%);