Merge pull request #1463 from rmisio/modal-fullscreen

resurrecting the modal-cover-fullscreen class

Author: jjeffryes

css/obBase.css

@@ -1456,6 +1456,14 @@ h5 {
   padding-top: 70px;
 }
 
+.modal-cover-fullscreen {
+  top: 0;
+}
+
+.modal-cover-fullscreen .modal-childMain {
+  top: 50px;
+}
+
 .modal-childMain {
   border-radius: 3px;
   background-color: #327eb8;
@@ -3774,7 +3782,7 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
 .modal .homeModal-heroText {
   position: absolute;
   bottom: 0px;
-  top: 210px;
+  top: 200px;
   color: #fff;
   font-size: 20px;
   line-height: 22px;
@@ -4244,14 +4252,68 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   z-index: 9;
 }
 
-#loadingModal {
+#loadingModal, .page-connect-modal.startup-server-connect {
   z-index: 14;
 }
 
-.server-connect-modal {
+#ov1 .server-connect-modal {
   z-index: 15;
 }
 
+#ov1 .server-connect-modal .modal-child {
+  height: 625px;
+  overflow: hidden;
+}
+
+#ov1 .server-connect-modal .message-bar {
+  top: 50px;
+  left: 25px;
+  right: 25px;
+  z-index: 1;
+  transition: top .2s, opacity .2s;
+}
+
+#ov1 .server-connect-modal .message-bar > div {
+  background-color: #C62D2D;
+  padding: 8px 20px;
+  line-height: 2.2;
+  display: inline-block;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+#ov1 .server-connect-modal .message-bar .message-bar-close {
+  top: -12px;
+  right: -3px;
+}
+
+#ov1 .server-connect-modal .message-bar.slide-out {
+  top: -45px;
+  opacity: 0;
+}
+
+#ov1 .server-config-form {
+  transition: top 250ms;
+}
+
+#ov1 .server-config-form.slide-out {
+  top: 372px;
+}
+
+#ov1 .server-config-row {
+  /*min-height: 73px;*/
+}
+
+#ov1 .server-config-row .connection-failed::after {
+  content: '';
+  position: absolute;
+  width: 6px;
+  background-color: #C62D2D;
+  top: 0;
+  left: 0;
+  bottom: 0;
+}
+
 #loadingModal .btn {
   -webkit-app-region: no-drag;
 }
@@ -4664,6 +4726,15 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   overflow-x: hidden;
 }
 
+#ov1 .autoOverflowYHideX {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+
+#ov1 .vertAlignMid {
+  vertical-align: middle;
+}
 
 #ov1 .vCentered {
   /* must be inside a relatively positioned containing element */
@@ -5284,8 +5355,6 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   height: 46px;
 }
 
-
-
 #ov1  .height30 {
   height: 30px;
   line-height: 30px;
@@ -5776,6 +5845,13 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   display: block;
 }
 
+#ov1 .marginCenter {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
+
 #ov1 .heightAuto {
   height: auto;
 }

index.html

@@ -76,7 +76,7 @@ <h2 class="txt-center">
   <div id="statusBar"></div>
   <div id="pageNav" class="bar navBar navBar-main custCol-secondary padding0"></div>
   <!-- the loading modal must be on top of the page nav or the reload button is hidden -->
-  <div id="loadingModal" class="modal modal-opaque js-loadingModal top0">
+  <div id="loadingModal" class="modal modal-opaque js-loadingModal top0 hide">
     <div class="spinner-with-logo fullCentered">
       <i class="ion-android-sync spinner fontSize30 spinner-with-logo-icon"></i>
     </div>

js/App.js

@@ -1,7 +1,7 @@
 var ipcRenderer = require('ipc-renderer'),
-    Socket = require('./utils/Socket'),
+    __ = require('underscore'),
     $ = require('jquery'),
