Merge pull request #1337 from nextcloud/backport/1334/stable31

[stable31] fix: Show save button in secondary toolbar for editable files

Author: danxuliu

css/viewer.css

@@ -26,7 +26,8 @@
 
 /* Replace default "Download" icon in "Download / Save" button with a "Save"
  * icon. */
-.toolbarButton#download::before {
+.toolbarButton#download::before,
+.secondaryToolbarButton#secondaryDownload::before {
 	-webkit-mask-image: url(../img/toolbarButton-secondaryToolbarSave.svg);
 	mask-image: url(../img/toolbarButton-secondaryToolbarSave.svg);
 }
@@ -38,7 +39,8 @@
 
 /* Hide the normal toolbar icon, which is a mask applied on a dark background,
  * when showing the loading icon. */
-.toolbarButton.icon-loading-small:before {
+.toolbarButton.icon-loading-small:before,
+.secondaryToolbarButton.icon-loading-small:before {
 	background-color: unset;
 }
 
@@ -68,6 +70,13 @@
 	border-top-color: var(--color-loading-dark);
 }
 
+/* Place the loading icon on the secondary toolbar icon by using the same
+ * inset-inline-start of the secondary toolbar icon (12px) and correcting the
+ * margin from the loading icon (8px). */
+.secondaryToolbarButton.icon-loading-small:after {
+	inset-inline-start: 20px;
+}
+
 @keyframes rotate {
 	from {
 		transform: rotate(0deg);

js/files_pdfviewer-main.js

@@ -110,6 +110,7 @@ export default {
 			if (this.isEditable) {
 				this.$nextTick(() => {
 					this.getDownloadElement().removeAttribute('hidden')
+					this.getSecondaryDownloadElement().removeAttribute('hidden')
 				})
 			}
 		},
@@ -124,6 +125,10 @@ export default {
 			return this.getIframeDocument().getElementById('download')
 		},
 
+		getSecondaryDownloadElement() {
+			return this.getIframeDocument().getElementById('secondaryDownload')
+		},
+
 		getViewerTemplateParameter(parameterName) {
 			// templates/viewer.php provides the PDF viewer parameters in the
 			// data attributes of the head element.
@@ -195,6 +200,7 @@ export default {
 					onSetModifiedOriginal.apply(null, arguments)
 
 					this.getDownloadElement().removeAttribute('disabled')
+					this.getSecondaryDownloadElement().removeAttribute('disabled')
 				}
 			})
 
@@ -261,6 +267,10 @@ export default {
 			downloadElement.setAttribute('disabled', 'disabled')
 			downloadElement.classList.add('icon-loading-small')
 
+			const secondaryDownloadElement = this.getSecondaryDownloadElement()
+			secondaryDownloadElement.setAttribute('disabled', 'disabled')
+			secondaryDownloadElement.classList.add('icon-loading-small')
+
 			logger.info('PDF Document with annotation is being saved')
 
 			this.PDFViewerApplication.pdfDocument.saveDocument().then((data) => {
@@ -276,8 +286,10 @@ export default {
 				// successful it will be enabled again when a new annotation is
 				// added.
 				downloadElement.removeAttribute('disabled')
+				secondaryDownloadElement.removeAttribute('disabled')
 			}).finally(() => {
 				downloadElement.classList.remove('icon-loading-small')
+				secondaryDownloadElement.classList.remove('icon-loading-small')
 			})
 		},
 	},

js/files_pdfviewer-main.js.map

@@ -190,7 +190,7 @@
               <span data-l10n-id="pdfjs-print-button-label">Print</span>
             </button>
 
-            <button id="secondaryDownload" class="secondaryToolbarButton visibleMediumView" title="Save" tabindex="53" data-l10n-id="pdfjs-save-button" hidden="true">
+            <button id="secondaryDownload" class="secondaryToolbarButton visibleMediumView" disabled="disabled" title="Save" tabindex="53" data-l10n-id="pdfjs-save-button" hidden="true">
               <span data-l10n-id="pdfjs-save-button-label">Save</span>
             </button>