[pdf viewer] added loading icon; adjusted the position of the scrollb… (

#5583) * [pdf viewer] added loading icon; adjusted the position of the scrollbar of the viewer container * [pdf file view] fixed UI of the image in the details panel
haiwen · Aug 11, 2023 · 5fc181a · 5fc181a
1 parent bb2892b
commit 5fc181a
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/frontend/src/components/pdf-viewer.js b/frontend/src/components/pdf-viewer.js
@@ -312,10 +312,11 @@ class PDFViewer extends React.Component {
                   </div>
                 </div>
                 <div id="loadingBar">
-                  <div className="progress">
+                  <span className="loading-icon loading-tip"></span>
+                  {/*<div className="progress">
                     <div className="glimmer">
                     </div>
-                  </div>
+                  </div>*/}
                 </div>
               </div>
             </div>

diff --git a/frontend/src/css/pdf-file-view.css b/frontend/src/css/pdf-file-view.css
@@ -24,8 +24,9 @@
 }
 
 #viewerContainer {
-  padding: 10px 0 32px;
+  padding: 10px 0 0;
   overflow: auto;
+  margin-bottom: 33px;
 }
 
 #viewerContainer:focus {
@@ -93,7 +94,12 @@ select#scaleSelect {
 }
 
 #loadingBar {
-  height: 0;
+  position: fixed;
+  top: 50%;
+  width: auto;
+  height: auto;
+  border: 0;
+  background: transparent;
 }
 
 input#pageNumber {
@@ -203,6 +209,16 @@ input#pageNumber {
   z-index: 999; /* 1049: for seahub 'share' dialog */
 }
 
+.dirent-info .img .thumbnail {
+  float: none;
+  width: auto;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+}
+
 @media print {
   #wrapper {
     display: none;