initial implementation of the app bar

Author: rmisio

css/obBase.css

@@ -202,13 +202,32 @@ form {
   width: calc(100% - 230px);
 }
 
-#pageNav {
+#appBar {
   position: fixed;
-  top: 0;
-  -webkit-app-region: drag;
+  width: 100%;
   z-index: 13;
+  background-color: #327EB8;
+  padding: 10px 8px;
+  box-sizing: border-box;
+  -webkit-app-region: drag;
+}
+
+#appBar .windowControls {
+  float: left;
 }
 
+.platform-win #appBar .windowControls {
+  position: absolute;
+  right: 8px;
+  top: 8px;
+}
+
+#pageNav {
+  position: fixed;
+  top: 25px;
+  -webkit-app-region: no-drag;
+  z-index: 13;
+}
 
 .pageNavContainer {
   width: 100%;
@@ -240,7 +259,7 @@ form {
 #sideBar {
   position: fixed;
   right: -183px;
-  top: 50px;
+  top: 75px;
   width:230px;
   background-color: #252525;
   border-left: 0;
@@ -2002,7 +2021,39 @@ margin: auto;
 .btn.btn-win.btn-winMax {
   background-color: #B8E986;
   position: relative;
+}
 
+.platform-win .btn.btn-win {
+  background-color: transparent;
+  border-radius: 0;
+  width: 19px;
+  height: 19px;
+  box-shadow: none;
+}
+
+.platform-win .btn.btn-winClose {
+  float: right;
+  margin-left: 6px;
+}
+
+.platform-win .btn.btn-win .btn-win-icon {
+  display: block;
+  top: -3px;
+  font-size: 21px;
+  color: #fff;  
+}
+
+.platform-win .btn.btn-winMax {
+  float: right;
+  margin-left: 6px;
+  border: 1px solid #fff;
+  width: 13px;
+  height: 13px;
+  top: 3px;  
+}
+
+.platform-win .btn.btn-winMax .btn-win-icon {
+  display: none;
 }
 
 .btn.btn-bar {
@@ -4561,7 +4612,7 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   padding-top: 20px;
   -webkit-app-region: no-drag;
   position: relative;
-  top: 50px;
+  top: 85px;
   box-sizing: border-box;
 }
 

index.html

@@ -42,6 +42,7 @@ <h2 class="ion-android-close custCol-text clickable"></h2>
   </div>
   <div id="statusBar"></div>
   <div id="pageNav" class="bar navBar navBar-main custCol-secondary padding0"></div>
+  <div id="appBar" class="top0 alignCenter custCol-secondary"></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 hide">
     <div class="spinner-with-logo fullCentered">

js/languages/en-US.json

@@ -15,6 +15,7 @@
   "Cancel": "Cancel",
   "TryAgain": "Try Again",
   "ClosingOpenBazaar": "Close (Your page will go offline)",
+  "ClosingOpenBazaarNonInstaller": "Close",
   "Minimize": "Minimize",
   "Maximize": "Maximize",
   "Restore": "Restore",

js/router.js

@@ -267,6 +267,7 @@ module.exports = Backbone.Router.extend({
 
     // hide the discover onboarding callout
     $('.js-OnboardingIntroDiscoverHolder').addClass('hide');
+    app.appBar.setTitle(polyglot.t('Discover'));
   },
 
   userPage: function(userID, state, itemHash, skipNSFWmodal, handle){
@@ -283,6 +284,7 @@ module.exports = Backbone.Router.extend({
     if (handle) options.handle = handle;
 
     this.newView(new userPageView(options),"userPage",'','onPage');
+    app.appBar.setTitle(handle ? handle : options.userId || this.userModel.get('guid'));
   },
 
   userPageViaHandle: function(handle, subPath) {
@@ -324,6 +326,7 @@ module.exports = Backbone.Router.extend({
       state: state,
       orderID: orderID
     }),"userPage");
+    app.appBar.setTitle(polyglot.t('Transactions'));
   },
 
   settings: function(state){
@@ -335,5 +338,6 @@ module.exports = Backbone.Router.extend({
       state: state,
       socketView: this.socketView
     }), "userPage");
+    app.appBar.setTitle(polyglot.t('Settings'));
   }
 });

js/start.js

@@ -37,11 +37,13 @@ var Polyglot = require('node-polyglot'),
     pageNavView = require('./views/pageNavVw'),
     ChatVw = require('./views/chatVw'),
     StatusBarView = require('./views/statusBarVw'),
+    AppBarVw = require('./views/appBarVw'),
     user = new userModel(),
     userProfile = new userProfileModel(),
     languages = new languagesModel(),
     socketView = require('./views/socketVw'),
     cCode = "",
+    $html = $('html'),
     $loadingModal = $('.js-loadingModal'),
     ServerConfigsCl = require('./collections/serverConfigsCl'),
     ServerConnectModal = require('./views/serverConnectModal'),
@@ -63,7 +65,22 @@ var Polyglot = require('node-polyglot'),
     pageConnectModal,
     launchOnboarding,
     setServerUrl,
-    guidCreating;
+    guidCreating,
+    platformClass;
+    // appBar;
+
+if (process.platform === 'darwin') {
+  platformClass = 'platform-mac';
+} else if (process.platform === 'win32') {
+  platformClass = 'platform-win';
+} else {
+  // http://stackoverflow.com/a/8684009
+  // could be linux, sunos or freebsd
+  platformClass = `platform-${process.platform}`
+}
+
+// $html.addClass(platformClass);
+$html.addClass('platform-win');
 
 //put language in the window so all templates and models can reach it. It's especially important in formatting currency.
 //retrieve the stored value, since user is a blank model at this point
@@ -89,6 +106,11 @@ user.on('change:language', function(md, lang) {
   window.translateIndex();
 });
 
+// add in our app bar
+app.appBar = new AppBarVw({
+  el: '#appBar'
+}).render();
+
 window.addEventListener('contextmenu', (e) => {
   e.preventDefault();
   ipcRenderer.send('contextmenu-click', e);
@@ -231,7 +253,7 @@ $(window).bind('hashchange', function(){
 
 //set fancy styles class
 if(localStorage.getItem('notFancy') == "true"){
-  $('html').addClass('notFancy')
+  $html.addClass('notFancy')
 }
 
 //prevent dragging a file to the window from loading that file

js/templates/appBar.html

@@ -0,0 +1,12 @@
+<div class="windowControls ctrlGroup">
+  <a class="btn btn-win btn-winClose js-navClose tooltip <% ob.platform === 'darwin' && print('tooltip-left') %>" data-tooltip="<% print(polyglot.t(ob.launchedFromInstaller ? 'ClosingOpenBazaar' : 'ClosingOpenBazaarNonInstaller')) %>">
+    <div class="btn-win-icon ion-ios-close-empty"></div>
+  </a>
+  <a class="btn btn-win btn-winMin js-navMin tooltip <% ob.platform === 'darwin' && print('tooltip-left') %>" data-tooltip="<%= polyglot.t('Minimize') %>">
+    <div class="btn-win-icon ion-ios-minus-empty"></div>
+  </a>
+  <a class="btn btn-win btn-winMax js-navMax tooltip <% ob.platform === 'darwin' && print('tooltip-left') %>" data-tooltip="<%= polyglot.t('Maximize') %>">
+    <div class="btn-win-icon ion-ios-plus-empty"></div>
+  </a>      
+</div>
+<div class="title"><%= ob.title %></div>

js/templates/pageNav.html

@@ -148,17 +148,6 @@ <h3 class="margin0 marginTop25"><%= polyglot.t('Discover') %></h3>
 </div>
 
 <div class="bar navBar pageNavContainer custCol-secondary">
-  <div class="ctrlGroup">
-    <a class="btn btn-win btn-winClose js-navClose tooltip" data-tooltip="<%= polyglot.t('ClosingOpenBazaar') %>">
-      <div class="btn-win-icon ion-ios-close-empty"></div>
-    </a>
-    <a class="btn btn-win btn-winMin js-navMin tooltip" data-tooltip="<%= polyglot.t('Minimize') %>">
-      <div class="btn-win-icon ion-ios-minus-empty"></div>
-    </a>
-    <a class="btn btn-win btn-winMax js-navMax tooltip" data-tooltip="<%= polyglot.t('Maximize') %>">
-      <div class="btn-win-icon ion-ios-plus-empty"></div>
-    </a>
-  </div>
   <div class="ctrlGroup">
     <a class="btn btn-togLeft btn-back ion-chevron-left js-navBack custCol-primary custCol-text fontSize13 tooltip" data-tooltip="<%= polyglot.t('nav.Back') %>"></a>
     <a class="btn btn-togRight btn-fwd ion-chevron-right js-navFwd custCol-primary custCol-text fontSize13 tooltip" data-tooltip="<%= polyglot.t('nav.Forward') %>"></a>

js/utils/templateHelpers.js

@@ -1,5 +1,6 @@
 var app = require('../App').getApp(),
-    moment = require('moment');
+    moment = require('moment'),
+    remote = require('electron').remote;
 
 function cssImageUrl(hash, guid, fallback) {
   var base = app.serverConfigs.getActive().getServerBaseUrl() + '/',
@@ -24,12 +25,9 @@ function cssImageUrl(hash, guid, fallback) {
   return url;
 }
 
-function intlNumFormat(numberToFormat, maxDigits){
-  return app.intlNumFormat(numberToFormat, maxDigits);
-}
-
 module.exports = {
   cssImageUrl: cssImageUrl,
-  intlNumFormat: intlNumFormat,
-  moment: moment
+  intlNumFormat: app.intlNumFormat,
+  moment: moment,
+  launchedFromInstaller: remote.getGlobal('launched_from_installer')
 };

js/views/appBarVw.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var __ = require('underscore'),
+    Backbone = require('backbone'),
+    loadTemplate = require('../utils/loadTemplate'),
+    remote = require('electron').remote,        
+    BaseVw = require('./baseVw');
+
+module.exports = BaseVw.extend({
+  titlePrefix: 'OpenBazaar',
+
+  events: {
+    'click .js-navClose': 'navCloseClick',
+    'click .js-navMin': 'navMinClick',
+    'click .js-navMax': 'navMaxClick'    
+  },
+
+  initialize: function(options) {
+    this.options = options || {};
+    this.currentWindow = remote.getCurrentWindow();
+    this.title = this.titlePrefix;
+  },
+
+  navCloseClick: function() {
+    if (remote.process.platform !== 'darwin') {
+      this.currentWindow.close();
+    } else {
+      this.currentWindow.hide();
+    }
+  },
+
+  navMinClick: function() {
+    this.currentWindow.minimize();
+  },
+
+  navMaxClick: function() {
+    if(this.currentWindow.isMaximized()) {
+      this.currentWindow.unmaximize();
+      this.$('.js-navMax').attr('data-tooltip', window.polyglot.t('Maximize'));
+    } else {
+      this.currentWindow.maximize();
+      this.$('.js-navMax').attr('data-tooltip', window.polyglot.t('Restore'));
+    }
+  },
+
+  setTitle: function(text) {
+    var curTitle = this.title;
+
+    if (!text) {
+      this.title = this.titlePrefix;
+    } else {}
+
+    this.title = text ?
+      `${this.titlePrefix} — ${text}` :
+      this.titlePrefix;
+
+    if (curTitle !== this.title) {
+      this.render();
+    }
+  },
+
+  render: function() {
+    loadTemplate('./js/templates/appBar.html', (t) => {
+      this.$el.html(t({
+        platform: remote.process.platform,
+        title: this.title
+      }));
+    });
+
+    return this;
+  }
+});

js/views/pageNavVw.js

@@ -12,7 +12,6 @@ var __ = require('underscore'),
     //adminPanelView = require('../views/adminPanelVw'),
     NotificationsVw = require('../views/notificationsVw'),
     PageNavServersVw = require('../views/pageNavServersVw'),
-    remote = require('remote'),
     pjson = require('../../package.json');
 
 var ipcRenderer = require('ipc-renderer');  // Allows to talk Electon main process
@@ -22,9 +21,6 @@ module.exports = baseVw.extend({
   el: '#pageNav',
 
   events: {
-    'click .js-navClose': 'navCloseClick',
-    'click .js-navMin': 'navMinClick',
-    'click .js-navMax': 'navMaxClick',
     'click .js-navBack': 'navBackClick',
     'click .js-navFwd': 'navFwdClick',
     'click .js-showAboutModal': 'showAboutModal',
@@ -64,8 +60,6 @@ module.exports = baseVw.extend({
     this.showDiscIntro = options.showDiscIntro;
     this.notificationsRecord = {}; //store notification timestamps to prevent too many from the same user
 
-    this.currentWindow = remote.getCurrentWindow();
-
     this.listenTo(window.obEventBus, "updateProfile", function(response){
       this.refreshProfile();
     });
@@ -511,29 +505,6 @@ module.exports = baseVw.extend({
     this.serverSubmenu.removeClass('server-submenu-opened');    
   },
 
-  navCloseClick: function(){
-    var process = remote.process;
-    if (process.platform != 'darwin') {
-      this.currentWindow.close();
-    } else {
-      this.currentWindow.hide();
-    }
-  },
-
-  navMinClick: function(){
-    this.currentWindow.minimize();
-  },
-
-  navMaxClick: function(){
-    if(this.currentWindow.isMaximized()){
-      this.currentWindow.unmaximize();
-      $('.js-navMax').attr('data-tooltip', window.polyglot.t('Maximize'));
-    } else {
-      this.currentWindow.maximize();
-      $('.js-navMax').attr('data-tooltip', window.polyglot.t('Restore'));
-    }
-  },
-
   navBackClick: function(){
     history.back();
   },