[pdf file view] 'print': redesigned the 'Preparing document for print…

…ing' dialog
haiwen · Dec 13, 2024 · e695545 · e695545
1 parent a1f5829
commit e695545
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 10 deletions.
diff --git a/frontend/src/components/pdf-viewer.js b/frontend/src/components/pdf-viewer.js
@@ -406,16 +406,25 @@ class PDFViewer extends React.Component {
                 <button id="documentPropertiesClose" className="dialogButton"><span data-l10n-id="document_properties_close">Close</span></button>
               </div>
             </dialog>
-            <dialog id="printServiceDialog" style={{ minWidth: '200px' }}>
-              <div className="row">
-                <span data-l10n-id="print_progress_message">Preparing document for printing…</span>
-              </div>
-              <div className="row">
-                <progress value="0" max="100"></progress>
-                <span data-l10n-id="print_progress_percent" data-l10n-args='{ "progress": 0 }' className="relative-progress">0%</span>
-              </div>
-              <div className="buttonRow">
-                <button id="printCancel" className="dialogButton"><span data-l10n-id="print_progress_close">Cancel</span></button>
+            <dialog id="printServiceDialog" className="modal-dialog p-0">
+              <div className="modal-content">
+                <div className="modal-header">
+                  <h5 className="modal-title">{gettext('Print document')}</h5>
+                  <button type="button" id="printCancel2" className="close sf3-font sf3-font-close" aria-label={gettext('Close')} autoFocus={false}></button>
+                </div>
+                <div className="modal-body py-6">
+                  <p className="mb-2">
+                    <span data-l10n-id="print_progress_message">Preparing document for printing…</span>
+                    <span data-l10n-id="print_progress_percent" data-l10n-args='{ "progress": 0 }' className="relative-progress">0%</span>
+                  </p>
+                  <progress value="0" max="100" className="d-none"></progress>
+                  <div className="progress">
+                    <div className="progress-bar" role="progressbar" style={{ width: '0%' }} aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+                  </div>
+                </div>
+                <div className="modal-footer">
+                  <button id="printCancel" className="btn btn-secondary"><span data-l10n-id="print_progress_close">Cancel</span></button>
+                </div>
               </div>
             </dialog>
           </div>

diff --git a/frontend/src/css/pdf-file-view.css b/frontend/src/css/pdf-file-view.css
@@ -150,6 +150,16 @@ input#findInput {
   background: #f5f5f5;
 }
 
+#printServiceDialog {
+  font-size: inherit;
+}
+
+#printServiceDialog .progress,
+#printServiceDialog .progress-bar {
+  height: 10px;
+  border-radius: 5px;
+}
+
 .pdfViewer .page {
   position: relative;
   background: #fff;

diff --git a/media/js/pdf/web/viewer.js b/media/js/pdf/web/viewer.js