Merge pull request #1541 from rmisio/app-bar

App bar

Author: jjeffryes

css/obBase.css

@@ -202,13 +202,45 @@ form {
   width: calc(100% - 230px);
 }
 
-#pageNav {
+#appBar {
   position: fixed;
-  top: 0;
+  width: 100%;
+  z-index: 14;
+  background-color: #327EB8;
+  padding: 7px 8px 6px;
+  box-sizing: border-box;
   -webkit-app-region: drag;
-  z-index: 13;
 }
 
+#appBar .windowControls {
+  position: absolute;
+  left: 8px;
+  top: 6px;  
+}
+
+html:not(.platform-mac) #appBar .windowControls {
+  left: auto;
+  right: 8px;
+  top: 5px;
+}
+
+#appBar .btn {
+  -webkit-app-region: no-drag;
+}
+
+#appBar .title {
+  /* since the loading spinners are centered in a manner
+     where chat is excluded from the width, we'll follow
+     suit here so our title is centered with the spinners */
+  width: calc(100% - 45px);
+}
+
+#pageNav {
+  position: fixed;
+  top: 28px;
+  -webkit-app-region: no-drag;
+  z-index: 13;
+}
 
 .pageNavContainer {
   width: 100%;
@@ -220,7 +252,7 @@ form {
 }
 
 #pageNav .navBar.bar {
-  padding: 10px 8px;
+  padding: 0 8px 10px;
 }
 
 #pageNav .modal-about .navBar.bar {
@@ -240,7 +272,7 @@ form {
 #sideBar {
   position: fixed;
   right: -183px;
-  top: 50px;
+  top: 68px;
   width:230px;
   background-color: #252525;
   border-left: 0;
@@ -1037,24 +1069,24 @@ label.fieldItem {
   display: block;
   width: 100%;
   height: 100%;
-  top: 0;
+  top: 28px;
   left: 0;
   transition: opacity .05s cubic-bezier(0, 0, 0.2, 1),
               width 0.5s ease;
   padding-top: 25px;
   z-index: 1;
 }
 
-#ov1.chatLoaded .modal:not(.modal-cover-fullscreen) {
+.modal:not(.modal-fullscreen) {
   width: calc(100% - 45px);
 }
 
-#ov1.chatOpen .modal:not(.modal-cover-fullscreen) {
+#ov1.chatOpen .modal:not(.modal-fullscreen) {
   width: calc(100% - 230px);
 }
 
 .modal.modal-navOffset {
-  top: 50px;
+  top: 68px;
 }
 
 .modalHolder {
@@ -1455,31 +1487,27 @@ h5 {
 .modal-opaque {
   background-color: rgba(6, 55, 83, 0.80);
   box-shadow: inset 0px -70px 112px -62px rgba(37,37,37,.9);
-  top: 50px;
+  top: 68px;;
 }
 
 .modal-opaqueDark {
   background-color: rgba(25,25,25,0.9);
   box-shadow: inset 0px -70px 112px -62px rgba(37,37,37,.9);
-  top: 50px;
+  top: 68px;
 }
 
 .modal-opaque.modal-navBlock {
-  background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.2) 50px, rgba(7,65,97,1) 51px);
+  background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.2) 68px, rgba(7,65,97,1) 69px);
   top: 0;
-  padding-top: 70px;
-}
-
-.modal-cover-fullscreen {
-  top: 0;
-}
-
-.modal-cover-fullscreen .modal-childMain {
-  top: 50px;
+  padding-top: 100px;
 }
 
