From 0f335a8aa3031ff981c9a25f8cca92b93e58f8eb Mon Sep 17 00:00:00 2001
From: Daniel Pan <freeplant@gmail.com>
Date: Tue, 22 Mar 2016 18:32:42 +0800
Subject: [PATCH] Rewrite repo.js with DropdownView

---
 media/css/seahub.css               |  2 ++
 seahub/templates/js/templates.html | 32 ++++++++++++++++--------------
 static/scripts/app/views/repo.js   | 25 +++++++----------------
 3 files changed, 26 insertions(+), 33 deletions(-)

diff --git a/media/css/seahub.css b/media/css/seahub.css
index c384c6391a..080c2e1650 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -1202,9 +1202,11 @@ textarea:-moz-placeholder {/* for FF */
 /**** dropdown menu ******/
 .dropdown {
     position:relative;
+    display:inline;
 }
 .dropdown-menu {
     position:absolute;
+    left:0px;
     background:#fff;
     padding:6px 1px;
     border:1px solid rgba(34,36,38,.15);
diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index 37d79609f6..89542258eb 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -41,21 +41,23 @@
         <div class="op-container">
             <span class="sf2-icon-share sf2-x repo-share-btn op-icon vh" title="{% trans "Share" %}"></span>
             <span class="sf2-icon-delete sf2-x repo-delete-btn op-icon vh" title="{% trans "Delete" %}"></span>
-            <span class="sf2-icon-caret-down more-op-icon op-icon vh js-toggle-popup" title="{% trans "More operations" %}"></span>
-            <ul class="hidden-op repo-hidden-op hide dropdown-menu">
-                <li><a class="op js-repo-rename" href="#">{% trans "Rename" %}</a></li>
-                <li><a class="op js-repo-transfer" href="#">{% trans "Transfer" %}</a></li>
-                <li><a class="op js-popup-history-setting" href="#">{% trans "History Setting" %}</a></li>
-                <% if (encrypted && enc_version == 2) { %>
-                <li><a class="op js-repo-change-password" href="#">{% trans "Change Password" %}</a></li>
-                <% } %>
-                <% if (!encrypted) { %>
-                <li><a class="op js-popup-share-link-admin" href="#">{% trans "Share Links" %}</a></li>
-                <% } %>
-                <% if (app.pageOptions.folder_perm_enabled) { %>
-                <li><a class="op js-popup-folder-perm-admin" href="#">{% trans "Folder Permission" %}</a></li>
-                <% } %>
-            </ul>
+            <div class="dropdown js-dropdown">
+                <span class="sf2-icon-caret-down more-op-icon op-icon vh js-dropdown-toggle" title="{% trans "More operations" %}"></span>
+                <ul class="hidden-op repo-hidden-op hide dropdown-menu js-dropdown-content">
+                    <li><a class="op js-repo-rename" href="#">{% trans "Rename" %}</a></li>
+                    <li><a class="op js-repo-transfer" href="#">{% trans "Transfer" %}</a></li>
+                    <li><a class="op js-popup-history-setting" href="#">{% trans "History Setting" %}</a></li>
+                    <% if (encrypted && enc_version == 2) { %>
+                    <li><a class="op js-repo-change-password" href="#">{% trans "Change Password" %}</a></li>
+                    <% } %>
+                    <% if (!encrypted) { %>
+                    <li><a class="op js-popup-share-link-admin" href="#">{% trans "Share Links" %}</a></li>
+                    <% } %>
+                    <% if (app.pageOptions.folder_perm_enabled) { %>
+                    <li><a class="op js-popup-folder-perm-admin" href="#">{% trans "Folder Permission" %}</a></li>
+                    <% } %>
+                </ul>
+            </div>
         </div>
     </td>
     <td><%= size_formatted %></td>
diff --git a/static/scripts/app/views/repo.js b/static/scripts/app/views/repo.js
index 7392878a6f..e6d189d185 100644
--- a/static/scripts/app/views/repo.js
+++ b/static/scripts/app/views/repo.js
@@ -8,10 +8,11 @@ define([
     'app/views/dialogs/repo-history-settings',
     'app/views/dialogs/repo-share-link-admin',
     'app/views/dialogs/repo-folder-perm-admin',
-    'app/views/widgets/hl-item-view'
+    'app/views/widgets/hl-item-view',
+    'app/views/widgets/dropdown'
 ], function($, _, Backbone, Common, ShareView, RepoChangePasswordDialog,
     HistorySettingsDialog, RepoShareLinkAdminDialog, RepoFolderPermAdminDialog,
-    HLItemView) {
+    HLItemView, DropdownView) {
     'use strict';
 
     var RepoView = HLItemView.extend({
@@ -25,7 +26,6 @@ define([
         events: {
             'click .repo-delete-btn': 'del',
             'click .repo-share-btn': 'share',
-            'click .js-toggle-popup': 'togglePopup',
             'click .js-repo-rename': 'rename',
             'click .js-repo-transfer': 'transfer',
             'click .js-repo-change-password': 'changePassword',
@@ -49,6 +49,9 @@ define([
                 'icon_title': this.model.getIconTitle()
             });
             this.$el.html(this.template(obj));
+            this.dropdown = new DropdownView({
+                el: this.$('.js-dropdown')
+            });
             return this;
         },
 
@@ -119,21 +122,7 @@ define([
         },
 
         togglePopup: function() {
-            var $icon = this.$('.js-toggle-popup'),
-                $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');
-            }
+            this.dropdown.hide();
         },
 
         rename: function() {