From 23dd56feb17e128be9252eed38831278220a027f Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Sat, 28 Jul 2018 15:33:53 +0200 Subject: [PATCH] Revert "Search: loading indicator, no result screen, extended search on enter" This reverts commit 2639df5a9795b1a4ae78ead61ea11398215e9ba4. --- .../app/controllers/navigation.coffee | 63 ++++++------ .../javascripts/app/controllers/search.coffee | 3 +- .../app/lib/app_post/global_search.coffee | 6 +- .../app/views/navigation/no_result.jst.eco | 4 - .../navigation/search_placeholder.jst.eco | 24 ----- app/assets/stylesheets/zammad.scss | 95 +++---------------- 6 files changed, 46 insertions(+), 149 deletions(-) delete mode 100644 app/assets/javascripts/app/views/navigation/no_result.jst.eco delete mode 100644 app/assets/javascripts/app/views/navigation/search_placeholder.jst.eco diff --git a/app/assets/javascripts/app/controllers/navigation.coffee b/app/assets/javascripts/app/controllers/navigation.coffee index 4464bf1e7..55ad1234c 100644 --- a/app/assets/javascripts/app/controllers/navigation.coffee +++ b/app/assets/javascripts/app/controllers/navigation.coffee @@ -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: => diff --git a/app/assets/javascripts/app/controllers/search.coffee b/app/assets/javascripts/app/controllers/search.coffee index 1e252214c..4c66dcf2f 100644 --- a/app/assets/javascripts/app/controllers/search.coffee +++ b/app/assets/javascripts/app/controllers/search.coffee @@ -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 diff --git a/app/assets/javascripts/app/lib/app_post/global_search.coffee b/app/assets/javascripts/app/lib/app_post/global_search.coffee index 1e115fdf1..2724624fe 100644 --- a/app/assets/javascripts/app/lib/app_post/global_search.coffee +++ b/app/assets/javascripts/app/lib/app_post/global_search.coffee @@ -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 diff --git a/app/assets/javascripts/app/views/navigation/no_result.jst.eco b/app/assets/javascripts/app/views/navigation/no_result.jst.eco deleted file mode 100644 index b335db81a..000000000 --- a/app/assets/javascripts/app/views/navigation/no_result.jst.eco +++ /dev/null @@ -1,4 +0,0 @@ - \ No newline at end of file diff --git a/app/assets/javascripts/app/views/navigation/search_placeholder.jst.eco b/app/assets/javascripts/app/views/navigation/search_placeholder.jst.eco deleted file mode 100644 index b86b855d1..000000000 --- a/app/assets/javascripts/app/views/navigation/search_placeholder.jst.eco +++ /dev/null @@ -1,24 +0,0 @@ -
  • - -
    - <%- @Icon('task-state') %> -
    - -     -
    • -
  • - -
    - <%- @Icon('task-state') %> -
    - -     -
    • -
  • - -
    - <%- @Icon('task-state') %> -
    - -     -
    • \ No newline at end of file diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index 0fe6ea671..557224449 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -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%);