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 @@