libretic
/
etherpad-lite
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #872 from marcelklehr/feature/connectivity-toolbar 

Nice popups instead of modals
This commit is contained in:
0ip 2012-08-01 11:37:15 -07:00
parent aa73cf9956 9d25dcc1f9
commit c9bdd1196d
10 changed files with 197 additions and 322 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

185
src/static/css/pad.css
View File

@ -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;

7
src/static/css/timeslider.css
View File

@ -150,6 +150,13 @@
margin-top: 0;
padding-right: 6px;
}
#settings,
#importexport,
#embed,
#connectivity,
#users {
top: 62px;
}
#importexport .popup {
width: 185px
}

BIN
src/static/img/connectingbar.gif
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

2
src/static/js/ace2_inner.js
View File

@ -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");
}
}

4
src/static/js/broadcast_slider.js
View File

@ -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(){

23
src/static/js/pad_connectionstatus.js
View File

@ -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()
{

23
src/static/js/pad_editbar.js
View File

@ -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);
}
}
}

35
src/static/js/pad_modals.js
View File

@ -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()

135
src/templates/pad.html
View File

@ -22,6 +22,9 @@
<% e.begin_block("body"); %>
<div id="editbar" class="toolbar">
<div id="overlay">
<div id="overlay-inner"></div>
</div>
<ul class="menu_left">
<% e.begin_block("editbarMenuLeft"); %>
<li class="acl-write" id="bold" data-key="bold">
@ -86,9 +89,14 @@
</ul>
<ul class="menu_right">
<% e.begin_block("editbarMenuRight"); %>
<li class="acl-write" data-key="settings">
<a class="grouped-left" id="settingslink" title="Settings of this pad">
<span class="buttonicon buttonicon-settings"></span>
<li data-key="import_export">
<a class="grouped-left" id="importexportlink" title="Import/Export from/to different document formats">
<span class="buttonicon buttonicon-import_export"></span>
</a>
</li>
<li onClick="document.location = document.location.pathname+ '/timeslider'">
<a id="timesliderlink" class="grouped-middle" title="Show the history of this pad">
<span class="buttonicon buttonicon-history"></span>
</a>
</li>
<li class="acl-write" data-key="savedRevision">
@ -97,9 +105,9 @@
</a>
</li>
<li class="acl-write separator"></li>
<li data-key="import_export">
<a class="grouped-left" id="importexportlink" title="Import/Export from/to different document formats">
<span class="buttonicon buttonicon-import_export"></span>
<li class="acl-write" data-key="settings">
<a class="grouped-left" id="settingslink" title="Settings of this pad">
<span class="buttonicon buttonicon-settings"></span>
</a>
</li>
<li data-key="embed">
@ -108,11 +116,6 @@
</a>
</li>
<li class="separator"></li>
<li onClick="document.location = document.location.pathname+ '/timeslider'">
<a id="timesliderlink" title="Show the history of this pad">
<span class="buttonicon buttonicon-history"></span>
</a>
</li>
<li id="usericon" data-key="showusers">
<a title="Show connected users">
<span class="buttonicon buttonicon-showusers"></span>
@ -222,6 +225,60 @@
<% e.end_block(); %>
</div>
</div>
<div id="connectivity" class="popup">
<% e.begin_block("modals"); %>
<div class="connected visible">
<h2>Connected.</h2>
</div>
<div class="reconnecting">
<h1>Reestablishing connection...</h1>
<p><img alt="" border="0" src="/static/img/connectingbar.gif" /></p>
</div>
<div class="userdup">
<h1>Opened in another window.</h1>
<h2>You seem to have opened this pad in another browser window.</h2>
<p>If you'd like to use this window instead, you can reconnect.</p>
<button id="forcereconnect">Reconnect Now</button>
</div>
<div class="unauth">
<h1>No Authorization.</h1>
<p>Your browser's credentials or permissions have changed while viewing this pad. Try reconnecting.</p>
<button id="forcereconnect">Reconnect Now</button>
</div>
<div class="looping">
<h1>Disconnected.</h1>
<h2>We're having trouble talking to the EtherPad lite synchronization server.</h2>
<p>You may be connecting through an incompatible firewall or proxy server.</p>
</div>
<div class="initsocketfail">
<h1>Disconnected.</h1>
<h2>We were unable to connect to the EtherPad lite synchronization server.</h2>
<p>This may be due to an incompatibility with your web browser or internet connection.</p>
</div>
<div class="slowcommit">
<h1>Disconnected.</h1>
<h2>Server not responding.</h2>
<p>This may be due to network connectivity issues or high load on the server.</p>
<button id="forcereconnect">Reconnect Now</button>
</div>
<div class="deleted">
<h1>Disconnected.</h1>
<p>This pad was deleted.</p>
</div>
<div class="disconnected">
<h1>Disconnected.</h1>
<h2>Lost connection with the EtherPad lite synchronization server.</h2>
<p>This may be due to a loss of network connectivity. If this continues to happen, please let us know</p>
<button id="forcereconnect">Reconnect Now</button>
</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>
<% e.end_block(); %>
</div>
<div id="embed" class="popup">
<% e.begin_block("embedPopup"); %>
@ -241,6 +298,11 @@
</div>
<% e.end_block(); %>
</div>
<div id="editorcontainerbox">
<div id="editorcontainer"></div>
<div id="editorloadingbox">Loading...</div>
</div>
<div id="chatthrob"></div>
@ -262,57 +324,6 @@
<div id="focusprotector">&nbsp;</div>
<div id="modaloverlay">
<div id="modaloverlay-inner"></div>
</div>
<div id="mainmodals">
<% e.begin_block("modals"); %>
<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>
<% e.end_block(); %>
</div>
<% e.end_block(); %>
<% e.begin_block("scripts"); %>

