From cefd38b98d2fc08747f23a918cd3cf5d95669b81 Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Sat, 5 Mar 2016 16:41:26 +0800
Subject: [PATCH] [dir view] grid view: bugfix & improvement

---
 media/css/seahub.css                    |  6 ++++--
 static/scripts/app/views/dir.js         | 15 ++++-----------
 static/scripts/app/views/dirent-grid.js | 13 ++++++++-----
 3 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/media/css/seahub.css b/media/css/seahub.css
index 5d4d0dc3c7..e25335841a 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -163,7 +163,7 @@ ol { padding-left:2em; }
 dl { margin:1.5em 0; }
 dt { color:#666; margin:24px 0 2px; }
 dd { margin-bottom:.8em; color:#222; }
-a { color:#eb8205; text-decoration:none; font-weight:bold; }
+a { color:#eb8205; text-decoration:none; font-weight:bold; outline:none; }
 a.normal {font-weight: normal;}
 a:hover { color: #ff9933; text-decoration: underline; }
 img { border:none; }
@@ -3422,7 +3422,6 @@ textarea:-moz-placeholder {/* for FF */
     margin-right:15px;
     color:#8a8a8a;
     font-size:22px;
-    outline:none; /* removing the dotted outline for FireFox */
 }
 .repo-op .op-link:hover {
     color:#eb8205;
@@ -3874,6 +3873,9 @@ img.thumbnail {
     bottom:0px;
     right:10px;
 }
+.grid-item-op { /* the context menu */
+    box-shadow: 0 2px 2px #aaa;
+}
 #dir-view .grid-item {
     padding:10px 20px; /* use less padding */
 }
diff --git a/static/scripts/app/views/dir.js b/static/scripts/app/views/dir.js
index cff04f519d..ac0a688dc8 100644
--- a/static/scripts/app/views/dir.js
+++ b/static/scripts/app/views/dir.js
@@ -141,22 +141,15 @@ define([
                     }
                 });
 
-                // stop default event when clicking the right mouse button in grid view
-                $('.grid-view').bind("contextmenu", function(e) {
-                    if (e && e.preventDefault) {
-                        e.preventDefault();
-                    } else {
-                        window.event.returnValue = false;
-                    }
-                });
-
-                // remove 'grid-item-op' popup
+                // for 'grid view': click to hide the contextmenu of '.grid-item'
                 $(document).click(function(e) {
                     var target =  e.target || event.srcElement;
                     var $popup = $('.grid-item-op');
                     if ($popup.length > 0 &&
                         !$popup.is(target) &&
-                        !$popup.find('*').is(target)) {
+                        !$popup.find('*').is(target) &&
+                        !$popup.closest('.grid-item').is(target) &&
+                        !$popup.closest('.grid-item').find('*').is(target)) {
                         $popup.remove();
                     }
                 });
diff --git a/static/scripts/app/views/dirent-grid.js b/static/scripts/app/views/dirent-grid.js
index fdb3da6014..f13e850a09 100644
--- a/static/scripts/app/views/dirent-grid.js
+++ b/static/scripts/app/views/dirent-grid.js
@@ -77,8 +77,8 @@ define([
         events: {
             'mouseenter': 'highlight',
             'mouseleave': 'rmHighlight',
-            'contextmenu .img-link': 'showPopupMenu',
-            'contextmenu .text-link': 'showPopupMenu'
+            'click': 'closeMenu',
+            'contextmenu': 'showPopupMenu'
         },
 
         highlight: function() {
@@ -91,7 +91,10 @@ define([
             this.$('.text-link').removeClass('hl');
         },
 
-        showPopupMenu: function(event) {
+        showPopupMenu: function(e) {
+            // make sure there is only 1 menu popup
+            $('.grid-item-op', this.dirView.$dirent_grid).remove();
+
             var dir = this.dir;
             var template;
 
@@ -120,8 +123,8 @@ define([
             var el_pos = this.$el.offset();
             this.$('.grid-item-op').css({
                 'position': 'absolute',
-                'left': event.pageX - el_pos.left,
-                'top': event.pageY - el_pos.top
+                'left': e.pageX - el_pos.left,
+                'top': e.pageY - el_pos.top
             });
 
             // Using _.bind(function, object) to make that whenever the function is