From f6f7211d77b2cbe5ddc724476b4e8d50f88b799c Mon Sep 17 00:00:00 2001 From: mlorb Date: Thu, 17 Dec 2020 23:13:45 +0100 Subject: [PATCH] Update styling for projects filters and fix some js bugs [SCI-5210] (#3012) * Update styling for projects filters and fix some js bugs * Fix hound --- app/assets/javascripts/projects/index.js | 19 +- app/assets/stylesheets/projects.scss | 49 +++- .../stylesheets/shared/dropdown_selector.scss | 1 + app/views/projects/index/_header.html.erb | 252 +++++++++--------- config/locales/en.yml | 12 +- 5 files changed, 194 insertions(+), 139 deletions(-) diff --git a/app/assets/javascripts/projects/index.js b/app/assets/javascripts/projects/index.js index 738ba82c5..3ce561611 100644 --- a/app/assets/javascripts/projects/index.js +++ b/app/assets/javascripts/projects/index.js @@ -564,8 +564,10 @@ $textFilter.click((e) => { e.stopPropagation(); $('#textSearchFilterHistory').toggle(); + $textFilter.closest('.dropdown').toggleClass('open'); }).on('input', () => { $('#textSearchFilterHistory').hide(); + $textFilter.closest('.dropdown').removeClass('open'); }); $projectsFilter.on('click', '.projects-search-keyword', function(e) { @@ -573,6 +575,12 @@ e.preventDefault(); $textFilter.val($(this).data('keyword')); $('#textSearchFilterHistory').hide(); + $textFilter.closest('.dropdown').removeClass('open'); + }); + + $projectsFilter.on('click', '#folderSearchInfoBtn', function(e) { + e.stopPropagation(); + $('#folderSearchInfo').toggle(); }); $('.project-filters-dropdown').on('show.bs.dropdown', function() { @@ -587,7 +595,7 @@ `
  • - ${keyword} + ${keyword}
    • ` )); @@ -595,6 +603,10 @@ } catch (error) { console.error(error); } + }).on('hide.bs.dropdown', function() { + $('#textSearchFilterHistory').hide(); + $textFilter.closest('.dropdown').removeClass('open'); + $('#folderSearchInfo').hide(); }); $('#applyProjectFiltersButton').click((e) => { @@ -640,10 +652,13 @@ // Prevent filter window close $($projectsFilter).click((e) => { - if (!$(e.target).is('input')) { + if (!$(e.target).is('input,a')) { e.stopPropagation(); e.preventDefault(); + $('#textSearchFilterHistory').hide(); + $textFilter.closest('.dropdown').removeClass('open'); dropdownSelector.closeDropdown($membersFilter); + $('#folderSearchInfo').hide(); } }); } diff --git a/app/assets/stylesheets/projects.scss b/app/assets/stylesheets/projects.scss index 1de8a5d87..3e426b377 100644 --- a/app/assets/stylesheets/projects.scss +++ b/app/assets/stylesheets/projects.scss @@ -564,6 +564,8 @@ li.module-hover { } .filter-container { + position: initial; + .projects-filters { padding: 0; width: 230px; @@ -602,19 +604,57 @@ li.module-hover { display: flex; .folder-search-label { + @include font-button; margin: 0 .3em; } + + .fas { + color: inherit; + cursor: pointer; + text-decoration: none; + } + + .folder-search-popover { + @include font-button; + left: -140px; + padding: 1.25em; + width: 220px; + } + } + } + + .text-search-filter { + &.open { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } } .recent-searches { + border-top-left-radius: 0; + border-top-right-radius: 0; + left: auto; + margin-top: -1px; + top: auto; + width: calc(100% - 2em); + label { @include font-small; + color: $color-silver-chalice; font-weight: bold; margin-bottom: .3em; padding: 0 1.5em; user-select: none; } + + .projects-search-keyword { + @include font-button; + padding: .5em 1.25em; + + .keyword-text { + margin-left: .25em; + } + } } .footer { @@ -648,12 +688,6 @@ li.module-hover { width: 2px; } - .datetime-picker-container { - .calendar-input { - padding-right: 40px; - } - } - @media (min-width: 768px) { .projects-filters { @@ -668,11 +702,12 @@ li.module-hover { .datetime-picker-container { display: inline-block; + width: 46%; } .connect-line { display: inline-block; - margin: 0 12px; + margin: 0 11px; position: relative; top: 2px; transform: rotate(90deg); diff --git a/app/assets/stylesheets/shared/dropdown_selector.scss b/app/assets/stylesheets/shared/dropdown_selector.scss index 94dc54c6f..efd531dab 100644 --- a/app/assets/stylesheets/shared/dropdown_selector.scss +++ b/app/assets/stylesheets/shared/dropdown_selector.scss @@ -75,6 +75,7 @@ flex-shrink: 0; line-height: 13px; margin: 2px 3px; + max-height: 24px; max-width: calc(100% - 11px); overflow: hidden; padding: 5px 8px; diff --git a/app/views/projects/index/_header.html.erb b/app/views/projects/index/_header.html.erb index 11cc9cba1..26dd75ef3 100644 --- a/app/views/projects/index/_header.html.erb +++ b/app/views/projects/index/_header.html.erb @@ -2,147 +2,151 @@

    <%= t('projects.index.head_title') %>

     <%= t('projects.index.head_title') %>

    -
    -
    -
    -
    -