mirror of
https://github.com/ether/etherpad-lite.git
synced 2025-04-26 10:26:15 -04:00
Merge pull request #872 from marcelklehr/feature/connectivity-toolbar
Nice popups instead of modals
This commit is contained in:
0ip
commit
c9bdd1196d
10 changed files with 197 additions and 322 deletions
|
|
@ -401,180 +401,36 @@ 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 {
|
||||
.toolbar #overlay {
|
||||
z-index: 500;
|
||||
display: none;
|
||||
background-repeat: repeat-both;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
height: inherit;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
* html #modaloverlay {
|
||||
* html #overlay {
|
||||
/* for IE 6+ */
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||||
filter: alpha(opacity=100);
|
||||
|
|
@ -874,6 +730,10 @@ input[type=checkbox] {
|
|||
.popup input[type=text], #users input[type=text] {
|
||||
outline: none;
|
||||
}
|
||||
.popup button {
|
||||
padding: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.popup a {
|
||||
text-decoration: none
|
||||
}
|
||||
|
|
@ -895,6 +755,7 @@ input[type=checkbox] {
|
|||
#settings,
|
||||
#importexport,
|
||||
#embed,
|
||||
#connectivity,
|
||||
#users {
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
|
|
@ -914,15 +775,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 +838,7 @@ input[type=checkbox] {
|
|||
}
|
||||
#settings,
|
||||
#importexport,
|
||||
#connectivity,
|
||||
#embed {
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -150,6 +150,13 @@
|
|||
margin-top: 0;
|
||||
padding-right: 6px;
|
||||
}
|
||||
#settings,
|
||||
#importexport,
|
||||
#embed,
|
||||
#connectivity,
|
||||
#users {
|
||||
top: 62px;
|
||||
}
|
||||
#importexport .popup {
|
||||
width: 185px
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
|
@ -3237,7 +3237,7 @@ function Ace2Inner(){
|
|||
}
|
||||
//hide the dropdownso
|
||||
if(window.parent.parent.padeditbar){ // required in case its in an iframe should probably use parent.. See Issue 327 https://github.com/Pita/etherpad-lite/issues/327
|
||||
window.parent.parent.padeditbar.toogleDropDown("none");
|
||||
window.parent.parent.padeditbar.toggleDropDown("none");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -155,9 +155,7 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded)
|
|||
|
||||
function showReconnectUI()
|
||||
{
|
||||
var cls = 'modaldialog cboxdisconnected cboxdisconnected_unknown';
|
||||
$("#connectionbox").get(0).className = cls;
|
||||
padmodals.showModal("#connectionbox", 500);
|
||||
padmodals.showModal("disconnected");
|
||||
}
|
||||
|
||||
var fixPadHeight = _.throttle(function(){
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
{
|
||||
|
|
|
|||
|
|
@ -122,21 +122,25 @@ var padeditbar = (function()
|
|||
{
|
||||
if(cmd == "showusers")
|
||||
{
|
||||
self.toogleDropDown("users");
|
||||
self.toggleDropDown("users");
|
||||
}
|
||||
else if (cmd == 'settings')
|
||||
{
|
||||
self.toogleDropDown("settings");
|
||||
self.toggleDropDown("settings");
|
||||
}
|
||||
else if (cmd == 'connectivity')
|
||||
{
|
||||
self.toggleDropDown("connectivity");
|
||||
}
|
||||
else if (cmd == 'embed')
|
||||
{
|
||||
self.setEmbedLinks();
|
||||
$('#linkinput').focus().select();
|
||||
self.toogleDropDown("embed");
|
||||
self.toggleDropDown("embed");
|
||||
}
|
||||
else if (cmd == 'import_export')
|
||||
{
|
||||
self.toogleDropDown("importexport");
|
||||
self.toggleDropDown("importexport");
|
||||
}
|
||||
else if (cmd == 'savedRevision')
|
||||
{
|
||||
|
|
@ -182,13 +186,14 @@ var padeditbar = (function()
|
|||
}
|
||||
if(padeditor.ace) padeditor.ace.focus();
|
||||
},
|
||||
toogleDropDown: function(moduleName)
|
||||
toggleDropDown: 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 && cb) 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,17 +31,16 @@ var padmodals = (function()
|
|||
{
|
||||
pad = _pad;
|
||||
},
|
||||
showModal: function(modalId, duration)
|
||||
showModal: function(messageId)
|
||||
{
|
||||
$(".modaldialog").hide();
|
||||
$(modalId).show().css(
|
||||
{
|
||||
'opacity': 0
|
||||
}).animate(
|
||||
{
|
||||
'opacity': 1
|
||||
}, duration);
|
||||
$("#modaloverlay").show().css(
|
||||
padeditbar.toggleDropDown("none", function() {
|
||||
$("#connectivity .visible").removeClass('visible');
|
||||
$("#connectivity ."+messageId).addClass('visible');
|
||||
padeditbar.toggleDropDown("connectivity");
|
||||
});
|
||||
},
|
||||
showOverlay: function(duration) {
|
||||
$("#overlay").show().css(
|
||||
{
|
||||
'opacity': 0
|
||||
}).animate(
|
||||
|
|
@ -48,19 +48,8 @@ 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();
|
||||
});
|
||||
$("#modaloverlay").animate(
|
||||
hideOverlay: function(duration) {
|
||||
$("#overlay").animate(
|
||||
{
|
||||
'opacity': 0
|
||||
}, duration, function()
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue