Skip to content

Commit

Permalink
List styling for related records in the editor sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
@MichelGabriel
MichelGabriel committed Oct 24, 2023
1 parent 1f2c8cc commit c7930ce
Show file tree
Hide file tree
Showing 4 changed files with 121 additions and 77 deletions.
26 changes: 14 additions & 12 deletions ...resources/catalog/components/metadataactions/partials/distributionResourcesContainer.html
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
<div data-ng-if="editable">
<div data-ng-repeat="config in relatedConfig track by $index">
<h2 data-ng-if="config.title.indexOf('<') === -1">{{::config.title | translate}}</h2>
<div
data-ng-if="config.title.indexOf('<') === 0"
data-ng-bind-html="config.title"
></div>

<div data-ng-repeat="action in config.editActions">
<a href="" data-ng-click="onlinesrcService.onOpenPopup('onlinesrc', action)">
<i class="fa fa-fw fa-plus"></i>
<span data-translate="">{{ action | translate}}</span>
</a>
<div class="flex-row">
<div class="flex-grow">
<h2 data-ng-if="config.title.indexOf('<') === -1">{{::config.title | translate}}</h2>
<div
data-ng-if="config.title.indexOf('<') === 0"
data-ng-bind-html="config.title"
></div>
</div>
<div class="gn-margin-bottom" data-ng-repeat="action in config.editActions">
<a href="" class="btn btn-default btn-xs" data-ng-click="onlinesrcService.onOpenPopup('onlinesrc', action)">
<i class="fa fa-fw fa-plus"></i>
<span data-translate="">{{ action | translate}}</span>
</a>
</div>
</div>

<div
data-gn-related-distribution="md"
data-user="user"
Expand Down
80 changes: 40 additions & 40 deletions ...i/src/main/resources/catalog/components/metadataactions/partials/relatedDistribution.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,10 +157,37 @@ <h3>
data-ng-repeat="r in distributions | orderBy:getOrderBy"
data-ng-if="editable"
>
<!-- Always display title if available -->
<h3>
<a data-ng-href="{{::r.locUrl}}" target="_blank"> {{::r.locTitle || r.locUrl}} </a>
</h3>
<div class="flex-row">
<!-- Always display title if available -->
<h3 class="flex-grow">
<a data-ng-href="{{::r.locUrl}}" target="_blank"> {{::r.locTitle || r.locUrl}} </a>
</h3>
<!-- Edit & Remove -->

<div class="text-no-wrap">
<a
href=""
class="onlinesrc-remove gn-margin-right-sm"
title="{{'edit' | translate}}"
aria-label="{{'edit' | translate}}"
data-ng-click="onlinesrcService.onOpenPopup('onlinesrc', convertLinkToEdit(r))"
>
<i class="fa fa-pencil"></i>
</a>

<a
href=""
class="onlinesrc-remove"
title="{{'remove' | translate}} {{r.title | gnLocalized: lang}}"
aria-label="{{'remove' | translate}} {{r.title | gnLocalized: lang}}"
data-gn-confirm-click="{{'removeOnlinesrcConfirm' | translate:{url: r.lUrl} }}"
data-gn-click-and-spin="onlinesrcService.removeOnlinesrc(convertLinkToEdit(r))"
>
<i class="fa fa-times text-danger"></i>
</a>
</div>
</div>

<!-- Display description if available -->
<p
data-ng-if="::r.locDescription.length > 0
Expand Down Expand Up @@ -238,42 +265,15 @@ <h3>
</div>
</div>

<div class="col-xs-12 col-sm-3">
<div class="row">
<div class="col-md-8 gn-nopadding-left gn-nopadding-right">
<a
href=""
class="onlinesrc-remove"
title="{{'edit' | translate}}"
aria-label="{{'edit' | translate}}"
data-ng-click="onlinesrcService.onOpenPopup('onlinesrc', convertLinkToEdit(r))"
>
<i class="fa fa-pencil"></i>
</a>

