From 5fb00fb8d34e78438778367fd7bf752460e4a594 Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Sat, 23 Feb 2019 11:30:29 +0800
Subject: [PATCH] [image file view] modified 'header' ui (#2987)

---
 .../src/components/file-view/file-toolbar.js  | 102 +++++++++---------
 frontend/src/css/file-view.css                |   2 +-
 2 files changed, 51 insertions(+), 53 deletions(-)

diff --git a/frontend/src/components/file-view/file-toolbar.js b/frontend/src/components/file-view/file-toolbar.js
index ec1f502f7c..89ded98108 100644
--- a/frontend/src/components/file-view/file-toolbar.js
+++ b/frontend/src/components/file-view/file-toolbar.js
@@ -39,60 +39,58 @@ class FileToolbar extends React.Component {
       }   
     }   
     return (
-      <div>
-        <ButtonGroup>
+      <ButtonGroup className="align-self-center">
+        <IconButton
+          id="open-parent-folder"
+          icon="fa fa-folder-open"
+          text={gettext('Open parent folder')}
+          tag="a"
+          href={`${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`}
+        />
+        {showLockUnlockBtn && (
           <IconButton
-            id="open-parent-folder"
-            icon="fa fa-folder-open"
-            text={gettext('Open parent folder')}
+            id="lock-unlock-file"
+            icon={lockUnlockIcon}
+            text={lockUnlockText}
+            onClick={this.props.toggleLockFile}
+          />
+        )}
+        {filePerm == 'rw' && (
+          <IconButton
+            id="history"
+            icon="fa fa-history"
+            text={gettext('History')}
             tag="a"
-            href={`${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`}
-          />  
-          {showLockUnlockBtn && (
-            <IconButton
-              id="lock-unlock-file"
-              icon={lockUnlockIcon}
-              text={lockUnlockText}
-              onClick={this.props.toggleLockFile}
-            />
-          )}
-          {filePerm == 'rw' && (
-            <IconButton
-              id="history"
-              icon="fa fa-history"
-              text={gettext('History')}
-              tag="a"
-              href={`${siteRoot}repo/file_revisions/${repoID}/?p=${encodeURIComponent(filePath)}&referer=${encodeURIComponent(location.href)}`}
-            />
-          )}
-          {(canEditFile && !err) && (
-            <IconButton
-              id="edit"
-              icon="fa fa-edit"
-              text={gettext('Edit')}
-              tag="a"
-              href={`${siteRoot}repo/${repoID}/file/edit/?p=${encodeURIComponent(filePath)}&file_enc=${encodeURIComponent(encoding)}`}
-            />
-          )}
-          {canDownloadFile && (
-            <IconButton
-              id="download-file"
-              icon="fa fa-download"
-              text={gettext('Download')}
-              tag="a"
-              href="?dl=1"
-            />
-          )}
-          {enableComment && (
-            <IconButton
-              id="comment"
-              icon="fa fa-comment"
-              text={gettext('Comment')}
-              onClick={this.props.toggleCommentPanel}
-            />
-          )}
-        </ButtonGroup>
-      </div>
+            href={`${siteRoot}repo/file_revisions/${repoID}/?p=${encodeURIComponent(filePath)}&referer=${encodeURIComponent(location.href)}`}
+          />
+        )}
+        {(canEditFile && !err) && (
+          <IconButton
+            id="edit"
+            icon="fa fa-edit"
+            text={gettext('Edit')}
+            tag="a"
+            href={`${siteRoot}repo/${repoID}/file/edit/?p=${encodeURIComponent(filePath)}&file_enc=${encodeURIComponent(encoding)}`}
+          />
+        )}
+        {canDownloadFile && (
+          <IconButton
+            id="download-file"
+            icon="fa fa-download"
+            text={gettext('Download')}
+            tag="a"
+            href="?dl=1"
+          />
+        )}
+        {enableComment && (
+          <IconButton
+            id="comment"
+            icon="fa fa-comment"
+            text={gettext('Comment')}
+            onClick={this.props.toggleCommentPanel}
+          />
+        )}
+      </ButtonGroup>
     );
   }
 }
diff --git a/frontend/src/css/file-view.css b/frontend/src/css/file-view.css
index 5d8fd950a4..8f0203d645 100644
--- a/frontend/src/css/file-view.css
+++ b/frontend/src/css/file-view.css
@@ -5,7 +5,7 @@ body {
   height: 100%;
 }
 .file-view-header {
-  padding: 10px 15px;
+  padding: 4px 10px;
   border-bottom: 1px solid #c9c9c9;
   flex-shrink: 0;
 }