mirror of
https://github.com/ether/etherpad-lite.git
synced 2025-05-08 16:05:05 -04:00
initial modal rework to make it less intrusive on disconnect
This commit is contained in:
Jean-Tiare Le Bigot
parent
6fd73ecfda
commit
dba26821e1
3 changed files with 88 additions and 73 deletions
|
|
@ -136,8 +136,19 @@ a img
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#editorloadingbox { padding-top: 100px; padding-bottom: 100px; font-size: 2.5em; color: #aaa;
|
#editorloadingbox {
|
||||||
text-align: center; position: absolute; width: 100%; height: 30px; z-index: 100; }
|
padding-top: 100px;
|
||||||
|
padding-bottom: 100px;
|
||||||
|
font-size: 2.5em;
|
||||||
|
color: #aaa;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
background: url(../../static/img/connectingbar.gif) no-repeat center 130px;
|
||||||
|
}
|
||||||
|
|
||||||
#editorcontainerbox{
|
#editorcontainerbox{
|
||||||
position:absolute;
|
position:absolute;
|
||||||
|
|
@ -454,8 +465,9 @@ table#otheruserstable { display: none; }
|
||||||
|
|
||||||
.modaldialog.cboxreconnecting .modaldialog-inner,
|
.modaldialog.cboxreconnecting .modaldialog-inner,
|
||||||
.modaldialog.cboxconnecting .modaldialog-inner {
|
.modaldialog.cboxconnecting .modaldialog-inner {
|
||||||
background: url(../../static/img/connectingbar.gif) no-repeat center 60px;
|
background: url("../../static/img/connectingbar.gif") no-repeat scroll center bottom transparent;
|
||||||
height: 100px;
|
margin-bottom: 8px;
|
||||||
|
padding: 4px 0 20px;
|
||||||
}
|
}
|
||||||
.modaldialog.cboxreconnecting,
|
.modaldialog.cboxreconnecting,
|
||||||
.modaldialog.cboxconnecting,
|
.modaldialog.cboxconnecting,
|
||||||
|
|
@ -488,20 +500,24 @@ table#otheruserstable { display: none; }
|
||||||
z-index: 11;
|
z-index: 11;
|
||||||
}
|
}
|
||||||
#connectionboxinner .connecting {
|
#connectionboxinner .connecting {
|
||||||
margin-top: 20px;
|
/*margin-top: 20px;*/
|
||||||
font-size: 2.0em; color: #555;
|
font-size: 2.0em; color: #555;
|
||||||
text-align: center; display: none;
|
text-align: center; display: none;
|
||||||
}
|
}
|
||||||
.cboxconnecting #connectionboxinner .connecting { display: block; }
|
.cboxconnecting #connectionboxinner .connecting { display: block; }
|
||||||
|
|
||||||
|
#connectionboxinner .disconnected{
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
#connectionboxinner .disconnected h2 {
|
#connectionboxinner .disconnected h2 {
|
||||||
font-size: 1.8em; color: #333;
|
font-size: 1.8em; color: #333;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin-top: 10px; margin-left: 10px; margin-right: 10px;
|
/*margin-top: 10px; margin-left: 10px; margin-right: 10px;*/
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
#connectionboxinner .disconnected p {
|
#connectionboxinner .disconnected p {
|
||||||
margin: 10px 10px;
|
margin: 10px 0;
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
color: #333;
|
color: #333;
|
||||||
|
|
@ -510,7 +526,7 @@ table#otheruserstable { display: none; }
|
||||||
.cboxdisconnected #connectionboxinner .disconnected { display: block; }
|
.cboxdisconnected #connectionboxinner .disconnected { display: block; }
|
||||||
|
|
||||||
#connectionboxinner .reconnecting {
|
#connectionboxinner .reconnecting {
|
||||||
margin-top: 20px;
|
/*margin-top: 20px;*/
|
||||||
font-size: 1.6em; color: #555;
|
font-size: 1.6em; color: #555;
|
||||||
text-align: center; display: none;
|
text-align: center; display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -569,7 +585,7 @@ table#otheruserstable { display: none; }
|
||||||
|
|
||||||
.modaldialog {
|
.modaldialog {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 100px;
|
top: 35px;
|
||||||
left:50%;
|
left:50%;
|
||||||
margin-left:-243px;
|
margin-left:-243px;
|
||||||
width: 485px;
|
width: 485px;
|
||||||
|
|
@ -580,7 +596,7 @@ table#otheruserstable { display: none; }
|
||||||
background: white;
|
background: white;
|
||||||
border: 1px solid #999;
|
border: 1px solid #999;
|
||||||
}
|
}
|
||||||
.modaldialog .modaldialog-inner { padding: 10pt; }
|
/*.modaldialog .modaldialog-inner { padding: 10pt; }*/
|
||||||
.modaldialog .modaldialog-hide {
|
.modaldialog .modaldialog-hide {
|
||||||
float: right;
|
float: right;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|
@ -661,19 +677,19 @@ table#otheruserstable { display: none; }
|
||||||
top: 5px; right: 220px;
|
top: 5px; right: 220px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#modaloverlay {
|
/*#modaloverlay {
|
||||||
z-index: 500; display: none;
|
z-index: 500; display: none;
|
||||||
background-repeat: repeat-both;
|
background-repeat: repeat-both;
|
||||||
width: 100%; position: absolute;
|
width: 100%; position: absolute;
|
||||||
height: 100%; left: 0; top: 0;
|
height: 100%; left: 0; top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
* html #modaloverlay { /* for IE 6+ */
|
* html #modaloverlay { /* for IE 6+ *//*
|
||||||
opacity: 1; /* in case this is looked at */
|
opacity: 1; /* in case this is looked at *//*
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
/* scale the image */
|
/* scale the image *//*
|
||||||
}
|
}*/
|
||||||
|
|
||||||
a#topbarmaximize {
|
a#topbarmaximize {
|
||||||
float: right;
|
float: right;
|
||||||
|
|
@ -1162,7 +1178,7 @@ input[type=checkbox] {
|
||||||
width: 185px !important;
|
width: 185px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 960px) {
|
/*@media screen and (max-width: 960px) {
|
||||||
.modaldialog {
|
.modaldialog {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
@ -1170,7 +1186,7 @@ input[type=checkbox] {
|
||||||
top: 40px;
|
top: 40px;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
}
|
}*/
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (max-width: 600px) {
|
||||||
#editbar ul li {
|
#editbar ul li {
|
||||||
|
|
|
||||||
|
|
@ -190,13 +190,13 @@ var padmodals = (function()
|
||||||
{
|
{
|
||||||
'opacity': 1
|
'opacity': 1
|
||||||
}, duration);
|
}, duration);
|
||||||
$("#modaloverlay").show().css(
|
/*$("#modaloverlay").show().css(
|
||||||
{
|
{
|
||||||
'opacity': 0
|
'opacity': 0
|
||||||
}).animate(
|
}).animate(
|
||||||
{
|
{
|
||||||
'opacity': 1
|
'opacity': 1
|
||||||
}, duration);
|
}, duration);*/
|
||||||
},
|
},
|
||||||
hideModal: function(duration)
|
hideModal: function(duration)
|
||||||
{
|
{
|
||||||
|
|
@ -208,15 +208,15 @@ var padmodals = (function()
|
||||||
'opacity': 0
|
'opacity': 0
|
||||||
}, duration, function()
|
}, duration, function()
|
||||||
{
|
{
|
||||||
$("#modaloverlay").hide();
|
//$("#modaloverlay").hide();
|
||||||
});
|
});
|
||||||
$("#modaloverlay").animate(
|
/*$("#modaloverlay").animate(
|
||||||
{
|
{
|
||||||
'opacity': 0
|
'opacity': 0
|
||||||
}, duration, function()
|
}, duration, function()
|
||||||
{
|
{
|
||||||
$("#modaloverlay").hide();
|
$("#modaloverlay").hide();
|
||||||
});
|
});*/
|
||||||
},
|
},
|
||||||
hideFeedbackLaterIfNoOtherInteraction: function()
|
hideFeedbackLaterIfNoOtherInteraction: function()
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -72,6 +72,52 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="mainmodals">
|
||||||
|
<div id="connectionbox" class="modaldialog">
|
||||||
|
<div id="connectionboxinner" class="modaldialog-inner">
|
||||||
|
<div class="connecting">Connecting...</div>
|
||||||
|
<div class="reconnecting">Reestablishing connection...</div>
|
||||||
|
<div class="disconnected">
|
||||||
|
<h2 class="h2_disconnect">Disconnected.</h2>
|
||||||
|
<h2 class="h2_userdup">Opened in another window.</h2>
|
||||||
|
<h2 class="h2_unauth">No Authorization.</h2>
|
||||||
|
<div id="disconnected_looping">
|
||||||
|
<p><b>We're having trouble talking to the EtherPad lite synchronization server.</b> You may be connecting through an incompatible firewall or proxy server.</p>
|
||||||
|
</div>
|
||||||
|
<div id="disconnected_initsocketfail">
|
||||||
|
<p><b>We were unable to connect to the EtherPad lite synchronization server.</b> This may be due to an incompatibility with your web browser or internet connection.</p>
|
||||||
|
</div>
|
||||||
|
<div id="disconnected_userdup">
|
||||||
|
<p><b>You seem to have opened this pad in another browser window.</b> If you'd like to use this window instead, you can reconnect.</p>
|
||||||
|
</div>
|
||||||
|
<div id="disconnected_unknown">
|
||||||
|
<p><b>Lost connection with the EtherPad lite synchronization server.</b> This may be due to a loss of network connectivity.</p>
|
||||||
|
</div>
|
||||||
|
<div id="disconnected_slowcommit">
|
||||||
|
<p><b>Server not responding.</b> This may be due to network connectivity issues or high load on the server.</p>
|
||||||
|
</div>
|
||||||
|
<div id="disconnected_unauth">
|
||||||
|
<p>Your browser's credentials or permissions have changed while viewing this pad. Try reconnecting.</p>
|
||||||
|
</div>
|
||||||
|
<div id="disconnected_deleted">
|
||||||
|
<p>This pad was deleted.</p>
|
||||||
|
</div>
|
||||||
|
<div id="reconnect_advise">
|
||||||
|
<p>If this continues to happen, please let us know</p>
|
||||||
|
</div>
|
||||||
|
<div id="reconnect_form">
|
||||||
|
<button id="forcereconnect">Reconnect Now</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<form id="reconnectform" method="post" action="/ep/pad/reconnect" accept-charset="UTF-8" style="display: none;">
|
||||||
|
<input type="hidden" class="padId" name="padId">
|
||||||
|
<input type="hidden" class="diagnosticInfo" name="diagnosticInfo">
|
||||||
|
<input type="hidden" class="missedChanges" name="missedChanges">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="users">
|
<div id="users">
|
||||||
<div id="connectionstatus"></div>
|
<div id="connectionstatus"></div>
|
||||||
|
|
@ -206,56 +252,9 @@
|
||||||
|
|
||||||
<div id="focusprotector"> </div>
|
<div id="focusprotector"> </div>
|
||||||
|
|
||||||
<div id="modaloverlay">
|
<!--<div id="modaloverlay">
|
||||||
<div id="modaloverlay-inner"></div>
|
<div id="modaloverlay-inner"></div>
|
||||||
</div>
|
</div>-->
|
||||||
|
|
||||||
<div id="mainmodals">
|
|
||||||
<div id="connectionbox" class="modaldialog">
|
|
||||||
<div id="connectionboxinner" class="modaldialog-inner">
|
|
||||||
<div class="connecting">Connecting...</div>
|
|
||||||
<div class="reconnecting">Reestablishing connection...</div>
|
|
||||||
<div class="disconnected">
|
|
||||||
<h2 class="h2_disconnect">Disconnected.</h2>
|
|
||||||
<h2 class="h2_userdup">Opened in another window.</h2>
|
|
||||||
<h2 class="h2_unauth">No Authorization.</h2>
|
|
||||||
<div id="disconnected_looping">
|
|
||||||
<p><b>We're having trouble talking to the EtherPad lite synchronization server.</b> You may be connecting through an incompatible firewall or proxy server.</p>
|
|
||||||
</div>
|
|
||||||
<div id="disconnected_initsocketfail">
|
|
||||||
<p><b>We were unable to connect to the EtherPad lite synchronization server.</b> This may be due to an incompatibility with your web browser or internet connection.</p>
|
|
||||||
</div>
|
|
||||||
<div id="disconnected_userdup">
|
|
||||||
<p><b>You seem to have opened this pad in another browser window.</b> If you'd like to use this window instead, you can reconnect.</p>
|
|
||||||
</div>
|
|
||||||
<div id="disconnected_unknown">
|
|
||||||
<p><b>Lost connection with the EtherPad lite synchronization server.</b> This may be due to a loss of network connectivity.</p>
|
|
||||||
</div>
|
|
||||||
<div id="disconnected_slowcommit">
|
|
||||||
<p><b>Server not responding.</b> This may be due to network connectivity issues or high load on the server.</p>
|
|
||||||
</div>
|
|
||||||
<div id="disconnected_unauth">
|
|
||||||
<p>Your browser's credentials or permissions have changed while viewing this pad. Try reconnecting.</p>
|
|
||||||
</div>
|
|
||||||
<div id="disconnected_deleted">
|
|
||||||
<p>This pad was deleted.</p>
|
|
||||||
</div>
|
|
||||||
<div id="reconnect_advise">
|
|
||||||
<p>If this continues to happen, please let us know</p>
|
|
||||||
</div>
|
|
||||||
<div id="reconnect_form">
|
|
||||||
<button id="forcereconnect">Reconnect Now</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<form id="reconnectform" method="post" action="/ep/pad/reconnect" accept-charset="UTF-8" style="display: none;">
|
|
||||||
<input type="hidden" class="padId" name="padId">
|
|
||||||
<input type="hidden" class="diagnosticInfo" name="diagnosticInfo">
|
|
||||||
<input type="hidden" class="missedChanges" name="missedChanges">
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="../static/js/require-kernel.js"></script>
|
<script type="text/javascript" src="../static/js/require-kernel.js"></script>
|
||||||
<script type="text/javascript" src="../socket.io/socket.io.js"></script>
|
<script type="text/javascript" src="../socket.io/socket.io.js"></script>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue