From 12dbf9255cd93e098ac451534a752d19a0b1da27 Mon Sep 17 00:00:00 2001
From: Michel Gabriel <michel.gabriel@geocat.net>
Date: Thu, 10 Oct 2024 12:50:16 +0200
Subject: [PATCH 1/2] Visual improvements to the Batch Editor pages: the UI is
 now similar to the `Editor Board`

---
 .../resources/catalog/style/gn_editor.less    |  53 +-
 .../catalog/templates/editor/batchedit.html   | 710 +++++++++---------
 .../default/less/gn_results_default.less      |   2 +-
 3 files changed, 412 insertions(+), 353 deletions(-)

diff --git a/web-ui/src/main/resources/catalog/style/gn_editor.less b/web-ui/src/main/resources/catalog/style/gn_editor.less
index 64920135207..b35b292998d 100644
--- a/web-ui/src/main/resources/catalog/style/gn_editor.less
+++ b/web-ui/src/main/resources/catalog/style/gn_editor.less
@@ -701,9 +701,13 @@ table.gn-data-store {
 }
 
 .gn-batch-editor {
-  .gn-resultview li.list-group-item {
-    margin-bottom: 0px;
-    padding: 4px;
+  .gn-resultview {
+    margin-right: 0;
+    li.list-group-item {
+      border-width: 0 0 1px 0;
+      margin-bottom: 0;
+      padding: 10px 5px;
+    }
   }
   li.gn-batch-editor-info {
     margin-top: 11px;
@@ -711,6 +715,49 @@ table.gn-data-store {
   [data-ng-search-form] .gn-top-search .gn-form-any {
     max-width: 80vw;
   }
+  fieldset {
+
+    legend {
+      font-weight: bold;
+    }
+    fieldset {
+      padding: 15px 25px;
+      legend {
+        font-size: 18px;
+        margin-bottom: 0;
+      }
+      .form-group {
+        margin-left: 10px;
+        .clearfix();
+        .list-group {
+          margin-bottom: 0;
+        }
+        &:first-child {
+          margin-top: 10px;
+        }
+        // select spatial extent
+        .gn-drawmap-panel {
+          .col-sm-3, .col-md-8 {
+            width: 100%;
+            padding-left: 0;
+            padding-right: 0;
+          }
+        }
+      }
+    }
+  }
+  [data-gn-slide-toggle] {
+    padding-left: 25px;
+    &:before {
+      content: "\f068";
+      margin-left: -20px;
+    }
+    &.collapsed {
+      &:before {
+        content: "\2b";
+      }
+    }
+  }
 }
 
 form.gn-tab-xml {
diff --git a/web-ui/src/main/resources/catalog/templates/editor/batchedit.html b/web-ui/src/main/resources/catalog/templates/editor/batchedit.html
index dbc3e2b6bbb..ee2541d8269 100644
--- a/web-ui/src/main/resources/catalog/templates/editor/batchedit.html
+++ b/web-ui/src/main/resources/catalog/templates/editor/batchedit.html
@@ -1,132 +1,125 @@
-<div class="container gn-batch-editor" data-ng-controller="GnSearchController">
+<div class="gn-batch-editor" data-ng-controller="GnSearchController">
   <div class="row">
-    <div class="col-md-12 gn-margin-bottom">
-      <h1 data-translate="">batchediting</h1>
-    </div>
-  </div>
+    <div data-ng-class="fluidEditorLayout ? 'container-fluid' : 'container'">
+      <div class="col-md-12 gn-margin-bottom">
+        <h1 data-translate="">batchediting</h1>
+      </div>
 
-  <div class="row">
-    <div class="col-md-12">
-      <div
-        data-ng-controller="GnBatchEditSearchController"
-        data-ng-search-form=""
-        data-runSearch="true"
-        data-wait-for-user="true"
-      >
-        <ul class="nav nav-tabs">
-          <li
-            role="presentation"
-            data-ng-class="{'active' : selectedStep === 1}"
-            data-ng-click="setStep(1)"
-          >
-            <a href="" data-translate="">chooseASet</a>
-          </li>
-          <li
-            role="presentation"
-            data-ng-class="{'active': selectedStep === 2, 'disabled': searchResults.selectedCount < 1}"
-            data-ng-click="searchResults.selectedCount > 0 && setStep(2)"
-          >
-            <a href="" data-translate="">defineEdits</a>
-          </li>
-          <li
-            role="presentation"
-            data-ng-class="{'active' : selectedStep === 3, 'disabled': searchResults.selectedCount < 1}"
-            data-ng-click="searchResults.selectedCount > 0 && setStep(3)"
-          >
-            <a href="" data-translate="">confirmAndSave</a>
-          </li>
-          <li class="gn-batch-editor-info">
-            {{searchResults.selectedCount}}
-            <span data-translate="">recordsInSelection</span>
-          </li>
-          <li class="pull-right">
-            <div data-gn-need-help="batchediting"></div>
-          </li>
-        </ul>
-        <br />
-
-        <div data-ng-class="{'hidden' : selectedStep !== 1}">
-          <div class="panel-body">
+      <div class="col-md-12">
+        <div
+          data-ng-controller="GnBatchEditSearchController"
+          data-ng-search-form=""
+          data-runSearch="true"
+          data-wait-for-user="true"
+        >
+          <ul class="nav nav-pills gn-margin-bottom-lg">
+            <li
+              role="presentation"
+              data-ng-class="{'active' : selectedStep === 1}"
+              data-ng-click="setStep(1)"
+            >
+              <a href="" data-translate="">chooseASet</a>
+            </li>
+            <li
+              role="presentation"
+              data-ng-class="{'active': selectedStep === 2, 'disabled': searchResults.selectedCount < 1}"
+              data-ng-click="searchResults.selectedCount > 0 && setStep(2)"
+            >
+              <a href="" data-translate="">defineEdits</a>
+            </li>
+            <li
+              role="presentation"
+              data-ng-class="{'active' : selectedStep === 3, 'disabled': searchResults.selectedCount < 1}"
+              data-ng-click="searchResults.selectedCount > 0 && setStep(3)"
+            >
+              <a href="" data-translate="">confirmAndSave</a>
+            </li>
+            <li class="gn-batch-editor-info gn-margin-left-lg">
+              {{searchResults.selectedCount}}
+              <span data-translate="">recordsInSelection</span>
+            </li>
+            <li class="pull-right">
+              <div data-gn-need-help="batchediting"></div>
+            </li>
+          </ul>
+
+          <div data-ng-class="{'hidden' : selectedStep !== 1}">
             <p class="alert alert-info" data-translate="">chooseASetOfRecordHelp</p>
 
+            <!-- search -->
             <div class="row">
-              <div class="col-sm-12">
+              <div class="col-md-offset-3 col-md-6">
+
+
                 <form class="form-horizontal" role="form">
                   <input type="hidden" name="_csrf" value="{{csrf}}" />
 
-                  <div class="row gn-top-search">
-                    <div class="col-md-3 gn-search-facet">
+                  <div class="gn-top-search">
+
+                    <div class="input-group gn-form-any">
                       <div
-                        data-gn-user-searches-panel="user"
-                        data-ng-if="isUserSearchesEnabled && user.isConnected()"
+                        data-gn-user-searches-list=""
+                        data-ng-cloak=""
+                        data-mode="button"
+                        class="input-group-btn btn-favorites"
                       ></div>
-                    </div>
-                    <div class="col-md-6">
-                      <div class="input-group gn-form-any">
-                        <div
-                          data-gn-user-searches-list=""
-                          data-ng-cloak=""
-                          data-mode="button"
-                          class="input-group-btn btn-favorites"
-                        ></div>
-                        <input
-                          type="text"
-                          class="form-control input-lg"
-                          id="gn-any-field"
-                          title="{{'anyFieldTitle' | translate}}"
-                          data-ng-model="searchObj.params.any"
-                          autocomplete="off"
-                          placeholder="{{'anyPlaceHolder' | translate}}"
-                          aria-label="{{'anyPlaceHolder' | translate}}"
-                          data-ng-keyup="$event.keyCode == 13 && hideSearchSuggestions() && triggerSearch()"
-                          data-typeahead="md.label as md.label for md in getAnySuggestions($viewValue, searchObj)"
-                          data-typeahead-template-url="../../catalog/templates/gn-typeahead-match.html"
-                          data-typeahead-loading="anyLoading"
-                          class="form-control"
-                          data-typeahead-min-length="1"
-                          data-typeahead-focus-first="false"
-                          data-typeahead-wait-ms="600"
-                        />
+                      <input
+                        type="text"
+                        class="form-control input-lg"
+                        id="gn-any-field"
+                        title="{{'anyFieldTitle' | translate}}"
+                        data-ng-model="searchObj.params.any"
+                        autocomplete="off"
+                        placeholder="{{'anyPlaceHolder' | translate}}"
+                        aria-label="{{'anyPlaceHolder' | translate}}"
+                        data-ng-keyup="$event.keyCode == 13 && hideSearchSuggestions() && triggerSearch()"
+                        data-typeahead="md.label as md.label for md in getAnySuggestions($viewValue, searchObj)"
+                        data-typeahead-template-url="../../catalog/templates/gn-typeahead-match.html"
+                        data-typeahead-loading="anyLoading"
+                        data-typeahead-min-length="1"
+                        data-typeahead-focus-first="false"
+                        data-typeahead-wait-ms="600"
+                      />
 
-                        <div class="input-group-btn">
-                          <button
-                            type="button"
-                            data-ng-click="resetSearch(searchObj.defaultParams);"
-                            title="{{'ClearTitle' | translate}}"
-                            class="btn btn-default btn-lg btn-reset"
-                          >
-                            <i class="fa fa-times"></i>
-                            <span class="sr-only" data-translate="">ClearTitle</span>
-                          </button>
-                          <button
-                            type="button"
-                            data-ng-click="triggerSearch()"
-                            title="{{'search' | translate}}"
-                            class="btn btn-default btn-lg btn-search"
-                          >
-                            <i class="fa fa-search"></i>
-                            <span class="sr-only" data-translate="">search</span>
-                          </button>
-                          <button
-                            type="button"
-                            class="btn btn-default btn-lg btn-advanced"
-                            title="{{'searchOptions' | translate}}"
-                            data-ng-model="searchObj.advancedMode"
-                            btn-checkbox=""
-                            btn-checkbox-true="1"
-                            btn-checkbox-false="0"
-                          >
-                            <i class="fa fa-fw fa-sliders"></i>
-                            <span class="sr-only" data-translate="">searchOptions</span>
-                          </button>
-                        </div>
-                      </div>
-                      <div data-ng-show="searchObj.advancedMode">
-                        <!--Advanced search form-->
-                        <div data-ng-include="advancedSearchTemplate"></div>
+                      <div class="input-group-btn">
+                        <button
+                          type="button"
+                          data-ng-click="resetSearch(searchObj.defaultParams);"
+                          title="{{'ClearTitle' | translate}}"
+                          class="btn btn-default btn-lg btn-reset"
+                        >
+                          <i class="fa fa-times"></i>
+                          <span class="sr-only" data-translate="">ClearTitle</span>
+                        </button>
+                        <button
+                          type="button"
+                          data-ng-click="triggerSearch()"
+                          title="{{'search' | translate}}"
+                          class="btn btn-default btn-lg btn-search"
+                        >
+                          <i class="fa fa-search"></i>
+                          <span class="sr-only" data-translate="">search</span>
+                        </button>
+                        <button
+                          type="button"
+                          class="btn btn-default btn-lg btn-advanced"
+                          title="{{'searchOptions' | translate}}"
+                          data-ng-model="searchObj.advancedMode"
+                          btn-checkbox=""
+                          btn-checkbox-true="1"
+                          btn-checkbox-false="0"
+                        >
+                          <i class="fa fa-fw fa-sliders"></i>
+                          <span class="sr-only" data-translate="">searchOptions</span>
+                        </button>
                       </div>
                     </div>
-                    <div class="col-md-3">
+                    <div data-ng-show="searchObj.advancedMode">
+                      <!--Advanced search form-->
+                      <div data-ng-include="advancedSearchTemplate"></div>
+                    </div>
+
+                    <div>
                       <button
                         type="button"
                         data-ng-disabled="searchResults.selectedCount < 1"
@@ -141,22 +134,38 @@ <h1 data-translate="">batchediting</h1>
                     </div>
                   </div>
                 </form>
-                <br />
-                <div class="row" data-ng-show="searchResults.records.length > 0">
-                  <div class="col-md-offset-3 col-md-4 relative">
+              </div>
+            </div>
+
+            <!-- facets & search results -->
+            <div class="row">
+              <!-- facets -->
+              <div class="col-md-3 gn-search-facet">
+                <div
+                  data-gn-user-searches-panel="user"
+                  data-ng-if="isUserSearchesEnabled && user.isConnected()"
+                ></div>
+                <div data-es-facets="searchResults.facets"></div>
+              </div>
+              <!-- search results -->
+              <div class="col-md-9">
+
+                <div class="row gn-row-tools" data-ng-show="searchResults.records.length > 0">
+                  <div class="col-xs-12 col-sm-5 col-md-5 col-lg-4 relative gn-nopadding-left">
                     <div
                       data-gn-selection-widget=""
                       without-action-menu=""
                       data-results="searchResults"
                     ></div>
                   </div>
-                  <div class="col-md-5">
+                  <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4 gn-nopadding-left gn-nopadding-right text-right">
                     <div
                       class="pull-right"
                       data-gn-pagination="paginationInfo"
                       data-hits-values="searchObj.hitsperpageValues"
                     ></div>
-
+                  </div>
+                  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 gn-nopadding-right text-right">
                     <div
                       class="pull-right"
                       data-sortby-combo=""
@@ -166,58 +175,55 @@ <h1 data-translate="">batchediting</h1>
                   </div>
                 </div>
 
-                <div class="row">
-                  <div class="col-md-3 gn-search-facet">
-                    <div data-es-facets="searchResults.facets"></div>
-                  </div>
-                  <div class="col-md-9">
-                    <span
-                      class="loading fa fa-spinner fa-spin"
-                      data-ng-show="searching"
-                    ></span>
-
-                    <div
-                      class="alert alert-warning"
-                      role="alert"
-                      ng-if="!searching && searchResults.count == 0"
-                    >
-                      <i class="fa fa-frown-o"></i>
-                      <span data-translate="">zarooResult</span>
-                    </div>
+                <span
+                  class="loading fa fa-spinner fa-spin"
+                  data-ng-show="searching"
+                ></span>
 
-                    <div
-                      data-ng-show="searchResults.records.length > 0"
-                      data-gn-results-container=""
-                      data-search-results="searchResults"
-                      data-template-url="resultTemplate"
-                    ></div>
-                  </div>
+                <div
+                  class="alert alert-warning"
+                  role="alert"
+                  ng-if="!searching && searchResults.count == 0"
+                >
+                  <i class="fa fa-frown-o"></i>
+                  <span data-translate="">zarooResult</span>
                 </div>
+
+                <div
+                  data-ng-show="searchResults.records.length > 0"
+                  data-gn-results-container=""
+                  data-search-results="searchResults"
+                  data-template-url="resultTemplate"
+                ></div>
               </div>
             </div>
+
           </div>
-        </div>
 
-        <div data-ng-class="{'hidden' : selectedStep !== 2}">
-          <div class="panel-body">
+          <div data-ng-class="{'hidden' : selectedStep !== 2}">
+
+            <!-- select edit method -->
             <div class="row">
-              <div class="col-md-12">
-                <label class="radio-inline" data-ng-repeat="t in editTypes">
-                  <input
-                    type="radio"
-                    data-ng-model="$parent.editType"
-                    data-ng-click="setType(t.id)"
-                    value="{{t.id}}"
-                    name="editType"
-                  />
-                  <strong>
-                    <i class="fa fa-fw {{t.icon}}"></i>
-                    {{t.id | translate}}
-                  </strong>
-                </label>
+              <div class="col-md-12 gn-margin-bottom-lg">
+                <div class="btn-group" data-toggle="buttons">
+                  <label class="btn btn-default" data-ng-repeat="t in editTypes">
+                    <input
+                      type="radio"
+                      data-ng-model="$parent.editType"
+                      data-ng-click="setType(t.id)"
+                      value="{{t.id}}"
+                      name="editType"
+                    />
+                    <span>
+                      <i class="fa fa-fw {{t.icon}}"></i>
+                      {{t.id | translate}}
+                    </span>
+                  </label>
+                </div>
               </div>
             </div>
 
+            <!-- method 1: search & replace -->
             <div class="row" data-ng-show="editType === 'searchAndReplace'">
               <div class="col-md-12">
                 <p class="alert alert-info" data-translate="">
@@ -228,27 +234,30 @@ <h1 data-translate="">batchediting</h1>
                     <span data-translate="">addSearchAndReplace-help</span>
                   </p>
                   <div class="form-group">
-                    <label>
+                    <label class="width-100">
                       <span data-translate="">searchValue</span>
-                      <textarea
-                        class="form-control"
-                        name="search"
-                        data-ng-model="searchAndReplaceField.search"
-                      ></textarea>
                     </label>
-                    <br />
-                    <label>
+                    <textarea
+                      class="form-control"
+                      name="search"
+                      data-ng-model="searchAndReplaceField.search"
+                    ></textarea>
+                  </div>
+                  <div class="form-group">
+                    <label class="width-100">
                       <span data-translate="">searchReplacement</span>
-                      <textarea
-                        class="form-control"
-                        name="search"
-                        data-ng-model="searchAndReplaceField.replacement"
-                      ></textarea>
                     </label>
-                    <br />
+                    <textarea
+                      class="form-control"
+                      name="search"
+                      data-ng-model="searchAndReplaceField.replacement"
+                    ></textarea>
+                  </div>
+                  <div class="form-group">
                     <label>
                       <span data-translate="">regexpFlags</span>
-                      <div class="input-group">
+                    </label>
+                    <div class="input-group">
                         <input
                           type="text"
                           class="form-control"
@@ -275,11 +284,12 @@ <h1 data-translate="">batchediting</h1>
                           </ul>
                         </div>
                       </div>
-                    </label>
                   </div>
                 </div>
               </div>
             </div>
+
+            <!-- method 2 & 3: xpath & form edits -->
             <div
               class="row"
               data-ng-show="editType === 'batchEdits' || editType === 'xpathEdits'"
@@ -336,7 +346,7 @@ <h1 data-translate="">batchediting</h1>
                   <div gn-batch-edit-examples-selector="setExample"></div>
                 </div>
 
-                <form class="form-horizontal" id="gn-batch-changes">
+                <form id="gn-batch-changes">
                   <div data-ng-show="editType === 'xpathEdits'">
                     <form class="form-horizontal" name="xpathConfigForm" novalidate="">
                       <input type="hidden" name="_csrf" value="{{csrf}}" />
@@ -582,193 +592,195 @@ <h6>{{c.field}} ({{c.insertMode | translate}})</h6>
               </div>
             </div>
           </div>
-        </div>
 
-        <div data-ng-class="{'hidden' : selectedStep !== 3}">
-          <div class="panel-body">
-            <div class="container">
-              <div class="row">
-                <div
-                  class="col-sm-6"
-                  data-ng-show="editType !== 'searchAndReplace' && changes.length === 0"
-                >
-                  <p class="alert alert-warning" data-translate="">noChangesToApply</p>
-                </div>
-                <div
-                  class="col-sm-6"
-                  data-ng-show="editType !== 'searchAndReplace' && changes.length > 0"
-                >
-                  <h4 data-translate="">changesToApply</h4>
-                  <ul>
-                    <li
-                      data-ng-repeat="change in changes"
-                      title="{{change.value}}"
-                      data-ng-class=""
+          <div data-ng-class="{'hidden' : selectedStep !== 3}">
+
+            <div class="row">
+              <div
+                class="col-md-12"
+                data-ng-show="editType !== 'searchAndReplace' && changes.length === 0"
+              >
+                <p class="alert alert-warning" data-translate="">noChangesToApply</p>
+              </div>
+              <div
+                class="col-md-12"
+                data-ng-show="editType !== 'searchAndReplace' && changes.length > 0"
+              >
+                <h2 data-translate="">changesToApply</h2>
+                <ul>
+                  <li
+                    data-ng-repeat="change in changes"
+                    title="{{change.value}}"
+                    data-ng-class=""
+                  >
+                    {{change.field | translate}}
+                    <span data-ng-show="change.insertMode">
+                      ({{change.insertMode | translate}}) </span
+                    >: {{change.value | limitTo:40}}
+                  </li>
+                </ul>
+              </div>
+
+              <div
+                class="col-md-12"
+                data-ng-show="editType === 'searchAndReplace' && searchAndReplaceChanges[0].search == ''"
+              >
+                <p class="alert alert-warning" data-translate="">
+                  noSearchAndReplaceChangesToApply
+                </p>
+              </div>
+
+              <div
+                class="col-md-12"
+                data-ng-show="editType === 'searchAndReplace' && searchAndReplaceChanges[0].search != ''"
+              >
+                <h4 data-translate="">changesToApply</h4>
+                <ul class="list-group gn-resultview">
+                  <li
+                    data-ng-repeat="change in searchAndReplaceChanges track by $index"
+                    class="list-group-item"
+                  >
+                    {{change.search | limitTo:40}}
+                    <i class="fa fa-fw fa-chevron-right"></i>
+                    {{change.replacement | limitTo:40}}
+                    <span data-ng-if="changes.regexpFlags">
+                      ({{changes.regexpFlags}})</span
                     >
-                      {{change.field | translate}}
-                      <span data-ng-show="change.insertMode">
-                        ({{change.insertMode | translate}}) </span
-                      >: {{change.value | limitTo:40}}
-                    </li>
-                  </ul>
-                </div>
+                  </li>
+                </ul>
+              </div>
 
-                <div
-                  class="col-sm-6"
-                  data-ng-show="editType === 'searchAndReplace' && searchAndReplaceChanges[0].search == ''"
+              <div class="col-md-12" data-ng-hide="selectedRecords.total.value > 0">
+                <p
+                  class="alert alert-warning"
+                  data-ng-show="selectedRecordsCount == 0"
+                  data-translate=""
                 >
-                  <p class="alert alert-warning" data-translate="">
-                    noSearchAndReplaceChangesToApply
-                  </p>
-                </div>
-                <div
-                  class="col-sm-6"
-                  data-ng-show="editType === 'searchAndReplace' && searchAndReplaceChanges[0].search != ''"
+                  selectRecordsToEdit
+                </p>
+                <p
+                  class="alert alert-warning"
+                  data-ng-show="tooManyRecordInSelForSearch"
+                  data-translate=""
+                  data-translate-values="{count: selectedRecordsCount}"
                 >
-                  <h4 data-translate="">changesToApply</h4>
-                  <ul>
-                    <li
-                      data-ng-repeat="change in searchAndReplaceChanges track by $index"
-                      data-ng-class=""
+                  tooManyRecordInSelForSearch
+                </p>
+              </div>
+
+              <div class="col-md-12" data-ng-show="selectedRecords.total.value > 0">
+                <h4 data-translate="">aboutToUpdateTheFollowing</h4>
+                <ul class="list-group gn-resultview">
+                  <li class="list-group-item" data-ng-repeat="record in selectedRecords.hits">
+                    <a data-ng-href="catalog.search#/metadata/{{record._id}}"
+                      >{{record._source.resourceTitleObject.default}}</a
                     >
-                      {{change.search | limitTo:40}}
-                      <i class="fa fa-fw fa-chevron-right"></i>
-                      {{change.replacement | limitTo:40}}
-                      <span data-ng-if="changes.regexpFlags">
-                        ({{changes.regexpFlags}})</span
+
+                    <div class="btn-group btn-group-xs gn-margin-left">
+                      <button
+                        class="btn btn-default"
+                        data-ng-disabled="!canPreview"
+                        data-gn-click-and-spin="previewChanges(record._id)"
                       >
-                    </li>
-                  </ul>
-                </div>
-                <div class="col-sm-6" data-ng-hide="selectedRecords.total.value > 0">
-                  <p
-                    class="alert alert-warning"
-                    data-ng-show="selectedRecordsCount == 0"
-                    data-translate=""
-                  >
-                    selectRecordsToEdit
-                  </p>
-                  <p
-                    class="alert alert-warning"
-                    data-ng-show="tooManyRecordInSelForSearch"
-                    data-translate=""
-                    data-translate-values="{count: selectedRecordsCount}"
-                  >
-                    tooManyRecordInSelForSearch
-                  </p>
-                </div>
-                <div class="col-sm-6" data-ng-show="selectedRecords.total.value > 0">
-                  <h4 data-translate="">aboutToUpdateTheFollowing</h4>
-                  <ul>
-                    <li data-ng-repeat="record in selectedRecords.hits">
-                      <a data-ng-href="catalog.search#/metadata/{{record._id}}"
-                        >{{record._source.resourceTitleObject.default}}</a
+                        <i class="fa fa-play"></i>
+                        <span data-translate="">previewChangesAsXml</span>
+                      </button>
+                      <button
+                        type="button"
+                        class="btn btn-default dropdown-toggle"
+                        data-ng-disabled="!canPreview"
+                        data-toggle="dropdown"
                       >
-
-                      <div class="btn-group">
-                        <button
-                          class="btn btn-link btn-xs"
-                          data-ng-disabled="!canPreview"
-                          data-gn-click-and-spin="previewChanges(record._id)"
-                        >
-                          <i class="fa fa-play"></i>
-                          <span data-translate="">previewChangesAsXml</span>
-                        </button>
-                        <button
-                          type="button"
-                          class="btn btn-link btn-xs dropdown-toggle"
-                          data-ng-disabled="!canPreview"
-                          data-toggle="dropdown"
-                        >
-                          <span class="caret"></span>&nbsp;
-                        </button>
-                        <ul class="dropdown-menu pull-right" role="menu">
-                          <li>
-                            <a
-                              data-gn-click-and-spin="previewChanges(record._id, 'diffhtml')"
-                              href=""
-                              data-translate=""
-                            >
-                              previewChangesAsHtml</a
-                            >
-                          </li>
-                          <li>
-                            <a
-                              data-gn-click-and-spin="previewChanges(record._id, 'diff')"
-                              href=""
-                              data-translate=""
-                            >
-                              previewChangesAsDiff</a
-                            >
-                          </li>
-                          <li>
-                            <a
-                              data-gn-click-and-spin="previewChanges(record._id, 'patch')"
-                              href=""
-                              data-translate=""
-                            >
-                              previewChangesAsPatch</a
-                            >
-                          </li>
-                        </ul>
-                      </div>
-                    </li>
-                  </ul>
-                </div>
+                        <span class="caret"></span>&nbsp;
+                      </button>
+                      <ul class="dropdown-menu pull-right" role="menu">
+                        <li>
+                          <a
+                            data-gn-click-and-spin="previewChanges(record._id, 'diffhtml')"
+                            href=""
+                            data-translate=""
+                          >
+                            previewChangesAsHtml</a
+                          >
+                        </li>
+                        <li>
+                          <a
+                            data-gn-click-and-spin="previewChanges(record._id, 'diff')"
+                            href=""
+                            data-translate=""
+                          >
+                            previewChangesAsDiff</a
+                          >
+                        </li>
+                        <li>
+                          <a
+                            data-gn-click-and-spin="previewChanges(record._id, 'patch')"
+                            href=""
+                            data-translate=""
+                          >
+                            previewChangesAsPatch</a
+                          >
+                        </li>
+                      </ul>
+                    </div>
+                  </li>
+                </ul>
               </div>
-              <div class="row">
-                <div class="col-md-12">
-                  <input
-                    type="checkbox"
-                    id="updateDateStamp"
-                    data-ng-model="extraParams.updateDateStamp"
-                  />
-                  <label for="updateDateStamp" data-translate="">updateDateStamp</label>
-                </div>
+            </div>
+
+            <div class="row">
+              <div class="col-md-12">
+                <input
+                  type="checkbox"
+                  id="updateDateStamp"
+                  data-ng-model="extraParams.updateDateStamp"
+                />
+                <label for="updateDateStamp" data-translate="">updateDateStamp</label>
               </div>
+            </div>
 
-              <div class="row" data-ng-show="preview">
-                <div class="col-md-11">
-                  <h4 data-translate="">processPreview</h4>
-
-                  <div
-                    data-ng-if="diffType == 'diffhtml'"
-                    data-ng-bind-html="preview"
-                  ></div>
-                  <div
-                    data-ng-if="diffType != 'diffhtml'"
-                    style="height: 500px"
-                    ui-ace="{useWrapMode:true,showGutter:true,mode:'xml'}"
-                    data-ng-model="preview"
-                  ></div>
-                </div>
+            <div class="row" data-ng-show="preview">
+              <div class="col-md-11">
+                <h4 data-translate="">processPreview</h4>
+
+                <div
+                  data-ng-if="diffType == 'diffhtml'"
+                  data-ng-bind-html="preview"
+                ></div>
+                <div
+                  data-ng-if="diffType != 'diffhtml'"
+                  style="height: 500px"
+                  ui-ace="{useWrapMode:true,showGutter:true,mode:'xml'}"
+                  data-ng-model="preview"
+                ></div>
               </div>
-              <div class="row" data-ng-show="previewError">
-                <div class="col-md-11">
-                  <div data-gn-batch-report="previewError"></div>
-                </div>
+            </div>
+            <div class="row" data-ng-show="previewError">
+              <div class="col-md-11">
+                <div data-gn-batch-report="previewError"></div>
               </div>
+            </div>
 
-              <br />
-              <div class="row gn-margin-bottom">
-                <div class="col-md-12">
-                  <button
-                    class="btn btn-block btn-primary"
-                    data-ng-disabled="!canPreview"
-                    data-gn-click-and-spin="applyChanges()"
-                  >
-                    <i class="fa fa-save"></i>
-                    <span data-translate="">save</span>
-                  </button>
-                </div>
+            <br />
+            <div class="row gn-margin-bottom">
+              <div class="col-md-12">
+                <button
+                  class="btn btn-success"
+                  data-ng-disabled="!canPreview"
+                  data-gn-click-and-spin="applyChanges()"
+                >
+                  <i class="fa fa-save"></i>
+                  <span data-translate="">save</span>
+                </button>
               </div>
+            </div>
 
-              <div class="row" data-ng-show="processReport">
-                <div class="col-md-11">
-                  <div data-gn-batch-report="processReport"></div>
-                </div>
+            <div class="row" data-ng-show="processReport">
+              <div class="col-md-11">
+                <div data-gn-batch-report="processReport"></div>
               </div>
             </div>
+
           </div>
         </div>
       </div>
diff --git a/web-ui/src/main/resources/catalog/views/default/less/gn_results_default.less b/web-ui/src/main/resources/catalog/views/default/less/gn_results_default.less
index fe0109cd25e..4651455a41d 100644
--- a/web-ui/src/main/resources/catalog/views/default/less/gn_results_default.less
+++ b/web-ui/src/main/resources/catalog/views/default/less/gn_results_default.less
@@ -38,7 +38,7 @@
 .gn-row-tools {
   border-bottom: 1px solid #ddd;
   margin-bottom: 15px;
-
+  margin-top: 2px;
   .btn-default {
     border: 0;
     border-radius: 0;

From c16cbe32bfb11063f8829893438c152adb769d7e Mon Sep 17 00:00:00 2001
From: Michel Gabriel <michel.gabriel@geocat.net>
Date: Wed, 16 Oct 2024 15:59:11 +0200
Subject: [PATCH 2/2] More visual improvements to the Batch Editor pages:

- improved tabs
- 'nav pills' for `Define Edits`
- equal whitespace everywhere
- added indents for the `Form Editing`
---
 .../resources/catalog/style/gn_editor.less    |  25 ++++-
 .../catalog/templates/editor/batchedit.html   | 101 ++++++++++--------
 2 files changed, 82 insertions(+), 44 deletions(-)

diff --git a/web-ui/src/main/resources/catalog/style/gn_editor.less b/web-ui/src/main/resources/catalog/style/gn_editor.less
index b35b292998d..81f58a0bf5d 100644
--- a/web-ui/src/main/resources/catalog/style/gn_editor.less
+++ b/web-ui/src/main/resources/catalog/style/gn_editor.less
@@ -715,8 +715,28 @@ table.gn-data-store {
   [data-ng-search-form] .gn-top-search .gn-form-any {
     max-width: 80vw;
   }
-  fieldset {
+  .nav-tabs > li {
+    margin-bottom: -3px;
+  }
+  input[type="radio"] + span {
+    display: block;
+    padding: 10px 15px;
+    border-radius: 4px;
+    margin-right: 5px;
+    font-weight: normal;
+    color: @brand-primary;
+    &:hover {
+      background-color: #ddd;
+      cursor: pointer;
+    }
+  }
 
+  input[type="radio"]:checked + span {
+    background-color: @brand-primary;
+    color: #fff;
+  }
+
+  fieldset {
     legend {
       font-weight: bold;
     }
@@ -737,7 +757,8 @@ table.gn-data-store {
         }
         // select spatial extent
         .gn-drawmap-panel {
-          .col-sm-3, .col-md-8 {
+          .col-sm-3,
+          .col-md-8 {
             width: 100%;
             padding-left: 0;
             padding-right: 0;
diff --git a/web-ui/src/main/resources/catalog/templates/editor/batchedit.html b/web-ui/src/main/resources/catalog/templates/editor/batchedit.html
index ee2541d8269..e43d951da31 100644
--- a/web-ui/src/main/resources/catalog/templates/editor/batchedit.html
+++ b/web-ui/src/main/resources/catalog/templates/editor/batchedit.html
@@ -12,7 +12,7 @@ <h1 data-translate="">batchediting</h1>
           data-runSearch="true"
           data-wait-for-user="true"
         >
-          <ul class="nav nav-pills gn-margin-bottom-lg">
+          <ul class="nav nav-tabs gn-margin-bottom-lg">
             <li
               role="presentation"
               data-ng-class="{'active' : selectedStep === 1}"
@@ -44,18 +44,15 @@ <h1 data-translate="">batchediting</h1>
           </ul>
 
           <div data-ng-class="{'hidden' : selectedStep !== 1}">
-            <p class="alert alert-info" data-translate="">chooseASetOfRecordHelp</p>
+            <p class="alert alert-info gn-margin-left-lg gn-margin-right-lg" data-translate="">chooseASetOfRecordHelp</p>
 
             <!-- search -->
             <div class="row">
               <div class="col-md-offset-3 col-md-6">
-
-
                 <form class="form-horizontal" role="form">
                   <input type="hidden" name="_csrf" value="{{csrf}}" />
 
                   <div class="gn-top-search">
-
                     <div class="input-group gn-form-any">
                       <div
                         data-gn-user-searches-list=""
@@ -149,23 +146,43 @@ <h1 data-translate="">batchediting</h1>
               </div>
               <!-- search results -->
               <div class="col-md-9">
-
-                <div class="row gn-row-tools" data-ng-show="searchResults.records.length > 0">
-                  <div class="col-xs-12 col-sm-5 col-md-5 col-lg-4 relative gn-nopadding-left">
+                <div
+                  class="row gn-row-tools"
+                  data-ng-show="searchResults.records.length > 0"
+                >
+                  <div
+                    class="
+                      col-xs-12 col-sm-5 col-md-5 col-lg-4
+                      relative
+                      gn-nopadding-left
+                    "
+                  >
                     <div
                       data-gn-selection-widget=""
                       without-action-menu=""
                       data-results="searchResults"
                     ></div>
                   </div>
-                  <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4 gn-nopadding-left gn-nopadding-right text-right">
+                  <div
+                    class="
+                      col-xs-12 col-sm-7 col-md-7 col-lg-4
+                      gn-nopadding-left gn-nopadding-right
+                      text-right
+                    "
+                  >
                     <div
                       class="pull-right"
                       data-gn-pagination="paginationInfo"
                       data-hits-values="searchObj.hitsperpageValues"
                     ></div>
                   </div>
-                  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 gn-nopadding-right text-right">
+                  <div
+                    class="
+                      col-xs-12 col-sm-12 col-md-12 col-lg-4
+                      gn-nopadding-right
+                      text-right
+                    "
+                  >
                     <div
                       class="pull-right"
                       data-sortby-combo=""
@@ -197,18 +214,17 @@ <h1 data-translate="">batchediting</h1>
                 ></div>
               </div>
             </div>
-
           </div>
 
           <div data-ng-class="{'hidden' : selectedStep !== 2}">
-
             <!-- select edit method -->
             <div class="row">
               <div class="col-md-12 gn-margin-bottom-lg">
-                <div class="btn-group" data-toggle="buttons">
-                  <label class="btn btn-default" data-ng-repeat="t in editTypes">
+                <div>
+                  <label data-ng-repeat="t in editTypes">
                     <input
                       type="radio"
+                      class="sr-only"
                       data-ng-model="$parent.editType"
                       data-ng-click="setType(t.id)"
                       value="{{t.id}}"
@@ -258,32 +274,32 @@ <h1 data-translate="">batchediting</h1>
                       <span data-translate="">regexpFlags</span>
                     </label>
                     <div class="input-group">
-                        <input
-                          type="text"
-                          class="form-control"
-                          name="regexpFlags"
-                          data-ng-model="searchAndReplaceField.regexpFlags"
-                        />
-                        <div class="input-group-btn">
-                          <button
-                            type="button"
-                            class="btn btn-default dropdown-toggle"
-                            data-toggle="dropdown"
-                            aria-haspopup="true"
-                            aria-expanded="false"
-                          >
-                            <span class="caret"></span>
-                          </button>
-                          <ul class="dropdown-menu dropdown-menu-right">
-                            <li data-ng-repeat="f in regexpFlags">
-                              <a
-                                data-ng-click="searchAndReplaceField.regexpFlags = searchAndReplaceField.regexpFlags + f"
-                                >{{f}} : {{('regexpFlags-' + f) | translate}}</a
-                              >
-                            </li>
-                          </ul>
-                        </div>
+                      <input
+                        type="text"
+                        class="form-control"
+                        name="regexpFlags"
+                        data-ng-model="searchAndReplaceField.regexpFlags"
+                      />
+                      <div class="input-group-btn">
+                        <button
+                          type="button"
+                          class="btn btn-default dropdown-toggle"
+                          data-toggle="dropdown"
+                          aria-haspopup="true"
+                          aria-expanded="false"
+                        >
+                          <span class="caret"></span>
+                        </button>
+                        <ul class="dropdown-menu dropdown-menu-right">
+                          <li data-ng-repeat="f in regexpFlags">
+                            <a
+                              data-ng-click="searchAndReplaceField.regexpFlags = searchAndReplaceField.regexpFlags + f"
+                              >{{f}} : {{('regexpFlags-' + f) | translate}}</a
+                            >
+                          </li>
+                        </ul>
                       </div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -594,7 +610,6 @@ <h6>{{c.field}} ({{c.insertMode | translate}})</h6>
           </div>
 
           <div data-ng-class="{'hidden' : selectedStep !== 3}">
-
             <div class="row">
               <div
                 class="col-md-12"
@@ -671,7 +686,10 @@ <h4 data-translate="">changesToApply</h4>
               <div class="col-md-12" data-ng-show="selectedRecords.total.value > 0">
                 <h4 data-translate="">aboutToUpdateTheFollowing</h4>
                 <ul class="list-group gn-resultview">
-                  <li class="list-group-item" data-ng-repeat="record in selectedRecords.hits">
+                  <li
+                    class="list-group-item"
+                    data-ng-repeat="record in selectedRecords.hits"
+                  >
                     <a data-ng-href="catalog.search#/metadata/{{record._id}}"
                       >{{record._source.resourceTitleObject.default}}</a
                     >
@@ -780,7 +798,6 @@ <h4 data-translate="">processPreview</h4>
                 <div data-gn-batch-report="processReport"></div>
               </div>
             </div>
-
           </div>
         </div>
       </div>