improvements to share links on mobile devices

This commit is contained in:
shamoon 2023-08-16 00:57:10 -07:00
parent 603da83705
commit 8021c4e385
4 changed files with 19 additions and 11 deletions

View File

@ -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)">

View File

@ -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 {

View File

@ -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) {

View File

@ -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" />