change file page icons style

haiwen · Aug 6, 2024 · f3549e9 · f3549e9
1 parent 20cf8b7
commit f3549e9
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 26 deletions.
diff --git a/frontend/src/components/file-view/file-toolbar.js b/frontend/src/components/file-view/file-toolbar.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { ButtonGroup, ButtonDropdown, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+import { ButtonGroup, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import IconButton from '../icon-button';
 import { gettext, siteRoot } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
@@ -114,7 +114,7 @@ class FileToolbar extends React.Component {
 
     return (
       <Fragment>
-        <ButtonGroup className="d-none d-md-block flex-shrink-0 ml-4">
+        <div className="d-none d-md-flex justify-content-between align-items-center flex-shrink-0 ml-4">
           {fileType == 'PDF' && (
             <IconButton
               id="seafile-pdf-print"
@@ -148,9 +148,9 @@ class FileToolbar extends React.Component {
 
           {(canEditFile && fileType != 'SDoc' && !err) &&
             (this.props.isSaving ?
-              <button type='button' aria-label={gettext('Saving...')} className={'btn btn-icon btn-secondary'}>
+              <div type='button' aria-label={gettext('Saving...')} className={'file-toolbar-btn'}>
                 <Icon symbol="spinner" />
-              </button>
+              </div>
               :
               (this.props.needSave ?
                 <IconButton
@@ -160,9 +160,9 @@ class FileToolbar extends React.Component {
                   onClick={this.props.onSave}
                 />
                 :
-                <button type='button' className='btn btn-icon btn-secondary' disabled>
+                <div type='button' className='file-toolbar-btn' disabled>
                   <Icon symbol="save" />
-                </button>
+                </div>
               ))}
           {canDownloadFile && (
             <IconButton
@@ -188,11 +188,12 @@ class FileToolbar extends React.Component {
               href={`seafile://openfile?repo_id=${encodeURIComponent(repoID)}&path=${encodeURIComponent(filePath)}`}
             />
           )}
-          <ButtonDropdown isOpen={moreDropdownOpen} toggle={this.toggleMoreOpMenu}>
+          <Dropdown isOpen={moreDropdownOpen} toggle={this.toggleMoreOpMenu}>
             <DropdownToggle
-              className="file-toolbar-more-operations btn-icon"
+              className="file-toolbar-btn"
               aria-label={gettext('More operations')}
               title={gettext('More operations')}
+              tag="div"
             >
               <Icon symbol="more-vertical" />
             </DropdownToggle>
@@ -203,8 +204,8 @@ class FileToolbar extends React.Component {
                 </a>
               )}
             </DropdownMenu>
-          </ButtonDropdown>
-        </ButtonGroup>
+          </Dropdown>
+        </div>
 
         <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle} className="d-block d-md-none flex-shrink-0 ml-4">
           <ButtonGroup >

diff --git a/frontend/src/components/icon-button.js b/frontend/src/components/icon-button.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Tooltip } from 'reactstrap';
+import { Tooltip } from 'reactstrap';
 import Icon from './icon';
 
 const propTypes = {
@@ -28,9 +28,8 @@ class IconButton extends React.Component {
   };
 
   render() {
-    const className = 'btn-icon';
     const btnContent = (
-      <React.Fragment>
+      <>
         <Icon symbol={this.props.icon} />
         <Tooltip
           toggle={this.toggle}
@@ -40,30 +39,30 @@ class IconButton extends React.Component {
           isOpen={this.state.tooltipOpen}>
           {this.props.text}
         </Tooltip>
-      </React.Fragment>
+      </>
     );
     if (this.props.tag && this.props.tag == 'a') {
       return (
-        <Button
+        <div
           id={this.props.id}
-          className={className}
+          className='file-toolbar-btn'
           tag="a"
           href={this.props.href}
           aria-label={this.props.text}
         >
           {btnContent}
-        </Button>
+        </div>
       );
     } else {
       return (
-        <Button
+        <div
           id={this.props.id}
-          className={className}
+          className='file-toolbar-btn'
           onClick={this.props.onClick}
           aria-label={this.props.text}
         >
           {btnContent}
-        </Button>
+        </div>
       );
     }
   }

diff --git a/frontend/src/css/file-view.css b/frontend/src/css/file-view.css
@@ -13,12 +13,19 @@ body {
   flex-shrink: 0;
 }
 
-.file-view-header .btn {
-  color: #666;
-}
-
-.file-view-header .btn#save-file {
-  color: #eb8205;
+.file-view-header .file-toolbar-btn {
+  width: 28px;
+  height: 28px;
+  margin-right: 10px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.file-view-header .file-toolbar-btn:hover {
+  background-color: #EFEFEF;
+  border-radius: 3px;
 }
 
 .file-view-header .file-toolbar-more-operations {