mirror of
https://github.com/ether/etherpad-lite.git
synced 2025-04-26 10:26:15 -04:00
Use nice editbar popups for connection status instead of srceen-blocking modals.
This commit is contained in:
Marcel Klehr
parent
ead379cf66
commit
6da6a7f0d8
5 changed files with 114 additions and 263 deletions
|
|
@ -401,168 +401,24 @@ table#otheruserstable {
|
|||
color: #888;
|
||||
font-style: italic;
|
||||
}
|
||||
.modaldialog.cboxreconnecting .modaldialog-inner,
|
||||
.modaldialog.cboxconnecting .modaldialog-inner {
|
||||
background: url(../../static/img/connectingbar.gif) no-repeat center 60px;
|
||||
height: 100px;
|
||||
|
||||
#connectivity {
|
||||
z-index: 600 !important;
|
||||
}
|
||||
.modaldialog.cboxreconnecting,
|
||||
.modaldialog.cboxconnecting,
|
||||
.modaldialog.cboxdisconnected {
|
||||
background: #8FCDE0
|
||||
}
|
||||
.cboxdisconnected #connectionboxinner div {
|
||||
display: none
|
||||
}
|
||||
.cboxdisconnected_userdup #connectionboxinner #disconnected_userdup {
|
||||
display: block
|
||||
}
|
||||
.cboxdisconnected_deleted #connectionboxinner #disconnected_deleted {
|
||||
display: block
|
||||
}
|
||||
.cboxdisconnected_initsocketfail #connectionboxinner #disconnected_initsocketfail {
|
||||
display: block
|
||||
}
|
||||
.cboxdisconnected_looping #connectionboxinner #disconnected_looping {
|
||||
display: block
|
||||
}
|
||||
.cboxdisconnected_slowcommit #connectionboxinner #disconnected_slowcommit {
|
||||
display: block
|
||||
}
|
||||
.cboxdisconnected_unauth #connectionboxinner #disconnected_unauth {
|
||||
display: block
|
||||
}
|
||||
.cboxdisconnected_unknown #connectionboxinner #disconnected_unknown {
|
||||
display: block
|
||||
}
|
||||
.cboxdisconnected_initsocketfail #connectionboxinner #reconnect_advise,
|
||||
.cboxdisconnected_looping #connectionboxinner #reconnect_advise,
|
||||
.cboxdisconnected_slowcommit #connectionboxinner #reconnect_advise,
|
||||
.cboxdisconnected_unknown #connectionboxinner #reconnect_advise {
|
||||
display: block
|
||||
}
|
||||
.cboxdisconnected div#reconnect_form {
|
||||
display: block
|
||||
}
|
||||
.cboxdisconnected .disconnected h2 {
|
||||
display: none
|
||||
}
|
||||
.cboxdisconnected .disconnected .h2_disconnect {
|
||||
display: block
|
||||
}
|
||||
.cboxdisconnected_userdup .disconnected h2.h2_disconnect {
|
||||
display: none
|
||||
}
|
||||
.cboxdisconnected_userdup .disconnected h2.h2_userdup {
|
||||
display: block
|
||||
}
|
||||
.cboxdisconnected_unauth .disconnected h2.h2_disconnect {
|
||||
display: none
|
||||
}
|
||||
.cboxdisconnected_unauth .disconnected h2.h2_unauth {
|
||||
display: block
|
||||
}
|
||||
#connectionstatus {
|
||||
position: absolute;
|
||||
width: 37px;
|
||||
height: 41px;
|
||||
overflow: hidden;
|
||||
right: 0;
|
||||
z-index: 11;
|
||||
}
|
||||
#connectionboxinner .connecting {
|
||||
margin-top: 20px;
|
||||
font-size: 2.0em;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
|
||||
#connectivity * {
|
||||
display: none;
|
||||
}
|
||||
.cboxconnecting #connectionboxinner .connecting {
|
||||
display: block
|
||||
}
|
||||
#connectionboxinner .disconnected h2 {
|
||||
font-size: 1.8em;
|
||||
color: #333;
|
||||
text-align: left;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#connectionboxinner .disconnected p {
|
||||
margin: 10px 10px;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.1;
|
||||
color: #333;
|
||||
}
|
||||
#connectionboxinner .disconnected {
|
||||
display: none
|
||||
}
|
||||
.cboxdisconnected #connectionboxinner .disconnected {
|
||||
display: block
|
||||
}
|
||||
#connectionboxinner .reconnecting {
|
||||
margin-top: 20px;
|
||||
font-size: 1.6em;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
.cboxreconnecting #connectionboxinner .reconnecting {
|
||||
display: block
|
||||
|
||||
#connectivity .visible,
|
||||
#connectivity .visible * {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#reconnect_form button {
|
||||
font-size: 12pt;
|
||||
padding: 5px;
|
||||
}
|
||||
#mainmodals {
|
||||
z-index: 600; /* higher than the modals themselves: */
|
||||
}
|
||||
.modalfield {
|
||||
font-size: 1.2em;
|
||||
padding: 1px;
|
||||
border: 1px solid #bbb;
|
||||
}
|
||||
#mainmodals .editempty {
|
||||
color: #aaa
|
||||
}
|
||||
.modaldialog {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 50%;
|
||||
margin-left: -243px;
|
||||
width: 485px;
|
||||
display: none;
|
||||
z-index: 501;
|
||||
zoom: 1;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
.modaldialog .modaldialog-inner {
|
||||
padding: 10pt
|
||||
}
|
||||
.modaldialog .modaldialog-hide {
|
||||
float: right;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(static/img/sharebox4.gif);
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-position: -454px -6px;
|
||||
margin-right: -5px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
.modaldialog label,
|
||||
.modaldialog h1 {
|
||||
color: #222222;
|
||||
font-size: 125%;
|
||||
font-weight: bold;
|
||||
}
|
||||
.modaldialog th {
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#modaloverlay {
|
||||
z-index: 500;
|
||||
|
|
@ -895,6 +751,7 @@ input[type=checkbox] {
|
|||
#settings,
|
||||
#importexport,
|
||||
#embed,
|
||||
#connectivity,
|
||||
#users {
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
|
|
@ -914,15 +771,6 @@ input[type=checkbox] {
|
|||
border-left: 1px solid #ccc !important;
|
||||
width: 185px !important;
|
||||
}
|
||||
@media screen and (max-width: 960px) {
|
||||
.modaldialog {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 80%;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
.toolbar ul li.separator {
|
||||
display: none;
|
||||
|
|
@ -986,6 +834,7 @@ input[type=checkbox] {
|
|||
}
|
||||
#settings,
|
||||
#importexport,
|
||||
#connectivity,
|
||||
#embed {
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
*/
|
||||
|
||||
var padmodals = require('./pad_modals').padmodals;
|
||||
var padeditbar = require('./pad_editbar').padeditbar;
|
||||
|
||||
var padconnectionstatus = (function()
|
||||
{
|
||||
|
|
@ -42,15 +43,18 @@ var padconnectionstatus = (function()
|
|||
status = {
|
||||
what: 'connected'
|
||||
};
|
||||
padmodals.hideModal(500);
|
||||
|
||||
padmodals.showModal('connected');
|
||||
padmodals.hideOverlay(500);
|
||||
},
|
||||
reconnecting: function()
|
||||
{
|
||||
status = {
|
||||
what: 'reconnecting'
|
||||
};
|
||||
$("#connectionbox").get(0).className = 'modaldialog cboxreconnecting';
|
||||
padmodals.showModal("#connectionbox", 500);
|
||||
|
||||
padmodals.showModal('reconnecting');
|
||||
padmodals.showOverlay(500);
|
||||
},
|
||||
disconnected: function(msg)
|
||||
{
|
||||
|
|
@ -61,20 +65,15 @@ var padconnectionstatus = (function()
|
|||
what: 'disconnected',
|
||||
why: msg
|
||||
};
|
||||
|
||||
var k = String(msg).toLowerCase(); // known reason why
|
||||
if (!(k == 'userdup' || k == 'deleted' || k == 'looping' || k == 'slowcommit' || k == 'initsocketfail' || k == 'unauth'))
|
||||
{
|
||||
k = 'unknown';
|
||||
k = 'disconnected';
|
||||
}
|
||||
|
||||
var cls = 'modaldialog cboxdisconnected cboxdisconnected_' + k;
|
||||
$("#connectionbox").get(0).className = cls;
|
||||
padmodals.showModal("#connectionbox", 500);
|
||||
|
||||
$('button#forcereconnect').click(function()
|
||||
{
|
||||
window.location.reload();
|
||||
});
|
||||
padmodals.showModal(k);
|
||||
padmodals.showOverlay(500);
|
||||
},
|
||||
isFullyConnected: function()
|
||||
{
|
||||
|
|
|
|||
|
|
@ -128,6 +128,10 @@ var padeditbar = (function()
|
|||
{
|
||||
self.toogleDropDown("settings");
|
||||
}
|
||||
else if (cmd == 'connectivity')
|
||||
{
|
||||
self.toogleDropDown("connectivity");
|
||||
}
|
||||
else if (cmd == 'embed')
|
||||
{
|
||||
self.setEmbedLinks();
|
||||
|
|
@ -182,13 +186,14 @@ var padeditbar = (function()
|
|||
}
|
||||
if(padeditor.ace) padeditor.ace.focus();
|
||||
},
|
||||
toogleDropDown: function(moduleName)
|
||||
toogleDropDown: function(moduleName, cb)
|
||||
{
|
||||
var modules = ["settings", "importexport", "embed", "users"];
|
||||
var modules = ["settings", "connectivity", "importexport", "embed", "users"];
|
||||
|
||||
// hide all modules and remove highlighting of all buttons
|
||||
if(moduleName == "none")
|
||||
{
|
||||
var returned = false
|
||||
for(var i=0;i<modules.length;i++)
|
||||
{
|
||||
//skip the userlist
|
||||
|
|
@ -200,9 +205,11 @@ var padeditbar = (function()
|
|||
if(module.css('display') != "none")
|
||||
{
|
||||
$("#" + modules[i] + "link").removeClass("selected");
|
||||
module.slideUp("fast");
|
||||
module.slideUp("fast", cb);
|
||||
returned = true;
|
||||
}
|
||||
}
|
||||
if(!returned) return cb();
|
||||
}
|
||||
else
|
||||
{
|
||||
|
|
@ -220,7 +227,7 @@ var padeditbar = (function()
|
|||
else if(modules[i]==moduleName)
|
||||
{
|
||||
$("#" + modules[i] + "link").addClass("selected");
|
||||
module.slideDown("fast");
|
||||
module.slideDown("fast", cb);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
*/
|
||||
|
||||
var padutils = require('./pad_utils').padutils;
|
||||
var padeditbar = require('./pad_editbar').padeditbar;
|
||||
|
||||
var padmodals = (function()
|
||||
{
|
||||
|
|
@ -30,16 +31,15 @@ var padmodals = (function()
|
|||
{
|
||||
pad = _pad;
|
||||
},
|
||||
showModal: function(modalId, duration)
|
||||
showModal: function(messageId)
|
||||
{
|
||||
$(".modaldialog").hide();
|
||||
$(modalId).show().css(
|
||||
{
|
||||
'opacity': 0
|
||||
}).animate(
|
||||
{
|
||||
'opacity': 1
|
||||
}, duration);
|
||||
$("#connectivity .visible").removeClass('visible');
|
||||
$("#connectivity ."+messageId).addClass('visible');
|
||||
padeditbar.toogleDropDown("none", function() {
|
||||
padeditbar.toogleDropDown("connectivity");
|
||||
});
|
||||
},
|
||||
showOverlay: function(duration) {
|
||||
$("#modaloverlay").show().css(
|
||||
{
|
||||
'opacity': 0
|
||||
|
|
@ -48,18 +48,7 @@ var padmodals = (function()
|
|||
'opacity': 1
|
||||
}, duration);
|
||||
},
|
||||
hideModal: function(duration)
|
||||
{
|
||||
padutils.cancelActions('hide-feedbackbox');
|
||||
padutils.cancelActions('hide-sharebox');
|
||||
$("#sharebox-response").hide();
|
||||
$(".modaldialog").animate(
|
||||
{
|
||||
'opacity': 0
|
||||
}, duration, function()
|
||||
{
|
||||
$("#modaloverlay").hide();
|
||||
});
|
||||
hideOverlay: function(duration) {
|
||||
$("#modaloverlay").animate(
|
||||
{
|
||||
'opacity': 0
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue