From 835a29394b967b09a81f49ba0aa3dd64aeadcc61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michel=20Gabri=C3=ABl?= <michel.gabriel@geocat.net>
Date: Tue, 24 Sep 2024 09:59:24 +0200
Subject: [PATCH] Visual and UX changes for WFS previews (#8284)

* Visual and UX improvements to the WFS preview:
- added whitespace
- remove border for the selection lists
- re-order buttons
- toolbar positioned on the right of the table
- larger buttons in the metadata page and map

* Visual and UX improvements to the WFS preview:
- pushed missing changes

* Visual and UX improvements to the WFS preview:
- fix the removal of borders in all map panels

* Fix for the missing variables: they have been replaced by actual values
---
 .../search/mdview/partials/datapreview.html   |   4 +-
 .../viewer/gfi/partials/featurestables.html   |  11 +-
 .../wfsfilter/partials/wfsfilterfacet.html    | 120 +++++++++---------
 .../src/main/resources/catalog/style/gn.less  |   3 +
 .../resources/catalog/style/gn_viewer.less    |  85 ++++++++++++-
 5 files changed, 151 insertions(+), 72 deletions(-)

diff --git a/web-ui/src/main/resources/catalog/components/search/mdview/partials/datapreview.html b/web-ui/src/main/resources/catalog/components/search/mdview/partials/datapreview.html
index dca4cf4e11e..e49c707a527 100644
--- a/web-ui/src/main/resources/catalog/components/search/mdview/partials/datapreview.html
+++ b/web-ui/src/main/resources/catalog/components/search/mdview/partials/datapreview.html
@@ -1,7 +1,7 @@
 <div data-ng-if="hasExtent" ol-map="map"></div>
 
 <div class="row">
-  <div class="col-md-3">
+  <div class="col-md-3 gn-nopadding-left gn-padding-top-lg">
     <div
       data-gn-wfs-filter-facets=""
       data-layer="currentLayer"
@@ -9,7 +9,7 @@
       data-boot-mode="index"
     ></div>
   </div>
-  <div class="col-md-9">
+  <div class="col-md-9 gn-nopadding-right gn-padding-top-lg">
     <gn-features-tables
       gn-features-tables-map="map"
       data-show-close="false"
diff --git a/web-ui/src/main/resources/catalog/components/viewer/gfi/partials/featurestables.html b/web-ui/src/main/resources/catalog/components/viewer/gfi/partials/featurestables.html
index 2e04c189d49..59a2726ae30 100644
--- a/web-ui/src/main/resources/catalog/components/viewer/gfi/partials/featurestables.html
+++ b/web-ui/src/main/resources/catalog/components/viewer/gfi/partials/featurestables.html
@@ -63,12 +63,11 @@
     data-ng-show="ctrl.currentTable == table"
     ng-repeat="table in ctrl.tables"
   >
-    <div class="pull-left">
-      <strong>
-        <span>{{table.name}}</span>&nbsp; {{table.loader.getCount()}}
-        <span data-translate="">features</span>
-      </strong>
-    </div>
+<!--    <div class="pull-left">-->
+      <h4>
+        <span>{{table.name}}</span>
+      </h4>
+<!--    </div>-->
     <gn-features-table
       gn-features-table-loader="table.loader"
       gn-features-table-loader-map="ctrl.map"
diff --git a/web-ui/src/main/resources/catalog/components/viewer/wfsfilter/partials/wfsfilterfacet.html b/web-ui/src/main/resources/catalog/components/viewer/wfsfilter/partials/wfsfilterfacet.html
index 8c75135b90d..98915cc5eb6 100644
--- a/web-ui/src/main/resources/catalog/components/viewer/wfsfilter/partials/wfsfilterfacet.html
+++ b/web-ui/src/main/resources/catalog/components/viewer/wfsfilter/partials/wfsfilterfacet.html
@@ -17,21 +17,19 @@
 
   <div data-ng-show="isWfsAvailable">
     <!--admin buttons-->
+    <!--Facet count-->
+    <h4
+      data-ng-if="isFeaturesIndexed"
+      class="count"
+      data-ng-if="showCount"
+    >
+      {{count | number}}&nbsp;/&nbsp;{{countTotal | number}}&nbsp;<span translate=""
+    >features</span
+    >
+    </h4>
     <div class="btn-group dropup wfs-filter-group">
-      <!--Facet count-->
-      <div
-        class="btn btn-default btn-xs disabled"
-        data-ng-if="isFeaturesIndexed"
-        class="count text-center"
-        data-ng-if="showCount"
-      >
-        {{count | number}}&nbsp;/&nbsp;{{countTotal | number}}&nbsp;<span translate=""
-          >features</span
-        >
-      </div>
-
       <button
-        class="btn btn-default btn-xs"
+        class="btn btn-default"
         data-ng-if="!managerOnly
                           && isFeaturesIndexed
                           && displayTableOnLoad != 'true'"
@@ -41,7 +39,7 @@
         <i class="fa fa-table"></i>
       </button>
       <button
-        class="btn btn-default btn-xs"
+        class="btn btn-default"
         data-ng-disabled="!indexObject.isPointOnly"
         data-ng-if="!managerOnly
                           && isFeaturesIndexed"
@@ -52,7 +50,7 @@
         <i class="fa fa-th-large"></i>
       </button>
       <button
-        class="btn btn-default btn-xs"
+        class="btn btn-default"
         ng-class="{ disabled: !filtersChanged }"
         data-ng-if="!managerOnly && isFeaturesIndexed"
         title="{{::'applyFilter' | translate}}"
@@ -62,7 +60,7 @@
         <i class="fa fa-filter"></i>
       </button>
       <button
-        class="btn btn-default btn-xs"
+        class="btn btn-default"
         title="{{::'refresh' | translate}}"
         data-ng-if="(user.canEditRecord(md)
                       || (user.isAdministrator() && md.isHarvested == 'true'))"
@@ -74,7 +72,7 @@
         data-ng-if="(user.canEditRecord(md)
                       || (user.isAdministrator() && md.isHarvested == 'true'))"
         type="button"
-        class="btn btn-default btn-xs dropdown-toggle"
+        class="btn btn-default dropdown-toggle"
         data-toggle="dropdown"
         aria-haspopup="true"
         aria-expanded="false"
@@ -105,7 +103,7 @@
         data-ng-if="managerOnly"
         title="{{'addToMap' | translate}}"
         data-ng-href="catalog.search#/map?add={{mapAddCmd | encodeURIComponent}}"
-        class="btn btn-default btn-xs"
+        class="btn btn-default"
       >
         <i class="fa fa-globe"></i>
       </a>
@@ -133,43 +131,49 @@
     ></gn-heatmap>
 
     <!-- Search -->
-    <div
-      data-ng-if="!managerOnly && isFeaturesIndexed"
-      class="input-group input-group-sm"
-    >
-      <input
-        class="form-control input-xs"
-        data-ng-keyup="$event.keyCode == 13 && filterFacets()"
-        type="text"
-        placeholder="{{::'anyPlaceHolder' | translate}}"
-        data-ng-model="ctrl.filter.fullTextSearch"
-      />
-      <span class="input-group-btn">
-        <button
-          data-ng-if="!managerOnly && isFeaturesIndexed"
-          data-gn-click-and-spin="resetFacets(false).then(filterWMS)"
-          title="{{'reset' | translate}}"
-          class="btn btn-default btn-xs gn-reset-facets"
-        >
-          <i class="fa fa-fw fa-times"></i>
-        </button>
-        <button
-          data-ng-if="!managerOnly && isFeaturesIndexed"
-          title="{{'featuresInMapExtent' | translate}}"
-          data-ng-click="setFeaturesInMapExtent()"
-          data-ng-class="{'active': featuresInMapExtent}"
-          class="btn btn-default btn-xs"
-        >
-          <i class="fa fa-pencil-square-o fa-fw"></i>
-        </button>
-        <button
-          class="btn btn-default btn-xs"
-          title="{{'search' | translate}}"
-          data-ng-click="filterFacets()"
-        >
-          <i class="fa fa-fw fa-search"></i>
-        </button>
-      </span>
+    <div class="flex-row flex-align-center gn-margin-bottom">
+      <div
+        data-ng-if="!managerOnly && isFeaturesIndexed"
+        class="input-group flex-grow gn-margin-right-sm"
+      >
+        <input
+          class="form-control"
+          data-ng-keyup="$event.keyCode == 13 && filterFacets()"
+          type="text"
+          placeholder="{{::'anyPlaceHolder' | translate}}"
+          data-ng-model="ctrl.filter.fullTextSearch"
+        />
+        <div class="input-group-btn">
+
+            <button
+              data-ng-if="!managerOnly && isFeaturesIndexed"
+              data-gn-click-and-spin="resetFacets(false).then(filterWMS)"
+              title="{{'reset' | translate}}"
+              class="btn btn-default gn-reset-facets"
+            >
+              <i class="fa fa-fw fa-times"></i>
+            </button>
+
+            <button
+              class="btn btn-default"
+              title="{{'search' | translate}}"
+              data-ng-click="filterFacets()"
+            >
+              <i class="fa fa-fw fa-search"></i>
+            </button>
+
+        </div>
+
+      </div>
+      <button
+        data-ng-if="!managerOnly && isFeaturesIndexed"
+        title="{{'featuresInMapExtent' | translate}}"
+        data-ng-click="setFeaturesInMapExtent()"
+        data-ng-class="{'active': featuresInMapExtent}"
+        class="btn btn-default"
+      >
+        <i class="fa fa-pencil-square-o fa-fw"></i>
+      </button>
     </div>
 
     <!-- Facets -->
@@ -185,7 +189,7 @@
           data-ng-class="{'text-primary': isFilterActive(field.name, field)}"
         >
           <span
