diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index de21a209a6..c0266fa3fa 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -181,9 +181,8 @@
         <th class="dirent-update by-time cspt">{% trans "Last Update" %} <span class="sort-icon icon-caret-down hide"></span></th>
     </tr>
 </script>
-<script type="text/template" id="dirent-tmpl">
 
-    <% if (dirent.is_dir) { %>
+<script type="text/template" id="dirent-dir-tmpl">
     <td class="select">
         <% if (dirent.selected) { %>
         <input type="checkbox" class="vam" checked="checked" />
@@ -192,49 +191,53 @@
         <% } %>
     </td>
     <td class="star"></td>
-    <td class="dirent-icon"><img src="<%= icon_url %>" width="24" alt="{% trans "Directory icon" %}" /></td>
+    <td class="dirent-icon"><img src="<%= icon_url %>" width="24" alt="" /></td>
     <td>
         <span class="dirent-name"><a href="<%= url %>" class="dir-link normal"><%- dirent.obj_name %></a></span>
     </td>
     <td class="dirent-op">
-        <div class="repo-file-op vh">
+        <div class="op-container">
             <div class="displayed-op">
-                <a class="op-icon download sf2-icon-download sf2-x" href="<%= download_url %>" title="{% trans "Download" %}"></a>
+                <a class="op-icon download sf2-icon-download sf2-x vh" href="<%= download_url %>" title="{% trans "Download" %}"></a>
                 <% if (!repo_encrypted && can_generate_shared_link) { %>
-                <a href="#" class="op-icon share sf2-icon-share sf2-x" title="{% trans "Share" %}"></a>
+                <a href="#" class="op-icon share sf2-icon-share sf2-x vh" title="{% trans "Share" %}"></a>
                 <% } %>
                 <% if (dirent.perm == 'rw') { %>
-                <a href="#" class="op-icon delete sf2-icon-delete sf2-x" title="{% trans "Delete" %}"></a>
+                <a href="#" class="op-icon delete sf2-icon-delete sf2-x vh" title="{% trans "Delete" %}"></a>
                 <% } %>
             </div>
             <% if (dirent.perm == 'rw') { %>
-            <a href="#" class="more-op-icon sf2-icon-caret-down op-icon" title="{% trans "More operations" %}"></a>
-            <ul class="hidden-op dirent-hidden-op hide dropdown-menu">
-                <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>
-                <% if (app.pageOptions.folder_perm_enabled && is_repo_owner) { %>
-                <li><a class="op set-folder-permission" href="#">{% trans "Permission" %}</a></li>
-                <% } %>
-                <li><a class="op open-via-client" href="seafile://openfile?repo_id=<%- repo_id %>&path=<% print(encodeURIComponent(dirent_path + '/')); %>">{% trans "Open via Client" %}</a></li>
-            </ul>
+            <div class="dropdown dropdown-inline">
+                <a href="#" class="more-op-icon sf2-icon-caret-down op-icon vh dropdown-toggle" title="{% trans "More operations" %}"></a>
+                <ul class="hidden-op dirent-hidden-op hide dropdown-menu">
+                    <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>
+                    <% if (app.pageOptions.folder_perm_enabled && is_repo_owner) { %>
+                    <li><a class="op set-folder-permission" href="#">{% trans "Permission" %}</a></li>
+                    <% } %>
+                    <li><a class="op open-via-client" href="seafile://openfile?repo_id=<%- repo_id %>&path=<% print(encodeURIComponent(dirent_path + '/')); %>">{% trans "Open via Client" %}</a></li>
+                </ul>
+            </div>
             <% } else if (dirent.perm == 'r' && !repo_encrypted) { %>
-            <a href="#" class="more-op-icon sf2-icon-caret-down op-icon" title="{% trans "More operations" %}"></a>
-            <ul class="hidden-op dirent-hidden-op hide dropdown-menu">
-                <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
-            </ul>
+            <div class="dropdown dropdown-inline">
+                <a href="#" class="more-op-icon sf2-icon-caret-down op-icon vh dropdown-toggle" title="{% trans "More operations" %}"></a>
+                <ul class="hidden-op dirent-hidden-op hide dropdown-menu">
+                    <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
+                </ul>
+            </div>
             <% } %>
         </div>
     </td>
     <td class="dirent-size"></td>
     <td class="dirent-update">
         <% if (dirent.last_modified) { %>
-        <% print(dirent.last_update); %>
-        <% } else { %>
-        <% print(""); %>
+        <%= dirent.last_update %>
         <% } %>
     </td>
-    <% } else { %>
+</script>
+
+<script type="text/template" id="dirent-file-tmpl">
     <td class="select">
         <% if (dirent.selected) { %>
         <input type="checkbox" class="vam" checked="checked" />
@@ -276,55 +279,57 @@
         </span>
     </td>
     <td class="dirent-op">
-        <div class="repo-file-op vh">
+        <div class="op-container">
             <div class="displayed-op">
-                <a class="op-icon download sf2-icon-download sf2-x" href="<%= download_url %>" title="{% trans "Download" %}"></a>
+                <a class="op-icon download sf2-icon-download sf2-x vh" href="<%= download_url %>" title="{% trans "Download" %}"></a>
                 <% if (!repo_encrypted && can_generate_shared_link) { %>
-                <a href="#" class="op-icon share sf2-icon-share sf2-x" title="{% trans "Share" %}"></a>
+                <a href="#" class="op-icon share sf2-icon-share sf2-x vh" title="{% trans "Share" %}"></a>
                 <% } %>
                 <% if (dirent.perm == 'rw') { %>
-                    <a href="#" class="op-icon delete sf2-icon-delete sf2-x" title="{% trans "Delete" %}"></a>
+                    <a href="#" class="op-icon delete sf2-icon-delete sf2-x vh" title="{% trans "Delete" %}"></a>
                 <% } %>
             </div>
             <% if (dirent.perm == 'rw') { %>
-            <a href="#" class="more-op-icon sf2-icon-caret-down op-icon" title="{% trans "More Operations"%}"></a>
-            <ul class="hidden-op dirent-hidden-op hide dropdown-menu">
-                <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(encodeURIComponent(dirent_path)); %>">{% trans "History" %}</a></li>
-                <% if (is_pro) { %>
-                    <% if (file_audit_enabled) { %>
+            <div class="dropdown dropdown-inline">
+                <a href="#" class="more-op-icon sf2-icon-caret-down op-icon vh dropdown-toggle" title="{% trans "More Operations"%}"></a>
+                <ul class="hidden-op dirent-hidden-op hide dropdown-menu">
+                    <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(encodeURIComponent(dirent_path)); %>">{% trans "History" %}</a></li>
+                    <% if (is_pro) { %>
+                        <% if (file_audit_enabled) { %>
                     <li><a class="op" href="{{ SITE_ROOT }}repo/file-access/<%= repo_id %>/?p=<% print(encodeURIComponent(dirent_path)); %>" target="_blank">{% trans "Access Log" %}</a></li>
-                    <% } %>
-
-                    <% if (dirent.is_locked) { %>
-                        <% if (dirent.locked_by_me) { %>
-                        <li><a class="op unlock-file" href="#">{% trans "Unlock" %}</a></li>
                         <% } %>
-                    <% } else { %>
-                    <li><a class="op lock-file" href="#">{% trans "Lock" %}</a></li>
+                        <% if (dirent.is_locked) { %>
+                            <% if (dirent.locked_by_me) { %>
+                            <li><a class="op unlock-file" href="#">{% trans "Unlock" %}</a></li>
+                            <% } %>
+                        <% } else { %>
+                        <li><a class="op lock-file" href="#">{% trans "Lock" %}</a></li>
+                        <% } %>
                     <% } %>
-                <% } %>
-                <li><a class="op open-via-client" href="seafile://openfile?repo_id=<%- repo_id %>&path=<% print(encodeURIComponent(dirent_path)); %>">{% trans "Open via Client" %}</a></li>
-            </ul>
+                    <li><a class="op open-via-client" href="seafile://openfile?repo_id=<%- repo_id %>&path=<% print(encodeURIComponent(dirent_path)); %>">{% trans "Open via Client" %}</a></li>
+                </ul>
+            </div>
             <% } else if (dirent.perm == 'r' && !repo_encrypted) { %>
-            <a class="more-op-icon sf2-icon-caret-down op-icon" title="{% trans "More operations" %}"></a>
-            <ul class="hidden-op dirent-hidden-op hide dropdown-menu">
-                <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
-            </ul>
+            <div class="dropdown dropdown-inline">
+                <a class="more-op-icon sf2-icon-caret-down op-icon vh dropdown-toggle" title="{% trans "More operations" %}"></a>
+                <ul class="hidden-op dirent-hidden-op hide dropdown-menu">
+                    <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
+                </ul>
+            </div>
             <% } %>
         </div>
     </td>
     <td class="dirent-size"><%= dirent.file_size %></td>
     <td class="dirent-update">
         <% if (dirent.last_modified) { %>
-        <% print(dirent.last_update); %>
+        <%= dirent.last_update %>
         <% } else { %>
         <% print("{% trans "Fetch failed" %}"); %>
         <% } %>
     </td>
-    <% } %>
 </script>
 
 <script type="text/template" id="grid-view-file-item-tmpl">
diff --git a/static/scripts/app/views/dir.js b/static/scripts/app/views/dir.js
index f60f7a9d81..0eb9d90622 100644
--- a/static/scripts/app/views/dir.js
+++ b/static/scripts/app/views/dir.js
@@ -71,27 +71,6 @@ define([
                     }
                 });
 
-                // hide 'hidden-op' popup
-                $(document).click(function(e) {
-                    var target =  e.target || event.srcElement;
-                    var $popup = $('.dirent-hidden-op:visible');
-                    if ($popup.length > 0 &&  // There is a visible popup
-                        !$('.more-op-icon', $popup.closest('tr')).is(target) &&
-                        !$popup.is(target) &&
-                        !$popup.find('*').is(target)) {
-                        $popup.addClass('hide');
-                        var $tr = $popup.closest('tr');
-                        if (!$tr.find('*').is(target)) {
-                            $tr.removeClass('hl').find('.repo-file-op').addClass('vh');
-                            $('.repo-file-list tr:gt(0)').each(function() {
-                                if ($(this).find('*').is(target)) {
-                                    $(this).addClass('hl').find('.repo-file-op').removeClass('vh');
-                                }
-                            });
-                        }
-                    }
-                });
-
                 // hide 'rename form'
                 $(document).click(function(e) {
                     var target =  e.target || event.srcElement;
@@ -99,14 +78,6 @@ define([
                     if ($form.length && !$form.find('*').is(target)) {
                         var $tr = $form.closest('tr'); // get $tr before $form removed in `.cancel click()`
                         $('.cancel', $form).click();
-                        if (!$tr.find('*').is(target)) {
-                            $tr.removeClass('hl').find('.repo-file-op').addClass('vh');
-                            $('.repo-file-list tr:gt(0)').each(function() {
-                                if ($(this).find('*').is(target)) {
-                                    $(this).addClass('hl').find('.repo-file-op').removeClass('vh');
-                                }
-                            });
-                        }
                     }
                 });
 
diff --git a/static/scripts/app/views/dirent.js b/static/scripts/app/views/dirent.js
index d11664a944..a75b6cc271 100644
--- a/static/scripts/app/views/dirent.js
+++ b/static/scripts/app/views/dirent.js
@@ -6,21 +6,23 @@ define([
     'file-tree',
     'app/views/share',
     'app/views/dialogs/dirent-mvcp',
-    'app/views/folder-perm'
+    'app/views/folder-perm',
+    'app/views/widgets/hl-item-view',
+    'app/views/widgets/dropdown'
 ], function($, _, Backbone, Common, FileTree, ShareView, DirentMvcpDialog,
-    FolderPermView) {
+    FolderPermView, HLItemView, DropdownView) {
     'use strict';
 
-    app = app || {};
-    app.globalState = app.globalState || {};
-
-    var DirentView = Backbone.View.extend({
+    var DirentView = HLItemView.extend({
         tagName: 'tr',
 
-        template: _.template($('#dirent-tmpl').html()),
+        fileTemplate: _.template($('#dirent-file-tmpl').html()),
+        dirTemplate: _.template($('#dirent-dir-tmpl').html()),
         renameTemplate: _.template($("#rename-form-template").html()),
 
         initialize: function(options) {
+            HLItemView.prototype.initialize.call(this);
+
             this.dirView = options.dirView;
             this.dir = this.dirView.dir;
 
@@ -34,8 +36,14 @@ define([
             var is_pro = app.pageOptions.is_pro;
             var file_audit_enabled = app.pageOptions.file_audit_enabled;
             var file_icon_size = Common.isHiDPI() ? 48 : 24;
+            var template;
+            if (this.model.get('is_dir')) {
+                template = this.dirTemplate;
+            } else {
+                template = this.fileTemplate;
+            }
 
-            this.$el.html(this.template({
+            this.$el.html(template({
                 dirent: this.model.attributes,
                 dirent_path: dirent_path,
                 encoded_path: Common.encodePath(dirent_path),
@@ -51,17 +59,17 @@ define([
                 repo_encrypted: dir.encrypted
             }));
             this.$('.file-locked-icon').attr('title', gettext("locked by {placeholder}").replace('{placeholder}', this.model.get('lock_owner_name')));
+            this.dropdown = new DropdownView({
+                el: this.$('.dropdown')
+            });
 
             return this;
         },
 
         events: {
-            'mouseenter': 'highlight',
-            'mouseleave': 'rmHighlight',
             'click .select': 'select',
             'click .file-star': 'starFile',
             'click .dir-link': 'visitDir',
-            'click .more-op-icon': 'togglePopup',
             'click .share': 'share',
             'click .delete': 'del', // 'delete' is a preserve word
             'click .rename': 'rename',
@@ -74,20 +82,7 @@ define([
         },
 
         _hideMenu: function() {
-            this.$el.removeClass('hl').find('.repo-file-op').addClass('vh');
-            this.$('.hidden-op').addClass('hide');
-        },
-
-        highlight: function() {
-            if (!$('.hidden-op:visible').length && !$('#rename-form').length) {
-                this.$el.addClass('hl').find('.repo-file-op').removeClass('vh');
-            }
-        },
-
-        rmHighlight: function() {
-            if (!$('.hidden-op:visible').length && !$('#rename-form').length) {
-                this.$el.removeClass('hl').find('.repo-file-op').addClass('vh');
-            }
+            this.dropdown.hide();
         },
 
         select: function () {
@@ -165,26 +160,6 @@ define([
             return false;
         },
 
-        togglePopup: function() {
-            var icon = this.$('.more-op-icon'),
-                popup = this.$('.hidden-op');
-
-            if (popup.hasClass('hide')) { // the popup is not shown
-                popup.css({'left': icon.position().left});
-                if (icon.offset().top + popup.height() <= $('#main').offset().top + $('#main').height()) {
-                    // below the icon
-                    popup.css('top', icon.position().top + icon.outerHeight(true) + 3);
-                } else {
-                    popup.css('bottom', icon.parent().outerHeight() - icon.position().top + 3);
-                }
-                popup.removeClass('hide');
-            } else {
-                popup.addClass('hide');
-            }
-
-            return false;
-        },
-
         share: function() {
             var dir = this.dir,
                 obj_name = this.model.get('obj_name'),
@@ -237,9 +212,20 @@ define([
             $op.hide();
             $name.hide();
 
-            this.$('.hidden-op').addClass('hide');
+            this._hideMenu();
+            app.ui.freezeItemHightlight = true;
 
+            var after_op_success = function(data) {
+                app.ui.freezeItemHightlight = false;
+                if (app.ui.currentHighlightedItem) {
+                    app.ui.currentHighlightedItem.rmHighlight();
+                }
+            };
             var cancelRename = function() {
+                app.ui.freezeItemHightlight = false;
+                if (app.ui.currentHighlightedItem) {
+                    app.ui.currentHighlightedItem.rmHighlight();
+                }
                 form.remove();
                 $op.show();
                 $name.show();
@@ -276,6 +262,7 @@ define([
                 };
                 _this.model.rename({
                     newname: new_name,
+                    success: after_op_success,
                     error: after_op_error
                 });
                 return false;
@@ -291,6 +278,7 @@ define([
                 'op_type': op_type
             };
 
+            this._hideMenu();
             new DirentMvcpDialog(options);
             return false;
         },
@@ -301,12 +289,14 @@ define([
                 'dir_path': this.dir.path,
                 'repo_id': this.dir.repo_id
             };
+            this._hideMenu();
             new FolderPermView(options);
             return false;
         },
 
         lockFile: function() {
             var _this = this;
+            this._hideMenu();
             this.model.lockFile({
                 success: function() {
                     _this.$el.removeClass('hl');
@@ -320,6 +310,7 @@ define([
 
         unlockFile: function() {
             var _this = this;
+            this._hideMenu();
             this.model.unlockFile({
                 success: function() {
                     _this.$el.removeClass('hl');