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

@@ -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 @@
             `<li class="dropdown-item">
               <a class="projects-search-keyword" href="#" data-keyword="${keyword}">
                 <i class="fas fa-history"></i>
-                ${keyword}
+                <span class="keyword-text">${keyword}</span>
               </a>
             </li>`
           ));
@@ -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();
       }
     });
   }

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

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;

app/views/projects/index/_header.html.erb

@@ -2,10 +2,9 @@
   <h1 data-view-mode="active"><%= t('projects.index.head_title') %></h1>
   <h1 data-view-mode="archived"><i class="fas fa-archive"></i>&nbsp;<%= t('projects.index.head_title') %></h1>
 
-  <div class="header-actions">
+  <div class="sci-btn-group header-actions">
-    <div>
     <div class="filter-container dropdown project-filters-dropdown">
-        <div class="btn btn-light icon-btn filter-button" data-toggle="dropdown"><i class="fas fa-filter"></i></div>
+      <button class="btn btn-light icon-btn filter-button" data-toggle="dropdown"><i class="fas fa-filter"></i></button>
       <div class="dropdown-menu dropdown-menu-right projects-filters" role="menu" data-team-id="<%= current_team.id %>">
         <div class="header">
           <div class="title"><%= t("projects.index.filters_modal.title") %></div>
@@ -15,16 +14,16 @@
 
         <div class="select-block dropdown-selector-container">
           <label><%= t('projects.index.filters_modal.text.label') %></label>
-            <div class="input-field dropdown">
+          <div class="input-field dropdown text-search-filter">
             <input id="textSearchFilterInput"
                    class="dropdown-toggle search-field"
                    type="text"
                    name="search"
                    autocomplete="off"
                    data-toggle="dropdown"
-                     data-placeholder="<%= t('projects.index.filters_modal.text.placeholder') %>">
+                   placeholder="<%= t('projects.index.filters_modal.text.placeholder') %>">
           </div>
-            <div id="textSearchFilterHistory" class="dropdown-menu recent-searches" aria-labelledby="textSearchFilterInput2">
+          <div id="textSearchFilterHistory" class="dropdown-menu recent-searches" aria-labelledby="textSearchFilterInput">
             <label><%= t("projects.index.filters_modal.recent_searches_label") %></label>
           </div>
         </div>
@@ -115,7 +114,13 @@
             <span class="sci-checkbox-label"></span>
           </span>
           <span class="folder-search-label"><%= t("projects.index.filters_modal.folders.label") %></span>
-            <i class="fas fa-info-circle" title="<%= t("projects.index.filters_modal.folders.tooltip") %>"></i>
+          <div class="dropdown folder-search-info">
+            <a class="fas fa-info-circle" id="folderSearchInfoBtn" data-toggle="dropdown"></a>
+            <div id="folderSearchInfo" class="dropdown-menu folder-search-popover" aria-labelledby="folderSearchInfo">
+              <%= t("projects.index.filters_modal.folders.popover_html") %>
+            </div>
+          </div>
+
         </div>
 
         <div class="footer">
@@ -123,8 +128,7 @@
         </div>
       </div>
     </div>
-    </div>
+
-    <div>
     <div class="dropdown">
       <button class="btn btn-light dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
         <span><%= t("general.sort.#{@current_sort}_html") %></span>
@@ -142,7 +146,7 @@
         <% end %>
       </ul>
     </div>
-    </div>
+
     <%= render layout: 'shared/view_switch', locals: { disabled: false } do %>
       <li class="view-switch-cards projects-view-mode active">
         <i class="fas fa-th-large button-icon"></i> <%= t('projects.index.header.cards') %>

config/locales/en.yml

@@ -406,11 +406,11 @@ en:
           label: "Contains text"
           placeholder: "Enter search terms..."
         created_on:
-          label: "Created on"
+          label: "Start date"
           from_placeholder: "From"
           to_placeholder: "To"
         archived_on:
-          label: "Archived on"
+          label: "Archived date"
           from_placeholder: "From"
           to_placeholder: "To"
         members:
@@ -418,12 +418,12 @@ en:
           placeholder: "Select members of a project"
         folders:
           label: "Look inside folders"
-          tooltip: "Hint should appear here"
+          popover_html: "When <strong>“Look inside folders”</strong> is active, the filters will also take all folders and their content into account."
         recent_searches_label: "Recent searches"
         show_btn:
-         many: "Show %{num} results"
+         many: "Show %{num} projects"
-         none: "No results"
+         none: "No projects"
-         one: "Show result"
+         one: "Show project"
         clear_btn: "Clear"
       sort:
         new: "Started last"