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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -10,7 +10,7 @@ define([
* Popover View. * Popover View.
*/ */
// There can be only one visible popover view // There can be only one visible sf-popover view
$(document).click(function(e) { $(document).click(function(e) {
var view = app.ui.currentPopover; var view = app.ui.currentPopover;
var target = e.target || event.srcElement; var target = e.target || event.srcElement;
@@ -51,9 +51,9 @@ define([
this.$el.on('click', '.close', _.bind(this.hide, this)); this.$el.on('click', '.close', _.bind(this.hide, this));
}, },
// set max-height for '.popover-con' // set max-height for '.sf-popover-con'
setConMaxHeight: function() { 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() { hide: function() {