mirror of
https://github.com/ether/etherpad-lite.git
synced 2025-01-31 19:02:59 +01:00
css: improve gritters
- have two containers, one of the top, on of the bottom; - remove gritting chat message when opening the chat.
This commit is contained in:
Sebastian Castro
muxator
parent
3e12b6d132
commit
b06324ad80
5 changed files with 90 additions and 37 deletions
|
|
@ -1,18 +1,23 @@
|
|||
#gritter-container {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
text-align: center;
|
||||
z-index: 9999;
|
||||
}
|
||||
#gritter-container.top {
|
||||
top: 20px;
|
||||
}
|
||||
#gritter-container.bottom {
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
.gritter-item.popup {
|
||||
position: relative;
|
||||
max-width: 450px;
|
||||
visibility: visible;
|
||||
right: auto;
|
||||
left: auto;
|
||||
right: auto !important;
|
||||
left: auto !important;
|
||||
top: auto;
|
||||
bottom: auto;
|
||||
}
|
||||
|
|
@ -33,4 +38,12 @@
|
|||
.gritter-item.error .popup-content {
|
||||
color: #a84341;
|
||||
background-color: #eed3d4;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
#gritter-container {
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -32,9 +32,12 @@ var chat = (function()
|
|||
{
|
||||
$("#chaticon").removeClass('visible');
|
||||
$("#chatbox").addClass('visible');
|
||||
self.scrollDown();
|
||||
self.scrollDown(true);
|
||||
chatMentions = 0;
|
||||
Tinycon.setBubble(0);
|
||||
$('.chat-gritter-msg').each(function() {
|
||||
$.gritter.remove(this.id);
|
||||
});
|
||||
},
|
||||
focus: function ()
|
||||
{
|
||||
|
|
@ -86,10 +89,10 @@ var chat = (function()
|
|||
$("#chatbox").removeClass('visible');
|
||||
}
|
||||
},
|
||||
scrollDown: function()
|
||||
scrollDown: function(force)
|
||||
{
|
||||
if($('.chat-content').is(':visible')){
|
||||
if(!self.lastMessage || !self.lastMessage.position() || self.lastMessage.position().top < ($('#chattext').outerHeight() + 20)) {
|
||||
if ($('#chatbox').hasClass('visible')) {
|
||||
if (force || !self.lastMessage || !self.lastMessage.position() || self.lastMessage.position().top < ($('#chattext').outerHeight() + 20)) {
|
||||
// if we use a slow animate here we can have a race condition when a users focus can not be moved away
|
||||
// from the last message recieved.
|
||||
$('#chattext').animate({scrollTop: $('#chattext')[0].scrollHeight}, { duration: 400, queue: false });
|
||||
|
|
@ -155,14 +158,14 @@ var chat = (function()
|
|||
var alreadyFocused = $("#chatinput").is(":focus");
|
||||
|
||||
// does the user already have the chatbox open?
|
||||
var chatOpen = $(".chat-content").is(":visible");
|
||||
var chatOpen = $("#chatbox").hasClass("visible");
|
||||
|
||||
// does this message contain this user's name? (is the curretn user mentioned?)
|
||||
var myName = $('#myusernameedit').val();
|
||||
var wasMentioned = (text.toLowerCase().indexOf(myName.toLowerCase()) !== -1 && myName != "undefined");
|
||||
|
||||
if(wasMentioned && !alreadyFocused && !isHistoryAdd && !chatOpen)
|
||||
{ // If the user was mentioned show for twice as long and flash the browser window
|
||||
{ // If the user was mentioned, make the message sticky
|
||||
chatMentions++;
|
||||
Tinycon.setBubble(chatMentions);
|
||||
ctx.sticky = true;
|
||||
|
|
@ -187,14 +190,11 @@ var chat = (function()
|
|||
|
||||
if(!chatOpen && ctx.duration > 0) {
|
||||
$.gritter.add({
|
||||
// (string | mandatory) the heading of the notification
|
||||
title: ctx.authorName,
|
||||
// (string | mandatory) the text inside the notification
|
||||
text: ctx.text,
|
||||
// (bool | optional) if you want it to fade out on its own or just sit there
|
||||
text: '<span class="author-name">' + ctx.authorName + '</span>' + ctx.text,
|
||||
sticky: ctx.sticky,
|
||||
// (int | optional) the time you want it to be alive for before fading out
|
||||
time: ctx.duration
|
||||
time: 5000,
|
||||
position: 'bottom',
|
||||
class_name: 'chat-gritter-msg'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
* @see Gritter#removeSpecific();
|
||||
*/
|
||||
$.gritter.remove = function(id, params){
|
||||
Gritter.removeSpecific(id, params || {});
|
||||
Gritter.removeSpecific(id.split('gritter-item-')[1], params || {});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -74,7 +74,8 @@
|
|||
_custom_timer: 0,
|
||||
_item_count: 0,
|
||||
_is_setup: 0,
|
||||
_tpl_wrap: '<div id="gritter-container"></div>',
|
||||
_tpl_wrap_top: '<div id="gritter-container" class="top"></div>',
|
||||
_tpl_wrap_bottom: '<div id="gritter-container" class="bottom"></div>',
|
||||
_tpl_close: '',
|
||||
_tpl_title: '<h3 class="gritter-title">[[title]]</h3>',
|
||||
_tpl_item: [
|
||||
|
|
@ -114,6 +115,7 @@
|
|||
var title = params.title,
|
||||
text = params.text,
|
||||
image = params.image || '',
|
||||
position = params.position || 'top',
|
||||
sticky = params.sticky || false,
|
||||
item_class = params.class_name || $.gritter.options.class_name,
|
||||
time_alive = params.time || '';
|
||||
|
|
@ -158,7 +160,11 @@
|
|||
return false;
|
||||
}
|
||||
|
||||
$('#gritter-container').append(tmp);
|
||||
if (['top', 'bottom'].indexOf(position) == -1) {
|
||||
position = 'top';
|
||||
}
|
||||
|
||||
$('#gritter-container.' + position).append(tmp);
|
||||
|
||||
var item = $('#gritter-item-' + this._item_count);
|
||||
|
||||
|
|
@ -199,9 +205,11 @@
|
|||
this['_after_close_' + unique_id](e, manual_close);
|
||||
|
||||
// Remove container if empty
|
||||
if ($('#gritter-container .gritter-item').length == 0) {
|
||||
$('#gritter-container').remove();
|
||||
}
|
||||
$('#gritter-container').each(function() {
|
||||
if ($(this).find('.gritter-item').length == 0) {
|
||||
$(this).remove();
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -367,11 +375,13 @@
|
|||
* @private
|
||||
*/
|
||||
_verifyWrapper: function(){
|
||||
|
||||
if($('#gritter-container').length == 0){
|
||||
$('#editorcontainerbox').append(this._tpl_wrap);
|
||||
if ($('#gritter-container.top').length === 0) {
|
||||
$('#editorcontainerbox').append(this._tpl_wrap_top);
|
||||
}
|
||||
|
||||
if ($('#gritter-container.bottom').length === 0) {
|
||||
$('#editorcontainerbox').append(this._tpl_wrap_bottom);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,9 @@ exports.saveNow = function(){
|
|||
// (string | mandatory) the text inside the notification
|
||||
text: _("pad.savedrevs.timeslider") || "You can view saved revisions in the timeslider",
|
||||
// (bool | optional) if you want it to fade out on its own or just sit there
|
||||
sticky: false
|
||||
sticky: false,
|
||||
time: 3000,
|
||||
class_name: "saved-revision",
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
#gritter-container {
|
||||
top: 20px;
|
||||
bottom: auto;
|
||||
}
|
||||
.gritter-item:not(.error) .popup-content{
|
||||
background-color: #64d29b;
|
||||
background-color: var(--primary-color);
|
||||
|
|
@ -9,29 +5,61 @@
|
|||
color: var(--bg-color);
|
||||
}
|
||||
.gritter-item .popup-content {
|
||||
margin-bottom: 10px;
|
||||
padding: 15px;
|
||||
box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
|
||||
}
|
||||
#gritter-container.bottom .gritter-item .popup-content {
|
||||
margin-top: 10px;
|
||||
}
|
||||
#gritter-container.top .gritter-item .popup-content {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.gritter-item p {
|
||||
margin: 0;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.gritter-item .gritter-title {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.gritter-item .gritter-close {
|
||||
margin-left: 10px;
|
||||
margin-right: -5px;
|
||||
margin-left: 15px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
.gritter-item:not(.error) .gritter-close .buttonicon {
|
||||
color: #ffffff;
|
||||
color: var(--bg-color);
|
||||
}
|
||||
|
||||
.gritter-item.popup > .popup-content {
|
||||
/* CHAT GRIITER ITEM */
|
||||
.gritter-item.chat-gritter-msg:not(.error) .popup-content {
|
||||
background-color: white;
|
||||
background-color: var(--bg-color);
|
||||
color: #485365;
|
||||
color: var(--text-color);
|
||||
}
|
||||
.gritter-item.chat-gritter-msg .gritter-content {
|
||||
text-align: left;
|
||||
}
|
||||
.gritter-item.chat-gritter-msg .author-name {
|
||||
font-weight: bold;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.gritter-item.chat-gritter-msg:not(.error) .gritter-close .buttonicon {
|
||||
color: #485365;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.gritter-item.saved-revision {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
#gritter-container.top .gritter-item.popup > .popup-content {
|
||||
transform: scale(0.8) translateY(-100px);
|
||||
}
|
||||
#gritter-container.bottom .gritter-item.popup > .popup-content {
|
||||
transform: scale(0.8) translateY(0px);
|
||||
}
|
||||
|
||||
.gritter-item.popup.popup-show > .popup-content {
|
||||
transform: scale(1) translateY(0);
|
||||
transition: all 0.4s cubic-bezier(0.74, -0.05, 0.27, 1.75)
|
||||
transform: scale(1) translateY(0) !important;
|
||||
transition: all 0.4s cubic-bezier(0.74, -0.05, 0.27, 1.75) !important;
|
||||
}
|
||||
Loading…
Reference in a new issue