Correct layout when entering and leaving fullscreen

app/scripts/views/app-view.js

@@ -39,6 +39,8 @@ const AppView = Backbone.View.extend({
 
     views: null,
 
+    titlebarStyle: 'default',
+
     initialize: function () {
         this.views = {};
         this.views.menu = new MenuView({ model: this.model.menu });
@@ -54,6 +56,8 @@ const AppView = Backbone.View.extend({
         this.views.menu.listenDrag(this.views.menuDrag);
         this.views.list.listenDrag(this.views.listDrag);
 
+        this.titlebarStyle = this.model.settings.get('titlebarStyle');
+
         this.listenTo(this.model.settings, 'change:theme', this.setTheme);
         this.listenTo(this.model.settings, 'change:locale', this.setLocale);
         this.listenTo(this.model.settings, 'change:fontSize', this.setFontSize);
@@ -81,6 +85,9 @@ const AppView = Backbone.View.extend({
 
         this.listenTo(UpdateModel.instance, 'change:updateReady', this.updateApp);
 
+        this.listenTo(Backbone, 'enter-full-screen', this.enterFullScreen);
+        this.listenTo(Backbone, 'leave-full-screen', this.leaveFullScreen);
+
         window.onbeforeunload = this.beforeUnload.bind(this);
         window.onresize = this.windowResize.bind(this);
         window.onblur = this.windowBlur.bind(this);
@@ -95,7 +102,7 @@ const AppView = Backbone.View.extend({
     render: function () {
         this.$el.html(this.template({
             beta: this.model.isBeta,
-            titlebarStyle: this.model.settings.get('titlebarStyle')
+            titlebarStyle: this.titlebarStyle
         }));
         this.panelEl = this.$el.find('.app__panel:first');
         this.views.listWrap.setElement(this.$el.find('.app__list-wrap')).render();
@@ -349,6 +356,18 @@ const AppView = Backbone.View.extend({
         }
     },
 
+    enterFullScreen: function () {
+        _.forEach(document.getElementsByClassName("app__menu show")[0].classList, cls => {
+            if (/^titlebar-style/.test(cls)) {
+                document.getElementsByClassName("app__menu show")[0].classList.remove(cls);
+            }
+        });
+    },
+
+    leaveFullScreen: function () {
+        document.getElementsByClassName("app__menu show")[0].classList.add('titlebar-style-' + this.titlebarStyle);
+    },
+
     escPressed: function() {
         if (this.views.open && this.model.files.hasOpenFiles()) {
             this.showEntries();

desktop/app.js

@@ -141,6 +141,12 @@ function createMainWindow() {
     mainWindow.on('minimize', () => {
         emitBackboneEvent('launcher-minimize');
     });
+    mainWindow.on('leave-full-screen', () => {
+        emitBackboneEvent('leave-full-screen');
+    });
+    mainWindow.on('enter-full-screen', () => {
+        emitBackboneEvent('enter-full-screen');
+    });
     restoreMainWindowPosition();
 }