From f6fd2ccc0235e98ca59c3f94af81593bf863120e Mon Sep 17 00:00:00 2001
From: "Patrik J. Braun" <bra.patrik@gmail.com>
Date: Sat, 8 May 2021 09:06:56 +0200
Subject: [PATCH] Improving zip folder download link

---
 .../navigator/navigator.gallery.component.css | 11 ++++++---
 .../navigator.gallery.component.html          | 23 +++++++++++++------
 .../navigator/navigator.gallery.component.ts  | 10 ++++++--
 3 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.css b/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.css
index fa7a843d..5c33782c 100644
--- a/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.css
+++ b/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.css
@@ -14,8 +14,13 @@
   display: inline-block;
 }
 
-.divider{
-  margin: 5px 10px;
+.btn-download {
+  padding-left: 1px;
+  padding-right: 1px;
+}
+
+.divider {
+  margin: 5px 5px 5px 10px;
   border-left: 1px solid #6c757d;
   display: inline-block;
 }
@@ -43,6 +48,6 @@ nav {
 }
 
 
-.search-type{
+.search-type {
   margin-left: 5px;
 }
diff --git a/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html b/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html
index 363e28cd..6d8dcda7 100644
--- a/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html
+++ b/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html
@@ -15,13 +15,22 @@
   </ol>
 
   <div class="right-side">
-    <a *ngIf="config.Client.Other.enableDownloadZip && directory && ItemCount > 0" [href]="getDownloadZipLink()"
-      [queryParams]="queryService.getParams()">Download</a>
-    <div class="divider" *ngIf="directory && ItemCount > 0">&nbsp;</div>
-    <div class="photos-count" *ngIf="ItemCount > 0 && config.Client.Other.NavBar.showItemCount">
-      {{ItemCount}} <span i18n>items</span>
-    </div>
-    <div class="divider" *ngIf="ItemCount > 0 && config.Client.Other.NavBar.showItemCount">&nbsp;</div>
+    <ng-container *ngIf="ItemCount > 0 && config.Client.Other.NavBar.showItemCount">
+      <div class="photos-count">
+        {{ItemCount}} <span i18n>items</span>
+      </div>
+      <div class="divider">&nbsp;</div>
+    </ng-container>
+
+    <ng-container *ngIf="config.Client.Other.enableDownloadZip && directory && ItemCount > 0">
+      <a *ngIf="config.Client.Other.enableDownloadZip && directory && ItemCount > 0"
+         [href]="getDownloadZipLink()"
+         class="btn  btn-download">
+         <span class="oi oi-data-transfer-download"
+               title="download" i18n-title></span>
+      </a>
+      <div class="divider">&nbsp;</div>
+    </ng-container>
     <div class="btn-group" dropdown placement="bottom right">
       <button id="button-alignment" dropdownToggle type="button"
               class="btn btn-secondary dropdown-toggle"
diff --git a/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.ts b/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.ts
index a1bcfeb9..9bcaa005 100644
--- a/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.ts
+++ b/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.ts
@@ -1,7 +1,7 @@
 import {Component, Input, OnChanges} from '@angular/core';
 import {DirectoryDTO} from '../../../../../common/entities/DirectoryDTO';
 import {RouterLink} from '@angular/router';
-import {UserDTO, UserDTOUtils} from '../../../../../common/entities/UserDTO';
+import {UserDTOUtils} from '../../../../../common/entities/UserDTO';
 import {AuthenticationService} from '../../../model/network/authentication.service';
 import {QueryService} from '../../../model/query.service';
 import {GalleryService} from '../gallery.service';
@@ -94,7 +94,13 @@ export class GalleryNavigatorComponent implements OnChanges {
   }
 
   getDownloadZipLink(): string {
-    return Utils.concatUrls(Config.Client.urlBase, '/api/gallery/zip/', this.getDirectoryPath());
+    let queryParams = '';
+    Object.entries(this.queryService.getParams()).forEach(e => {
+      queryParams += e[0] + '=' + e[1];
+    });
+    return Utils.concatUrls(Config.Client.urlBase,
+      '/api/gallery/zip/',
+      this.getDirectoryPath(), '?' + queryParams);
   }
 
   getDirectoryPath(): string {