Merge pull request #1591 from OpenBazaar/positioningFixes

Patch layout issues with page connect modals

Author: jjeffryes

css/obBase.css

@@ -197,6 +197,10 @@ form {
   position: relative;
 }
 
+#contentFrame.modalOpen #pageNav .badge {
+  display: none;
+}
+
 #pageNav {
   position: relative;
   -webkit-app-region: no-drag;
@@ -1520,18 +1524,9 @@ h5 {
   padding-top: 100px;
 }
 
-/*
-  will cover entire screen aside from the #appBar,
-  which should never be covered.
-*/
-.modal-fullscreen {
-  top: 28px;
-}
-
 .modal-childMain {
   border-radius: 3px;
   background-color: #327eb8;
-  box-shadow: 0 0 10px #383838;
 }
 
 .modal-hero {
@@ -4350,21 +4345,6 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   padding-top: 0;
 }
 
-#loadingModal, .page-connect-modal.server-connect {
-  z-index: 13;
-}
-
-/*
-   Different types of modals (e.g. loading, page-connect-modal, server-connect...) have
-   different dimensions (e.g. some cover chat, some cover nav bar...). We'll be 
-   fudging the position of loading spinners and content so that if these modals
-   are shown in succession, there is no "jump" of the spinner / content.
-*/
-#loadingModal .spinner-with-logo, .page-connect-modal.server-connect .spinner-with-logo {
-  margin-top: 6px;
-  margin-left: -20px;
-}
-
 .page-connect-modal .spinner-with-logo {
   margin-top: -45px;
 }
@@ -4403,10 +4383,6 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   opacity: 0;
 }
 
-#ov1 .server-connect-modal {
-  z-index: 15;
-}
-
 #ov1 .server-connect-modal .modal-child {
   height: 625px;
   overflow: hidden;
@@ -4702,10 +4678,6 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   transition: transform 0.5s ease;
 }
 
-.page-connect-modal.server-connect .content {
-  transform: translate(-20px, 51px);
-}
-
 .page-connect-modal .content .btn {
   float: none;
 }

index.html

@@ -58,19 +58,19 @@ <h2 class="ion-android-close custCol-text clickable"></h2>
 
       </div>
 
-    </div>
-
-    <div id="loadingModal" class="modal modal-opaque modal-fullscreen js-loadingModal hide">
-      <div class="spinner-with-logo fullCentered">
-        <i class="ion-android-sync spinner fontSize30 spinner-with-logo-icon"></i>
-      </div>
-      <div id="loadingModalContent">
-        <p class="fontSize16 js-translate" data-translate="errorMessages.loadingViewError"></p>
-        <div id="loadingModalBtns">
-          <a class="btn btn-large marginRight10 custCol-secondary custCol-text js-indexReload"><i class="ion-android-sync"></i> <span class="js-translate" data-translate="Reload"></span></a>
-          <a class="btn btn-large custCol-secondary custCol-text" href="#home"><i class="ion-eye"></i> <span class="js-translate" data-translate="LoadIndex"></span></a>
+      <div id="loadingModal" class="modal modal-opaque modal-fullscreen js-loadingModal hide">
+        <div class="spinner-with-logo fullCentered">
+          <i class="ion-android-sync spinner fontSize30 spinner-with-logo-icon"></i>
+        </div>
+        <div id="loadingModalContent">
+          <p class="fontSize16 js-translate" data-translate="errorMessages.loadingViewError"></p>
+          <div id="loadingModalBtns">
+            <a class="btn btn-large marginRight10 custCol-secondary custCol-text js-indexReload"><i class="ion-android-sync"></i> <span class="js-translate" data-translate="Reload"></span></a>
+            <a class="btn btn-large custCol-secondary custCol-text" href="#home"><i class="ion-eye"></i> <span class="js-translate" data-translate="LoadIndex"></span></a>
+          </div>
         </div>
       </div>
+
     </div>
 
   </div>

js/utils/setTheme.js

@@ -85,7 +85,6 @@ module.exports = function(primaryColor, secondaryColor, backgroundColor, textCol
       "#ov1 #userPage .customThemeScrollbar::-webkit-scrollbar-thumb { background: " + shadeColor2(primaryColor, 0.25) + ";}" +
       "#ov1 #userPage .user-page-header-slim-bg { box-shadow: inset 0px -120px 112px -52px rgba(" + opaque1.r + ", " + opaque1.g + ", " + opaque1.b + ", .65);}" +
       "#ov1 #userPage .custCol-background { background-color: " + backgroundColor + ";}" +
-      "#ov1 #userPage .modal-childMain { box-shadow: 0px 0px 15px " + shadeColor2(backgroundColor, -0.15) + ";}" +
       "#ov1 #userPage #overlay { background-color: rgba(" + opaque.r + ", " + opaque.g + ", " + opaque.b + ", 0.70);}";
 
     // Medium Editor

js/views/baseModal.js

@@ -48,7 +48,9 @@ module.exports = baseVw.extend({
 
   open: function() {
     if (!domUtils.isInPage(this.el)) {
-      document.getElementById('appFrame').appendChild(this.el);
+      var container = document.getElementById('contentFrame');
+      container.classList.add("modalOpen");
+      container.appendChild(this.el);
 
       this._open = true;
       this.trigger('open');
@@ -60,7 +62,9 @@ module.exports = baseVw.extend({
 
   close: function() {
     if (domUtils.isInPage(this.el)) {
-      document.getElementById('appFrame').removeChild(this.el);
+      var container = document.getElementById('contentFrame');
+      container.classList.remove("modalOpen");
+      container.removeChild(this.el);
 
       this._open = false;
       this.trigger('close');

js/views/serverConnectModal.js

@@ -262,9 +262,11 @@ module.exports = BaseModal.extend({
         promise = deferred.promise(),
         startTime = Date.now(),
         minAttemptTime = 1000,
-        //timesup,
+        loginRequest,
+        timesup,
         conclude,
-        login;
+        login,
+        onClose;
 
     conclude = function(reject) {
       // Sometimes the connection attempt concludes so fast that the UI doesn't
@@ -285,7 +287,7 @@ module.exports = BaseModal.extend({
 
     login = function() {
       // check authentication
-      app.login().done(function(data) {
+      loginRequest = app.login().done(function(data) {
         if (data.success) {
           conclude(false, data);
           self.trigger('connected');
@@ -307,6 +309,14 @@ module.exports = BaseModal.extend({
 
     app.connectHeartbeatSocket();
 
+    promise.cleanup = function() {
+      clearTimeout(timesup);
+      clearTimeout(conclude);
+      loginRequest && loginRequest.abort();
+      app.getHeartbeatSocket().off(null, login);
+      app.getHeartbeatSocket().off(null, onClose);
+    };
+
     promise.cancel = function() {
       conclude(true, 'canceled');
     };
@@ -317,22 +327,21 @@ module.exports = BaseModal.extend({
 
     app.getHeartbeatSocket().on('open', login);
 
-    app.getHeartbeatSocket().on('close', function() {
+    app.getHeartbeatSocket().on('close', onClose = function() {
       // On local servers the close event on a down server is
       // almost instantaneous and the UI can't even show the
       // user we're attempting to connect. So we'll put up a bit
       // of a facade.
       conclude(true);
     });
 
-    /*
     timesup = setTimeout(function() {
       // not timeing out our connections for now, due to
       // server issue where valid connections may take
       // 1 min. +
-      conclude(true, 'timedout');
+      // conclude(true, 'timedout');
+      console.log("connection timeout"); 
     }, 10000);
-    */
 
     return promise;
   },