fix #641: fixed mac app layout issues with custom titlebar styles

app/scripts/views/app-view.js

@@ -105,6 +105,9 @@ const AppView = Backbone.View.extend({
         if (getBrowserCssClass) {
             this.$el.addClass(getBrowserCssClass);
         }
+        if (this.titlebarStyle !== 'default') {
+            this.$el.addClass('titlebar-' + this.titlebarStyle);
+        }
     },
 
     render: function () {

app/styles/areas/_app.scss

@@ -5,7 +5,7 @@
   flex-direction: column;
   justify-content: flex-start;
 
-  &--titlebar-style-hidden-inset {
+  .titlebar-hidden & {
     -webkit-app-region: drag;
   }
 
@@ -37,11 +37,11 @@
       }
     }
     transition: padding-top 150ms;
-    .app--titlebar-style-hidden & {
-      padding-top: 24px;
+    .titlebar-hidden & {
+      padding-top: $titlebar-padding-small;
     }
-    .app--titlebar-style-hidden-inset & {
-      padding-top: 40px;
+    .titlebar-hidden-inset & {
+      padding-top: $titlebar-padding-large;
     }
     .fullscreen .app & {
       padding-top: 0;

app/styles/areas/_auto-type.scss

@@ -11,6 +11,13 @@
   opacity: 1;
   padding: $base-padding;
 
+  .titlebar-hidden & {
+    padding-top: $titlebar-padding-small;
+  }
+  .titlebar-hidden-inset & {
+    padding-top: $titlebar-padding-large;
+  }
+
   &__header {
     display: flex;
     &-text {

app/styles/base/_variables.scss

@@ -26,6 +26,8 @@ $medium-padding: $medium-padding-v $medium-padding-h;
 $base-padding-px: 5px 10px;
 $modal-icon-size: 6em;
 $large-padding: 2em;
+$titlebar-padding-small: 24px;
+$titlebar-padding-large: 40px;
 
 // Borders
 @function base-border() { @return 1px solid th(base-border-color); };

app/templates/app.hbs

@@ -1,4 +1,4 @@
-<div class="app {{#ifneq titlebarStyle 'default'}}app--titlebar-style-{{titlebarStyle}}{{/ifneq}}">
+<div class="app">
     {{#if beta}}<div class="app__beta"><i class="fa fa-exclamation-triangle"></i> {{res 'appBeta'}}</div>{{/if}}
     {{#ifeq titlebarStyle 'hidden'}}<div class="app__titlebar-drag"></div>{{/ifeq}}
     <div class="app__body">

release-notes.md

@@ -3,6 +3,7 @@ Release notes
 ##### v1.5.3 (TBD)
 `-` fix #638: password generator drag issues  
 `-` fix #636: broken layout in edge 15  
+`-` fix #641: fixed mac app layout issues  
 
 ##### v1.5.2 (2017-05-25)
 `-` fix #633: template ids issues