mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-19 18:29:23 +00:00
Fix popover
This commit is contained in:
@@ -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 *****/
|
||||||
|
@@ -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">
|
||||||
|
@@ -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">
|
||||||
|
@@ -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">
|
||||||
|
@@ -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()),
|
||||||
|
|
||||||
|
@@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@@ -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()),
|
||||||
|
|
||||||
|
@@ -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;
|
||||||
|
@@ -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()),
|
||||||
|
|
||||||
|
@@ -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() {
|
||||||
|
Reference in New Issue
Block a user