diff --git a/media/css/seahub.css b/media/css/seahub.css
index 0afa75e3fc..ce846794e9 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -1877,6 +1877,7 @@ textarea:-moz-placeholder {/* for FF */
     border:1px solid #eee;
     border-radius:5px;
     z-index:10;
+    width:100px;
 }
 .audit-select-hidden li a,
 .hidden-op a {
diff --git a/media/img/delete-orange.png b/media/img/delete-orange.png
new file mode 100644
index 0000000000..a7f7f9f75b
Binary files /dev/null and b/media/img/delete-orange.png differ
diff --git a/media/img/download-orange.png b/media/img/download-orange.png
new file mode 100644
index 0000000000..8206067bb2
Binary files /dev/null and b/media/img/download-orange.png differ
diff --git a/media/img/share-orange.png b/media/img/share-orange.png
new file mode 100644
index 0000000000..cf980bacd6
Binary files /dev/null and b/media/img/share-orange.png differ
diff --git a/media/scripts/app/views/dirent.js b/media/scripts/app/views/dirent.js
index 2082b28d55..28a905088a 100644
--- a/media/scripts/app/views/dirent.js
+++ b/media/scripts/app/views/dirent.js
@@ -138,21 +138,10 @@ define([
                 popup = this.$('.hidden-op');
 
             if (popup.hasClass('hide')) { // the popup is not shown
-                if (icon.position().left + icon.width() + popup.outerWidth() < icon.parent().width()) {
-                    popup.css({'left': icon.position().left + icon.width() + 5});
-                    if (icon.offset().top + popup.height() <= $('#main').offset().top + $('#main').height()) {
-                        popup.css('top', 6);
-                    } else {
-                        popup.css('bottom', 2);
-                    }
-                } else {
-                    popup.css({'right':0});
-                    if (icon.offset().top + popup.height() <= $('#main').offset().top + $('#main').height()) {
-                        popup.css('top', icon.position().top + icon.height() + 6);
-                    } else {
-                        popup.css('bottom', icon.position().top + icon.height() + 3);
-                    }
+                if (icon.offset().top + popup.height() > $('#main').offset().top + $('#main').height()) {
+                    popup.css('bottom', 20);
                 }
+                popup.css({'left': icon.position().left});
                 popup.removeClass('hide');
                 app.globalState.noFileOpPopup = false;
                 app.globalState.popup_tr = icon.parents('tr');
diff --git a/seahub/group/templates/group/group_info.html b/seahub/group/templates/group/group_info.html
index 5f6984053b..cb0011ea19 100644
--- a/seahub/group/templates/group/group_info.html
+++ b/seahub/group/templates/group/group_info.html
@@ -144,30 +144,7 @@
     <button class="simplemodal-close">{% trans 'Cancel' %}</button>
 </form>
 
-<div id="dir-view" class="hide">
-  <div class="repo-file-list-topbar">
-    <p class="path"></p>
-    <div class="repo-op"></div>
-  </div>
-  <table class="repo-file-list">
-    <thead>
-    <tr>
-      <th class="select">
-        <span class="checkbox"><input type="checkbox" class="checkbox-orig" /></span>
-      </th>
-      <th class="star"></th>
-      <th class="dirent-icon"></th>
-      <th><span class="dirent-name">{% trans "Name"%} <span id="by-name" class="icon-caret-up cspt"></span></span></th>
-      <th class="dirent-size">{% trans "Size"%}</th>
-      <th class="dirent-update">{% trans "Last Update" %} <span id="by-time" class="icon-caret-down cspt"></span></th>
-      <th class="dirent-op">{% trans "Operations"%}</th>
-    </tr>
-    </thead>
-    <tbody>
-    </tbody>
-  </table>
-  <img class="loading-tip" src="{{MEDIA_URL}}img/loading-icon.gif" alt="{% trans 'Loading...' %}" />
-</div>
+{% include "js/dir-view.html" %}
 
 {% endblock %}
 
diff --git a/seahub/templates/js/dir-view.html b/seahub/templates/js/dir-view.html
new file mode 100644
index 0000000000..feb971cc19
--- /dev/null
+++ b/seahub/templates/js/dir-view.html
@@ -0,0 +1,26 @@
+{% load i18n %}
+<div id="dir-view" class="hide">
+  <div class="repo-file-list-topbar">
+    <p class="path"></p>
+    <div class="repo-op"></div>
+  </div>
+  <table class="repo-file-list">
+    <thead>
+    <tr>
+      <th class="select">
+        <span class="checkbox"><input type="checkbox" class="checkbox-orig" /></span>
+      </th>
+      <th class="star"></th>
+      <th class="dirent-icon"></th>
+      <th><span class="dirent-name">{% trans "Name"%} <span id="by-name" class="icon-caret-up cspt"></span></span></th>
+      <th class="dirent-op"></th>
+      <th class="dirent-size">{% trans "Size"%}</th>
+      <th class="dirent-update">{% trans "Last Update" %} <span id="by-time" class="icon-caret-down cspt"></span></th>
+    </tr>
+    </thead>
+    <tbody>
+    </tbody>
+  </table>
+  <img class="loading-tip" src="{{MEDIA_URL}}img/loading-icon.gif" alt="{% trans 'Loading...' %}" />
+</div>
+
diff --git a/seahub/templates/js/dirent.html b/seahub/templates/js/dirent.html
index 025bf1c17a..a5047c6c42 100644
--- a/seahub/templates/js/dirent.html
+++ b/seahub/templates/js/dirent.html
@@ -12,6 +12,27 @@
     <span class="dirent-name"><a href="#lib/<%= repo_id %><% print(dirent_path); %>" class="dir-link normal"><%- dirent.obj_name %></a></span>
     <% } %>
 </td>
+<td class="dirent-op">
+    <div class="repo-file-op vh">
+        <div class="displayed-op">
+            <a class="op download" href="{{ SITE_ROOT }}repo/download_dir/<%= repo_id %>/?p=<% print(dirent_path); %>" title="{% trans "Download" %}"><img src="{{ MEDIA_URL }}img/download-orange.png" alt="" /></a>
+            <% if (!repo_encrypted) { %>
+            <a class="op share" href="#" title="{% trans "Share" %}"><img src="{{ MEDIA_URL }}img/share-orange.png" alt="" /></a>
+            <% } %>
+            <% if (user_perm == 'rw') { %>
+            <a class="op delete" href="#" title="{% trans "Delete" %}"><img src="{{ MEDIA_URL }}img/delete-orange.png" alt="" /></a>
+            <% } %>
+        </div>
+        <% if (user_perm == 'rw') { %>
+        <img src="{{ MEDIA_URL }}img/dropdown-arrow.png" title="{% trans "More operations" %}" alt="{% trans "More operations" %}" class="more-op-icon cspt" />
+        <ul class="hidden-op hide">
+            <li><a class="op rename" href="#">{% trans "Rename" %}</a></li>
+            <li><a class="op mv" href="#">{% trans "Move" %}</a></li>
+            <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
+        </ul>
+        <% } %>
+    </div>
+</td>
 <td class="dirent-size"></td>
 <td class="dirent-update">
     <% if (dirent.last_modified) { %>
@@ -20,25 +41,6 @@
     <% print(""); %>
     <% } %>
 </td>
-<td class="dirent-op">
-    <div class="repo-file-op vh">
-        <div class="displayed-op">
-            <a class="op download" href="{{ SITE_ROOT }}repo/download_dir/<%= repo_id %>/?p=<% print(dirent_path); %>" title="{% trans "Download" %}"><img src="{{ MEDIA_URL }}img/download.png" alt="" /></a>
-            <% if (!repo_encrypted) { %>
-            <a class="op share" href="#" title="{% trans "Share" %}"><img src="{{ MEDIA_URL }}img/share_20.png" alt="" /></a>
-            <% } %>
-        </div>
-        <% if (user_perm == 'rw') { %>
-        <img src="{{ MEDIA_URL }}img/dropdown-arrow.png" title="{% trans "More operations" %}" alt="{% trans "More operations" %}" class="more-op-icon cspt" />
-        <ul class="hidden-op hide">
-            <li><a class="op del" href="#">{% trans "Delete" %}</a></li>
-            <li><a class="op rename" href="#">{% trans "Rename" %}</a></li>
-            <li><a class="op mv" href="#">{% trans "Move" %}</a></li>
-            <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
-        </ul>
-        <% } %>
-    </div>
-</td>
 <% } else { %>
 <td class="select">
     <span class="checkbox"><input type="checkbox" class="checkbox-orig" /></span>
@@ -64,6 +66,28 @@
 <td>
     <span class="dirent-name"><a class="normal" href="{{ SITE_ROOT }}lib/<%= repo_id %>/file<% print(dirent_path); %>" target="_blank"><%- dirent.obj_name %></a></span>
 </td>
+<td class="dirent-op">
+    <div class="repo-file-op vh">
+        <div class="displayed-op">
+            <a class="op download" href="{{ SITE_ROOT }}repo/<%= repo_id %>/<%= dirent.obj_id %>/download/?p=<% print(dirent_path); %>" title="{% trans "Download" %}"><img src="{{ MEDIA_URL }}img/download-orange.png" alt="" /></a>
+            <% if (!repo_encrypted) { %>
+            <a class="op share" href="#" title="{% trans "Share" %}"><img src="{{ MEDIA_URL }}img/share-orange.png" alt="" /></a>
+            <% } %>
+            <% if (user_perm == 'rw') { %>
+            <a class="op delete" href="#" title="{% trans "Delete" %}"><img src="{{ MEDIA_URL }}img/delete-orange.png" alt="" /></a>
+            <% } %>
+        </div>
+        <% if (user_perm == 'rw') { %>
+        <img src="{{ MEDIA_URL }}img/dropdown-arrow.png" title="{% trans "More Operations"%}" alt="{% trans "More Operations"%}" class="more-op-icon cspt" />
+        <ul class="hidden-op hide">
+            <li><a class="op rename" href="#">{% trans "Rename" %}</a></li>
+            <li><a class="op mv" href="#">{% trans "Move" %}</a></li>
+            <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
+            <li><a class="op file-history" href="{{ SITE_ROOT }}repo/file_revisions/<%= repo_id %>/?p=<% print(dirent_path); %>" target="_blank">{% trans "History" %}</a></li>
+        </ul>
+        <% } %>
+    </div>
+</td>
 <td class="dirent-size"><%= dirent.file_size %></td>
 <td class="dirent-update">
     <% if (dirent.last_modified) { %>
@@ -72,25 +96,4 @@
     <% print("{% trans "Fetch failed" %}"); %>
     <% } %>
 </td>
-<td class="dirent-op">
-    <div class="repo-file-op vh">
-        <div class="displayed-op">
-            <a class="op download" href="{{ SITE_ROOT }}repo/<%= repo_id %>/<%= dirent.obj_id %>/download/?p=<% print(dirent_path); %>" title="{% trans "Download" %}"><img src="{{ MEDIA_URL }}img/download.png" alt="" /></a>
-            <% if (!repo_encrypted) { %>
-            <a class="op share" href="#" title="{% trans "Share" %}"><img src="{{ MEDIA_URL }}img/share_20.png" alt="" /></a>
-            <% } %>
-        </div>
-        <% if (user_perm == 'rw') { %>
-        <img src="{{ MEDIA_URL }}img/dropdown-arrow.png" title="{% trans "More Operations"%}" alt="{% trans "More Operations"%}" class="more-op-icon cspt" />
-        <ul class="hidden-op hide">
-            <li><a class="op del" href="#">{% trans "Delete" %}</a></li>
-            <li><a class="op rename" href="#">{% trans "Rename" %}</a></li>
-            <li><a class="op mv" href="#">{% trans "Move" %}</a></li>
-            <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
-            <li><a class="op file-update" href="#">{% trans "Update"%}</a></li>
-            <li><a class="op file-history" href="{{ SITE_ROOT }}repo/file_revisions/<%= repo_id %>/?p=<% print(dirent_path); %>" target="_blank">{% trans "History" %}</a></li>
-        </ul>
-        <% } %>
-    </div>
-</td>
 <% } %>
diff --git a/seahub/templates/myhome.html b/seahub/templates/myhome.html
index 6c86d34c63..65cacd46f2 100644
--- a/seahub/templates/myhome.html
+++ b/seahub/templates/myhome.html
@@ -21,7 +21,7 @@
 {% endif %}
 /* lib view */
 .repo-file-list .dirent-name {
-    width:260px;
+    width:220px;
 }
 .repo-file-list .dirent-size {
     width:114px;
@@ -30,7 +30,12 @@
     width:123px;
 }
 .repo-file-list .dirent-op {
-    width:110px;
+    width:150px;
+}
+.displayed-op .download,
+.displayed-op .share,
+.displayed-op .delete {
+    margin-left:5px;
 }
 /* custom select2 */
 .select2-container-multi .select2-choices {
@@ -205,32 +210,7 @@
 </form>
 {% endif %}
 
-
-<div id="dir-view" class="hide">
-  <div class="repo-file-list-topbar">
-    <p class="path"></p>
-    <div class="repo-op"></div>
-  </div>
-  <table class="repo-file-list">
-    <thead>
-    <tr>
-      <th class="select">
-        <span class="checkbox"><input type="checkbox" class="checkbox-orig" /></span>
-      </th>
-      <th class="star"></th>
-      <th class="dirent-icon"></th>
-      <th><span class="dirent-name">{% trans "Name"%} <span id="by-name" class="icon-caret-up cspt"></span></span></th>
-      <th class="dirent-size">{% trans "Size"%}</th>
-      <th class="dirent-update">{% trans "Last Update" %} <span id="by-time" class="icon-caret-down cspt"></span></th>
-      <th class="dirent-op">{% trans "Operations"%}</th>
-    </tr>
-    </thead>
-    <tbody>
-    </tbody>
-  </table>
-  <img class="loading-tip" src="{{MEDIA_URL}}img/loading-icon.gif" alt="{% trans 'Loading...' %}" />
-</div>
-
+{% include "js/dir-view.html" %}
 
 {% endblock %}
 
diff --git a/seahub/templates/pubrepo.html b/seahub/templates/pubrepo.html
index ca98a22df8..19b3a2446a 100644
--- a/seahub/templates/pubrepo.html
+++ b/seahub/templates/pubrepo.html
@@ -61,30 +61,7 @@
     </div>
 </div>
 
-<div id="dir-view" class="hide">
-  <div class="repo-file-list-topbar">
-    <p class="path"></p>
-    <div class="repo-op"></div>
-  </div>
-  <table class="repo-file-list">
-    <thead>
-    <tr>
-      <th class="select">
-        <span class="checkbox"><input type="checkbox" class="checkbox-orig" /></span>
-      </th>
-      <th class="star"></th>
-      <th class="dirent-icon"></th>
-      <th><span class="dirent-name">{% trans "Name"%} <span id="by-name" class="icon-caret-up cspt"></span></span></th>
-      <th class="dirent-size">{% trans "Size"%}</th>
-      <th class="dirent-update">{% trans "Last Update" %} <span id="by-time" class="icon-caret-down cspt"></span></th>
-      <th class="dirent-op">{% trans "Operations"%}</th>
-    </tr>
-    </thead>
-    <tbody>
-    </tbody>
-  </table>
-  <img class="loading-tip" src="{{MEDIA_URL}}img/loading-icon.gif" alt="{% trans 'Loading...' %}" />
-</div>
+{% include "js/dir-view.html" %}
 
 {% endblock %}