From afce0e34c40167c30e9c0ef3f0a4a02d68f34145 Mon Sep 17 00:00:00 2001
From: aignatov-bio <47317017+aignatov-bio@users.noreply.github.com>
Date: Fri, 11 Feb 2022 12:44:22 +0100
Subject: [PATCH] Fix css for saved filters dropdown [SCI-6516] (#3843)

Co-authored-by: Anton <anton@scinote.net>
---
 app/assets/stylesheets/repository/filters.scss   | 16 +++++++++++++++-
 app/javascript/packs/vue/repository_filter.js    |  1 +
 .../vue/repository_filter/container.vue          |  8 +++++++-
 .../vue/repository_filter/saved_filter.vue       |  2 +-
 config/locales/en.yml                            |  1 +
 5 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/repository/filters.scss b/app/assets/stylesheets/repository/filters.scss
index c737c7c76..ab173df16 100644
--- a/app/assets/stylesheets/repository/filters.scss
+++ b/app/assets/stylesheets/repository/filters.scss
@@ -34,6 +34,7 @@
     .saved-filters-list {
       max-height: 300px;
       overflow-y: auto;
+      width: 250px;
     }
   }
 
@@ -77,12 +78,25 @@
       .saved-filters-element {
         align-items: center;
         display: flex;
-        padding: .5em 1em;
+        padding: 0 1em;
         cursor: pointer;
 
+        &:hover {
+          background: $color-concrete;
+        }
+
+        span {
+          flex-grow: 1;
+        }
+
         .btn-light {
           color: $color-silver-chalice;
+          flex-shrink: 0;
           margin-left: auto;
+
+          &:hover {
+            color: $color-black;
+          }
         }
       }
     }
diff --git a/app/javascript/packs/vue/repository_filter.js b/app/javascript/packs/vue/repository_filter.js
index 4646bb8c1..a30603b19 100644
--- a/app/javascript/packs/vue/repository_filter.js
+++ b/app/javascript/packs/vue/repository_filter.js
@@ -86,6 +86,7 @@ window.initRepositoryFilter = () => {
     created() {
       this.dataTableElement = $($('#filterContainer').data('datatable-id'));
     },
+
     components: {
       'filter-container': FilterContainer
     },
diff --git a/app/javascript/vue/repository_filter/container.vue b/app/javascript/vue/repository_filter/container.vue
index f9a2225af..4e513ec33 100644
--- a/app/javascript/vue/repository_filter/container.vue
+++ b/app/javascript/vue/repository_filter/container.vue
@@ -75,7 +75,8 @@
     },
     data() {
       return {
-        filters: this.defaultFilters
+        filters: this.defaultFilters,
+        savedFilterScrollbar: null
       }
     },
     components: { ColumnElement, FilterElement, SavedFilterElement },
@@ -141,6 +142,11 @@
       },
       toggleSavedFilters(e) {
         e.stopPropagation();
+        if (this.savedFilterScrollbar) {
+          this.savedFilterScrollbar.update();
+        } else {
+          this.savedFilterScrollbar = new PerfectScrollbar($('.saved-filters-list')[0]);
+        }
         this.closeColumnsFilters();
         $('#savedFiltersContainer').toggleClass('open');
       },
diff --git a/app/javascript/vue/repository_filter/saved_filter.vue b/app/javascript/vue/repository_filter/saved_filter.vue
index 705c4bdf3..7965e5ad1 100644
--- a/app/javascript/vue/repository_filter/saved_filter.vue
+++ b/app/javascript/vue/repository_filter/saved_filter.vue
@@ -2,7 +2,7 @@
   <div class="saved-filters-element">
     <span @click="loadFilters">{{ savedFilter.attributes.name }}</span>
     <button v-if="canManageFilters" class="btn btn-light icon-btn" @click="deleteFilter">
-      <i class="fas fa-trash"></i>
+      <i :title="i18n.t('repositories.show.filters.delete_saved_filter')" class="fas fa-trash"></i>
     </button>
   </div>
 </template>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 98703a83b..986884446 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1410,6 +1410,7 @@ en:
         clear: "Clear"
         add_filter: "Add filter"
         apply: "Show results"
+        delete_saved_filter: "Delete the saved filter"
       repository_filter:
         errors:
           column_not_found: "Filtering failed because one or more columns no longer exist. Please update your filter."