allowing app bar style to be configured via an option in settings

Author: rmisio

css/obBase.css

@@ -218,7 +218,7 @@ form {
   top: 6px;  
 }
 
-html:not(.platform-mac) #appBar .windowControls {
+#appBar.style-win .windowControls {
   left: auto;
   right: 8px;
   top: 5px;
@@ -2038,27 +2038,27 @@ margin: auto;
   position: relative;
 }
 
-html:not(.platform-mac) .btn.btn-win {
+#appBar.style-win .btn.btn-win {
   background-color: transparent;
   border-radius: 0;
   width: 19px;
   height: 19px;
   box-shadow: none;
 }
 
-html:not(.platform-mac) .btn.btn-winClose {
+#appBar.style-win .btn.btn-winClose {
   float: right;
   margin-left: 6px;
 }
 
-html:not(.platform-mac) .btn.btn-win .btn-win-icon {
+#appBar.style-win .btn.btn-win .btn-win-icon {
   display: block;
   top: -3px;
   font-size: 21px;
   color: #fff;  
 }
 
-html:not(.platform-mac) .btn.btn-winMax {
+#appBar.style-win .btn.btn-winMax {
   float: right;
   margin-left: 6px;
   border: 1px solid #fff;
@@ -2067,8 +2067,8 @@ html:not(.platform-mac) .btn.btn-winMax {
   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 {
+#appBar.style-win .btn.btn-winMax .btn-win-icon,
+#appBar.style-win .btn.btn-win.btn-winMax:hover .btn-win-icon {
   display: none;
 }
 

js/languages/en-US.json

@@ -346,6 +346,10 @@
   "Avatar": "Avatar",
   "AdditionalPaymentData": "Additional payment data",
   "AdditionalPaymentDataInfo": "Include name of purchase and order number in payment QR code?",
+  "AppBarStyle": "Application Top Bar Style",
+  "AppBarStyleInfo": "How should the top bar of the application be styled?",
+  "OSWindows": "Windows",
+  "OSMac": "Mac",
   "ShippableHelp": "This product can be shipped to one of your currently saved addresses. Add more addresses in the Settings/Addresses section to be able to purchase more listings.",
   "firewall": {
     "Open": "Open",

js/start.js

@@ -43,7 +43,6 @@ var Polyglot = require('node-polyglot'),
     languages = new languagesModel(),
     socketView = require('./views/socketVw'),
     cCode = "",
-    $html = $('html'),
     $loadingModal = $('.js-loadingModal'),
     ServerConfigsCl = require('./collections/serverConfigsCl'),
     ServerConnectModal = require('./views/serverConnectModal'),
@@ -65,20 +64,7 @@ var Polyglot = require('node-polyglot'),
     pageConnectModal,
     launchOnboarding,
     setServerUrl,
-    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);
+    guidCreating;
 
 //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
@@ -251,7 +237,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

@@ -1,11 +1,11 @@
 <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')) %>">
+  <a class="btn btn-win btn-winClose js-navClose tooltip <% ob.style !== 'mac' && 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') %>">
+  <a class="btn btn-win btn-winMin js-navMin tooltip <% ob.style !== 'mac' && 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') %>">
+  <a class="btn btn-win btn-winMax js-navMax tooltip <% ob.style !== 'mac' && print('tooltip-left') %>" data-tooltip="<%= polyglot.t('Maximize') %>">
     <div class="btn-win-icon ion-ios-plus-empty"></div>
   </a>      
 </div>

js/templates/settings.html

@@ -1239,6 +1239,26 @@ <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('Advanced') %></h3>
               </div>
             </div>
 
+            <div class="flexRow">
+              <div class="flexCol-3  borderRight custCol-border">
+                <div class="fieldItem">
+                  <label>
+                    <%= polyglot.t('AppBarStyle') %>
+                  </label>
+                  <i class="ion-help-circled tooltip tooltip-box" data-tooltip="<%= polyglot.t('AppBarStyleInfo') %>"></i>
+                </div>
+              </div>              
+
+              <div class="flexCol-9 borderRight0 custCol-border">
+                <div class="fieldItem">
+                  <input type="radio" class="fieldItem" id="app_bar_style_windows" name="appBarStyle" value="win" checked />
+                  <label for="app_bar_style_windows" class="radioLabel"><%= polyglot.t('OSWindows') %></label>
+                  <input type="radio" class="fieldItem" id="app_bar_style_mac" name="appBarStyle" value="mac" />
+                  <label for="app_bar_style_mac" class="radioLabel"><%= polyglot.t('OSMac') %></label>
+                </div>
+              </div>
+            </div>            
+
             <div class="flexRow">
 
               <div class="flexCol-3  borderRight custCol-border">

js/views/appBarVw.js

@@ -16,9 +16,32 @@ module.exports = BaseVw.extend({
   },
 
   initialize: function(options) {
+    var style = localStorage.appBarStyle;
+
     this.options = options || {};
     this.currentWindow = remote.getCurrentWindow();
     this.title = this.titlePrefix;
+    
+    if (!style || ['mac', 'win'].indexOf(style) === -1) {
+      style = remote.process.platform === 'win32' ? 'win' : 'mac';
+    }
+
+    this.setStyle(style);    
+  },
+
+  setStyle: function(style) {
+    if (!style || ['mac', 'win'].indexOf(style) === -1) {
+      throw new Error(`Please provide a style ('mac' or 'win')`);      
+    }
+
+    this.$el.removeClass('style-mac style-win');
+    this.$el.addClass(`style-${style}`);
+    localStorage.appBarStyle = style;
+    this.render();
+  },
+
+  getStyle: function() {
+    return localStorage.appBarStyle;
   },
 
   navCloseClick: function() {
@@ -62,7 +85,7 @@ module.exports = BaseVw.extend({
   render: function() {
     loadTemplate('./js/templates/appBar.html', (t) => {
       this.$el.html(t({
-        platform: remote.process.platform,
+        style: this.getStyle(),
         title: this.title
       }));
     });

js/views/settingsVw.js

@@ -56,6 +56,7 @@ module.exports = Backbone.View.extend({
     'keyup #moderatorFeeInput': 'keypressFeeInput',
     'click #advancedForm input[name="notFancy"]': 'toggleFancyStyles',
     'click #advancedForm input[name="useTestnet"]': 'toggleTestnet',
+    'change #advancedForm input[name="appBarStyle"]': 'changeAppBarStyle',
     'blur input': 'validateInput',
     'blur textarea': 'validateInput',
     'change #handle': 'handleChange',
@@ -385,6 +386,8 @@ module.exports = Backbone.View.extend({
         currency = this.$('#currency_code'),
         timezone = this.$('#time_zone'),
         language = this.$('#language'),
+        generalForm = this.$('#generalForm'),
+        advancedForm = this.$('#advancedForm'),
         user = this.model.get('user'),
         avatar = user.avatar_hash,
         ship_country_str = "",
@@ -400,13 +403,15 @@ module.exports = Backbone.View.extend({
 
     smtp_notifications = (user.smtp_notifications == 1) ? true : false;
 
-    this.$('#pageForm input[name=nsfw]').val([String(pageNSFW)]);
-    this.$("#generalForm input[name=nsfw][value=" + localStorage.getItem('NSFWFilter') + "]").prop('checked', true);
-    this.$("#generalForm input[name=notifications][value=" + notifications + "]").prop('checked', true);
-    this.$("#storeForm input[name=vendor][value=" + vendorStatus + "]").prop('checked', true);
-    this.$("#advancedForm input[name=notFancy][value=" + fancyStatus + "]").prop('checked', true);
-    this.$("#advancedForm input[name=additionalPaymentData][value=" + localStorage.getItem('AdditionalPaymentData') + "]").prop('checked', true);
-    this.$("#advancedForm input[name=smtp_notifications][value=" + smtp_notifications + "]").prop('checked', true);
+    this.$("#pageForm").find("input[name=nsfw]").val([String(pageNSFW)]);
+    generalForm.find("input[name=nsfw][value=" + localStorage.getItem('NSFWFilter') + "]").prop('checked', true);
+    generalForm.find("input[name=notifications][value=" + notifications + "]").prop('checked', true);
+    this.$("#storeForm").find("input[name=vendor][value=" + vendorStatus + "]").prop('checked', true);
+    advancedForm.find("input[name=notFancy][value=" + fancyStatus + "]").prop('checked', true);
+    advancedForm.find("input[name=additionalPaymentData][value=" + localStorage.getItem('AdditionalPaymentData') + "]").prop('checked', true);
+    advancedForm.find("input[name=smtp_notifications][value=" + smtp_notifications + "]").prop('checked', true);
+    advancedForm.find("input[name=smtp_notifications][value=" + smtp_notifications + "]").prop('checked', true);
+    advancedForm.find("input[name=appBarStyle][value=" + app.appBar.getStyle() + "]").prop('checked', true);
 
     currencyList = __.uniq(currencyList, function(item){return item.code;});
     currencyList = currencyList.sort(function(a,b){
@@ -462,8 +467,7 @@ module.exports = Backbone.View.extend({
 
     //set moderator status
     this.$('#moderatorForm').find('input[name=moderator]').val([String(moderatorStatus)]);
-
-    this.$('#advancedForm').find('input[name=smtp_mo]').val([String(moderatorStatus)]);
+    advancedForm.find('input[name=smtp_mo]').val([String(moderatorStatus)]);
   },
 
   showModeratorFeeHolder: function(){
@@ -1089,11 +1093,13 @@ module.exports = Backbone.View.extend({
   },
 
   toggleFancyStyles: function(){
+    var $html = $('html');
+    
     if($('#advancedForm').find('input[name="notFancy"]').prop('checked')){
-      $('html').addClass('notFancy');
+      $html.addClass('notFancy');
       localStorage.setItem('notFancy', "true");
     } else {
-      $('html').removeClass('notFancy');
+      $html.removeClass('notFancy');
       localStorage.setItem('notFancy', "false");
     }
   },
@@ -1103,6 +1109,10 @@ module.exports = Backbone.View.extend({
     window.location.reload();
   },
 
+  changeAppBarStyle: function(e) {
+    app.appBar.setStyle($(e.target).val());
+  },
+
   close: function(){
     "use strict";
     __.each(this.subModels, function(subModel) {