-    ServerConfigMd = require('./models/serverConfigMd'),
+    Socket = require('./utils/Socket'),
     _app;
 
 function App() {
@@ -15,55 +15,42 @@ function App() {
   this._notifUnread = 0;
   this._chatMessagesUnread = 0;
 
-  // TODO: what is wrong with the localStorage adapter??? shouldn't need
-  // to manually provide the data to the model. All that should be needed
-  // is an ID and then a subsequent fetch, but that doesn't return the data.
-  // Investigate!
-  this.serverConfig = new ServerConfigMd( JSON.parse(localStorage['_serverConfig-1'] || '{}') );
-
-  // serverConfigMd.fetch();
-  if (!localStorage['_serverConfig-1']) {
-    this.serverConfig.save();
-  }  
-
-  this.connectHeartbeatSocket();
-}
+  // TODO: rather than attach the serverConfigs CL
+  // in main.js, pass in the instance here so the
+  // dependency is more explicit.
+};
 
 App.prototype.connectHeartbeatSocket = function() {
-  var self = this;
+  var activeServer = this.serverConfigs.getActive();
 
-  clearTimeout(this.heartbeatSocketTimesup);
+  if (!activeServer) {
+    throw new Error(`No active server set. Please set via the Server Configs collection.`);
+  }
 
   if (this._heartbeatSocket) {
-    this._heartbeatSocket.connect(this.serverConfig.getHeartbeatSocketUrl());
+    this._heartbeatSocket.connect(activeServer.getHeartbeatSocketUrl());
   } else {
-    this._heartbeatSocket = new Socket(this.serverConfig.getHeartbeatSocketUrl());
-
-    this._heartbeatSocket.on('close', function() {
-      clearTimeout(self._heartbeatSocketTimesup);
-    });
+    this._heartbeatSocket = new Socket(activeServer.getHeartbeatSocketUrl());
   }
-
-  // give up if it takes to long
-  this._heartbeatSocketTimesup = setTimeout(function() {
-    if (self._heartbeatSocket.getReadyState() !== 1) {
-      //self._heartbeatSocket._socket.close(); //turn off for now, until server issues are fixed
-      alert(polyglot.t('errorMessages.serverTimeout'));
-    }
-  }, 30000); //wait for 30 seconds, sometimes the server stalls
 };
 
 App.prototype.getHeartbeatSocket = function() {
   return this._heartbeatSocket;
 };
 
 App.prototype.login = function() {
+  var activeServer = this.serverConfigs.getActive();
+
+  if (!activeServer) {
+    throw new Error(`No active server set. Please set via the Server Configs collection.`);
+  }
+
   return $.ajax({
-    url: this.serverConfig.getServerBaseUrl() + '/login',
+    url: activeServer.getServerBaseUrl() + '/login',
     method: 'POST',
     data: {
-      username: this.serverConfig.get('username'),
-      password: this.serverConfig.get('password')
+      username: activeServer.get('username'),
+      password: activeServer.get('password')
     },
     timeout: 3000
   });  
@@ -148,7 +135,4 @@ App.getApp = function() {
   return _app;
 };
 
-
 module.exports = App;
-
-

js/collections/chatConversationsCl.js

@@ -4,7 +4,7 @@ var Backbone = require('backbone'),
 
 module.exports = Backbone.Collection.extend({
   url: function() {
-    return app.serverConfig.getServerBaseUrl() + '/get_chat_conversations';
+    return app.serverConfigs.getActive().getServerBaseUrl() + '/get_chat_conversations';
   },
 
   model: ChatConversationMd,

js/collections/chatMessagesCl.js

@@ -4,7 +4,7 @@ var Backbone = require('backbone'),
 
 module.exports = Backbone.Collection.extend({
   url: function() {
-    return app.serverConfig.getServerBaseUrl() + '/get_chat_messages';
+    return app.serverConfigs.getActive().getServerBaseUrl() + '/get_chat_messages';
   },
 
   model: ChatMessageMd,

js/collections/notificationsCl.js

@@ -5,7 +5,7 @@ var Backbone = require('backbone'),
 
 module.exports = Backbone.Collection.extend({
   url: function() {
-    return app.serverConfig.getServerBaseUrl() + '/get_notifications';
+    return app.serverConfigs.getActive().getServerBaseUrl() + '/get_notifications';
   },
 
   model: NotificationMd,

js/collections/ratingCl.js

@@ -5,7 +5,7 @@ var __ = require('underscore'),
 
 module.exports = Backbone.Collection.extend({
   url: function() {
-    return app.serverConfig.getServerBaseUrl() + '/get_ratings';
+    return app.serverConfigs.getActive().getServerBaseUrl() + '/get_ratings';
   },
 
   model: RatingMd,

js/collections/serverConfigsCl.js

@@ -0,0 +1,35 @@
+var Backbone = require('backbone'),
+    localStorageSync = require('../utils/backboneLocalStorage'),
+    ServerConfigMd = require('../models/serverConfigMd');
+
+module.exports = Backbone.Collection.extend({
+  sync: localStorageSync.sync,
+  localStorage: new localStorageSync('__serverConfig'),  
+  model: ServerConfigMd,
+
+  getActive: function() {
+    var config = this.get(localStorage.activeServer);
+
+    if (!config && this.length) {
+      config = this.at(this.length - 1);
+      this.setActive(config.id);
+    }
+
+    return config;  
+  },
+
+  setActive: function(id) {
+    var md;
+
+    if (!(md = this.get(id))) {
+      throw new Error(`Unable to set the active server config. It must be an id of one of the available
+          server configs stored in this collection.`)
+    }
+
+    if (this._active !== id) {
+      this._active = id;
+      localStorage.activeServer = id;
+      this.trigger('activeServerChange', md);
+    }
+  }
+});

js/languages/en-US.json

@@ -24,6 +24,7 @@
   "of": "of",
   "Sell": "Sell",
   "New": "New",
+  "Retry": "Retry",
   "HighlightToStyle": "Highlight text to style",
   "Excellent": "Excellent",
   "Good": "Good",
@@ -670,23 +671,30 @@
     "noSearchResultsFound": "No results found"
   },
   "serverConnectModal": {
-    "statusTryingToConnect": "Trying to connect to your server...",
-    "statusConnected": "Connected.",
-    "statusFailedConnection": "Unable to connect to your server",
-    "statusFailedAuthentication": "Authentication failed",
-    "statusTooManyAttempts": "Too many failed login attempts",
+    "connect": "Connect",
+    "connected": "Connected",
+    "connecting": "Connecting",
     "serverConfiguration": "Server Configuration",
-    "connecting": "Connecting...",
     "intro": "OpenBazaar is designed to allow you to host your server separate from the client. By default, your server will run locally, but you can override it below.",
     "serverIP": "Server IP",
     "restApiPort": "Rest API port",
     "websocketApiPort": "Websocket API port",
     "heartbeatSocketApiPort": "Heartbeat socket port",
     "username": "Username",
     "password": "Password",
-    "restoreDefaults": "Restore defaults",
     "saveChanges": "Save Changes",
-    "retry": "Retry connection"
+    "defaultServerName": "default",
+    "portedConnectionName": "ported connection",
+    "connectionFailed": "Connection failed to %{serverName}",
+    "connectingTo": "Connecting to %{serverName}",
+    "connectingToDefault": "Connecting to the default server",
+    "authFailed": "authentication failed",
+    "authFailedTooManyAttempts": "too many failed authentication attempts",
+    "serverConfigsHeaderMsg": "Your Server Configurations",
+    "newConfigHeaderMsg": "Enter Server Details",
+    "editConfigHeaderMsg": "Configuration Settings",
+    "serverConfigsTitle": "Server Configurations",
+    "newConfigTitle": "New Configuration"
   },
   "timezones": {
     "-12": "(GMT -12:00) Eniwetok, Kwajalein",