haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-04 00:20:07 +00:00
Code Issues Releases Wiki Activity

added transition to show/hide of feedback messages

Browse Source
This commit is contained in:
llj
2017-12-12 17:13:01 +08:00
parent ac4a49096b
commit b16a829ead
4 changed files with 52 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
media/css/seahub.css
View File

@@ -1128,6 +1128,9 @@ textarea:-moz-placeholder {/* for FF */
-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2); -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
z-index:999; /* for repo.html: to show on top of fixed-hd */ z-index:999; /* for repo.html: to show on top of fixed-hd */
-webkit-transition: top 0.5s ease;
-moz-transition: top 0.5s ease;
transition: top 0.5s ease;
} }
.messages .info { .messages .info {
padding:5px; padding:5px;

46
media/js/base.js
View File

@@ -5,12 +5,6 @@ $('#title-panel, #left-panel, #right-panel').each(function() { // for ie 7
}); });
$('#tabs').tabs({cookie:{expires:1}}); $('#tabs').tabs({cookie:{expires:1}});
// handle messages
if ($('.messages')[0]) {
$('#main').append($('.messages'));
$('.messages').css({'left':($(window).width() - $('.messages').width())/2, 'top':10}).removeClass('hide');
setTimeout(function() { $('.messages').addClass('hide'); }, 10000);
}
$(function() { $(function() {
@@ -410,15 +404,43 @@ function apply_form_error(formid, error_msg) {
// show feedback // show feedback
function feedback(con, type, time) { function feedback(con, type, time) {
var time = time || 5000; var time = time || 5000;
if ($('.messages')[0]) { var $el;
$('.messages').html('<li class="' + type + '">' + con + '</li>'); var hide_pos_top,
show_pos_top = '15px';
if ($('.messages').length > 0) {
$el = $('.messages').html('<li class="' + type + '">' + this.HTMLescape(con) + '</li>');
} else { } else {
var html = '<ul class="messages"><li class="' + type + '">' + con + '</li></ul>'; $el = $('<ul class="messages"><li class="' + type + '">' + this.HTMLescape(con) + '</li></ul>');
$('#main').append(html); $('#main').append($el);
} }
$('.messages').css({'left':($(window).width() - $('.messages').width())/2, 'top':10}).removeClass('hide');
setTimeout(function() { $('.messages').addClass('hide'); }, time); hide_pos_top = '-' + ($el.outerHeight() + parseInt(show_pos_top)) + 'px';
// add transition: from 'hide' to 'show'. the transition effect is offered by CSS.
$el.css({'left':($(window).width() - $el.width())/2, 'top': hide_pos_top});
setTimeout(function() { $el.css({'top': show_pos_top}); }, 10);
setTimeout(function() { $el.css({'top': hide_pos_top}); }, time);
} }
// handle existing messages (in base.html)
(function() {
var $el;
var hide_pos_top,
show_pos_top = '15px';
if ($('.messages').length > 0) {
$el = $('.messages');
hide_pos_top = '-' + ($el.outerHeight() + parseInt(show_pos_top)) + 'px';
// add transition: from 'hide' to 'show'. the transition effect is offered by CSS.
$el.css({'left':($(window).width() - $el.width())/2, 'top': hide_pos_top});
setTimeout(function() { $el.css({'top': show_pos_top}); }, 10);
setTimeout(function() { $el.css({'top': hide_pos_top}); }, 5000);
}
})();
function disable(btn) { function disable(btn) {
btn.attr('disabled', 'disabled').addClass('btn-disabled'); btn.attr('disabled', 'disabled').addClass('btn-disabled');
} }

2
seahub/templates/base.html
View File

@@ -113,7 +113,7 @@
{% endblock %} {% endblock %}
{% if messages %} {% if messages %}
<ul class="messages hide"> <ul class="messages">
{% for message in messages %} {% for message in messages %}
<li class="{{ message.tags }}"> <li class="{{ message.tags }}">
{% if 'safe' in message.tags %} {% if 'safe' in message.tags %}

19
static/scripts/common.js
View File

@@ -375,14 +375,23 @@ define([
feedback: function(con, type, time) { feedback: function(con, type, time) {
var time = time || 5000; var time = time || 5000;
var $el;
var hide_pos_top,
show_pos_top = '15px';
if ($('.messages').length > 0) { if ($('.messages').length > 0) {
$('.messages').html('<li class="' + type + '">' + this.HTMLescape(con) + '</li>'); $el = $('.messages').html('<li class="' + type + '">' + this.HTMLescape(con) + '</li>');
} else { } else {
var html = '<ul class="messages"><li class="' + type + '">' + this.HTMLescape(con) + '</li></ul>'; $el = $('<ul class="messages"><li class="' + type + '">' + this.HTMLescape(con) + '</li></ul>');
$('#main').append(html); $('#main').append($el);
} }
$('.messages').css({'left':($(window).width() - $('.messages').width())/2, 'top':10}).removeClass('hide');
setTimeout(function() { $('.messages').addClass('hide'); }, time); hide_pos_top = '-' + ($el.outerHeight() + parseInt(show_pos_top)) + 'px';
// add transition: from 'hide' to 'show'. the transition effect is offered by CSS.
$el.css({'left':($(window).width() - $el.width())/2, 'top': hide_pos_top});
setTimeout(function() { $el.css({'top': show_pos_top}); }, 10);
setTimeout(function() { $el.css({'top': hide_pos_top}); }, time);
}, },
showFormError: function(formid, error_msg) { showFormError: function(formid, error_msg) {