From ffabf2353c9150b5f45be254479707d0acb23fe6 Mon Sep 17 00:00:00 2001
From: Daniel Pan <freeplant@gmail.com>
Date: Fri, 1 Apr 2016 17:53:41 +0800
Subject: [PATCH] fix conflict of dropdown

---
 media/css/seahub.css                         | 14 +++----
 seahub/templates/js/templates.html           | 40 ++++++++++----------
 seahub/templates/libraries.html              |  6 +--
 static/scripts/app/views/device.js           |  2 +-
 static/scripts/app/views/repo.js             |  2 +-
 static/scripts/app/views/widgets/dropdown.js | 14 +++----
 6 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/media/css/seahub.css b/media/css/seahub.css
index f1c2142298..f8bafacc86 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -1243,17 +1243,17 @@ a.popover-item {
     margin:0;
 }
 /**** dropdown menu ******/
-.dropdown {
+.sf-dropdown {
     position:relative;
 }
-.dropdown-inline {
+.sf-dropdown-inline {
     display:inline-block;
 }
-button.dropdown-toggle:focus {
+button.sf-dropdown-toggle:focus {
     background-color:#ddd !important;
     outline:none;
 }
-.dropdown-menu {
+.sf-dropdown-menu {
     position:absolute;
     background:#fff;
     padding:6px 1px;
@@ -1263,8 +1263,8 @@ button.dropdown-toggle:focus {
     box-shadow:0 2px 3px 0 rgba(34,36,38,.15);
     z-index:10;
 }
-.dropdown-menu li a,
-.dropdown-menu a {
+.sf-dropdown-menu li a,
+.sf-dropdown-menu a {
     display:block;
     padding:4px 12px;
     min-width:110px;
@@ -1272,7 +1272,7 @@ button.dropdown-toggle:focus {
     color:#444;
     font-weight:normal;
 }
-.dropdown-menu a:hover {
+.sf-dropdown-menu a:hover {
     background:#feaa7c;
     text-decoration:none;
     color:#fff;
diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index fee286c830..69bb2f6838 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -41,9 +41,9 @@
         <div class="op-container">
             <a href="#" class="sf2-icon-share sf2-x repo-share-btn op-icon vh" title="{% trans "Share" %}" aria-label="{% trans "Share" %}"></a>
             <a href="#" class="sf2-icon-delete sf2-x repo-delete-btn op-icon vh" title="{% trans "Delete" %}" aria-label="{% trans "Delete" %}"></a>
-            <div class="dropdown dropdown-inline">
-                <a href="#" class="sf2-icon-caret-down more-op-icon op-icon vh dropdown-toggle" title="{% trans "More operations" %}" aria-label="{% trans "More operations" %}"></a>
-                <ul class="hidden-op repo-hidden-op hide dropdown-menu">
+            <div class="sf-dropdown sf-dropdown-inline">
+                <a href="#" class="sf2-icon-caret-down more-op-icon op-icon vh sf-dropdown-toggle" title="{% trans "More operations" %}" aria-label="{% trans "More operations" %}"></a>
+                <ul class="hidden-op repo-hidden-op hide sf-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>
@@ -211,9 +211,9 @@
                 <% } %>
             </div>
             <% if (dirent.perm == 'rw') { %>
-            <div class="dropdown dropdown-inline">
-                <a href="#" class="more-op-icon sf2-icon-caret-down op-icon vh dropdown-toggle" title="{% trans "More operations" %}" aria-label="{% trans "More Operations" %}"></a>
-                <ul class="hidden-op dirent-hidden-op hide dropdown-menu">
+            <div class="sf-dropdown sf-dropdown-inline">
+                <a href="#" class="more-op-icon sf2-icon-caret-down op-icon vh sf-dropdown-toggle" title="{% trans "More operations" %}" aria-label="{% trans "More Operations" %}"></a>
+                <ul class="hidden-op dirent-hidden-op hide sf-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>
@@ -224,9 +224,9 @@
                 </ul>
             </div>
             <% } else if (dirent.perm == 'r' && !repo_encrypted) { %>
-            <div class="dropdown dropdown-inline">
-                <a href="#" class="more-op-icon sf2-icon-caret-down op-icon vh dropdown-toggle" title="{% trans "More operations" %}" aria-label="{% trans "More Operations" %}"></a>
-                <ul class="hidden-op dirent-hidden-op hide dropdown-menu">
+            <div class="sf-dropdown sf-dropdown-inline">
+                <a href="#" class="more-op-icon sf2-icon-caret-down op-icon vh sf-dropdown-toggle" title="{% trans "More operations" %}" aria-label="{% trans "More Operations" %}"></a>
+                <ul class="hidden-op dirent-hidden-op hide sf-dropdown-menu">
                     <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
                 </ul>
             </div>
@@ -294,9 +294,9 @@
                 <% } %>
             </div>
             <% if (dirent.perm == 'rw') { %>
-            <div class="dropdown dropdown-inline">
-                <a href="#" class="more-op-icon sf2-icon-caret-down op-icon vh dropdown-toggle" title="{% trans "More Operations"%}" aria-label="{% trans "More Operations" %}"></a>
-                <ul class="hidden-op dirent-hidden-op hide dropdown-menu">
+            <div class="sf-dropdown sf-dropdown-inline">
+                <a href="#" class="more-op-icon sf2-icon-caret-down op-icon vh sf-dropdown-toggle" title="{% trans "More Operations"%}" aria-label="{% trans "More Operations" %}"></a>
+                <ul class="hidden-op dirent-hidden-op hide sf-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>
@@ -317,9 +317,9 @@
                 </ul>
             </div>
             <% } else if (dirent.perm == 'r' && !repo_encrypted) { %>
-            <div class="dropdown dropdown-inline">
-                <a class="more-op-icon sf2-icon-caret-down op-icon vh dropdown-toggle" title="{% trans "More operations" %}" aria-label="{% trans "More Operations" %}"></a>
-                <ul class="hidden-op dirent-hidden-op hide dropdown-menu">
+            <div class="sf-dropdown sf-dropdown-inline">
+                <a class="more-op-icon sf2-icon-caret-down op-icon vh sf-dropdown-toggle" title="{% trans "More operations" %}" aria-label="{% trans "More Operations" %}"></a>
+                <ul class="hidden-op dirent-hidden-op hide sf-dropdown-menu">
                     <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
                 </ul>
             </div>
@@ -365,7 +365,7 @@
 </script>
 
 <script type="text/template" id="grid-view-file-op-tmpl">
-    <ul class="grid-item-op dropdown-menu">
+    <ul class="grid-item-op sf-dropdown-menu">
         <li><a class="op download" href="<%= download_url %>">{% trans "Download" %}</a></li>
         <% if (!repo_encrypted && can_generate_shared_link) { %>
         <li><a class="op share" href="#">{% trans "Share" %}</a></li>
@@ -391,7 +391,7 @@
 </script>
 
 <script type="text/template" id="grid-view-dir-op-tmpl">
-    <ul class="grid-item-op dropdown-menu">
+    <ul class="grid-item-op sf-dropdown-menu">
         <li><a class="op download" href="<%= download_url %>">{% trans "Download" %}</a></li>
         <% if (!repo_encrypted && can_generate_shared_link) { %>
         <li><a class="op share" href="#">{% trans "Share" %}</a></li>
@@ -1400,9 +1400,9 @@
     <td><time title='<%- time %>'><%- time_from_now %></time></td>
     <td>
         <% if (synced_repos.length > 0) { %>
-        <div class="dropdown">
-            <a href="#" class="normal black dropdown-toggle"><%- synced_repos_length %> <span class="icon-caret-down"></span></a>
-            <ul class="device-libs-dropdown-menu dropdown-menu hide">
+        <div class="sf-dropdown">
+            <a href="#" class="normal black sf-dropdown-toggle"><%- synced_repos_length %> <span class="icon-caret-down"></span></a>
+            <ul class="device-libs-dropdown-menu sf-dropdown-menu hide">
                 <% for (var i = 0, len = synced_repos_length; i < len; i++) { %>
                 <li><a href="#common/lib/<%- synced_repos[i].repo_id %>"><%- synced_repos[i].repo_name %></a></li>
                 <% } %>
diff --git a/seahub/templates/libraries.html b/seahub/templates/libraries.html
index acc2bf18a3..9bd232da5d 100644
--- a/seahub/templates/libraries.html
+++ b/seahub/templates/libraries.html
@@ -42,9 +42,9 @@
     <div class="hd">
         <h3 class="fleft">{% trans "Organization" %}</h3>
         {% if can_add_pub_repo %}
-        <div class="fright dropdown js-add-pub-lib-dropdown">
-            <button class="dropdown-toggle"><span aria-hidden="true" class="icon-plus-square add vam"></span><span class="vam">{% trans "Add Library"%}</span></button>
-            <ul class="dropdown-menu hide">
+        <div class="fright sf-dropdown js-add-pub-lib-dropdown">
+            <button class="sf-dropdown-toggle"><span aria-hidden="true" class="icon-plus-square add vam"></span><span class="vam">{% trans "Add Library"%}</span></button>
+            <ul class="sf-dropdown-menu hide">
                 <li><a class="op share-existing" href="#">{% trans "Share existing libraries" %}</a></li>
                 <li><a class="op create-new" href="#">{% trans "Create a new library" %}</a></li>
             </ul>
diff --git a/static/scripts/app/views/device.js b/static/scripts/app/views/device.js
index 9f6836b32f..2a68e270e2 100644
--- a/static/scripts/app/views/device.js
+++ b/static/scripts/app/views/device.js
@@ -42,7 +42,7 @@ define([
             this.$el.html(this.template(data));
 
             new DropdownView({
-                el: this.$('.dropdown'),
+                el: this.$('.sf-dropdown'),
                 left: '-60px'
             });
 
diff --git a/static/scripts/app/views/repo.js b/static/scripts/app/views/repo.js
index c37bd94331..1f8248f18f 100644
--- a/static/scripts/app/views/repo.js
+++ b/static/scripts/app/views/repo.js
@@ -50,7 +50,7 @@ define([
             });
             this.$el.html(this.template(obj));
             this.dropdown = new DropdownView({
-                el: this.$('.dropdown')
+                el: this.$('.sf-dropdown')
             });
             return this;
         },
diff --git a/static/scripts/app/views/widgets/dropdown.js b/static/scripts/app/views/widgets/dropdown.js
index 8ecc908e89..7fc54bad52 100644
--- a/static/scripts/app/views/widgets/dropdown.js
+++ b/static/scripts/app/views/widgets/dropdown.js
@@ -19,8 +19,8 @@ define([
             return true;
         }
 
-        if (!view.$('.dropdown-menu').is(target)
-            && !view.$('.dropdown-menu').find('*').is(target))
+        if (!view.$('.sf-dropdown-menu').is(target)
+            && !view.$('.sf-dropdown-menu').find('*').is(target))
         {
             view.hide();
             if (app.ui.currentHighlightedItem) {
@@ -50,7 +50,7 @@ define([
         },
 
         initialize: function(options) {
-            this.$el.on('click', '.dropdown-toggle', _.bind(this.toggleDropdown, this));
+            this.$el.on('click', '.sf-dropdown-toggle', _.bind(this.toggleDropdown, this));
             this.$el.on('keydown', _.bind(this.handleKeydown, this));
             this.options = {};
             _.extend(this.options, this.defaultOptions, options);
@@ -58,18 +58,18 @@ define([
 
         hide: function() {
             app.ui.currentDropdown = null;
-            this.$('.dropdown-menu').addClass('hide');
+            this.$('.sf-dropdown-menu').addClass('hide');
         },
 
         show: function() {
-            var $menu = this.$('.dropdown-menu');
+            var $menu = this.$('.sf-dropdown-menu');
             app.ui.currentDropdown = this;
             if (this.options.right) {
                 $menu.css('right', this.options.right);
             } else {
                 $menu.css('left', this.options.left);
             }
-            this.$('.dropdown-menu').removeClass('hide');
+            this.$('.sf-dropdown-menu').removeClass('hide');
         },
 
         toggleDropdown: function() {
@@ -77,7 +77,7 @@ define([
                 app.ui.currentDropdown.hide();
             }
 
-            if (this.$('.dropdown-menu').is(':hidden')) {
+            if (this.$('.sf-dropdown-menu').is(':hidden')) {
                 this.show();
             } else {
                 this.hide();