Merge pull request #1583 from OpenBazaar/pr/1555

Pr/1555

Author: jjeffryes

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;
@@ -2043,27 +2043,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;
@@ -2072,8 +2072,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

@@ -348,6 +348,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/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="<%= window.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="<%= window.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

@@ -14,9 +14,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 === 'darwin' ? 'mac' : 'win';
+    }
+
+    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() {
@@ -60,7 +83,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

@@ -58,6 +58,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'),
         ship_country_str = "",
         country_str = "",
@@ -398,13 +401,15 @@ module.exports = Backbone.View.extend({
         fancyStatus = window.localStorage.getItem('notFancy'),
         smtp_notifications = user.smtp_notifications == 1;
 
-    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;
@@ -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(){
@@ -1072,11 +1076,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");
     }
   },
@@ -1086,6 +1092,10 @@ module.exports = Backbone.View.extend({
     window.location.reload();
   },
 
+  changeAppBarStyle: function(e) {
+    app.appBar.setStyle($(e.target).val());
+  },
+
   close: function(){
     __.each(this.subModels, function(subModel) {
       subModel.off();

main.js

@@ -22,7 +22,7 @@ var fs = require('fs'),
 
 var launched_from_installer = false;
 var platform = os.platform();
-switch(platform) {
+switch (platform) {
   case "darwin":
     platform = "mac";
 }