Skip to content

Commit

Permalink
Visual and UX changes for WFS previews (geonetwork#8284)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@MichelGabriel
MichelGabriel authored Sep 24, 2024
1 parent 2629a90 commit 835a293
Show file tree
Hide file tree
Showing 5 changed files with 151 additions and 72 deletions.
4 changes: 2 additions & 2 deletions web-ui/src/main/resources/catalog/components/search/mdview/partials/datapreview.html
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<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"
data-display-table-on-load="true"
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"
Expand Down
11 changes: 5 additions & 6 deletions web-ui/src/main/resources/catalog/components/viewer/gfi/partials/featurestables.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
120 changes: 62 additions & 58 deletions web-ui/src/main/resources/catalog/components/viewer/wfsfilter/partials/wfsfilterfacet.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'"
Expand All @@ -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"
Expand All @@ -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}}"
Expand All @@ -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'))"
Expand All @@ -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"
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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 -->
Expand All @@ -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)
Expand All @@ -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}"
Expand Down Expand Up @@ -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')
Expand Down
3 changes: 3 additions & 0 deletions web-ui/src/main/resources/catalog/style/gn.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1604,6 +1604,9 @@ gn-indexing-task-status {
.text-large {
font-size: 30px;
}
.width-auto {
width: auto;
}
.width-100 {
width: 100%;
}
Expand Down
85 changes: 79 additions & 6 deletions web-ui/src/main/resources/catalog/style/gn_viewer.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -341,7 +341,6 @@
.list-group-item {
transition: max-height @transition-params;
padding: 5px 15px;
min-height: 42px;
&:hover,
&:focus {
.fa-arrows-alt,
Expand All @@ -360,6 +359,11 @@
}
}
}
.gn-facet-container {
.list-group-item {
border: 0;
}
}
.gn-baselayer-switcher-menu {
list-style: none;
.list-group-item {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand All @@ -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();
}
}
}

Expand Down

0 comments on commit 835a293

Please sign in to comment.