Merge pull request #1704 from rmisio/unify-modals

Unify modals

Author: jjeffryes

css/obBase.css

@@ -329,10 +329,6 @@ h6, .h6 {
   position: relative;
 }
 
-#contentFrame.modalOpen #pageNav .badge {
-  display: none;
-}
-
 #pageNav {
   position: relative;
   -webkit-app-region: no-drag;
@@ -357,16 +353,6 @@ h6, .h6 {
   box-sizing: border-box;
 }
 
-#obContainer.modalOpen,
-#obContainer.innerModalOpen {
-  overflow: hidden;
-  /* obContainer must also be set to scrollTop(0), otherwise the modal may be scrolled out of place */
-}
-
-#obContainer.modalOpen #content {
-  -webkit-filter: blur(1px);
-}
-
 #obContainer.customizeUserPage {
   overflow: hidden;
   border: 5px dashed #fff;
@@ -528,6 +514,7 @@ h6, .h6 {
   float: left;
 }
 
+/* while not used for modals, overlay is used when page nav drop downs are opened */
 #overlay,
 .overlay {
   position: absolute;
@@ -536,7 +523,7 @@ h6, .h6 {
   height: 100%;
   width: 100%;
   background-color: rgba(25,25,25,0.85);
-  z-index: 0;
+  z-index: 1;
   transition: all .25s cubic-bezier(0, 0, 0.2, .5);
 }
 
@@ -1313,8 +1300,34 @@ label.fieldItem {
   pointer-events: all;
 }
 
-.modal.noNav {
-  padding-top: 85px
+.modal .btn-corner {
+  z-index: 0;
+}
+
+.modal.underPageNav {
+  top: 46px
+}
+
+/*
+  .insideApp will position the modal below the nav bar and so it doesn't obscure chat.
+*/
+.modal.insideApp {
+  top: 46px;
+  width: calc(100% - 47px);
+  z-index: 0;
+}
+
+#ov1.chatOpen .modal.insideApp {
+  width: calc(100% - 230px);
+}
+
+/*
+  A fullscreen modal has it's content extended across the entire screen
+  (excluding the top menu bar), as opposed to being a "box" centered in
+  the screen (e.g the loading modal). It's not really compatible with .insideApp.
+*/
+.modal.modalCoverFullscreen {
+  padding-top: 0;
 }
 
 .modal-child {
@@ -1327,6 +1340,11 @@ label.fieldItem {
   transition: right 0.5s ease;
 }
 
+.modal.modalCoverFullscreen .modal-child {
+  width: 100%;
+  height: 100%;
+}
+
 .modal-opaque .modal-child {
   height: 574px;
 }
@@ -4419,71 +4437,25 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   position: absolute;
 }
 
-#modalHolder,
-.modalHolder {
-  position: absolute;
-  z-index: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-
-#pageNav .modalHolder {
-  /* patch for the about modal. It should be moved to the baseModal view */
-  position: fixed;
-  z-index: 1;
-  top: 74px;
-}
-
-#messageModal {
-  z-index: 9;
-}
-
-#loadingModal {
-  padding-top: 0;
-}
-
 .page-connect-modal .spinner-with-logo {
   margin-top: -45px;
 }
 
-#ov1 #loadingModal.hide {
-  height: 0; /* kludge to allow top bar to fade in. Transitions don't work if display is none */
-  padding: 0;
-  overflow: hidden;
-  display: block;
-}
-
-#loadingModal #loadingModalContent {
+.loadingModal .loadingModalContent {
   position: absolute;
   right: 0;
   left: 0;
   top: 50%;
   margin-top: 117px;
-  opacity: 1;
+  opacity: 0;
   transition: opacity 1s 5s ease;
   box-sizing: border-box;
   padding: 9px;
   text-align: center;
 }
 
-#loadingModal #loadingModalBtns {
-  opacity: 1;
-  transition: opacity 1s 5s ease;
-  /* this seems redundant, but if you don't also have a transition on the button container, for some reason the normal
-  background color will be used instead of the background color from the custCol-secondary class until the parent
-  transition is complete on Win64 10. */
-}
-
-#loadingModal.hide #loadingModalContent,
-#loadingModal.hide #loadingModalBtns {
-  opacity: 0;
-}
-
 #ov1 .server-connect-modal .modal-child {
   height: 625px;
-  overflow: hidden;
 }
 
 #ov1 .server-connect-modal .message-bar {
@@ -5427,6 +5399,10 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   margin-top: -8px;
 }
 
