initial shell of the page nav servers menu view

Author: rmisio

css/obBase.css

@@ -3435,7 +3435,7 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   width: 230px;
   overflow: hidden;
   transform: translateY(-110%);
-  transition: transform 200ms;  
+  transition: transform 200ms;   
 }
 
 .popMenu-opened .popMenu-navBarSubMenu-pageNav,
@@ -3451,6 +3451,10 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   transition: opacity .2s cubic-bezier(0, 0, 0.2, 1);
 }
 
+.popMenu-navBar .popMenu-navBarSubMenu-servers a {
+  padding: 0;
+}
+
 .popMenu-navBar a:hover {
   opacity: 1;
   background: #353535;
@@ -5516,6 +5520,9 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   padding: 40px;
 }
 
+#ov1  .padding010 {
+  padding: 0px 10px;
+}
 #ov1  .padding015 {
   padding: 0px 15px;
 }

js/languages/en-US.json

@@ -573,7 +573,9 @@
     "about": "About OpenBazaar",
     "support": "Support OpenBazaar",
     "Forward": "Forward",
-    "Back": "Back"
+    "Back": "Back",
+    "newServer": "New Server",
+    "manageServers": "Manage Servers"
   },
   "onboarding": {
     "intro": "OpenBazaar Configuration",

js/templates/pageNav.html

@@ -68,7 +68,7 @@ <h3 class="margin0 marginTop25"><%= polyglot.t('Discover') %></h3>
 
 <div class="js-navProfileMenu popMenu popMenu-navBar">
   <div class="popMenu-navBarSubMenu popMenu-navBarSubMenu-pageNav">
-    <a class="js-server-config-submenu-trigger">
+    <a class="js-serverSubmenuTrigger">
       <div class="noOverflow inlineBlock" style="max-width: 171px"><%= ob.handle || ob.guid %></div>
       <span class="pull-right txt-muted ion-arrow-right-b positionRelative" style="top: 4px"></span>
     </a>
@@ -139,15 +139,7 @@ <h3 class="margin0 marginTop25"><%= polyglot.t('Discover') %></h3>
     </a>
   </div>
 
-  <div class="js-serverSubmenu popMenu-navBarSubMenu popMenu-navBarSubMenu-servers" style="right: 222px">
-    <ol>
-      <li>happy</li>
-      <li>hippo</li>
-      <li>on</li>
-      <li>the</li>
-      <li>rize</li>
-    </ol>
-  </div>  
+  <div class="js-serverSubmenu popMenu-navBarSubMenu popMenu-navBarSubMenu-servers" style="right: 222px"></div>  
 </div>
 
 <div class="popMenu popMenu-notifications js-navNotificationsMenu" data-onclose="onNotifMenuClose" data-onopen="onNotifMenuOpen">

js/templates/pageNavServersMenu.html

@@ -0,0 +1,53 @@
+<% ob.servers.forEach((server) => {  %>
+<a class="flexRow">
+  <div class="rowItem positionRelative padding010">
+    <div class="flexRow">
+      <div class="table">
+        <div>
+          <div class="vertAlignMid noOverflow" style="width: 20px;">
+            <% if (server.id === ob.connectedServer) { %>
+            <span class="ion-checkmark fontSize12 marginRight2 textOpacity1"></span>
+            <% } %>
+          </div>
+          <div class="vertAlignMid noOverflow">
+            <%= server.name %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</a>
+<% }); %>
+<hr/>
+<a class="flexRow js-newServer">
+  <div class="rowItem positionRelative padding010">
+    <div class="flexRow">
+      <div class="table">
+        <div>
+          <div class="vertAlignMid noOverflow" style="width: 20px;">
+            <span class="ion-plus fontSize12 textOpacity1"></span>
+          </div>
+          <div class="vertAlignMid noOverflow">
+            <%= polyglot.t('nav.newServer') %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</a>
+<a class="flexRow js-manageServers">
+  <div class="rowItem positionRelative padding010">
+    <div class="flexRow">
+      <div class="table">
+        <div>
+          <div class="vertAlignMid noOverflow" style="width: 20px;">
+            <span class="ion-gear-a fontSize10 marginRight3 textOpacity1"></span>
+          </div>
+          <div class="vertAlignMid noOverflow">
+            <%= polyglot.t('nav.manageServers') %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</a>

js/views/pageNavServersVw.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var __ = require('underscore'),
+    loadTemplate = require('../utils/loadTemplate'),
+    // app = require('../App.js').getApp(),        
+    BaseVw = require('./baseVw');
+
+module.exports = BaseVw.extend({
+  className: 'flexContainer',
+
+  events: {
+  },
+
+  initialize: function(options) {
+    this.options = options || {};
+
+    if (!options.collection) {
+      throw new Error('Please provide a ServerConfigs collection.');
+    }
+
+    this.listenTo(this.collection, 'update', this.render);
+  },
+
+  render: function() {
+    loadTemplate('./js/templates/pageNavServersMenu.html', (t) => {
+      this.$el.html(t({
+        connectedServer: this.collection.at(0).id,
+        servers: this.collection.toJSON()
+      }));
+    });
+
+    return this;
+  }
+});

js/views/pageNavVw.js

@@ -11,6 +11,7 @@ var __ = require('underscore'),
     baseVw = require('./baseVw'),
     //adminPanelView = require('../views/adminPanelVw'),
     NotificationsVw = require('../views/notificationsVw'),
+    PageNavServersVw = require('../views/pageNavServersVw'),
     remote = require('remote'),
     pjson = require('../../package.json');
 
@@ -45,8 +46,10 @@ module.exports = baseVw.extend({
     'click .js-navDismisslUpdate': 'dismissUpdate',
     'click [data-popmenu]': 'onPopMenuNavClick',
     'click .js-OnboardingIntroDiscover': 'hideDiscoverIntro',
-    'mouseenter .js-server-config-submenu-trigger': 'mouseenterServerSubmenuTrigger',
-    'mouseleave .js-server-config-submenu-trigger': 'mouseleaveServerSubmenuTrigger'
+    'mouseenter .js-serverSubmenuTrigger': 'mouseenterServerSubmenuTrigger',
+    'mouseleave .js-serverSubmenuTrigger': 'mouseleaveServerSubmenuTrigger',
+    'mouseenter .js-serverSubmenu': 'mouseenterServerSubmenu',
+    'mouseleave .js-serverSubmenu': 'mouseleaveServerSubmenu'
   },
 
   initialize: function(options){
@@ -272,7 +275,15 @@ module.exports = baseVw.extend({
       self.$notifMenu.find('#notificationsPanel')
           .html(self.notificationsVw.render().el);
 
-      self.setNotificationCount(self.getUnreadNotifCount());          
+      self.setNotificationCount(self.getUnreadNotifCount());
+
+      self.pageNavServersVw && self.pageNavServersVw.remove();
+      self.pageNavServersVw = new PageNavServersVw({
+        collection: app.serverConfigs
+      });
+      self.$('.js-serverSubmenu').html(
+        self.pageNavServersVw.render().el
+      );
 
       //add the admin panel
       /*
@@ -609,6 +620,21 @@ module.exports = baseVw.extend({
 
   mouseleaveServerSubmenuTrigger: function(e) {
     clearTimeout(this.ServerSubmenuTimeout);
+
+    setTimeout(() => {
+      if (!this.overServerSubmenu) {
+        this.serverSubmenu.removeClass('server-submenu-opened');
+      }
+    }, 100);
+  },
+
+  mouseenterServerSubmenu: function(e) {
+    this.overServerSubmenu = true;
+  },
+
+  mouseleaveServerSubmenu: function(e) {
+    this.overServerSubmenu = false;
+    clearTimeout(this.ServerSubmenuTimeout);
     this.serverSubmenu.removeClass('server-submenu-opened');
   },  
 

js/views/serverConfigFormVw.js

@@ -1,7 +1,6 @@
 'use strict';
 
 var loadTemplate = require('../utils/loadTemplate'),
-    // app = require('../App.js').getApp(),        
     BaseVw = require('./baseVw');
 
 module.exports = BaseVw.extend({
@@ -56,10 +55,6 @@ module.exports = BaseVw.extend({
     this.model.set('SSL', true);
   },  
 
-  remove: function() {
-    BaseVw.prototype.remove.apply(this, arguments);
-  },  
-
   render: function() {
     loadTemplate('./js/templates/serverConfigForm.html', (t) => {
       this.$el.html(

js/views/serverConfigRowVw.js

@@ -2,7 +2,6 @@
 
 var __ = require('underscore'),
     loadTemplate = require('../utils/loadTemplate'),
-    // app = require('../App.js').getApp(),        
     BaseVw = require('./baseVw');
 
 module.exports = BaseVw.extend({
@@ -55,10 +54,6 @@ module.exports = BaseVw.extend({
     }
   },
 
-  remove: function() {
-    BaseVw.prototype.remove.apply(this, arguments);
-  },  
-
   render: function() {
     loadTemplate('./js/templates/serverConfigRow.html', (t) => {
       this.$el.html(t(

js/views/serverConfigsVw.js

@@ -2,7 +2,6 @@
 
 var __ = require('underscore'),
     loadTemplate = require('../utils/loadTemplate'),
-    // app = require('../App.js').getApp(),        
     BaseVw = require('./baseVw'),
     ServerConfigRowVw = require('./serverConfigRowVw');
 
@@ -58,10 +57,6 @@ module.exports = BaseVw.extend({
     }
   },
 
-  remove: function() {
-    BaseVw.prototype.remove.apply(this, arguments);
-  },  
-
   render: function() {
     var scrollTop;
 

js/views/serverConnectModal.js

@@ -41,10 +41,6 @@ module.exports = BaseModal.extend({
     this.listenTo(this.serverConfigsVw, 'cancel', this.onCancelClick);
   },
 
-  remove: function() {
-    BaseModal.prototype.remove.apply(this, arguments);
-  },
-
   hideMessageBar: function() {
     this.$jsMsgBar.addClass('slide-out');
   },