#1653 Redesign the filter preview component and take into account lon…

…g values

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;

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;

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;
+}

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>