<a
href=""
class="onlinesrc-remove"
title="{{'remove' | translate}} {{r.title | gnLocalized: lang}}"
aria-label="{{'remove' | translate}} {{r.title | gnLocalized: lang}}"
data-gn-confirm-click="{{'removeOnlinesrcConfirm' | translate:{url: r.lUrl} }}"
data-gn-click-and-spin="onlinesrcService.removeOnlinesrc(convertLinkToEdit(r))"
>
<i class="fa fa-times text-danger"></i>
</a>
</div>

<button
type="button"
class="btn btn-default btn-sm btn-block gn-btn-addtoexternal text-wrap"
data-ng-if="externalViewerActionEnabled
<button
type="button"
class="btn btn-default btn-sm btn-block gn-btn-addtoexternal text-wrap"
data-ng-if="externalViewerActionEnabled
&& (mainType === 'WMS' || mainType === 'WMSSERVICE')"
data-ng-click="externalViewerAction(mainType, r, md)"
data-translate=""
>
viewInExternalViewer
</button>
</div>
</div>
data-ng-click="externalViewerAction(mainType, r, md)"
data-translate=""
>
viewInExternalViewer
</button>
</div>
</div>
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 @@ -1573,6 +1573,9 @@ gn-indexing-task-status {
.flex-self-center {
align-self: center;
}
.flex-self-right {
align-self: end;
}
.flex-gap-5 {
gap: 5px;
}
Expand Down
89 changes: 64 additions & 25 deletions web-ui/src/main/resources/catalog/views/default/less/gn_editor_default.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
@import "../../../style/gn_editor.less";
@import "gn_view.less";


.gn-results-editor {
.gn-status {
font-weight: 500;
Expand Down Expand Up @@ -100,7 +99,9 @@
.nav {
min-height: 42px;
}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
border-color: @panel-default-border;
}
div[data-gn-toggle] {
Expand All @@ -115,7 +116,12 @@
font-size: 12px;
font-weight: bold;
}
input[type=text], input[type=number], select, textarea.form-control, .form-control, .bootstrap-tagsinput {
input[type="text"],
input[type="number"],
select,
textarea.form-control,
.form-control,
.bootstrap-tagsinput {
border-color: #ddd;
box-shadow: none;
outline: 0;
Expand All @@ -129,7 +135,8 @@
.btn {
border-radius: @gn-border-radius;
}
.input-group-addon, .input-group-btn {
.input-group-addon,
.input-group-btn {
width: 0.1%;
}
@media (max-width: @screen-xs-max) {
Expand All @@ -153,8 +160,8 @@
background-position: right 50%;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
padding: .5em;
padding-right: 1.5em
padding: 0.5em;
padding-right: 1.5em;
}
fieldset {
padding: 0 0 5px 0;
Expand Down Expand Up @@ -186,7 +193,8 @@
content: "\f105";
}
table {
.col-sm-2, .col-sm-9 {
.col-sm-2,
.col-sm-9 {
padding-right: 0;
padding-left: 0;
}
Expand All @@ -196,7 +204,8 @@
fieldset {
margin: 0 0 10px 0;
padding: 0;
.col-sm-2, .col-sm-9 {
.col-sm-2,
.col-sm-9 {
padding-right: 15px;
padding-left: 15px;
}
Expand Down Expand Up @@ -237,7 +246,8 @@
}
// date and time
[data-gn-date-picker] {
.col-sm-9, .col-sm-12 {
.col-sm-9,
.col-sm-12 {
padding-left: 2px;
padding-right: 0;
@media (max-width: @screen-xs-max) {
Expand All @@ -247,7 +257,8 @@
}
// default switch
[data-ng-switch-default] {
.col-xs-8, .col-xs-4 {
.col-xs-8,
.col-xs-4 {
padding-left: 0;
padding-right: 0;
}
Expand Down Expand Up @@ -355,12 +366,16 @@
}
.gn-control {
padding-left: 0;
.field-tooltip, [data-gn-field-highlight-remove] {
.field-tooltip,
[data-gn-field-highlight-remove] {
padding: 6px;
}
}
.gn-multi-field {
label.gn-required:after, .gn-required > label:after, label.gn-mandatory:after, .gn-mandatory > label:after {
label.gn-required:after,
.gn-required > label:after,
label.gn-mandatory:after,
.gn-mandatory > label:after {
margin-top: -7px;
}
.col-sm-11 {
Expand Down Expand Up @@ -406,6 +421,30 @@
}
}
}
.onlinesrc-remove {
&:hover {
text-decoration: none;
}
}
.list-group-item {
padding: @gn-spacing;
}
#gn-editor-distribution-panel {
h2 {
font-size: 16px;
}
h3 {
display: inline-block;
font-size: 15px;
margin: @gn-spacing 0;
}
.list-group-item {
margin-top: -1px;
}
.alert {
margin-bottom: @gn-spacing-sm;
}
}
}
}
// map for Editor and Batch Editor
Expand Down Expand Up @@ -497,7 +536,8 @@ form.gn-editor.gn-label-above-input {
width: 65%;
}
// Cancel offset used in action
.col-xs-offset-2, .col-md-offset-2 {
.col-xs-offset-2,
.col-md-offset-2 {
margin-left: 0px;
}
div.gn-extra-field > label {
Expand Down Expand Up @@ -588,31 +628,31 @@ form.gn-editor.gn-indent-bluescale {

fieldset {
margin: 10px 15px;
border-left-color: ~'rgba(@{indent-color-r}, @{indent-color-g}, @{indent-color-b}, .9)';
border-left-color: ~"rgba(@{indent-color-r}, @{indent-color-g}, @{indent-color-b}, .9)";
legend {
padding-right: 11px;
font-size: 14px;
border-left-color: ~'rgba(@{indent-color-r}, @{indent-color-g}, @{indent-color-b}, .9)';
border-left-color: ~"rgba(@{indent-color-r}, @{indent-color-g}, @{indent-color-b}, .9)";
}
fieldset {
border-left-color: ~'rgba(@{indent-color-r}, @{indent-color-g}, @{indent-color-b}, .7)';
border-left-color: ~"rgba(@{indent-color-r}, @{indent-color-g}, @{indent-color-b}, .7)";
legend {
border-left-color: ~'rgba(@{indent-color-r}, @{indent-color-g}, @{indent-color-b}, .7)';
border-left-color: ~"rgba(@{indent-color-r}, @{indent-color-g}, @{indent-color-b}, .7)";
}
fieldset {
border-left-color: ~'rgba(@{indent-color-r}, @{indent-color-g}, @{indent-color-b}, .5)';
border-left-color: ~"rgba(@{indent-color-r}, @{indent-color-g}, @{indent-color-b}, .5)";
legend {
border-left-color: ~'rgba(@{indent-color-r}, @{indent-color-g}, @{indent-color-b}, .5)';
border-left-color: ~"rgba(@{indent-color-r}, @{indent-color-g}, @{indent-color-b}, .5)";
}
fieldset {
border-left-color: ~'rgba(@{indent-color-r}, @{indent-color-g}, @{indent-color-b}, .3)';
border-left-color: ~"rgba(@{indent-color-r}, @{indent-color-g}, @{indent-color-b}, .3)";
legend {
border-left-color: ~'rgba(@{indent-color-r}, @{indent-color-g}, @{indent-color-b}, .3)';
border-left-color: ~"rgba(@{indent-color-r}, @{indent-color-g}, @{indent-color-b}, .3)";
}
fieldset {
border-left-color: ~'rgba(@{indent-color-r}, @{indent-color-g}, @{indent-color-b}, .1)';
border-left-color: ~"rgba(@{indent-color-r}, @{indent-color-g}, @{indent-color-b}, .1)";
legend {
border-left-color: ~'rgba(@{indent-color-r}, @{indent-color-g}, @{indent-color-b}, .1)';
border-left-color: ~"rgba(@{indent-color-r}, @{indent-color-g}, @{indent-color-b}, .1)";
}
}
}
Expand All @@ -625,14 +665,13 @@ form.gn-editor.gn-indent-bluescale {
// inspire
// md type widget (used only in editor for now)
.fa-inspire {
background: url('../catalog/views/default/images/inspire.png');
background: url("../catalog/views/default/images/inspire.png");
background-repeat: no-repeat;
background-size: 16px 16px;
width: 16px;
height: 16px;
margin-top: 3px;
&:before {
content: "";

}
}

0 comments on commit c7930ce

Please sign in to comment.