From 5b790e711aaf2accaa07a843843cbcf2b41627fc Mon Sep 17 00:00:00 2001
From: antelle <dmitryvit@gmail.com>
Date: Wed, 3 Mar 2021 23:42:41 +0100
Subject: [PATCH] added a logo on the custom titlebar for Windows

---
 app/scripts/views/app-view.js                 |  6 ++---
 ...lebar-buttons-view.js => titlebar-view.js} | 10 ++++----
 app/styles/areas/_app.scss                    | 16 ++++---------
 ...{_titlebar-buttons.scss => _titlebar.scss} | 23 +++++++++++++++++--
 app/styles/main.scss                          |  2 +-
 app/templates/titlebar-buttons.hbs            |  9 --------
 app/templates/titlebar.hbs                    | 15 ++++++++++++
 desktop/main.js                               | 13 +++++++----
 8 files changed, 59 insertions(+), 35 deletions(-)
 rename app/scripts/views/{titlebar-buttons-view.js => titlebar-view.js} (83%)
 rename app/styles/areas/{_titlebar-buttons.scss => _titlebar.scss} (52%)
 delete mode 100644 app/templates/titlebar-buttons.hbs
 create mode 100644 app/templates/titlebar.hbs

diff --git a/app/scripts/views/app-view.js b/app/scripts/views/app-view.js
index 2d862882..5aae2aee 100644
--- a/app/scripts/views/app-view.js
+++ b/app/scripts/views/app-view.js
@@ -25,7 +25,7 @@ import { OpenView } from 'views/open-view';
 import { SettingsView } from 'views/settings/settings-view';
 import { TagView } from 'views/tag-view';
 import { ImportCsvView } from 'views/import-csv-view';
