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