Change pdf viewer style (#7860)

* 01 change font color

* 02 change pdf viewer style

* 03 change sidebar header name

frontend/src/components/pdf-viewer.js

@@ -16,8 +16,9 @@ class PDFViewer extends React.Component {
 
           <div id="sidebarContainer">
             <div id="toolbarSidebar">
-              <div id="thumbnails-header" className="p-4 d-flex justify-content-between">
-                <h3 className="m-0 title font-weight-normal">{gettext('Thumbnail')}</h3>
+              <div id="sidebarHeader" className="px-4 py-2 d-flex justify-content-between align-items-center">
+                <h3 id="thumbnailHeader" className="m-0 title font-weight-normal">{gettext('Thumbnail')}</h3>
+                <h3 id="outlineHeader" className="m-0 title font-weight-normal hidden">{gettext('Outline')}</h3>
                 <button id="close-thumbnail-panel" className="close-thumbnail-panel sf2-icon-x3 border-0 bg-transparent" aria-controls="sidebarContainer"></button>
               </div>
               <div id="toolbarSidebarLeft" className="sf-hide">
@@ -37,7 +38,7 @@ class PDFViewer extends React.Component {
                 </div>
               </div>
 
-              <div id="toolbarSidebarRight">
+              <div id="toolbarSidebarRight" className="sf-hide">
                 <div id="outlineOptionsContainer" className="hidden">
                   <div className="verticalToolbarSeparator"></div>
 

frontend/src/css/pdf-file-view.css

@@ -1,5 +1,4 @@
 .pdf-file-view {
-  /*overflow: hidden; */
   position: relative;
   z-index: 0;
 }
@@ -212,7 +211,6 @@ select#scaleSelect {
   left: 0;
   position: absolute;
   right: 0;
-  /*z-index: 1000;*/
   z-index: 998; /* for seahub */
   padding: 3px 6px;
 }
@@ -224,7 +222,6 @@ select#scaleSelect {
   left: 0;
   right: 0;
   bottom: 0;
-  /*z-index: 9999;*/
   z-index: 998; /* 1048: for seahub 'file view' */
 }
 
@@ -276,20 +273,20 @@ input#pageNumber {
   padding: 0;
 }
 
-#thumbnails-header .title {
-  font-size: 1rem;
+#sidebarHeader .title {
+  font-size: 14px;
 }
 
-#thumbnails-header .sf2-icon-x3 {
+#sidebarHeader .sf2-icon-x3 {
   font-family: 'seafile-font2';
 }
 
-#thumbnails-header .close-thumbnail-panel {
+#sidebarHeader .close-thumbnail-panel {
   font-size: 1rem;
   color: #999;
 }
 
-#thumbnails-header .close-thumbnail-panel:hover {
+#sidebarHeader .close-thumbnail-panel:hover {
   color: #666;
 }
 
@@ -328,7 +325,7 @@ input#pageNumber {
 }
 
 #sidebarContent {
-  inset-block: 51.5px 0;
+  inset-block: 36px 0;
 }
 
 .splitToolbarButton > .toolbarButton {
@@ -343,7 +340,6 @@ input#pageNumber {
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.2);
-  /*z-index: 40000;*/
   z-index: 999; /* 1049: for seahub 'share' dialog */
 }
 
@@ -362,3 +358,10 @@ input#pageNumber {
     display: none;
   }
 }
+
+#thumbnailView,
+#outlineView,
+#attachmentsView,
+#layersView {
+  width: calc(100%);
+}

frontend/src/css/view-modes.css

@@ -27,7 +27,7 @@
 .view-modes-dropdown-shortcut {
   display: flex;
   align-items: center;
-  color: #999;
+  color: #666;
 }
 
 .dropdown-item:hover .view-modes-dropdown-shortcut {

media/css/seahub.css

@@ -2178,7 +2178,7 @@ a.sf-popover-item {
 }
 
 #login-with-wechat {
-  color: #a6a6a6;
+  color: #666;
 }
 
 .login-with-wechat-deco {

media/js/pdf/web/viewer.css

@@ -1157,8 +1157,8 @@
   --field-border-color: rgba(187, 187, 188, 1);
   --treeitem-color: rgba(0, 0, 0, 0.8);
   --treeitem-bg-color: rgba(0, 0, 0, 0.15);
-  --treeitem-hover-color: rgba(0, 0, 0, 0.9);
-  --treeitem-selected-color: rgba(0, 0, 0, 0.9);
+  --treeitem-hover-color: #ED7109;
+  --treeitem-selected-color: #ED7109;
   --treeitem-selected-bg-color: rgba(0, 0, 0, 0.25);
   --thumbnail-hover-color: rgba(0, 0, 0, 0.1);
   --thumbnail-selected-color: rgba(0, 0, 0, 0.2);
@@ -1245,8 +1245,8 @@
     --field-border-color: rgba(115, 115, 115, 1);
     --treeitem-color: rgba(255, 255, 255, 0.8);
     --treeitem-bg-color: rgba(255, 255, 255, 0.15);
-    --treeitem-hover-color: rgba(255, 255, 255, 0.9);
-    --treeitem-selected-color: rgba(255, 255, 255, 0.9);
+    --treeitem-hover-color: #ED7109;
+    --treeitem-selected-color: #ED7109;
     --treeitem-selected-bg-color: rgba(255, 255, 255, 0.25);
     --thumbnail-hover-color: rgba(255, 255, 255, 0.1);
     --thumbnail-selected-color: rgba(255, 255, 255, 0.2);
@@ -2412,7 +2412,6 @@ a:focus > .thumbnail > .thumbnailImage,
 }
 
 .treeItem.selected > a {
-  background-color: var(--treeitem-selected-bg-color);
   color: var(--treeitem-selected-color);
 }
 
@@ -2420,9 +2419,6 @@ a:focus > .thumbnail > .thumbnailImage,
 .treeItemToggler:hover + a,
 .treeItemToggler:hover ~ .treeItems,
 .treeItem > a:hover {
-  background-color: var(--treeitem-bg-color);
-  background-clip: padding-box;
-  border-radius: 2px;
   color: var(--treeitem-hover-color);
 }
 

media/js/pdf/web/viewer.js

@@ -7496,6 +7496,8 @@ class PDFSidebar {
         }
         break;
       case _ui_utils.SidebarView.OUTLINE:
+        document.getElementById("thumbnailHeader")?.classList.add("hidden");
+        document.getElementById("outlineHeader")?.classList.remove("hidden");
         if (this.outlineButton.disabled) {
           return;
         }
@@ -12357,7 +12359,6 @@ class BasePreferences {
     for (const name in this.#defaults) {
       obj[name] = this.#prefs[name] ?? this.#defaults[name];
     }
-    console.log(obj);
     return obj;
   }
 }