Use nice editbar popups for connection status instead of srceen-blocking modals.

src/static/css/pad.css

@@ -401,168 +401,24 @@ table#otheruserstable {
   color: #888;
   font-style: italic;
 }
-.modaldialog.cboxreconnecting .modaldialog-inner,
+
-.modaldialog.cboxconnecting .modaldialog-inner {
+#connectivity {
-  background: url(../../static/img/connectingbar.gif) no-repeat center 60px;
+  z-index: 600 !important;
-  height: 100px;
 }
-.modaldialog.cboxreconnecting,
+
-.modaldialog.cboxconnecting,
+#connectivity * {
-.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;
   display: none;
 }
-.cboxconnecting #connectionboxinner .connecting {
+
-  display: block
+#connectivity .visible,
-}
+#connectivity .visible * {
-#connectionboxinner .disconnected h2 {
+  display: block;
-  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
 }
+
 #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;

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;
+      padmodals.showModal(k);
-      $("#connectionbox").get(0).className = cls;
+      padmodals.showOverlay(500);
-      padmodals.showModal("#connectionbox", 500);
-
-      $('button#forcereconnect').click(function()
-      {
-        window.location.reload();
-      });
     },
     isFullyConnected: function()
     {

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

src/static/js/pad_modals.js

@@ -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();
+      $("#connectivity .visible").removeClass('visible');
-      $(modalId).show().css(
+      $("#connectivity ."+messageId).addClass('visible');
-      {
+      padeditbar.toogleDropDown("none", function() {
-        'opacity': 0
+        padeditbar.toogleDropDown("connectivity");
-      }).animate(
+      });
-      {
+    },
-        'opacity': 1
+    showOverlay: function(duration) {
-      }, duration);
       $("#modaloverlay").show().css(
       {
         'opacity': 0
@@ -48,18 +48,7 @@ var padmodals = (function()
         'opacity': 1
       }, duration);
     },
-    hideModal: function(duration)
+    hideOverlay: function(duration) {
-    {
-      padutils.cancelActions('hide-feedbackbox');
-      padutils.cancelActions('hide-sharebox');
-      $("#sharebox-response").hide();
-      $(".modaldialog").animate(
-      {
-        'opacity': 0
-      }, duration, function()
-      {
-        $("#modaloverlay").hide();
-      });
       $("#modaloverlay").animate(
       {
         'opacity': 0

src/templates/pad.html

@@ -86,31 +86,36 @@
             </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>
-                    </a>
-                </li>
                 <li class="acl-write" data-key="savedRevision">
-                    <a class="grouped-right" id="revisionlink" title="Mark this revision as a saved revision">
+                    <a class="grouped-left" id="revisionlink" title="Mark this revision as a saved revision">
                         <span class="buttonicon buttonicon-savedRevision"></span>
                     </a>
                 </li>
-                <li class="acl-write separator"></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 data-key="import_export">
-                    <a class="grouped-left" id="importexportlink" title="Import/Export from/to different document formats">
+                    <a class="grouped-right" id="importexportlink" title="Import/Export from/to different document formats">
                         <span class="buttonicon buttonicon-import_export"></span>
                     </a>
                 </li>
+                <li class="acl-write separator"></li>
+                <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">
                     <a class="grouped-right" id="embedlink" title="Share and Embed this pad">
                         <span class="grouped-right buttonicon buttonicon-embed"></span>
                     </a>
                 </li>
                 <li class="separator"></li>
-                <li onClick="document.location = document.location.pathname+ '/timeslider'">
+                <li data-key="connectivity">
-                    <a id="timesliderlink" title="Show the history of this pad">
+                    <a id="connectivitylink" title="Show the current connection status.">
-                        <span class="buttonicon buttonicon-history"></span>
+                        <span class="buttonicon buttonicon-connectivity"></span>
                     </a>
                 </li>
                 <li id="usericon" data-key="showusers">
@@ -146,11 +151,6 @@
             <div id="userlistbuttonarea"></div>
         </div>
 
-        <div id="editorcontainerbox">
-            <div id="editorcontainer"></div>
-            <div id="editorloadingbox">Loading...</div>
-        </div>
-
         <div id="settings" class="popup">
             <h1>Pad settings</h1>
             <div class="column">
@@ -220,6 +220,55 @@
             </div>
         </div>
         
+        <div id="connectivity" class="popup">
+            <% e.begin_block("modals"); %>
+                <div class="connected visible">
+                  <h2>Connected.<h2>
+                </div>
+                <div class="reconnecting">
+                  <h2>Reestablishing connection...</h2>
+                </div>
+                <div class="userdup">
+                  <h2>Opened in another window.</h2>
+                  <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>
+                  <button id="forcereconnect">Reconnect Now</button>
+                </div>
+                <div class="unauth">
+                  <h2>No Authorization.</h2>
+                  <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">
+                  <h2>Disconnected.</h2>
+                  <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 class="initsocketfail">
+                  <h2>Disconnected.</h2>
+                  <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 class="slowcommit">
+                  <h2>Disconnected.</h2>
+                  <p><b>Server not responding.</b> 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">
+                  <h2>Disconnected.</h2>
+                  <p>This pad was deleted.</p>
+                </div>
+                <div class="disconnected">
+                  <h2>Disconnected.</h2>
+                  <p><b>Lost connection with the EtherPad lite synchronization server.</b> This may be due to a loss of network connectivity.</p>
+                  <p>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"); %>
             <div id="embedreadonly" class="right acl-write">
@@ -239,6 +288,11 @@
             <% e.end_block(); %>
         </div>
         
+        <div id="editorcontainerbox">
+            <div id="editorcontainer"></div>
+            <div id="editorloadingbox">Loading...</div>
+        </div>
+
         <div id="chatthrob"></div>
 
         <div id="chaticon" title="Open the chat for this pad" onclick="chat.show();return false;">
@@ -263,53 +317,6 @@
             <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"); %>