-import { TitlebarButtonsView } from 'views/titlebar-buttons-view';
+import { TitlebarView } from 'views/titlebar-view';
 import template from 'templates/app.hbs';
 
 class AppView extends View {
@@ -59,7 +59,7 @@ class AppView extends View {
         this.views.details = new DetailsView(undefined, { ownParent: true });
         this.views.details.appModel = this.model;
         if (this.titlebarStyle !== 'default' && Features.renderCustomTitleBar()) {
-            this.views.titlebarButtons = new TitlebarButtonsView(this.model);
+            this.views.titlebar = new TitlebarView(this.model);
         }
 
         this.views.menu.listenDrag(this.views.menuDrag);
@@ -148,7 +148,7 @@ class AppView extends View {
         this.views.list.render();
         this.views.listDrag.render();
         this.views.details.render();
-        this.views.titlebarButtons?.render();
+        this.views.titlebar?.render();
         this.showLastOpenFile();
     }
 
diff --git a/app/scripts/views/titlebar-buttons-view.js b/app/scripts/views/titlebar-view.js
similarity index 83%
rename from app/scripts/views/titlebar-buttons-view.js
rename to app/scripts/views/titlebar-view.js
index 4b3ca6f1..5204f775 100644
--- a/app/scripts/views/titlebar-buttons-view.js
+++ b/app/scripts/views/titlebar-view.js
@@ -1,9 +1,10 @@
 import { View } from 'framework/views/view';
 import { Events } from 'framework/events';
 import { Launcher } from 'comp/launcher';
-import template from 'templates/titlebar-buttons.hbs';
+import { KeeWebLogo } from 'const/inline-images';
+import template from 'templates/titlebar.hbs';
 
-class TitlebarButtonsView extends View {
+class TitlebarView extends View {
     parent = '.app__titlebar';
 
     template = template;
@@ -26,7 +27,8 @@ class TitlebarButtonsView extends View {
 
     render() {
         super.render({
-            maximized: this.maximized
+            maximized: this.maximized,
+            iconSrc: KeeWebLogo
         });
     }
 
@@ -57,4 +59,4 @@ class TitlebarButtonsView extends View {
     }
 }
 
-export { TitlebarButtonsView };
+export { TitlebarView };
diff --git a/app/styles/areas/_app.scss b/app/styles/areas/_app.scss
index e0c2d703..d7f86cfa 100644
--- a/app/styles/areas/_app.scss
+++ b/app/styles/areas/_app.scss
@@ -28,18 +28,6 @@
         pointer-events: none;
     }
 
-    &__titlebar {
-        .titlebar-custom & {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            -webkit-app-region: drag;
-            display: flex;
-            justify-content: flex-end;
-        }
-    }
-
     &__menu {
         flex: 0 0 auto;
         display: flex;
@@ -57,6 +45,10 @@
         .titlebar-hidden-inset & {
             padding-top: $titlebar-padding-large;
         }
+        .titlebar-custom.titlebar-hidden &,
+        .titlebar-custom.titlebar-hidden-inset & {
+            padding-top: $custom-titlebar-height;
+        }
         .fullscreen .app & {
             padding-top: 0;
         }
diff --git a/app/styles/areas/_titlebar-buttons.scss b/app/styles/areas/_titlebar.scss
similarity index 52%
rename from app/styles/areas/_titlebar-buttons.scss
rename to app/styles/areas/_titlebar.scss
index 25b06d94..02cb9a51 100644
--- a/app/styles/areas/_titlebar-buttons.scss
+++ b/app/styles/areas/_titlebar.scss
@@ -1,8 +1,27 @@
-.titlebar-buttons {
+.titlebar {
     font-size: 0;
 
+    .titlebar-custom & {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        display: flex;
+        height: $custom-titlebar-height;
+    }
+
+    &__logo {
+        @include size(30px);
+        padding: 6px;
+        pointer-events: none;
+    }
+
+    &__grow {
+        flex-grow: 1;
+        -webkit-app-region: drag;
+    }
+
     > .fa {
-        -webkit-app-region: no-drag;
         font-size: 16px;
         padding: 4px 16px;
         height: $custom-titlebar-height;
diff --git a/app/styles/main.scss b/app/styles/main.scss
index 8a8a24e0..60c1f521 100644
--- a/app/styles/main.scss
+++ b/app/styles/main.scss
@@ -38,4 +38,4 @@ $fa-font-path: '~font-awesome/fonts';
 @import 'areas/open';
 @import 'areas/settings';
 @import 'areas/import-csv';
-@import 'areas/titlebar-buttons';
+@import 'areas/titlebar';
diff --git a/app/templates/titlebar-buttons.hbs b/app/templates/titlebar-buttons.hbs
deleted file mode 100644
index e21f4647..00000000
--- a/app/templates/titlebar-buttons.hbs
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="titlebar-buttons">
-    <i class="fa fa-titlebar-minimize titlebar-buttons-minimize"></i>
-    {{#if maximized}}
-        <i class="fa fa-titlebar-restore titlebar-buttons-restore"></i>
-    {{else}}
-        <i class="fa fa-titlebar-maximize titlebar-buttons-maximize"></i>
-    {{/if}}
-    <i class="fa fa-titlebar-close titlebar-buttons-close"></i>
-</div>
diff --git a/app/templates/titlebar.hbs b/app/templates/titlebar.hbs
new file mode 100644
index 00000000..ba4f3797
--- /dev/null
+++ b/app/templates/titlebar.hbs
@@ -0,0 +1,15 @@
+<div class="titlebar">
+    <div class="titlebar__icon">
+        <img src="{{iconSrc}}" alt="logo" class="titlebar__logo" />
+    </div>
+
+    <div class="titlebar__grow"></div>
+
+    <i class="fa fa-titlebar-minimize titlebar__minimize"></i>
+    {{#if maximized}}
+        <i class="fa fa-titlebar-restore titlebar__restore"></i>
+    {{else}}
+        <i class="fa fa-titlebar-maximize titlebar__maximize"></i>
+    {{/if}}
+    <i class="fa fa-titlebar-close titlebar__close"></i>
+</div>
diff --git a/desktop/main.js b/desktop/main.js
index 2ff2d4de..e565433c 100644
--- a/desktop/main.js
+++ b/desktop/main.js
@@ -263,16 +263,21 @@ function createMainWindow() {
         theme = selectDarkOrLightTheme(theme);
     }
     const bgColor = themeBgColors[theme] || defaultBgColor;
-    const frameless =
-        process.platform === 'win32' &&
-        ['hidden', 'hidden-inset'].includes(appSettings.titlebarStyle);
+
+    const isWindows = process.platform === 'win32';
+    let titlebarStyle = appSettings.titlebarStyle;
+    if (titlebarStyle === 'hidden-inset') {
+        titlebarStyle = 'hiddenInset';
+    }
+    const frameless = isWindows && ['hidden', 'hiddenInset'].includes(titlebarStyle);
+
     const windowOptions = {
         show: false,
         width: 1000,
         height: 700,
         minWidth: 700,
         minHeight: 400,
-        titleBarStyle: appSettings.titlebarStyle,
+        titleBarStyle: titlebarStyle,
         frame: !frameless,
         backgroundColor: bgColor,
         webPreferences: {