Image zoom rotate (#7425)

* [image file view] added a zoomer(enable users to zoom in/out the image)

* [image file view] added 'rotate'(rotate the image in counter-clockwise direction and save it)

* [image file view] fixup

* [image file view] keep the 'prev/next' icons displayed on top of the image which is zoomed in

* [image file view] improved the display of the 'image saved' tip

* [image file view] don't offer 'zoom in/out' & 'rotate' for images with errors

* [image file view] don't offer 'rotate' for PSD & HEIC files

* [image file view] enable HEIC files to be viewed online

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

@@ -9,6 +9,7 @@ import ShareDialog from '../dialog/share-dialog';
 import { seafileAPI } from '../../utils/seafile-api';
 import toaster from '../toast';
 import Icon from '../../components/icon';
+import ImageZoomer from './image-zoomer';
 
 const propTypes = {
   isLocked: PropTypes.bool.isRequired,
@@ -17,13 +18,15 @@ const propTypes = {
   isSaving: PropTypes.bool,
   needSave: PropTypes.bool,
   toggleLockFile: PropTypes.func.isRequired,
-  toggleDetailsPanel: PropTypes.func.isRequired
+  toggleDetailsPanel: PropTypes.func.isRequired,
+  setImageScale: PropTypes.func,
+  rotateImage: PropTypes.func
 };
 
 const {
   canLockUnlockFile,
   repoID, repoName, repoEncrypted, parentDir, filePerm, filePath,
-  fileType,
+  fileType, fileExt,
   fileName,
   canEditFile, err,
   // fileEnc, // for 'edit', not undefined only for some kinds of files (e.g. text file)
@@ -119,6 +122,19 @@ class FileToolbar extends React.Component {
     return (
       <Fragment>
         <div className="d-none d-md-flex justify-content-between align-items-center flex-shrink-0 ml-4">
+          {(fileType == 'Image' && !err) && (
+            <>
+              <ImageZoomer setImageScale={this.props.setImageScale} />
+              {['psd', 'heic'].indexOf(fileExt) == -1 && (
+                <IconButton
+                  id="rotate-image"
+                  icon="rotate"
+                  text={gettext('Rotate')}
+                  onClick={this.props.rotateImage}
+                />
+              )}
+            </>
+          )}
           {fileType == 'PDF' && (
             <IconButton
               id="seafile-pdf-find"