Skip to content

Commit

Permalink
improves map card styles, RE: #4670
Browse files Browse the repository at this point in the history
  • Loading branch information
@robgaston
robgaston committed Jun 28, 2019
1 parent 8493ee7 commit bfc731b
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 18 deletions.
8 changes: 8 additions & 0 deletions arches/app/media/css/arches.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1351,6 +1351,14 @@ ul.tabbed-report-tab-list {
content: "\f205";
}

.map-card-feature-tool {
font-size: 0.9em;
width: 65px;
}
.map-card-feature-tool a {
color: #2f527a;
}

#map-settings {
position: relative;
margin: -40px -35px 10px -20px;
Expand Down
4 changes: 4 additions & 0 deletions arches/app/media/js/views/components/cards/map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ define([
map.setStyle(style);
};

this.selectedFeatures = ko.observableArray();
this.draw = null;
this.map.subscribe(function(map) {
self.draw = new MapboxDraw({
Expand All @@ -139,6 +140,9 @@ define([
map.on('draw.update', updateFeatures);
map.on('draw.delete', updateFeatures);
map.on('draw.modechange', updateFeatures);
map.on('draw.selectionchange', function(e) {
self.selectedFeatures(e.features);
});

self.form.on('tile-reset', function() {
self.draw.set({
Expand Down
54 changes: 36 additions & 18 deletions arches/app/templates/views/components/map-editor.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,8 @@

{% block sidepanel %}
<!--ko if: activeTab() === 'editor' -->
<h4 class="map-card-sidepanel-header" data-bind="click: hideSidePanel">
{% trans "Edit Data" %}
</h4>
<div class="card-component" data-bind="css: card.model.cssclass">
<h4 class="map-card-sidepanel-header" data-bind="click: hideSidePanel, text: card.model.name"></h4>
<div data-bind="css: card.model.cssclass">

<!-- ko if: reviewer && provisionalTileViewModel.selectedProvisionalEdit() -->
<div class="edit-message-container">
Expand Down Expand Up @@ -47,15 +45,23 @@ <h4 class="map-card-sidepanel-header" data-bind="click: hideSidePanel">
<div class='new-provisional-edits-list'>
<div class='new-provisional-edits-header'>
<div class='new-provisional-edits-title'>{% trans 'Provisional Edits' %}</div>
<div class="btn btn-shim btn-danger btn-labeled btn-xs fa fa-trash new-provisional-edits-delete-all" style="padding: 3px;" data-bind="click: function(){provisionalTileViewModel.deleteAllProvisionalEdits()}">{% trans 'Delete all edits' %}</div>
<div class="btn btn-shim btn-danger btn-labeled btn-xs fa fa-trash new-provisional-edits-delete-all" style="padding: 3px;" data-bind="click: function(){
provisionalTileViewModel.deleteAllProvisionalEdits();
}">{% trans 'Delete all edits' %}</div>
</div>
<!-- ko foreach: { data: provisionalTileViewModel.provisionaledits(), as: 'pe' } -->
<div class='new-provisional-edit-entry' data-bind="css: {'selected': pe === $parent.provisionalTileViewModel.selectedProvisionalEdit()}, click: function(){$parent.provisionalTileViewModel.selectProvisionalEdit(pe)}">
<div class='new-provisional-edit-entry' data-bind="css: {
'selected': pe === $parent.provisionalTileViewModel.selectedProvisionalEdit()
}, click: function(){
$parent.provisionalTileViewModel.selectProvisionalEdit(pe);
}">
<div class='title'>
<div class='field'>
<span data-bind="text : pe.username"></span>
</div>
<a href='' class='field fa fa-times-circle new-delete-provisional-edit' data-bind="click : function(){$parent.provisionalTileViewModel.rejectProvisionalEdit(pe)}"></a>
<a href='' class='field fa fa-times-circle new-delete-provisional-edit' data-bind="click : function(){
$parent.provisionalTileViewModel.rejectProvisionalEdit(pe);
}"></a>
</div>
<div class="field timestamp">
<span data-bind="text : pe.displaydate">@</span>
Expand All @@ -70,10 +76,6 @@ <h4 class="map-card-sidepanel-header" data-bind="click: hideSidePanel">

<div class="card">
{% block form_header %}
<h4 data-bind="text: card.model.name"></h4>
<!-- ko if: card.isFuncNode && card.isFuncNode() -->
<h4 data-bind="text: card.isFuncNode()"></h4>
<!-- /ko -->
<!-- ko if: card.model.helpenabled -->
<span>
<a class="pull-right card-help help editable-help" data-bind="click: function () {
Expand Down Expand Up @@ -116,13 +118,29 @@ <h5 data-bind="text: card.model.instructions"></h5>
<option value="draw_polygon">Add polygon</option>
</select>
</div>
<!-- ko foreach: {data: self.featureLookup[widget.node_id()].features, as: 'feature'} -->
<div>
<i class="fa fa-pencil" data-bind="click: function() { self.editFeature(feature) }"></i>
<i class="fa fa-times-circle-o" data-bind="click: function() { self.deleteFeature(feature) }"></i>
<span data-bind="text: feature.geometry.type"></span>
</div>
<!-- /ko -->
<table class="table">
<tbody>
<!-- ko foreach: {data: self.featureLookup[widget.node_id()].features, as: 'feature'} -->
<tr class="map-card-feature-item">
<td>
<span class="map-card-feature-name" data-bind="text: feature.geometry.type"></span>
</td>
<td class="map-card-feature-tool">
<a href="javascript:void(0);" data-bind="click: function() { self.editFeature(feature) }">
<i class="fa fa-pencil map-card-feature-edit"></i>
Edit
</a>
</td>
<td class="map-card-feature-tool">
<a href="javascript:void(0);" data-bind="click: function() { self.deleteFeature(feature) }">
<i class="fa fa-times-circle-o map-card-feature-delete"></i>
Delete
</a>
</td>
</tr>
<!-- /ko -->
</tbody>
</table>
</div>
</div>
</div>
Expand Down

0 comments on commit bfc731b

Please sign in to comment.