+#ov1  .marginTop0 {
+  margin-top: 0px;
+}
+
 #ov1  .marginTop1 {
   margin-top: 1px;
 }
@@ -6187,8 +6163,6 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
 #ov1.minEffects #overlay,
 #ov1.minEffects #sideBar,
 #ov1.minEffects #pageNav,
-#ov1.minEffects #modalHolder,
-#ov1.minEffects #messageModal,
 #ov1.minEffects #statusBar {
   transition: none !important;
   -webkit-filter: none !important;
@@ -6303,8 +6277,6 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
 #ov1.minEffects #overlay .disabled,
 #ov1.minEffects #sideBar .disabled,
 #ov1.minEffects #pageNav .disabled,
-#ov1.minEffects #modalHolder .disabled,
-#ov1.minEffects #messageModal .disabled,
 #ov1.minEffects #statusBar .disabled {
   opacity: 0.2 !important;
 }
@@ -6315,8 +6287,6 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
 #ov1.minEffects #overlay .disabled2,
 #ov1.minEffects #sideBar .disabled2,
 #ov1.minEffects #pageNav .disabled2,
-#ov1.minEffects #modalHolder .disabled2,
-#ov1.minEffects #messageModal .disabled2,
 #ov1.minEffects #statusBar .disabled2 {
   opacity: 0.7 !important;
 }
@@ -6326,27 +6296,12 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
 }
 
 /* add a shadow and a glow, so modal close buttons are still barely visible if the user picks a bad color */
-#ov1 .js-closeIndexModal [class *= "ion-"]:before,
-#ov1 #userPage .js-closeIndexModal [class *= "ion-"]:before,
-#ov1 #obContainer .js-closeIndexModal [class *= "ion-"]:before,
-#ov1 #modalHolder .js-closeIndexModal [class *= "ion-"]:before,
-#ov1 #messageModal .js-closeIndexModal [class *= "ion-"]:before,
-#ov1.minEffects .js-closeIndexModal [class *= "ion-"]:before,
-#ov1.minEffects #userPage .js-closeIndexModal [class *= "ion-"]:before,
-#ov1.minEffects #obContainer .js-closeIndexModal [class *= "ion-"]:before,
-#ov1.minEffects #modalHolder .js-closeIndexModal [class *= "ion-"]:before,
-#ov1.minEffects #messageModal .js-closeIndexModal [class *= "ion-"]:before,
 #ov1 .js-modal-close [class *= "ion-"]:before,
 #ov1 #userPage .js-modal-close [class *= "ion-"]:before,
 #ov1 #obContainer .js-modal-close [class *= "ion-"]:before,
-#ov1 #modalHolder .js-modal-close [class *= "ion-"]:before,
-#ov1 #messageModal .js-modal-close [class *= "ion-"]:before,
 #ov1.minEffects .js-modal-close [class *= "ion-"]:before,
 #ov1.minEffects #userPage .js-modal-close [class *= "ion-"]:before,
-#ov1.minEffects #obContainer .js-modal-close [class *= "ion-"]:before,
-#ov1.minEffects #modalHolder .js-modal-close [class *= "ion-"]:before,
-#ov1.minEffects #messageModal .js-modal-close [class *= "ion-"]:before,
-#ov1 #modalHolder .js-closeBuyWizardModal [class *= "ion-"]:before {
+#ov1.minEffects #obContainer .js-modal-close [class *= "ion-"]:before {
   text-shadow: 0 0 1px rgba(0,0,0,1), 0 0 2px rgba(255,255,255, 1) !important;
 }
 

index.html

@@ -17,6 +17,9 @@
     <div id="appBar" class="top0 alignCenter custCol-secondary"></div>
 
     <div id="contentFrame">
+      <!-- Overlay is used by pageNav drop down menus and should be here in the markup so that it
+           properly obscures any open modals (without having to manage z-indexes). -->
+      <div id="overlay" class="hide"></div>
 
       <div id="navArea">
         <div id="pageNav" class="custCol-secondary"></div>
@@ -25,13 +28,11 @@
       <div id="contentArea">
         <div class="container custCol-background custCol-text" id="obContainer">
           <div id="content"></div>
-          <div id="modalHolder">
-            <!-- container for modal views -->
-          </div>
         </div>
 
         <div id="sideBar"></div>
 
+
         <div id="messageModal" class="modal modal-opaque js-messageModal hide">
           <!-- modal for messages -->
           <div class="modal-child modal-childMain color-primary custCol-secondary padding20 custCol-text">
