From 82a4be41ca4ac9a9c9dce7b36d75210d9771badd Mon Sep 17 00:00:00 2001
From: Nabil Adouani <nabil.adouani@gmail.com>
Date: Wed, 18 Nov 2020 12:14:31 +0100
Subject: [PATCH] #1653 Redesign the filter preview component and take into
 account long values

---
 frontend/app/styles/filters.css               |  8 +++++
 frontend/app/styles/label.css                 | 15 ++++++--
 frontend/app/styles/main.css                  |  5 +++
 .../search/filters-preview.component.html     | 34 +++++++++----------
 4 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/frontend/app/styles/filters.css b/frontend/app/styles/filters.css
index 98bce17fd7..691502fd94 100644
--- a/frontend/app/styles/filters.css
+++ b/frontend/app/styles/filters.css
@@ -27,6 +27,14 @@
     padding-left: 10px;
 }
 
+.active-filters .filter-value {
+    max-width: 200px;
+}
+
+.active-filters .kv-label .default {
+    background-color: #eee;
+}
+
 .filter-panel {
     padding: 10px;
     background-color: #f5f5f5;
diff --git a/frontend/app/styles/label.css b/frontend/app/styles/label.css
index c4afc10d54..c37c35e2c6 100644
--- a/frontend/app/styles/label.css
+++ b/frontend/app/styles/label.css
@@ -14,8 +14,8 @@
 	white-space: nowrap;
 }
 .kv-label span.kv-label-key {
-    border-bottom-left-radius: 0.25em;
-    border-top-left-radius: .25em;
+    /* border-bottom-left-radius: 0.25em;
+    border-top-left-radius: .25em; */
     border-left-color: #3c8dbc;
     border-left-width: 3px;
     border-left-style: solid;
@@ -29,6 +29,17 @@
 	text-overflow: ellipsis;
 	max-width: 200px;
 }
+
+.kv-label.kv-label-addon span.kv-label-val {
+	border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.kv-label.kv-label-addon span:last-child {
+	border-bottom-right-radius: 0.25em;
+	border-top-right-radius: .25em;
+}
+
 .kv-label>span.primary {
 	background-color: #3c8dbc;
     color: #fff;
diff --git a/frontend/app/styles/main.css b/frontend/app/styles/main.css
index cfb024f4db..3b328dba34 100644
--- a/frontend/app/styles/main.css
+++ b/frontend/app/styles/main.css
@@ -761,3 +761,8 @@ table.tbody-stripped>tbody+tbody {
 table.tbody-stripped > tbody > tr > td {
 
 }
+
+.ellipsable {
+    overflow: hidden;
+	text-overflow: ellipsis;
+}
diff --git a/frontend/app/views/components/search/filters-preview.component.html b/frontend/app/views/components/search/filters-preview.component.html
index 7d28eeb9fd..778b3b648d 100644
--- a/frontend/app/views/components/search/filters-preview.component.html
+++ b/frontend/app/views/components/search/filters-preview.component.html
@@ -1,18 +1,18 @@
-<div class="active-filters">
-    <ul ng-if="$ctrl.filters.length > 0">
-        <li>{{$ctrl.filters.length}}
-            filter(s) applied:
-        </li>
-        <li class="filter-item" ng-repeat="filter in $ctrl.filters track by $index">
-            <span>
-                <strong>{{filter.field || '???'}}:</strong>
-                {{filter.value | filterValue}}</span>
-            <a href ng-click="$ctrl.clearItem($index)">
-                <span class="filter-close fa fa-times text-danger"></span>
-            </a>
-        </li>
-        <li>
-            <a href ng-click="$ctrl.clearAll()">Clear filters</a>
-        </li>
-    </ul>
+<div class="active-filters flexwrap mv-xs" ng-if="$ctrl.filters.length > 0">
+    <span class="mr-xxxs text-muted">{{$ctrl.filters.length}} filter(s) applied:</span>
+
+    <span class="kv-label kv-label-addon mb-xxxs mr-xxxs"
+        ng-repeat="filter in $ctrl.filters track by $index">
+        <span class="kv-label-key default"><strong>{{filter.field || '???'}}</strong></span>
+        <span class="kv-label-val default" uib-tooltip="{{filter.value | filterValue}}" tooltip-placement="top">{{filter.value | filterValue}}</span>
+
+        <span class="default" ng-click="$ctrl.clearItem($index)">
+            <i class="filter-close fa fa-times text-danger"></i>
+        </span>
+    </span>
+
+    <span class="ml-xs">
+        <a href ng-click="$ctrl.clearAll()">Clear filters</a>
+    </span>
+
 </div>