From 6da6a7f0d8f09668c0af234c94f41a191d4859a0 Mon Sep 17 00:00:00 2001 From: Marcel Klehr Date: Fri, 13 Jul 2012 08:23:22 +0200 Subject: [PATCH 01/11] Use nice editbar popups for connection status instead of srceen-blocking modals. --- src/static/css/pad.css | 175 ++------------------------ src/static/js/pad_connectionstatus.js | 23 ++-- src/static/js/pad_editbar.js | 15 ++- src/static/js/pad_modals.js | 31 ++--- src/templates/pad.html | 133 ++++++++++---------- 5 files changed, 114 insertions(+), 263 deletions(-) diff --git a/src/static/css/pad.css b/src/static/css/pad.css index 19180ade..3b600fd3 100644 --- a/src/static/css/pad.css +++ b/src/static/css/pad.css @@ -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; diff --git a/src/static/js/pad_connectionstatus.js b/src/static/js/pad_connectionstatus.js index bb0f0521..c592afbd 100644 --- a/src/static/js/pad_connectionstatus.js +++ b/src/static/js/pad_connectionstatus.js @@ -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() { diff --git a/src/static/js/pad_editbar.js b/src/static/js/pad_editbar.js index af2bc40a..973bfda2 100644 --- a/src/static/js/pad_editbar.js +++ b/src/static/js/pad_editbar.js @@ -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