UI improvements for the bounding box block in the editor:

- re-order the UI element - group elements (add elements to a toolbar for the map) - change delete icons and couple them to the input fields - delete the previous search item when switching the region type
GeoCat · Sep 4, 2020 · 0e7a4a3 · 0e7a4a3
1 parent f45a121
commit 0e7a4a3
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 54 deletions.
diff --git a/web-ui/src/main/resources/catalog/components/common/map/partials/drawbbox.html b/web-ui/src/main/resources/catalog/components/common/map/partials/drawbbox.html
@@ -1,51 +1,46 @@
 <div class="gn-drawmap-panel">
   <div class="row">
-
     <!--Region picker-->
-    <div class="col-md-9">
+    <label class="col-sm-3 control-label"
+           data-translate="">chooseRegion</label>
+    <div class="col-md-8">
       <div data-gn-region-picker=""></div>
     </div>
-
-    <!--Draw Button-->
-    <div class="col-md-3" ng-if="!readOnly">
-      <button class="btn btn-warning"
-              title="{{'clickToDrawABox' | translate}}"
-              data-ng-click="drawMap()"
-              data-ng-class="{active : drawing}">
-        <i class="fa fa-pencil"></i>&nbsp;<span data-translate="">drawRectangle</span>
-      </button>
-    </div>
   </div>
 
   <div class="row">
     <div class="form-group gn-field" data-ng-show="identifierRef !== undefined">
       <label class="col-sm-3 control-label"
             data-translate="">bboxIdentifier</label>
       <div class="col-sm-8 gn-value">
-        <input class="form-control"
-              data-ng-model="identifier"
-              name="{{identifierRef}}"
-              ng-disabled="readOnly"/>
-      </div>
-      <div class="col-sm-1 gn-control">
-        <a class="btn pull-right" data-ng-click="identifier = ''">
-          <i class="fa fa-times text-danger"></i>
-        </a>
+        <div class="input-group">
+          <input class="form-control"
+                 data-ng-model="identifier"
+                 name="{{identifierRef}}"
+                 ng-disabled="readOnly"/>
+          <span class="input-group-btn">
+            <a class="btn btn-default" data-ng-click="identifier = ''">
+              <i class="fa fa-times"></i>
+            </a>
+          </span>
+        </div>
       </div>
     </div>
     <div class="form-group gn-field" data-ng-show="descriptionRef !== undefined">
       <label class="col-sm-3 control-label"
             data-translate="">bboxDescription</label>
       <div class="col-sm-8 gn-value">
-        <input class="form-control"
-              data-ng-model="description"
-              name="{{descriptionRef}}"
-              ng-disabled="readOnly"/>
-      </div>
-      <div class="col-sm-1 gn-control">
-        <a class="btn pull-right" data-ng-click="description = ''">
-          <i class="fa fa-times text-danger"></i>
-        </a>
+        <div class="input-group">
+          <input class="form-control"
+                 data-ng-model="description"
+                 name="{{descriptionRef}}"
+                 ng-disabled="readOnly"/>
+          <span class="input-group-btn">
+            <a class="btn btn-default" data-ng-click="description = ''">
+              <i class="fa fa-times"></i>
+            </a>
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -58,26 +53,36 @@
     <input data-ng-model="dcExtent" name="{{dcRef}}"/>
   </div>
 
-  <!--Projection selector-->
-  <div class="row" data-ng-show="projs.list.length > 1">
-    <div class="btn-group">
-      <button type="button" class="btn btn-link dropdown-toggle"
-              data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
-              title="{{'chooseAProj' | translate}}">
-        {{projs.formLabel}} <span class="caret"></span>
-      </button>
-      <ul class="dropdown-menu">
-        <li data-ng-repeat="proj in projs.list">
-          <a href="" data-ng-click="projs.form = proj.code; projs.formLabel = proj.label">
-            {{proj.label}}
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
-
   <!--Map and coordinates inputs-->
