show big image in gallery view

pdb-js/src/app/gallery-view/gallery-item-view.component.html

@@ -1,6 +1,6 @@
 <div class="gallery-item">
   <div class="gallery-item"> 
-  <a href="{{data.imageUrl}}"><img src="{{data.thumbnailUrl}}" class="clickable"></a>  
+  <div (click)="openImage()"><img src="{{data.thumbnailUrl}}" class="clickable"></div>
   
   <div class="fieldValue">{{data.splitByValue}}</div>
   <div class="fieldStatsValue">Values: 
@@ -9,5 +9,15 @@
   </div>
   <div class="fieldStatsMaxValue">Max value: <span class="time">{{ formatMs(data.stats.maxValue) }}</span></div> 
   <div class="fieldStatsAverage">Average: <span class="time">{{ formatMs(data.stats.average) }}</span></div>
-  
+  <div
+    *ngIf="showImage"
+    class="gallery-item-big-image-container"
+    >
+    <img src="{{data.imageUrl}}" />
+    <div 
+        class="gallery-item-big-image-close clickable"
+        (click)="closeImage()"
+        title="Close"
+      ><img src="assets/img/close.svg" class="icon-small" /></div>
+  </div>
 </div>

pdb-js/src/app/gallery-view/gallery-item-view.component.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-flow: column;
   background: white;
-  box-shadow: 5px 5px 10px 0px #aaa;
+  box-shadow: 5px 5px 10px 0px #e0e0e0;
 }
 
 .gallery-item a {
@@ -11,4 +11,15 @@
 
 .gallery-item .fieldValue{
   word-break: break-all;
+}
+
+.gallery-item-big-image-container{
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.gallery-item-big-image-close{
+  position: absolute;
+  top: 0;
+  right: 0;
 }

pdb-js/src/app/gallery-view/gallery-view.component.ts

@@ -285,6 +285,8 @@ export class GalleryItemView {
   @Input()
   data: GalleryItem;
   
+  showImage: boolean= false;
+  
   
   formatMs(valueInMs):string {
     const ms = Math.floor(valueInMs % 1000);
@@ -308,6 +310,14 @@ export class GalleryItemView {
     
     return result;
   }
+  
+  openImage() {
+    this.showImage=true;
+  }
+  
+  closeImage(){
+    this.showImage=false;
+  }
 }