1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-08-31 22:54:11 +00:00

Improve dropdown

This commit is contained in:
Daniel Pan
2016-03-31 21:32:00 +08:00
parent b9ba54f635
commit dd906d7f68
6 changed files with 22 additions and 21 deletions

View File

@@ -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;

View File

@@ -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">
<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">
<div class="dropdown dropdown-inline">
<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">
<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">
<a href="#" class="normal black js-dropdown-toggle"><%- synced_repos_length %> <span class="icon-caret-down"></span></a>
<ul class="device-libs-dropdown-menu dropdown-menu js-dropdown-content hide">
<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">
<% 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>
<% } %>

View File

@@ -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">
<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">
<div class="fright dropdown dropdown js-add-pub-lib-dropdown">
<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 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>

View File

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

View File

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

View File

@@ -19,8 +19,8 @@ define([
return true;
}
if (!view.$('.js-dropdown-content').is(target)
&& !view.$('.js-dropdown-content').find('*').is(target))
if (!view.$('.dropdown-menu').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();