File view new icons (#6448)

* ['file view'] use new icons(svg icons)

* ['file view'] use new icons for 'markdown file view' page

* ['file view'] for 'markdown & other text files': highlight the 'Save' button when it can be saved

frontend/src/components/file-view/file-toolbar.js

@@ -8,6 +8,7 @@ import ModalPortal from '../modal-portal';
 import ShareDialog from '../dialog/share-dialog';
 import { seafileAPI } from '../../utils/seafile-api';
 import toaster from '../toast';
+import Icon from '../../components/icon';
 
 const propTypes = {
   isLocked: PropTypes.bool.isRequired,
@@ -90,11 +91,11 @@ class FileToolbar extends React.Component {
       if (!isLocked) {
         showLockUnlockBtn = true;
         lockUnlockText = gettext('Lock');
-        lockUnlockIcon = 'sf3-font sf3-font-lock';
+        lockUnlockIcon = 'lock';
       } else if (lockedByMe) {
         showLockUnlockBtn = true;
         lockUnlockText = gettext('Unlock');
-        lockUnlockIcon = 'sf3-font sf3-font-unlock';
+        lockUnlockIcon = 'unlock';
       }
     }
 
@@ -117,13 +118,13 @@ class FileToolbar extends React.Component {
           {fileType == 'PDF' && (
             <IconButton
               id="seafile-pdf-print"
-              icon="sf3-font sf3-font-print"
+              icon="print"
               text={gettext('Print')}
             />
           )}
           <IconButton
             id="open-parent-folder"
-            icon="sf3-font sf3-font-folder-open"
+            icon="open-folder"
             text={gettext('Open parent folder')}
             tag="a"
             href={`${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`}
@@ -139,7 +140,7 @@ class FileToolbar extends React.Component {
           {showShareBtn && (
             <IconButton
               id="share-file"
-              icon='sf3-font sf3-font-share'
+              icon='share'
               text={gettext('Share')}
               onClick={this.toggleShareDialog}
             />
@@ -147,26 +148,26 @@ 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 btn-active'}>
-                <i className='sf3-font sf3-font-spinner'/>
+              <button type='button' aria-label={gettext('Saving...')} className={'btn btn-icon btn-secondary'}>
+                <Icon symbol="spinner" />
               </button>
               :
               (this.props.needSave ?
                 <IconButton
                   text={gettext('Save')}
-                  id={'saveButton'}
-                  icon='sf3-font sf3-font-save'
+                  id='save-file'
+                  icon='save'
                   onClick={this.props.onSave}
                 />
                 :
-                <button type='button' className='btn btn-icon btn-secondary btn-active' disabled>
-                  <i className='sf3-font sf3-font-save'/>
+                <button type='button' className='btn btn-icon btn-secondary' disabled>
+                  <Icon symbol="save" />
                 </button>
               ))}
           {canDownloadFile && (
             <IconButton
               id="download-file"
-              icon="sf3-font sf3-font-download1"
+              icon="download"
               text={gettext('Download')}
               tag="a"
               href="?dl=1"
@@ -174,22 +175,26 @@ class FileToolbar extends React.Component {
           )}
           <IconButton
             id="file-details"
-            icon='sf3-font sf3-font-info1'
+            icon='info'
             text={gettext('Details')}
             onClick={this.props.toggleDetailsPanel}
           />
           {filePerm == 'rw' && (
             <IconButton
               id="open-via-client"
-              icon="sf3-font sf3-font-desktop"
+              icon="client"
               text={gettext('Open via Client')}
               tag="a"
               href={`seafile://openfile?repo_id=${encodeURIComponent(repoID)}&path=${encodeURIComponent(filePath)}`}
             />
           )}
           <ButtonDropdown isOpen={moreDropdownOpen} toggle={this.toggleMoreOpMenu}>
-            <DropdownToggle className="file-toolbar-more-operations" aria-label={gettext('More operations')}>
-              <span className="sf3-font sf3-font-more-vertical"></span>
+            <DropdownToggle
+              className="file-toolbar-more-operations btn-icon"
+              aria-label={gettext('More operations')}
+              title={gettext('More operations')}
+            >
+              <Icon symbol="more-vertical" />
             </DropdownToggle>
             <DropdownMenu right={true}>
               {filePerm == 'rw' && (
@@ -205,25 +210,27 @@ class FileToolbar extends React.Component {
           <ButtonGroup >
             {(canEditFile && fileType != 'SDoc' && !err) &&
                 (this.props.isSaving ?
-                  <button type='button' aria-label={gettext('Saving...')} className={'btn btn-icon btn-secondary btn-active'}>
-                    <i className='sf3-font sf3-font-spinner'/>
+                  <button type='button' aria-label={gettext('Saving...')} className={'btn btn-icon btn-secondary'}>
+                    <Icon symbol="spinner" />
                   </button>
                   :
                   (this.props.needSave ?
                     <IconButton
                       text={gettext('Save')}
-                      id={'saveButton'}
-                      icon='sf3-font sf3-font-save'
+                      id="save-file"
+                      icon='save'
                       onClick={this.props.onSave}
                     />
                     :
-                    <button type='button' className={'btn btn-icon btn-secondary btn-active'} disabled>
-                      <i className={'sf3-font sf3-font-save'}/>
+                    <button type='button' className={'btn btn-icon btn-secondary'} disabled>
+                      <Icon symbol="save" />
                     </button>
                   ))}
           </ButtonGroup>
 
-          <DropdownToggle className="sf2-icon-more mx-1" aria-label={gettext('More operations')}></DropdownToggle>
+          <DropdownToggle className="mx-1" aria-label={gettext('More operations')}>
+            <Icon symbol="more-vertical" />
+          </DropdownToggle>
           <DropdownMenu right={true}>
             <DropdownItem>
               <a href={`${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`} className="text-inherit">

frontend/src/components/icon-button.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Tooltip } from 'reactstrap';
+import Icon from './icon';
 
 const propTypes = {
   id: PropTypes.string.isRequired,
@@ -25,11 +26,12 @@ class IconButton extends React.Component {
       tooltipOpen: !this.state.tooltipOpen
     });
   };
+
   render() {
     const className = 'btn-icon';
     const btnContent = (
       <React.Fragment>
-        <i className={this.props.icon}></i>
+        <Icon symbol={this.props.icon} />
         <Tooltip
           toggle={this.toggle}
           delay={{ show: 0, hide: 0 }}