change file page icons style (#6493)

* change file page icons style

* change save icon style

* change Open parent folder menu

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"
@@ -122,13 +122,6 @@ class FileToolbar extends React.Component {
               text={gettext('Print')}
             />
           )}
-          <IconButton
-            id="open-parent-folder"
-            icon="open-folder"
-            text={gettext('Open parent folder')}
-            tag="a"
-            href={`${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`}
-          />
           {showLockUnlockBtn && (
             <IconButton
               id="lock-unlock-file"
@@ -148,9 +141,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 +153,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 +181,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>
@@ -202,9 +196,12 @@ class FileToolbar extends React.Component {
                   {gettext('History')}
                 </a>
               )}
+              <a href={`${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`} className="dropdown-item">
+                {gettext('Open parent folder')}
+              </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 >

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>
       );
     }
   }

frontend/src/css/file-view.css

@@ -13,11 +13,31 @@ body {
   flex-shrink: 0;
 }
 
-.file-view-header .btn {
-  color: #666;
+.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 .btn#save-file {
+.file-view-header .file-toolbar-btn:hover {
+  background-color: #EFEFEF;
+  border-radius: 3px;
+}
+
+.file-view-header .file-toolbar-btn.disabled {
+  opacity: 0.65;
+  cursor: default;
+}
+
+.file-view-header .file-toolbar-btn.disabled:hover {
+  background-color: #fff;
+}
+
+.file-view-header .file-toolbar-btn#save-file {
   color: #eb8205;
 }