use new parentAndChildDetails property on an image response, to add extra sections (with thumbnails) in the bottom left of the sidebar (below crops etc.)

Author: twrichards

kahuna/public/js/image/controller.js

@@ -169,6 +169,8 @@ image.controller('ImageCtrl', [
       ctrl.canUserEdit = editable;
     });
 
+    ctrl.objectHasEntries = obj => obj && Object.keys(obj).length > 0;
+
     const usages = imageUsagesService.getUsages(ctrl.image);
     const usagesCount$ = usages.count$;
 

kahuna/public/js/image/view.html

@@ -151,6 +151,29 @@
             class="image-details__delete-crops"
             gr-image="ctrl.image"
             gr-on-delete="ctrl.onCropsDeleted()"></gr-delete-crops>
+
+    <div class="image-info image-details--scroll" style="margin-top: auto; max-height: 50%">
+        <div ng-repeat="(title, idToDetailMap) in ctrl.image.data.parentAndChildDetails">
+            <div class="image-info__group image-info__group--bottom" aria-label="{{title}}"
+                 ng-if="ctrl.objectHasEntries(idToDetailMap)">
+                <dl class="image-info__group--dl">
+                    <dt class="image-info__heading">{{title}}</dt>
+                    <dd class="image-info__heading--crops"
+                        ng-repeat="(id, detail) in idToDetailMap">
+                        <a ui-sref="image({imageId: id})"
+                           aria-label="View {{title}}">
+                            <img class="image-crop__image"
+                                 alt="{{title}} {{id}} thumbnail"
+                                 ng-src="{{detail.thumbnail}}" />
+                        </a>
+                        <!--                        <div class="image-crop__aspect-ratio">-->
+                        <!--                            Added by {{detail.addedBy}}-->
+                        <!--                        </div>-->
+                    </dd>
+                </dl>
+            </div>
+        </div>
+    </div>
 </div>
 
 <div class="image-details image-details--full-image" role="complementary" aria-label="Image information">

kahuna/public/stylesheets/main.css

@@ -2101,7 +2101,8 @@ FIXME: what to do with touch devices
 }
 
 .image-details__delete-crops {
-    width: 100%;
+  width: 100%;
+  outline: 1px solid #565656;
 }
 
 .image-details:after {
@@ -2121,6 +2122,11 @@ FIXME: what to do with touch devices
     border-bottom: 1px solid #565656;
 }
 
+.image-info__group--bottom {
+  border-bottom: 0;
+  border-top: 1px solid #565656;
+}
+
 .image-info__group--last {
     border-bottom: 0;
     clear: both;