Merge branch 'EnricoMonese-ui' into develop

app/scripts/locales/base.json

@@ -332,6 +332,10 @@
   "setGenFontSizeNormal": "Normal",
   "setGenFontSizeLarge": "Large",
   "setGenFontSizeLargest": "Largest",
+  "setGenTitlebarStyle": "Window style (requires restart)",
+  "setGenTitlebarStyleDefault": "Default",
+  "setGenTitlebarStyleHidden": "Custom title",
+  "setGenTitlebarStyleHiddenInset": "Custom title, draggable window",
   "setGenShowSubgroups": "Show entries from all subgroups",
   "setGenTableView": "Entries list table view",
   "setGenColorfulIcons": "Colorful custom icons in list",

app/scripts/models/app-settings-model.js

@@ -19,6 +19,7 @@ const AppSettingsModel = Backbone.Model.extend({
         minimizeOnClose: false,
         tableView: false,
         colorfulIcons: false,
+        titlebarStyle: 'default',
         lockOnMinimize: true,
         lockOnCopy: false,
         helpTipCopyShown: false,

app/scripts/util/feature-detector.js

@@ -35,6 +35,9 @@ const FeatureDetector = {
     },
     canCopyReadonlyInput: function() {
         return !(/CriOS/i.test(navigator.userAgent));
+    },
+    supportsTitleBarStyles: function () {
+        return this.isMac;
     }
 };
 

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);
@@ -102,7 +109,8 @@ const AppView = Backbone.View.extend({
 
     render: function () {
         this.$el.html(this.template({
-            beta: this.model.isBeta
+            beta: this.model.isBeta,
+            titlebarStyle: this.titlebarStyle
         }));
         this.panelEl = this.$el.find('.app__panel:first');
         this.views.listWrap.setElement(this.$el.find('.app__list-wrap')).render();
@@ -356,6 +364,14 @@ const AppView = Backbone.View.extend({
         }
     },
 
+    enterFullScreen: function () {
+        this.$el.addClass('fullscreen');
+    },
+
+    leaveFullScreen: function () {
+        this.$el.removeClass('fullscreen');
+    },
+
     escPressed: function() {
         if (this.views.open && this.model.files.hasOpenFiles()) {
             this.showEntries();

app/scripts/views/settings/settings-general-view.js

@@ -34,6 +34,7 @@ const SettingsGeneralView = Backbone.View.extend({
         'change .settings__general-lock-on-copy': 'changeLockOnCopy',
         'change .settings__general-table-view': 'changeTableView',
         'change .settings__general-colorful-icons': 'changeColorfulIcons',
+        'change .settings__general-titlebar-style': 'changeTitlebarStyle',
         'click .settings__general-update-btn': 'checkUpdate',
         'click .settings__general-restart-btn': 'restartApp',
         'click .settings__general-download-update-btn': 'downloadUpdate',
@@ -58,6 +59,7 @@ const SettingsGeneralView = Backbone.View.extend({
         const updateFound = UpdateModel.instance.get('updateStatus') === 'found';
         const updateManual = UpdateModel.instance.get('updateManual');
         const storageProviders = this.getStorageProviders();
+
         this.renderTemplate({
             themes: _.mapObject(SettingsManager.allThemes, theme => Locale[theme]),
             activeTheme: AppSettingsModel.instance.get('theme'),
@@ -90,6 +92,8 @@ const SettingsGeneralView = Backbone.View.extend({
             updateManual: updateManual,
             releaseNotesLink: Links.ReleaseNotes,
             colorfulIcons: AppSettingsModel.instance.get('colorfulIcons'),
+            supportsTitleBarStyles: FeatureDetector.supportsTitleBarStyles(),
+            titlebarStyle: AppSettingsModel.instance.get('titlebarStyle'),
             storageProviders: storageProviders
         });
         this.renderProviderViews(storageProviders);
@@ -186,6 +190,11 @@ const SettingsGeneralView = Backbone.View.extend({
         AppSettingsModel.instance.set('fontSize', fontSize);
     },
 
+    changeTitlebarStyle: function(e) {
+        const titlebarStyle = e.target.value;
+        AppSettingsModel.instance.set('titlebarStyle', titlebarStyle);
+    },
+
     changeClipboard: function(e) {
         const clipboardSeconds = +e.target.value;
         AppSettingsModel.instance.set('clipboardSeconds', clipboardSeconds);

app/styles/areas/_app.scss

@@ -5,6 +5,10 @@
   @include flex-direction(column);
   @include justify-content(flex-start);
 
+  &--titlebar-style-hidden-inset {
+    -webkit-app-region: drag;
+  }
+
   &__body {
     @include flex(1);
     @include display(flex);
@@ -14,6 +18,15 @@
     overflow: hidden;
   }
 
+  &__titlebar-drag {
+    position: absolute;
+    width: 100%;
+    height: 30px;
+    top: 0;
+    right: 0;
+    -webkit-app-region: drag;
+  }
+
   &__menu {
     @include flex(0 0 auto);
     @include display(flex);
@@ -23,6 +36,16 @@
         display: none;
       }
     }
+    transition: padding-top 150ms;
+    .app--titlebar-style-hidden & {
+      padding-top: 24px;
+    }
+    .app--titlebar-style-hidden-inset & {
+      padding-top: 40px;
+    }
+    .fullscreen .app & {
+      padding-top: 0;
+    }
   }
 
   &__list-wrap {

app/styles/base/_forms.scss

@@ -17,6 +17,7 @@ select {
   display: block;
   font-family: $base-font-family;
   font-size: 1rem;
+  -webkit-app-region: no-drag;
 }
 
 label {

app/styles/common/_scroll.scss

@@ -21,6 +21,7 @@
     width: 8px;
     border-radius: 3px;
     pointer-events: auto;
+    -webkit-app-region: no-drag;
   }
 }
 

app/styles/utils/_drag.scss

@@ -1,10 +1,12 @@
 .drag-mask {
   @include size(100%);
   @include position(absolute, 0 null null 0);
+  -webkit-app-region: no-drag;
 }
 
 @mixin drag-handle {
   position: relative;
+  -webkit-app-region: no-drag;
   transition: background-color $slow-transition-out;
   @include th { background: light-border-color(); }
   &:hover, &.dragging {

app/styles/utils/_selection.scss

@@ -1,6 +1,7 @@
 @mixin area-selectable($border: false) {
   cursor: pointer;
   border-radius: 0;
+  -webkit-app-region: no-drag;
   @include th {
     @if ($border) {
       border-#{$border}: selected-transparent-border();
@@ -20,6 +21,7 @@
 
 @mixin area-selected($border) {
   cursor: default;
+  -webkit-app-region: no-drag;
   @include th {
     border-#{$border}: selected-border();
     background-color: secondary-background-color();

app/templates/app.hbs

@@ -1,5 +1,6 @@
-<div class="app">
+<div class="app {{#ifneq titlebarStyle 'default'}}app--titlebar-style-{{titlebarStyle}}{{/ifneq}}">
     {{#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">
         <div class="app__menu"></div>
         <div class="app__menu-drag"></div>

app/templates/settings/settings-general.hbs

@@ -64,6 +64,16 @@
             <option value="2" {{#ifeq fontSize 2}}selected{{/ifeq}}>{{res 'setGenFontSizeLargest'}}</option>
         </select>
     </div>
+    {{#if supportsTitleBarStyles}}
+    <div>
+      <label for="settings__general-titlebar-style">{{res 'setGenTitlebarStyle'}}:</label>
+      <select class="settings__general-titlebar-style settings__select input-base" id="settings__general-titlebar-style">
+        <option value="default" {{#ifeq titlebarStyle 'default'}}selected{{/ifeq}}>{{res 'setGenTitlebarStyleDefault'}}</option>
+        <option value="hidden" {{#ifeq titlebarStyle 'hidden'}}selected{{/ifeq}}>{{res 'setGenTitlebarStyleHidden'}}</option>
+        <option value="hidden-inset" {{#ifeq titlebarStyle 'hidden-inset'}}selected{{/ifeq}}>{{res 'setGenTitlebarStyleHiddenInset'}}</option>
+      </select>
+    </div>
+    {{/if}}
     <div>
         <input type="checkbox" class="settings__input input-base settings__general-expand" id="settings__general-expand" {{#if expandGroups}}checked{{/if}} />
         <label for="settings__general-expand">{{res 'setGenShowSubgroups'}}</label>

desktop/app.js

@@ -14,6 +14,7 @@ let restartPending = false;
 let mainWindowPosition = {};
 let updateMainWindowPositionTimeout = null;
 const windowPositionFileName = path.join(app.getPath('userData'), 'window-position.json');
+const appSettingsFileName = path.join(app.getPath('userData'), 'app-settings.json');
 
 let htmlPath = process.argv.filter(arg => arg.startsWith('--htmlpath=')).map(arg => arg.replace('--htmlpath=', ''))[0];
 if (!htmlPath) {
@@ -108,11 +109,21 @@ function setAppOptions() {
     app.commandLine.appendSwitch('disable-background-timer-throttling');
 }
 
+function readAppSettings() {
+    try {
+        return JSON.parse(fs.readFileSync(appSettingsFileName, 'utf8'));
+    } catch (e) {
+        return null;
+    }
+}
+
 function createMainWindow() {
+    const appSettings = readAppSettings();
     mainWindow = new electron.BrowserWindow({
         show: false,
         width: 1000, height: 700, minWidth: 700, minHeight: 400,
         icon: path.join(__dirname, 'icon.png'),
+        titleBarStyle: appSettings ? appSettings.titlebarStyle : undefined,
         webPreferences: {
             backgroundThrottling: false
         }
@@ -138,6 +149,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();
 }