105
src/templates/timeslider.html
View File

@ -33,6 +33,12 @@
<div class="stepper" id="rightstep"></div>
</div>
</div>
<div id="overlay">
<div id="overlay-inner">
<!-- -->
</div>
</div>
</div>
<div class="timeslider-bar">
@ -70,54 +76,59 @@
</div><!-- /padmain -->
</div><!-- /padpage -->
<div id="modaloverlay">
<div id="modaloverlay-inner">
<!-- -->
<div id="connectivity" class="popup">
<% e.begin_block("modals"); %>
<div class="connected visible">
<h2>Connected.</h2>
</div>
</div>
<div id="mainmodals">
<% e.begin_block("modals"); %>
<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>
</div>
<% e.end_block(); %>
</div>
<div class="reconnecting">
<h1>Reestablishing connection...</h1>
<p><img alt="" border="0" src="/static/img/connectingbar.gif" /></p>
</div>
<div class="userdup">
<h1>Opened in another window.</h1>
<h2>You seem to have opened this pad in another browser window.</h2>
<p>If you'd like to use this window instead, you can reconnect.</p>
<button id="forcereconnect">Reconnect Now</button>
</div>
<div class="unauth">
<h1>No Authorization.</h1>
<p>Your browser's credentials or permissions have changed while viewing this pad. Try reconnecting.</p>
<button id="forcereconnect">Reconnect Now</button>
</div>
<div class="looping">
<h1>Disconnected.</h1>
<h2>We're having trouble talking to the EtherPad lite synchronization server.</h2>
<p>You may be connecting through an incompatible firewall or proxy server.</p>
</div>
<div class="initsocketfail">
<h1>Disconnected.</h1>
<h2>We were unable to connect to the EtherPad lite synchronization server.</h2>
<p>This may be due to an incompatibility with your web browser or internet connection.</p>
</div>
<div class="slowcommit">
<h1>Disconnected.</h1>
<h2>Server not responding.</h2>
<p>This may be due to network connectivity issues or high load on the server.</p>
<button id="forcereconnect">Reconnect Now</button>
</div>
<div class="deleted">
<h1>Disconnected.</h1>
<p>This pad was deleted.</p>
</div>
<div class="disconnected">
<h1>Disconnected.</h1>
<h2>Lost connection with the EtherPad lite synchronization server.</h2>
<p>This may be due to a loss of network connectivity. If this continues to happen, please let us know</p>
<button id="forcereconnect">Reconnect Now</button>
</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>
<% e.end_block(); %>
</div>
<!-- export code -->
<div id="importexport">