-  <div class="text-center">
+  <div>
+    <div class="gn-editor-map-toolbar clearfix">
+      <!--Projection selector-->
+      <div class="pull-left" data-ng-show="projs.list.length > 1">
+        <div class="btn-group">
+          <button type="button" class="btn btn-default dropdown-toggle"
+                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+                  title="{{'chooseAProj' | translate}}">
+            {{projs.formLabel}} <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu">
+            <li data-ng-repeat="proj in projs.list">
+              <a href="" data-ng-click="projs.form = proj.code; projs.formLabel = proj.label">
+                {{proj.label}}
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <!--Draw Button-->
+      <div class=" pull-right" ng-if="!readOnly">
+        <button class="btn btn-default"
+                title="{{'clickToDrawABox' | translate}}"
+                data-ng-click="drawMap()"
+                data-ng-class="{active : drawing}">
+          <i class="fa fa-pencil"></i>&nbsp;<span data-translate="">drawRectangle</span>
+        </button>
+      </div>
+    </div>
     <div class="gn-editor-map">
       <span>
         <div class="input-group coord coord-north">

diff --git a/web-ui/src/main/resources/catalog/components/utility/UtilityDirective.js b/web-ui/src/main/resources/catalog/components/utility/UtilityDirective.js
@@ -147,6 +147,8 @@
 
           scope.setRegion = function(regionType) {
             scope.regionType = regionType;
+            // clear the input field
+            scope.resetRegion();
           };
         }
       };

diff --git a/web-ui/src/main/resources/catalog/components/utility/partials/regionpicker.html b/web-ui/src/main/resources/catalog/components/utility/partials/regionpicker.html
@@ -1,4 +1,4 @@
-<div class="input-group">
+<div class="input-group gn-field">
   <div class="input-group-btn">
     <button type="button"
             class="btn btn-default dropdown-toggle"
@@ -15,6 +15,7 @@
   </div>
   <!-- /btn-group -->
   <input type="text" name="regionpicker" class="form-control"
+         autocomplete="off"
          data-gn-region-picker-input=""
          placeholder="{{'chooseRegion' | translate}}"/>
   <span class="fa fa-spinner fa-spin" data-ng-show="regionLoading"></span>

diff --git a/web-ui/src/main/resources/catalog/style/gn.less b/web-ui/src/main/resources/catalog/style/gn.less
@@ -1034,7 +1034,7 @@ gn-md-type-widget, gn-md-type-inspire-validation-widget {
     z-index: 20;
   }
   .coord-north {
-    top: -0.25em;
+    top: -1em;
     left: 50%;
     margin-left: -75px;
   }
@@ -1097,7 +1097,7 @@ gn-md-type-widget, gn-md-type-inspire-validation-widget {
   [data-gn-region-picker], [gn-region-picker] {
     .fa {
       position: absolute;
-      top: 11px;
+      top: 13px;
       z-index: 20;
       right: 10px;
       &.fa-spinner {

diff --git a/web-ui/src/main/resources/catalog/views/default/less/gn_editor_default.less b/web-ui/src/main/resources/catalog/views/default/less/gn_editor_default.less
@@ -254,6 +254,8 @@
       .tt-menu {
         margin-top: 1px;
         margin-left: 0;
+        left: 0 !important;
+        top: 32px !important;
         width: calc(100% + 0px);
         z-index: 110 !important;
       }
@@ -405,15 +407,23 @@
 // map for Editor and Batch Editor
 .gn-drawmap-panel {
   .gn-editor-map {
-    padding: 15px;
+    padding: 0 15px 15px 15px;
     position: relative;
-    margin-top: 30px;
+    margin-top: 0;
+    border-radius: 0;
     [ol-map] {
       .ol-attribution {
         .gn-attribution();
       }
     }
   }
+  .gn-editor-map-toolbar {
+    margin: 30px 15px 0 15px;
+    padding: 10px;
+    border: 1px solid @panel-default-border;
+    background-color: @panel-default-heading-bg;
+    border-bottom: 0;
+  }
 }
 // online resource panel
 .add-onlinesrc {