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 {
@@ -12,3 +12,14 @@
 .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;
+  }
 }
 
 

pdb-js/src/assets/img/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 640 640" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"><path d="M479.64 23.8c36.544-37.111 95.954-37.277 132.71-.355 36.72 36.898 36.886 96.91.354 133.998L452.367 320.071 612.87 482.864c36.237 36.804 35.74 96.438-1.086 133.195-36.84 36.745-96.072 36.65-132.285-.165L320.07 454.234 160.36 616.203c-36.544 37.11-95.954 37.276-132.71.354-36.721-36.898-36.887-96.91-.355-133.998L187.632 319.93 27.13 157.137C-9.106 120.334-8.61 60.7 28.217 23.942c36.839-36.744 96.072-36.65 132.285.165l159.427 161.66L479.64 23.798z"/></svg>