Improve dropdown

media/css/seahub.css

@@ -1227,6 +1227,10 @@ textarea:-moz-placeholder {/* for FF */
 .dropdown-inline {
     display:inline-block;
 }
+button.dropdown-toggle:focus {
+    background-color:#ddd !important;
+    outline:none;
+}
 .dropdown-menu {
     position:absolute;
     background:#fff;

seahub/templates/js/templates.html

@@ -41,9 +41,9 @@
         <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>
-            <div class="dropdown dropdown-inline js-dropdown">
+            <div class="dropdown dropdown-inline">
-                <span class="sf2-icon-caret-down more-op-icon op-icon vh js-dropdown-toggle" title="{% trans "More operations" %}"></span>
+                <span class="sf2-icon-caret-down more-op-icon op-icon vh dropdown-toggle" title="{% trans "More operations" %}"></span>
-                <ul class="hidden-op repo-hidden-op hide dropdown-menu js-dropdown-content">
+                <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>
@@ -1398,9 +1398,9 @@
     <td><time title='<%- time %>'><%- time_from_now %></time></td>
     <td>
         <% if (synced_repos.length > 0) { %>
-        <div class="dropdown js-dropdown">
+        <div class="dropdown">
-            <a href="#" class="normal black js-dropdown-toggle"><%- synced_repos_length %> <span class="icon-caret-down"></span></a>
+            <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 js-dropdown-content hide">
+            <ul class="device-libs-dropdown-menu 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>
                 <% } %>

seahub/templates/libraries.html

@@ -182,9 +182,9 @@
     <div class="hd">
         <h3 class="fleft">{% trans "Organization" %}</h3>
         {% if can_add_pub_repo %}
-        <div class="fright dropdown js-dropdown js-add-pub-lib-dropdown">
+        <div class="fright dropdown dropdown js-add-pub-lib-dropdown">
-            <button class="js-dropdown-toggle"><span class="icon-plus-square add vam"></span><span class="vam">{% trans "Add Library"%}</span></button>
+            <button class="dropdown-toggle"><span class="icon-plus-square add vam"></span><span class="vam">{% trans "Add Library"%}</span></button>
-            <ul class="add-pub-lib-dropdown-menu dropdown-menu js-dropdown-content hide">
+            <ul class="add-pub-lib-dropdown-menu dropdown-menu dropdown-content hide">
                 <li><a class="op js-repo-rename share-existing" href="#">{% trans "Share existing libraries" %}</a></li>
                 <li><a class="op js-repo-rename create-new" href="#">{% trans "Create a new library" %}</a></li>
             </ul>

static/scripts/app/views/device.js

@@ -42,7 +42,7 @@ define([
             this.$el.html(this.template(data));
 
             new DropdownView({
-                el: this.$('.js-dropdown'),
+                el: this.$('.dropdown'),
                 left: '-60px'
             });
 

static/scripts/app/views/repo.js

@@ -50,7 +50,7 @@ define([
             });
             this.$el.html(this.template(obj));
             this.dropdown = new DropdownView({
-                el: this.$('.js-dropdown')
+                el: this.$('.dropdown')
             });
             return this;
         },

static/scripts/app/views/widgets/dropdown.js

@@ -19,8 +19,8 @@ define([
             return true;
         }
 
-        if (!view.$('.js-dropdown-content').is(target)
+        if (!view.$('.dropdown-menu').is(target)
-            && !view.$('.js-dropdown-content').find('*').is(target))
+            && !view.$('.dropdown-menu').find('*').is(target))
         {
             view.hide();
             if (app.ui.currentHighlightedItem) {
@@ -32,33 +32,30 @@ define([
 
     var DropdownView = Backbone.View.extend({
 
-        toggleClass: '.js-dropdown-toggle',
-        popupClass: '.js-dropdown-content',
-
         defaultOptions: {
             'left': '0px'
         },
 
         initialize: function(options) {
-            this.$el.on('click', '.js-dropdown-toggle', _.bind(this.toggleDropdown, this));
+            this.$el.on('click', '.dropdown-toggle', _.bind(this.toggleDropdown, this));
             this.options = {};
             _.extend(this.options, this.defaultOptions, options);
         },
 
         hide: function() {
             app.ui.currentDropdown = null;
-            this.$('.js-dropdown-content').addClass('hide');
+            this.$('.dropdown-menu').addClass('hide');
         },
 
         show: function() {
-            var $menu = this.$('.js-dropdown-content');
+            var $menu = this.$('.dropdown-menu');
             app.ui.currentDropdown = this;
             if (this.options.right) {
                 $menu.css('right', this.options.right);
             } else {
                 $menu.css('left', this.options.left);
             }
-            this.$('.js-dropdown-content').removeClass('hide');
+            this.$('.dropdown-menu').removeClass('hide');
         },
 
         toggleDropdown: function() {
@@ -66,7 +63,7 @@ define([
                 app.ui.currentDropdown.hide();
             }
 
-            if (this.$('.js-dropdown-content').is(':hidden')) {
+            if (this.$('.dropdown-menu').is(':hidden')) {
                 this.show();
             } else {
                 this.hide();