-            class="fa fa-arrow-circle-right"
+            class="fa fa-chevron-right"
             data-ng-class="{
               'fa-rotate-90': field.expanded,
               'gn-field-empty': !isFilterActive(field.name, field)
@@ -208,7 +212,7 @@
           ></span>
           <input
             type="text"
-            class="form-control input-sm layerfilter"
+            class="form-control layerfilter"
             placeholder="{{ 'filter' | translate }}"
             ng-model="facetFilters[field.name]"
             ng-model-options="{debounce: 300}"
@@ -266,7 +270,7 @@
           data-ng-class="{'text-primary': isFilterActive('geometry')}"
         >
           <span
-            class="fa fa-arrow-circle-right"
+            class="fa fa-chevron-right"
             data-ng-class="{
               'fa-rotate-90': indexObject.geomField.expanded,
               'gn-field-empty': !isFilterActive('geometry')
diff --git a/web-ui/src/main/resources/catalog/style/gn.less b/web-ui/src/main/resources/catalog/style/gn.less
index c0f4782dfb6..9262198a246 100644
--- a/web-ui/src/main/resources/catalog/style/gn.less
+++ b/web-ui/src/main/resources/catalog/style/gn.less
@@ -1604,6 +1604,9 @@ gn-indexing-task-status {
 .text-large {
   font-size: 30px;
 }
+.width-auto {
+  width: auto;
+}
 .width-100 {
   width: 100%;
 }
diff --git a/web-ui/src/main/resources/catalog/style/gn_viewer.less b/web-ui/src/main/resources/catalog/style/gn_viewer.less
index c346e805fef..b9198d23921 100644
--- a/web-ui/src/main/resources/catalog/style/gn_viewer.less
+++ b/web-ui/src/main/resources/catalog/style/gn_viewer.less
@@ -341,7 +341,6 @@
     .list-group-item {
       transition: max-height @transition-params;
       padding: 5px 15px;
-      min-height: 42px;
       &:hover,
       &:focus {
         .fa-arrows-alt,
@@ -360,6 +359,11 @@
         }
       }
     }
+    .gn-facet-container {
+      .list-group-item {
+        border: 0;
+      }
+    }
     .gn-baselayer-switcher-menu {
       list-style: none;
       .list-group-item {
@@ -418,10 +422,11 @@
       }
     }
     h4 {
-      margin: 1em 0 0.5em 0;
+      margin: 1em 0 0 0;
+      font-size: 16px;
     }
     h5 {
-      margin: 0.2em 0;
+      margin: 0.7em 0;
     }
     [data-gn-layer-dimensions] {
       overflow: unset !important;
@@ -841,11 +846,48 @@ gn-features-tables,
   .tab-content {
     background: white;
     min-height: 5em;
-    padding: 1em;
+    padding: 0 15px;
   }
   .gn-features-table {
-    padding: 0.25em;
-    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
+    .bootstrap-table {
+      display: grid;
+      grid-template-columns: auto 0fr;
+      grid-template-rows: auto;
+      grid-template-areas:
+        "main toolbar"
+        "footer toolbar";
+      .fixed-table-toolbar {
+        grid-area: toolbar;
+        .columns-right {
+          margin: 0 0 0 10px;
+          display: inline-block;
+          vertical-align: middle;
+          .btn,
+          .btn-group {
+            display: block;
+            float: none;
+            width: 100%;
+            max-width: 100%;
+            margin-top: -1px;
+            margin-left: 0;
+            border-radius: 0;
+          }
+          .btn:first-child:not(:last-child) {
+            border-radius: 4px 4px 0 0;
+          }
+          .btn-group:last-child:not(:first-child) > .btn:first-child {
+            border-radius: 0 0 4px 4px;
+          }
+        }
+      }
+      .fixed-table-container {
+        grid-area: main;
+      }
+      .fixed-table-pagination {
+        grid-area: footer;
+      }
+    }
   }
   .layername {
     display: inline-block;
@@ -878,6 +920,11 @@ gn-features-tables,
 }
 
 .gn-md-view {
+  .tab-content {
+    background: white;
+    min-height: 5em;
+    padding: 0 0 15px 0;
+  }
   gn-features-tables {
     position: unset;
     .gn-features-table {
@@ -891,6 +938,32 @@ gn-features-tables,
   [data-gn-wfs-filter-facets] .gn-facet-container {
     overflow: auto;
     max-height: 550px;
+    .list-group {
+      margin-bottom: 0;
+      .list-group-item {
+        border: 0;
+        padding: 8px 15px;
+      }
+    }
+  }
+}
+.gn-editor-sidebar {
+  .gn-related-resources {
+    p {
+      margin-top: 5px;
+    }
+  }
+  .gn-related-item {
+    h4 {
+      font-size: 14px;
+    }
+  }
+  .wfs-filter-group {
+    margin-top: 10px;
+    margin-bottom: 0;
+    .btn {
+      .btn-xs();
+    }
   }
 }