1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-19 18:29:23 +00:00

Fix popover

This commit is contained in:
Daniel Pan
2016-04-27 14:48:25 +08:00
parent 8a27905aa5
commit 5749c0784f
10 changed files with 60 additions and 60 deletions

View File

@@ -18,7 +18,7 @@
*/
/*
* z-index:
* popover: 20
* sf-popover: 20
*
*/
@@ -1167,11 +1167,11 @@ textarea:-moz-placeholder {/* for FF */
color:#fff;
text-decoration:none;
}
/**** popover ****/ /* e.g. top notice popup, group members popup */
.popover-container {
/**** sf-popover ****/ /* e.g. top notice popup, group members popup */
.sf-popover-container {
position:relative;
}
.popover {
.sf-popover {
width:240px;
background:#fff;
border:1px solid #c9c9c9;
@@ -1180,25 +1180,25 @@ textarea:-moz-placeholder {/* for FF */
position:absolute;
z-index: 20;
}
.popover-hd {
.sf-popover-hd {
padding:5px 0 3px;
border-bottom:1px solid #dfdfe1;
margin:0 10px;
}
.popover-title {
.sf-popover-title {
text-align:center;
margin:0;
}
.popover-close {
.sf-popover-close {
font-size:16px;
color:#b9b9b9;
margin:4px 0 0;
}
.popover-con {
.sf-popover-con {
padding:0 10px;
overflow:auto;
}
a.popover-item {
a.sf-popover-item {
display:block;
color:#444;
font-weight:normal;
@@ -1524,7 +1524,7 @@ button.sf-dropdown-toggle:focus {
top:-10px;
left:200px;
}
.account-popup .popover-con {
.account-popup .sf-popover-con {
padding:0;
}
.account-popup .item {
@@ -3333,7 +3333,7 @@ img.thumbnail {
#group-discussions .outer-caret {
right:30px;
}
#group-discussions .popover-con {
#group-discussions .sf-popover-con {
padding:0 0;
}
/****** grid view *****/

View File

@@ -51,9 +51,9 @@
<a id="my-info" href="#" class="no-deco" aria-label="{% trans "View profile and more" %}">
{% avatar request.user 36 %} <span class="icon-caret-down vam"></span>
</a>
<div id="user-info-popup" class="account-popup popover hide">
<div id="user-info-popup" class="account-popup sf-popover hide">
<div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
<div class="popover-con">
<div class="sf-popover-con">
<div class="item ovhd">
{% avatar request.user 36 %}
<div class="txt">

View File

@@ -1005,37 +1005,37 @@
<script type="text/template" id="group-settings-content-tmpl">
<% if (is_owner) { %>
<ul class="group-setting-list">
<li><a href="#" class="group-setting-item popover-item" data-op="rename">{% trans "Rename" %}</a></li>
<li><a href="#" class="group-setting-item popover-item" data-op="transfer">{% trans "Transfer" %}</a></li>
<li><a href="#" class="group-setting-item sf-popover-item" data-op="rename">{% trans "Rename" %}</a></li>
<li><a href="#" class="group-setting-item sf-popover-item" data-op="transfer">{% trans "Transfer" %}</a></li>
<% if (!wiki_enabled) { %>
<li><a href="#" class="group-setting-item popover-item" data-op="add-wiki">{% trans "Add Wiki" %}</a></li>
<li><a href="#" class="group-setting-item sf-popover-item" data-op="add-wiki">{% trans "Add Wiki" %}</a></li>
<% } else { %>
<li><a href="#" class="group-setting-item popover-item" data-op="remove-wiki">{% trans "Remove Wiki" %}</a></li>
<li><a href="#" class="group-setting-item sf-popover-item" data-op="remove-wiki">{% trans "Remove Wiki" %}</a></li>
<% } %>
</ul>
<ul class="group-setting-list">
<li><a href="#" class="group-setting-item popover-item" data-op="import-members">{% trans "Import Members" %}</a></li>
<li><a href="#" class="group-setting-item popover-item" data-op="manage-members">{% trans "Manage Members" %}</a></li>
<li><a href="#" class="group-setting-item sf-popover-item" data-op="import-members">{% trans "Import Members" %}</a></li>
<li><a href="#" class="group-setting-item sf-popover-item" data-op="manage-members">{% trans "Manage Members" %}</a></li>
</ul>
<ul class="last-group-setting-list">
<li><a href="#" class="group-setting-item popover-item" data-op="dismiss">{% trans "Dismiss" %}</a></li>
<li><a href="#" class="group-setting-item sf-popover-item" data-op="dismiss">{% trans "Dismiss" %}</a></li>
</ul>
<% } else if (is_admin) { %>
<ul class="group-setting-list">
<li><a href="#" class="group-setting-item popover-item" data-op="rename">{% trans "Rename" %}</a></li>
<li><a href="#" class="group-setting-item sf-popover-item" data-op="rename">{% trans "Rename" %}</a></li>
<% if (!wiki_enabled) { %>
<li><a href="#" class="group-setting-item popover-item" data-op="add-wiki">{% trans "Add Wiki" %}</a></li>
<li><a href="#" class="group-setting-item sf-popover-item" data-op="add-wiki">{% trans "Add Wiki" %}</a></li>
<% } else { %>
<li><a href="#" class="group-setting-item popover-item" data-op="remove-wiki">{% trans "Remove Wiki" %}</a></li>
<li><a href="#" class="group-setting-item sf-popover-item" data-op="remove-wiki">{% trans "Remove Wiki" %}</a></li>
<% } %>
</ul>
<ul class="last-group-setting-list">
<li><a href="#" class="group-setting-item popover-item" data-op="import-members">{% trans "Import Members" %}</a></li>
<li><a href="#" class="group-setting-item popover-item" data-op="manage-members">{% trans "Manage Members" %}</a></li>
<li><a href="#" class="group-setting-item sf-popover-item" data-op="import-members">{% trans "Import Members" %}</a></li>
<li><a href="#" class="group-setting-item sf-popover-item" data-op="manage-members">{% trans "Manage Members" %}</a></li>
</ul>
<% } else { %>
<ul class="last-group-setting-list">
<li><a href="#" class="group-setting-item popover-item" data-op="leave">{% trans "Leave group" %}</a></li>
<li><a href="#" class="group-setting-item sf-popover-item" data-op="leave">{% trans "Leave group" %}</a></li>
</ul>
<% } %>
</script>
@@ -1421,11 +1421,11 @@
<script type="text/template" id="notice-popover-tmpl">
<div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
<div class="popover-hd ovhd">
<a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="popover-close close sf2-icon-x1 op-icon fright"></a>
<h3 class="popover-title">{% trans "Notifications" %}</h3>
<div class="sf-popover-hd ovhd">
<a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close close sf2-icon-x1 op-icon fright"></a>
<h3 class="sf-popover-title">{% trans "Notifications" %}</h3>
</div>
<div class="popover-con">
<div class="sf-popover-con">
<div class="loading-icon loading-tip"></div>
<p class="error alc hide"></p>
<ul class="hide notice-list"></ul>
@@ -1435,7 +1435,7 @@
<script type="text/template" id="user-info-popup-tmpl">
<div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
<div class="popover-con">
<div class="sf-popover-con">
<div class="item ovhd">
{% avatar request.user 36 %}
<div class="txt">

View File

@@ -115,21 +115,21 @@
<script type="text/template" id="group-settings-tmpl">
<div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
<div class="popover-hd ovhd">
<a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="popover-close close sf2-icon-x1 op-icon fright"></a>
<h3 class="popover-title">{% trans "Settings" %}</h3>
<div class="sf-popover-hd ovhd">
<a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close close sf2-icon-x1 op-icon fright"></a>
<h3 class="sf-popover-title">{% trans "Settings" %}</h3>
</div>
<div class="popover-con">
<div class="sf-popover-con">
</div>
</script>
<script type="text/template" id="group-members-tmpl">
<div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
<div class="popover-hd ovhd">
<a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="popover-close close sf2-icon-x1 op-icon fright"></a>
<h3 class="popover-title">{% trans "Members" %}</h3>
<div class="sf-popover-hd ovhd">
<a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close close sf2-icon-x1 op-icon fright"></a>
<h3 class="sf-popover-title">{% trans "Members" %}</h3>
</div>
<div class="popover-con">
<div class="sf-popover-con">
<div class="loading-icon loading-tip"></div>
<ul id="group-member-list" class="hide"></ul>
<p class="error hide"></p>
@@ -138,18 +138,18 @@
<script type="text/template" id="group-discussions-tmpl">
<div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
<div class="popover-hd ovhd">
<a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="popover-close close sf2-icon-x1 op-icon fright"></a>
<h3 class="popover-title">{% trans "Discussions" %}</h3>
<div class="sf-popover-hd ovhd">
<a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close close sf2-icon-x1 op-icon fright"></a>
<h3 class="sf-popover-title">{% trans "Discussions" %}</h3>
</div>
<div class="popover-con">
<div class="sf-popover-con">
<div class="loading-icon loading-tip"></div>
<p class="load-more-discussion hide js-load-more">{% trans "More..." %}</p>
<ul id="group-discussion-list" class="hide"></ul>
<p class="no-discussion-tip hide">{% trans "No discussion in this group yet." %}</p>
<p class="error hide"></p>
</div>
<div class="popover-footer">
<div class="sf-popover-footer">
<form action="" method="post" class="msg-form">
<img src="{% avatar_url request.user 64 %}" alt="" width="32" class="avatar-circle fleft" />
<div class="msg-body">

View File

@@ -9,7 +9,7 @@ define([
var View = PopoverView.extend({
id: 'user-info-popup',
className: 'popover account-popup',
className: 'sf-popover account-popup',
template: _.template($('#user-info-popup-tmpl').html()),

View File

@@ -11,7 +11,7 @@ define([
var View = PopoverView.extend({
id: 'group-discussions',
className: 'popover',
className: 'sf-popover',
template: _.template($('#group-discussions-tmpl').html()),
@@ -120,12 +120,12 @@ define([
app.router.navigate('group/' + this.groupView.group.id + '/discussions/');
},
// set max-height for '.popover-con'
// set max-height for '.sf-popover-con'
setConMaxHeight: function() {
this.$('.popover-con').css({
this.$('.sf-popover-con').css({
'max-height': $(window).height() - this.$el.offset().top
- this.$('.popover-hd').outerHeight(true)
- this.$('.popover-footer').outerHeight(true)
- this.$('.sf-popover-hd').outerHeight(true)
- this.$('.sf-popover-footer').outerHeight(true)
- 2 // 2: top, bottom border width of $el,
- 10 // 10: leave some margin at the bottom
});
@@ -164,7 +164,7 @@ define([
sumHeight += $(this).outerHeight(true);
});
// scroll
_this.$('.popover-con').scrollTop(sumHeight - 50); // 50: keep at least 50px gap from the top
_this.$('.sf-popover-con').scrollTop(sumHeight - 50); // 50: keep at least 50px gap from the top
},
error: function(collection, response, opts) {
var err_msg;
@@ -227,9 +227,9 @@ define([
return false;
},
// scroll '.popover-con' to the bottom
// scroll '.sf-popover-con' to the bottom
scrollConToBottom: function() {
var $el = this.$('.popover-con');
var $el = this.$('.sf-popover-con');
$el.scrollTop($el[0].scrollHeight - $el[0].clientHeight);
}

View File

@@ -11,7 +11,7 @@ define([
var View = PopoverView.extend({
id: 'group-members',
className: 'popover',
className: 'sf-popover',
template: _.template($('#group-members-tmpl').html()),

View File

@@ -10,7 +10,7 @@ define([
var View = PopoverView.extend({
id: 'group-settings',
className: 'popover',
className: 'sf-popover',
template: _.template($('#group-settings-tmpl').html()),
contentTemplate: _.template($('#group-settings-content-tmpl').html()),
@@ -36,7 +36,7 @@ define([
},
showContent: function() {
this.$listContainer = this.$('.popover-con');
this.$listContainer = this.$('.sf-popover-con');
// the user's role in this group
this.is_owner = false;

View File

@@ -9,7 +9,7 @@ define([
var View = PopoverView.extend({
id: 'notice-popover',
className: 'popover',
className: 'sf-popover',
template: _.template($('#notice-popover-tmpl').html()),

View File

@@ -10,7 +10,7 @@ define([
* Popover View.
*/
// There can be only one visible popover view
// There can be only one visible sf-popover view
$(document).click(function(e) {
var view = app.ui.currentPopover;
var target = e.target || event.srcElement;
@@ -51,9 +51,9 @@ define([
this.$el.on('click', '.close', _.bind(this.hide, this));
},
// set max-height for '.popover-con'
// set max-height for '.sf-popover-con'
setConMaxHeight: function() {
this.$('.popover-con').css({'max-height': $(window).height() - this.$el.offset().top - this.$('.popover-hd').outerHeight(true) - 2}); // 2: top, bottom border width of $el
this.$('.sf-popover-con').css({'max-height': $(window).height() - this.$el.offset().top - this.$('.sf-popover-hd').outerHeight(true) - 2}); // 2: top, bottom border width of $el
},
hide: function() {