From e810cce5d1208201fbc10ec699e3ba959c0e53ed Mon Sep 17 00:00:00 2001
From: Wieland Lindenthal <w.lindenthal@forkmerge.com>
Date: Wed, 25 Mar 2020 15:08:30 +0100
Subject: [PATCH 1/2] Show more viewpoints in gallery at once

---
 .../bcf-wp-attribute-group.component.sass     | 15 +++++---
 .../bcf-wp-attribute-group.component.ts       | 36 +++++++++++++++----
 2 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/modules/bim/bcf/bcf-wp-attribute-group/bcf-wp-attribute-group.component.sass b/frontend/src/app/modules/bim/bcf/bcf-wp-attribute-group/bcf-wp-attribute-group.component.sass
index e85f21468f..70bf2aeec6 100644
--- a/frontend/src/app/modules/bim/bcf/bcf-wp-attribute-group/bcf-wp-attribute-group.component.sass
+++ b/frontend/src/app/modules/bim/bcf/bcf-wp-attribute-group/bcf-wp-attribute-group.component.sass
@@ -21,15 +21,20 @@ ngx-gallery ::ng-deep
     ngx-gallery-action:last-of-type .ngx-gallery-icon
       margin-right: 0
 
-  .ngx-gallery-thumbnail.ngx-gallery-clickable
-    .ngx-gallery-icon
-      font-size: 1.25rem
-      color: var(--content-link-color)
+  .ngx-gallery-thumbnail
+    background-color: white
+    &.ngx-gallery-clickable
+      .ngx-gallery-icon
+        font-size: 1.25rem
+        color: var(--content-link-color)
 
   // Disable red border on active thumbnails
   .ngx-gallery-active,
   .ngx-gallery-thumbnail
-    border: none !important
+    border: 1px solid #E7E7E7 !important
+
+  .ngx-gallery-preview-img
+    background-color: white
 
   // Decrease opacity of background to avoid content conflicts
   ngx-gallery-preview
diff --git a/frontend/src/app/modules/bim/bcf/bcf-wp-attribute-group/bcf-wp-attribute-group.component.ts b/frontend/src/app/modules/bim/bcf/bcf-wp-attribute-group/bcf-wp-attribute-group.component.ts
index 27f1e4e48d..92fc18107f 100644
--- a/frontend/src/app/modules/bim/bcf/bcf-wp-attribute-group/bcf-wp-attribute-group.component.ts
+++ b/frontend/src/app/modules/bim/bcf/bcf-wp-attribute-group/bcf-wp-attribute-group.component.ts
@@ -67,7 +67,8 @@ export class BcfWpAttributeGroupComponent extends UntilDestroyedMixin implements
       thumbnailsColumns: 1,
       // Ensure thumbnails are ALWAYS shown
       thumbnailsAutoHide: false,
-
+      // For BCFs all information shall be visible
+      thumbnailSize: 'contain',
       imageAnimation: '',
       previewAnimation: false,
       previewCloseOnEsc: true,
@@ -90,16 +91,19 @@ export class BcfWpAttributeGroupComponent extends UntilDestroyedMixin implements
     {
       breakpoint: 800,
       width: '100%',
-      height: '600px',
+      height: '400px',
       imagePercent: 80,
       thumbnailsPercent: 20,
-      thumbnailsMargin: 20,
-      thumbnailMargin: 20
+      thumbnailsMargin: 5,
+      thumbnailMargin: 5
     },
-    // max-width 400
+    // max-width 680
     {
-      breakpoint: 400,
+      breakpoint: 680,
       height: '200px',
+      thumbnailsColumns: 3,
+      thumbnailsMargin: 5,
+      thumbnailMargin: 5,
     }
   ];
 
@@ -263,6 +267,8 @@ export class BcfWpAttributeGroupComponent extends UntilDestroyedMixin implements
   protected setViewpoints(viewpoints:ViewpointItem[]) {
     const length = viewpoints.length;
 
+    this.setThumbnailProperties(length);
+
     if (this.showIndex < 0 || length < 1) {
       this.showIndex = 0;
     } else if (this.showIndex >= length) {
@@ -319,4 +325,22 @@ export class BcfWpAttributeGroupComponent extends UntilDestroyedMixin implements
       (this.viewpoints.length > 0 ||
         (this.createAllowed && this.viewerVisible));
   }
+
+  protected setThumbnailProperties(viewpointCount:number) {
+    const options = [...this.galleryOptions];
+
+    options[0].thumbnailsColumns = viewpointCount < 6 ? viewpointCount : 5;
+    options[1].thumbnailsColumns = viewpointCount < 5 ? viewpointCount : 4;
+    options[2].thumbnailsColumns = viewpointCount < 4 ? viewpointCount : 3;
+
+    options[0].height = `${this.dynamicThumbnailHeight(viewpointCount)}px`;
+    options[1].height = `${this.dynamicThumbnailHeight(viewpointCount)}px`;
+    options[2].height = `${this.dynamicThumbnailHeight(viewpointCount)}px`;
+
+    this.galleryOptions = options;
+  }
+
+  protected dynamicThumbnailHeight(viewpointCount:number):number {
+    return Math.max(Math.round(300 / viewpointCount), 120);
+  }
 }

From 00446366127335a2b68a397014ec29c4eba619d8 Mon Sep 17 00:00:00 2001
From: Wieland Lindenthal <w.lindenthal@forkmerge.com>
Date: Fri, 3 Apr 2020 17:16:02 +0200
Subject: [PATCH 2/2] Change maximum visible viewpoints to 4

---
 .../bcf-wp-attribute-group/bcf-wp-attribute-group.component.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/modules/bim/bcf/bcf-wp-attribute-group/bcf-wp-attribute-group.component.ts b/frontend/src/app/modules/bim/bcf/bcf-wp-attribute-group/bcf-wp-attribute-group.component.ts
index 92fc18107f..9a2df9e269 100644
--- a/frontend/src/app/modules/bim/bcf/bcf-wp-attribute-group/bcf-wp-attribute-group.component.ts
+++ b/frontend/src/app/modules/bim/bcf/bcf-wp-attribute-group/bcf-wp-attribute-group.component.ts
@@ -329,7 +329,7 @@ export class BcfWpAttributeGroupComponent extends UntilDestroyedMixin implements
   protected setThumbnailProperties(viewpointCount:number) {
     const options = [...this.galleryOptions];
 
-    options[0].thumbnailsColumns = viewpointCount < 6 ? viewpointCount : 5;
+    options[0].thumbnailsColumns = viewpointCount < 5 ? viewpointCount : 4;
     options[1].thumbnailsColumns = viewpointCount < 5 ? viewpointCount : 4;
     options[2].thumbnailsColumns = viewpointCount < 4 ? viewpointCount : 3;