Pdf file view redesign (#7188)

* [pdf file view] added 'find' operation icon; redesigned the 'find' bar * [pdf file view] the 'find' bar: updated the 'find previous/next' buttons; added a 'clear query' function * [pdf file view] 'print': redesigned the 'Preparing document for printing' dialog * [pdf file view] the 'find' bar: updated the styles of the border & the 'input' * [pdf file view] 'preparing document for printing' dialog: updated UI details * [pdf file view] 'preparing document for printing' dialog: modified the border & the backdrop
haiwen · Dec 17, 2024 · e645b29 · e645b29
1 parent d3d2335
commit e645b29
Show file tree

Hide file tree

Showing 6 changed files with 225 additions and 76 deletions.
diff --git a/frontend/src/components/file-view/file-toolbar.js b/frontend/src/components/file-view/file-toolbar.js
@@ -114,9 +114,18 @@ class FileToolbar extends React.Component {
       showShareBtn = download_external_link;
     }
 
+    const shortcutMain = Utils.isMac() ? '⌘ + ' : 'Ctrl + ';
+
     return (
       <Fragment>
         <div className="d-none d-md-flex justify-content-between align-items-center flex-shrink-0 ml-4">
+          {fileType == 'PDF' && (
+            <IconButton
+              id="seafile-pdf-find"
+              icon="search"
+              text={`${gettext('Find')}(${shortcutMain}F)`}
+            />
+          )}
           {(fileType == 'PDF' && canDownloadFile) && (
             <IconButton
               id="seafile-pdf-print"

diff --git a/frontend/src/components/file-view/file-view.js b/frontend/src/components/file-view/file-view.js
@@ -31,7 +31,7 @@ const propTypes = {
 
 const { isStarred, isLocked, lockedByMe,
   repoID, filePath, filePerm, enableWatermark, userNickName,
-  fileName, repoEncrypted, isRepoAdmin
+  fileName, repoEncrypted, isRepoAdmin, fileType
 } = window.app.pageOptions;
 
 class FileView extends React.Component {
@@ -146,7 +146,7 @@ class FileView extends React.Component {
                 />
               }
             </div>
-            <div className={`file-view-body flex-auto d-flex o-hidden ${(isOnlyofficeFile && !isHeaderShown) ? 'position-relative' : ''}`}>
+            <div className={`file-view-body flex-auto d-flex ${fileType == 'PDF' ? '' : 'o-hidden'} ${(isOnlyofficeFile && !isHeaderShown) ? 'position-relative' : ''}`}>
               {(isOnlyofficeFile && !isHeaderShown) &&
                 <IconButton
                   id="unfold-onlyoffice-file-view-header"

diff --git a/frontend/src/components/pdf-viewer.js b/frontend/src/components/pdf-viewer.js
@@ -62,17 +62,24 @@ class PDFViewer extends React.Component {
           {/* <!-- sidebarContainer -->*/}
 
           <div id="mainContainer">
-            <div className="findbar hidden doorHanger" id="findbar">
+            <div className="findbar hidden doorHanger d-flex align-items-center" id="findbar">
               <div id="findbarInputContainer">
-                <input id="findInput" className="toolbarField" title="Find" placeholder="Find in document…" tabIndex="91" data-l10n-id="find_input" aria-invalid="false" />
-                <div className="splitToolbarButton">
-                  <button id="findPrevious" className="toolbarButton" title="Find the previous occurrence of the phrase" tabIndex="92" data-l10n-id="find_previous">
-                    <span data-l10n-id="find_previous_label">Previous</span>
-                  </button>
-                  <div className="splitToolbarButtonSeparator"></div>
-                  <button id="findNext" className="toolbarButton" title="Find the next occurrence of the phrase" tabIndex="93" data-l10n-id="find_next">
-                    <span data-l10n-id="find_next_label">Next</span>
-                  </button>
+                <input id="findInput" className="form-control" title="Find" placeholder="Find in document…" tabIndex="91" data-l10n-id="find_input" aria-invalid="false" />
+                <div className="position-absolute d-flex align-items-center" id="findbarMiscContainer">
+                  <div id="findbarMessageContainer" aria-live="polite">
+                    <span id="findResultsCount"></span>
+                    <span id="findMsg" className="toolbarLabel d-none"></span>
+                  </div>
+                  <div className="splitToolbarButton m-0">
+                    <button id="findPrevious" className="hidden border-0 sf3-font sf3-font-down" title="Find the previous occurrence of the phrase" tabIndex="92" data-l10n-id="find_previous">
+                      <span data-l10n-id="find_previous_label" className="find-label">Previous</span>
+                    </button>
+                    <div className="splitToolbarButtonSeparator d-none"></div>
+                    <button id="findNext" className="hidden border-0 sf3-font sf3-font-down" title="Find the next occurrence of the phrase" tabIndex="93" data-l10n-id="find_next">
+                      <span data-l10n-id="find_next_label" className="find-label">Next</span>
+                    </button>
+                  </div>
+                  <button id="findClearQuery" className="hidden border-0 ml-1 sf3-font sf3-font-close"></button>
                 </div>
               </div>
 
@@ -88,11 +95,6 @@ class PDFViewer extends React.Component {
                 <input type="checkbox" id="findEntireWord" className="toolbarField" tabIndex="97" />
                 <label htmlFor="findEntireWord" className="toolbarLabel" data-l10n-id="find_entire_word_label">Whole Words</label>
               </div>
-
-              <div id="findbarMessageContainer" aria-live="polite">
-                <span id="findResultsCount" className="toolbarLabel"></span>
-                <span id="findMsg" className="toolbarLabel"></span>
-              </div>
             </div>
             {/* <!-- findbar -->*/}
 
@@ -404,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 rounded border-0 shadow-none">
+              <div className="modal-content">
+                <div className="modal-header">
+                  <h5 className="modal-title">{gettext('Print document')}</h5>
+                  <button type="button" id="printCancel2" className="align-self-center bg-transparent border-0 sf3-font sf3-font-x-01 modal-close" aria-label={gettext('Close')}></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
@@ -1,5 +1,5 @@
 .pdf-file-view {
-  overflow: hidden;
+  /*overflow: hidden; */
   position: relative;
   z-index: 0;
 }
@@ -35,7 +35,141 @@
 }
 
 #findbar {
-  top: -3px;
+  top: -7px;
+  right: 10px;
+  inset-inline-start: auto;
+  background: #fff;
+  padding: 8px;
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
+  margin: 0;
+}
+
+#findbar::before {
+  border-bottom-color: rgba(0, 40, 100, 0.12);
+  inset-inline-start: auto;
+  margin-inline-start: auto;
+  right: 272px;
+}
+
+#findbar::after {
+  inset-inline-start: auto;
+  margin-inline-start: auto;
+  border-bottom-color: #fff;
+  right: 273px;
+}
+
+#findbar * {
+  float: none;
+}
+
+#findbarInputContainer,
+#findbarOptionsOneContainer,
+#findbarOptionsTwoContainer {
+  height: auto;
+}
+
+#findInput {
+  margin: 0;
+  width: 300px;
+  height: 30px;
+  font-size: .875rem;
+}
+
+input#findInput {
+  font-size: .875rem;
+}
+
+#findInput[data-status="notFound"] {
+  background: inherit;
+}
+
+#findbarMiscContainer {
+  right: 5px;
+  top: 5px;
+}
+
+#findResultsCount {
+  background: inherit;
+  font-size: .75rem;
+  line-height: 20px;
+  color: #666666;
+  padding: 0 8px;
+  margin: 0;
+}
+
+#findPrevious,
+#findNext,
+#findClearQuery {
+  font-size: .75rem!important;
+  color: #666666;
+  width: 20px;
+  height: 20px;
+  background: transparent;
+  border-radius: 3px;
+}
+
+#findPrevious {
+  transform: rotate(180deg);
+}
+
+#findClearQuery {
+  font-size: .875rem!important;
+}
+
+#findPrevious:hover,
+#findNext:hover,
+#findClearQuery:hover {
+  background: #efefef;
+}
+
+#findPrevious::before,
+#findNext::before {
+  mask-image: none;
+}
+
+#findPrevious .find-label,
+#findNext .find-label {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+
+#findbar .toolbarLabel {
+  margin: 0 0 0 .5rem;
+  height: 30px;
+  line-height: 30px;
+  padding: 0 8px;
+  font-size: .875rem;
+  color: inherit;
+}
+
+.findbar .toolbarField[type="checkbox"]:checked + .toolbarLabel {
+  background: #e9e9e9!important;
+}
+
+#findbar .toolbarLabel:hover {
+  background: #f5f5f5;
+}
+
+#printServiceDialog {
+  font-size: inherit;
+}
+
+#printServiceDialog .modal-close {
+  outline: none;
+}
+
+#printServiceDialog .progress,
+#printServiceDialog .progress-bar {
+  height: 10px;
+  border-radius: 5px;
+}
+
+.pdf-file-view dialog::backdrop {
+  background-color: rgba(0, 0, 0);
+  opacity: 0.5;
 }
 
 .pdfViewer .page {

diff --git a/media/css/seahub_react.css b/media/css/seahub_react.css
@@ -1415,6 +1415,17 @@ a.table-sort-op:hover {
   white-space: nowrap;
 }
 
+.modal-close {
+  color: #000;
+  opacity: 0.5;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.modal-close:hover {
+  opacity: 0.75;
+}
+
 .word-break-all {
   word-break: break-all;
 }