@@ -52,25 +53,11 @@ <h2 class="ion-android-close custCol-text clickable"></h2>
             </div>
           </div>
         </div>
-
-        <div id="overlay" class="hide"></div>
+                
         <div id="statusBar"></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>
-        </div>
-      </div>
-
     </div>
 
   </div>
@@ -80,38 +67,7 @@ <h2 class="ion-android-close custCol-text clickable"></h2>
 
   <!--TODO: modularize non-modular scripts -->
   <script src="js/utils/list.min.js"></script>
-
-  <script>
-    var app = require('./js/start');
-
-    window.translateIndex = function(){
-      $('.js-translate').each(function() {
-        $(this).text(polyglot.t($(this).data("translate")));
-      });
-    };
-    translateIndex();
-    $('.js-closeIndexModal').on('click', function(){
-      $(this).closest('.modal').addClass('hide');
-    });
-    $('.js-closeIndexApp').on('click', function(){
-      var win = remote.getCurrentWindow();
-      var process = remote.process;
-      if (process.platform != 'darwin') {
-        win.close();
-      } else {
-        win.hide();
-      }
-    });
-    $('.js-indexReload').on('click', function(){
-      location.reload();
-    });
-    $('.js-newServerIndexApp').on('click', function(){
-      var newServer = $('#indexNewServer').val();
-      app.loadNewServer(newServer);
-    });
-    $('.js-defaultServerIndexApp').on('click', function(){
-      app.loadNewServer("http://localhost:18469/api/v1/");
-    });
-  </script>
+    
+  <script>require('./js/start')</script>
 </body>
 </html>

js/App.js

@@ -1,4 +1,4 @@
-'use strict';
+'use strict'; 
 
 var ipcRenderer = require('ipc-renderer'),
     $ = require('jquery'),

js/languages/en-US.json

@@ -560,7 +560,7 @@
     "refundAlreadySent": "The refund has already been successfully sent for this order",
     "serverTimeout": "No response was received from the server. It may be unreachable or taking a very long time to respond.",
     "noData": "No data is available for the options you have selected.",
-    "loadingViewError": "Loading this page is taking longer than expected.",
+    "loadingTakingTooLong": "Loading is taking longer than expected.",
     "smtpServerError": "SMTP Connection Error",
     "smtpServerSuccess": "SMTP Connection Success",
     "noSMTPConnection": "The connection to the SMTP server failed.",

js/router.js

@@ -5,7 +5,6 @@ var ipcRenderer = require('ipc-renderer'),
     Backbone = require('backbone'),
     $ = require('jquery'),
     app = require('./App').getApp(),    
-    messageModal = require('./utils/messageModal.js'),
     homeView = require('./views/homeVw'),
     userPageView = require('./views/userPageVw'),
     settingsView = require('./views/settingsVw'),
@@ -180,10 +179,10 @@ module.exports = Backbone.Router.extend({
     if (callback) callback.apply(this, args);
   },
 
-  cleanup: function(){
-    $('#loadingModal').addClass('hide'); //hide modal if it is still visible
-    messageModal.hide();
-    $('#obContainer').removeClass('modalOpen innerModalOpen box-borderDashed noScrollBar overflowHidden');
+  cleanup: function() {
+    app.loadingModal.close();
+    app.simpleMessageModal.close();
+    $('#obContainer').removeClass('customizeUserPage box-borderDashed noScrollBar overflowHidden');
     window.obEventBus.trigger('cleanNav');
   },
 
@@ -221,7 +220,6 @@ module.exports = Backbone.Router.extend({
 
     $('body').attr('id', options.bodyID);
     $('body').attr('class', options.bodyClass);
-    $('#obContainer').removeClass('customizeUserPage'); //remove customization styling if present
 
     this.pageConnectModal && this.pageConnectModal.remove();
     this.pageConnectModal = null;
@@ -276,6 +274,8 @@ module.exports = Backbone.Router.extend({
         typeof loadingConfig.promise.then === 'function') {
         this.launchPageConnectModal(loadingConfig).done(() => {
           this.view.cacheExpires && this.cacheView(this.view);
+        }).fail(() => {
+          this.view.remove();
         });
       } else {
         this.view.cacheExpires && this.cacheView(this.view);
@@ -298,7 +298,6 @@ module.exports = Backbone.Router.extend({
       throw new Error('At a minimum, the config must contain a config.promise.');
     }
 
-    $('#loadingModal').addClass('hide');
     config = __.extend({}, defaults, config);
 
     this.pageConnectModal && this.pageConnectModal.remove();