-.modal-cover-fullscreen.modal.modal-navOffset .modal-childMain {
-  top: 0;
+/*
+  will cover entire screen aside from the #appBar,
+  which should never be covered.
+*/
+.modal-fullscreen {
+  top: 28px;
 }
 
 .modal-childMain {
@@ -2008,7 +2036,40 @@ margin: auto;
 .btn.btn-win.btn-winMax {
   background-color: #B8E986;
   position: relative;
+}
+
+html:not(.platform-mac) .btn.btn-win {
+  background-color: transparent;
+  border-radius: 0;
+  width: 19px;
+  height: 19px;
+  box-shadow: none;
+}
 
+html:not(.platform-mac) .btn.btn-winClose {
+  float: right;
+  margin-left: 6px;
+}
+
+html:not(.platform-mac) .btn.btn-win .btn-win-icon {
+  display: block;
+  top: -3px;
+  font-size: 21px;
+  color: #fff;  
+}
+
+html:not(.platform-mac) .btn.btn-winMax {
+  float: right;
+  margin-left: 6px;
+  border: 1px solid #fff;
+  width: 13px;
+  height: 13px;
+  top: 3px;  
+}
+
+html:not(.platform-mac) .btn.btn-winMax .btn-win-icon,
+html:not(.platform-mac) .btn.btn-win.btn-winMax:hover .btn-win-icon {
+  display: none;
 }
 
 .btn.btn-bar {
@@ -4299,8 +4360,27 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   z-index: 9;
 }
 
+#loadingModal {
+  padding-top: 0;
+}
+
 #loadingModal, .page-connect-modal.server-connect {
-  z-index: 14;
+  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;
 }
 
 #ov1 #loadingModal.hide {
@@ -4315,7 +4395,8 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   right: 0;
   left: 0;
   top: 50%;
-  margin-top: 120px;
+  margin-top: 117px;
+  margin-left: -40px;
   opacity: 1;
   transition: opacity 1s 5s ease;
   box-sizing: border-box;
@@ -4346,7 +4427,7 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
 }
 
 #ov1 .server-connect-modal .message-bar {
-  top: 50px;
+  top: 59px;
   left: 25px;
   right: 25px;
   z-index: 1;
@@ -4563,7 +4644,7 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   padding-top: 20px;
   -webkit-app-region: no-drag;
   position: relative;
-  top: 50px;
+  top: 68px;
   box-sizing: border-box;
 }
 
@@ -4613,15 +4694,6 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   height: 100%;
 }
 
-.page-connect-modal .spinner-with-logo {
-  /*
-    so it lines up with the loading modal,
-    otherwise there's a jump when this guy loads
-    right after the loading one.
-  */
-  margin-top: -37px;
-}
-
 .page-connect-modal .spinner-with-logo .icon-no-connection {
   top: 18px;
   left: 22px;
@@ -4633,13 +4705,17 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   left: 0;
   top: 50%;
   max-width: 600px;
-  margin-top: 90px;
+  margin-top: 75px;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   transition: transform 0.5s ease;
 }
 
+.page-connect-modal.server-connect .content {
+  transform: translate(-20px, 51px);
+}
+
 .page-connect-modal .content .btn {
   float: none;
 }
@@ -6170,4 +6246,4 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
 .buyWizardMap .mapWrap {
   background-color: #eeeae1;
   height: 100%;  
-}
+}

index.html

@@ -42,7 +42,8 @@ <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="loadingModal" class="modal modal-opaque modal-cover-fullscreen js-loadingModal hide">
+  <div id="appBar" class="top0 alignCenter custCol-secondary"></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>

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,20 @@ var Polyglot = require('node-polyglot'),
     pageConnectModal,
     launchOnboarding,
     setServerUrl,
-    guidCreating;
+    guidCreating,
+    platformClass;
+
+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);
 
 //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 +104,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 +251,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
@@ -453,7 +473,7 @@ launchOnboarding = function(guidCreating) {
   var activeServer = app.serverConfigs.getActive();
 
   pageConnectModal = new PageConnectModal({
-    className: 'server-connect top0',
+    className: 'server-connect modal-fullscreen',
     initialState: {
       statusText: activeServer && activeServer.get('default') ?
         polyglot.t('serverConnectModal.connectingToDefault') :