add button to load a feature's relations fully (if incomplete), fixes #5420

CHANGELOG.md

@@ -38,6 +38,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 # Unreleased (2.29.0-dev)
 
 #### :tada: New Features
+* Add button to fully load incompletely downloaded relations ([#5420])
 #### :sparkles: Usability & Accessibility
 #### :scissors: Operations
 #### :camera: Street-Level
@@ -51,7 +52,8 @@ _Breaking developer changes, which may affect downstream projects or sites that
 #### :rocket: Presets
 #### :hammer: Development
 
-[#10135]: https://github.com/openstreetmap/iD/issues/10135#
+[#5420]: https://github.com/openstreetmap/iD/issues/5420
+[#10135]: https://github.com/openstreetmap/iD/issues/10135
 [@Sushil642]: https://github.com/Sushil642
 
 

css/80_app.css

@@ -504,6 +504,12 @@ button.disabled .icon.operation use,
     vertical-align: baseline;
 }
 
+button.loading .icon {
+    background-image: url(img/mini-loader.gif);
+    background-position: 0 0;
+    background-size: auto;
+}
+
 
 /* Toolbar / Persistent UI Elements
 ------------------------------------------------------- */

modules/ui/sections/raw_member_editor.js

@@ -46,7 +46,7 @@ export function uiSectionRawMemberEditor(context) {
         d3_event.preventDefault();
 
         // display the loading indicator
-        d3_select(this.parentNode).classed('tag-reference-loading', true);
+        d3_select(this).classed('loading', true);
         context.loadEntity(d.id, function() {
             section.reRender();
         });

modules/ui/sections/raw_membership_editor.js

@@ -206,6 +206,18 @@ export function uiSectionRawMembershipEditor(context) {
     }
 
 
+    function downloadMembers(d3_event, d) {
+        d3_event.preventDefault();
+        const button = d3_select(this);
+
+        // display the loading indicator
+        button.classed('loading', true);
+        context.loadEntity(d.relation.id, function() {
+            section.reRender();
+        });
+    }
+
+
     function deleteMembership(d3_event, d) {
         this.blur();           // avoid keeping focus on the button
         if (d === 0) return;   // called on newrow (shouldn't happen)
@@ -376,6 +388,13 @@ export function uiSectionRawMembershipEditor(context) {
             .style('border-color', d => d.relation.tags.colour)
             .text(function(d) { return utilDisplayName(d.relation); });
 
+        labelEnter
+            .append('button')
+            .attr('class', 'members-download')
+            .attr('title', t('icons.download'))
+            .call(svgIcon('#iD-icon-load'))
+            .on('click', downloadMembers);
+
         labelEnter
             .append('button')
             .attr('class', 'remove member-delete')
@@ -390,6 +409,13 @@ export function uiSectionRawMembershipEditor(context) {
             .call(svgIcon('#iD-icon-framed-dot', 'monochrome'))
             .on('click', zoomToRelation);
 
+        items = items.merge(itemsEnter);
+        items.selectAll('button.members-download')
+            .classed('hide', d => {
+                const graph = context.graph();
+                return d.relation.members.every(m => graph.hasEntity(m.id));
+            });
+
         var wrapEnter = itemsEnter
             .append('div')
             .attr('class', 'form-field-input-wrap form-field-input-member');