From 5b790e711aaf2accaa07a843843cbcf2b41627fc Mon Sep 17 00:00:00 2001 From: antelle 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 @@ -
- - {{#if maximized}} - - {{else}} - - {{/if}} - -
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 @@ +
+
+ +
+ +
+ + + {{#if maximized}} + + {{else}} + + {{/if}} + +
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: {