use dropdown for publib create button

media/css/seahub.css

@@ -1229,9 +1229,9 @@ textarea:-moz-placeholder {/* for FF */
 }
 .dropdown-menu {
     position:absolute;
-    left:0px;
     background:#fff;
     padding:6px 1px;
+    margin:2px 0 0;
     border:1px solid rgba(34,36,38,.15);
     border-radius:3px;
     box-shadow:0 2px 3px 0 rgba(34,36,38,.15);
@@ -1415,9 +1415,6 @@ textarea:-moz-placeholder {/* for FF */
     background:#fff;
     line-height:17px;
 }
-#add-pub-lib {
-   outline:none;
-}
 /* info-bar */
 #info-bar {
     color: #1f0600;
@@ -3534,6 +3531,5 @@ img.thumbnail {
 }
 /* devices */
 .device-libs-dropdown-menu {
-    left:-60px;
     min-width:200px;
 }

seahub/templates/libraries.html

@@ -182,12 +182,14 @@
     <div class="hd">
         <h3 class="fleft">{% trans "Organization" %}</h3>
         {% if can_add_pub_repo %}
-        <button id="add-pub-lib" class="fright "><span class="icon-plus-square add vam"></span><span class="vam">{% trans "Add Library"%}</span></button>
+        <div class="fright dropdown js-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>
+            <ul class="add-pub-lib-dropdown-menu dropdown-menu js-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>
+        </div>
         {% endif %}
-        <ul id="add-pub-lib-menu" class="hide">
-            <li class="item share-existing">{% trans "Share existing libraries" %}</li>
-            <li class="item create-new">{% trans "Create a new library" %}</li>
-        </ul>
     </div>
 
     <table class="repo-list hide">

static/scripts/app/views/device.js

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

static/scripts/app/views/organization.js

@@ -6,9 +6,10 @@ define([
     'app/collections/pub-repos',
     'app/views/organization-repo',
     'app/views/create-pub-repo',
-    'app/views/add-pub-repo'
+    'app/views/add-pub-repo',
+    'app/views/widgets/dropdown'
 ], function($, _, Backbone, Common, PubRepoCollection, OrganizationRepoView,
-    CreatePubRepoView, AddPubRepoView) {
+    CreatePubRepoView, AddPubRepoView, DropdownView) {
     'use strict';
 
     var OrganizationView = Backbone.View.extend({
@@ -29,26 +30,9 @@ define([
 
             this.dirView = options.dirView;
 
-            // show/hide 'add lib' menu
-            var $add_lib = $('#add-pub-lib'),
-                $add_lib_menu = $('#add-pub-lib-menu');
-            $add_lib.click(function() {
-                $add_lib_menu.toggleClass('hide');
-                $add_lib_menu.css({
-                    'top': $add_lib.position().top + $add_lib.outerHeight(),
-                    'right': 10 // align right with $add_lib
-                });
-            });
-            $('.item', $add_lib_menu).hover(
-                function() {
-                    $(this).css({'background':'#f3f3f3'});
-                },
-                function() {
-                    $(this).css({'background':'transparent'});
-                }
-            );
-            $(document).click(function(e) {
-                Common.closePopup(e, $add_lib_menu, $add_lib);
+            this.dropdown = new DropdownView({
+                el: this.$('.js-add-pub-lib-dropdown'),
+                right: '0px'
             });
         },
 
@@ -61,10 +45,14 @@ define([
 
         createRepo: function() {
             new CreatePubRepoView(this.repos);
+            this.dropdown.hide();
+            return false;
         },
 
         addRepo: function() {
             new AddPubRepoView(this.repos);
+            this.dropdown.hide();
+            return false;
         },
 
         addOne: function(repo, collection, options) {

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

@@ -35,8 +35,14 @@ define([
         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.options = {};
+            _.extend(this.options, this.defaultOptions, options);
         },
 
         hide: function() {
@@ -45,7 +51,13 @@ define([
         },
 
         show: function() {
+            var $menu = this.$('.js-dropdown-content');
             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');
         },