From 8021c4e38591426de6523c8e32e5835e0fc117e0 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 16 Aug 2023 00:57:10 -0700
Subject: [PATCH] improvements to share links on mobile devices

---
 .../share-links-dropdown.component.html             |  4 ++--
 .../share-links-dropdown.component.scss             |  7 +++++++
 .../share-links-dropdown.component.ts               |  6 ++++--
 .../document-detail/document-detail.component.html  | 13 ++++++-------
 4 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.html b/src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.html
index e4e24bb22..4c742de5a 100644
--- a/src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.html
+++ b/src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.html
@@ -22,9 +22,9 @@
                 <use *ngIf="copied === link.id" xlink:href="assets/bootstrap-icons.svg#clipboard-check-fill" />
               </svg><span class="visually-hidden" i18n>Copy</span>
             </button>
-            <button *ngIf="canShare()" type="button" class="btn btn-sm btn-outline-primary" (click)="share(link)">
+            <button *ngIf="canShare(link)" type="button" class="btn btn-sm btn-outline-primary" (click)="share(link)">
               <svg class="buttonicon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#share" />
+                <use xlink:href="assets/bootstrap-icons.svg#box-arrow-up" />
               </svg><span class="visually-hidden" i18n>Share</span>
             </button>
             <button type="button" class="btn btn-sm btn-outline-danger" (click)="delete(link)">
diff --git a/src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.scss b/src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.scss
index 26797bad0..47e19d871 100644
--- a/src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.scss
+++ b/src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.scss
@@ -1,5 +1,12 @@
 .share-links-dropdown {
     min-width: 350px;
+
+    // correct position on mobile
+    @media (max-width: 575.98px) {
+        &.show {
+            margin-left: -175px !important;
+        }
+    }
 }
 
 .copied-badge {
diff --git a/src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.ts b/src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.ts
index 972551d2b..de605846d 100644
--- a/src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.ts
+++ b/src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.ts
@@ -93,8 +93,10 @@ export class ShareLinksDropdownComponent implements OnInit {
     }, 3000)
   }
 
-  canShare(): boolean {
-    return navigator && 'canShare' in navigator && navigator.canShare()
+  canShare(link: PaperlessShareLink): boolean {
+    return (
+      navigator?.canShare && navigator.canShare({ url: this.getShareUrl(link) })
+    )
   }
 
   share(link: PaperlessShareLink) {
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
index 11237cce9..0bb2c78b1 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -5,7 +5,7 @@
       <div class="input-group-text" i18n>of {{previewNumPages}}</div>
     </div>
 
-    <button type="button" class="btn btn-sm btn-outline-danger me-5" (click)="delete()" [disabled]="!userIsOwner" *appIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }">
+    <button type="button" class="btn btn-sm btn-outline-danger me-4" (click)="delete()" [disabled]="!userIsOwner" *appIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }">
         <svg class="buttonicon" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#trash" />
         </svg><span class="d-none d-lg-inline ps-1" i18n>Delete</span>
@@ -13,7 +13,7 @@
 
     <div class="btn-group me-2">
         <a [href]="downloadUrl" class="btn btn-sm btn-outline-primary">
-            <svg class="buttonicon me-1" fill="currentColor">
+            <svg class="buttonicon me-md-1" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#download" />
             </svg><span class="d-none d-lg-inline ps-1" i18n>Download</span>
         </a>
@@ -26,9 +26,6 @@
         </div>
     </div>
 
-
-    <app-share-links-dropdown [documentId]="documentId" *appIfPermissions="{ action: PermissionAction.Add, type: PermissionType.ShareLink }"></app-share-links-dropdown>
-
     <div ngbDropdown>
         <button class="btn btn-sm btn-outline-primary me-2" id="actionsDropdown" ngbDropdownToggle>
           <svg class="toolbaricon" fill="currentColor">
@@ -40,17 +37,19 @@
           <button ngbDropdownItem (click)="redoOcr()" [disabled]="!userCanEdit">
               <svg class="buttonicon-sm" fill="currentColor">
                   <use xlink:href="assets/bootstrap-icons.svg#arrow-counterclockwise" />
-              </svg><span class="d-none d-lg-inline ps-1" i18n>Redo OCR</span>
+              </svg><span class="ps-1" i18n>Redo OCR</span>
           </button>
 
           <button ngbDropdownItem (click)="moreLike()">
               <svg class="buttonicon-sm" fill="currentColor">
                   <use xlink:href="assets/bootstrap-icons.svg#diagram-3" />
-              </svg><span class="d-none d-lg-inline ps-1" i18n>More like this</span>
+              </svg><span class="ps-1" i18n>More like this</span>
           </button>
         </div>
     </div>
 
+    <app-share-links-dropdown [documentId]="documentId" *appIfPermissions="{ action: PermissionAction.Add, type: PermissionType.ShareLink }"></app-share-links-dropdown>
+
     <button type="button" class="btn btn-sm btn-outline-primary me-2" i18n-title title="Close" (click)="close()">
         <svg class="buttonicon" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#x" />