mirror of https://github.com/keeweb/keeweb.git
added a logo on the custom titlebar for Windows
This commit is contained in:
parent
1a9c54b237
commit
5b790e711a
|
@ -25,7 +25,7 @@ import { OpenView } from 'views/open-view';
|
||||||
import { SettingsView } from 'views/settings/settings-view';
|
import { SettingsView } from 'views/settings/settings-view';
|
||||||
import { TagView } from 'views/tag-view';
|
import { TagView } from 'views/tag-view';
|
||||||
import { ImportCsvView } from 'views/import-csv-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';
|
import template from 'templates/app.hbs';
|
||||||
|
|
||||||
class AppView extends View {
|
class AppView extends View {
|
||||||
|
@ -59,7 +59,7 @@ class AppView extends View {
|
||||||
this.views.details = new DetailsView(undefined, { ownParent: true });
|
this.views.details = new DetailsView(undefined, { ownParent: true });
|
||||||
this.views.details.appModel = this.model;
|
this.views.details.appModel = this.model;
|
||||||
if (this.titlebarStyle !== 'default' && Features.renderCustomTitleBar()) {
|
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);
|
this.views.menu.listenDrag(this.views.menuDrag);
|
||||||
|
@ -148,7 +148,7 @@ class AppView extends View {
|
||||||
this.views.list.render();
|
this.views.list.render();
|
||||||
this.views.listDrag.render();
|
this.views.listDrag.render();
|
||||||
this.views.details.render();
|
this.views.details.render();
|
||||||
this.views.titlebarButtons?.render();
|
this.views.titlebar?.render();
|
||||||
this.showLastOpenFile();
|
this.showLastOpenFile();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,9 +1,10 @@
|
||||||
import { View } from 'framework/views/view';
|
import { View } from 'framework/views/view';
|
||||||
import { Events } from 'framework/events';
|
import { Events } from 'framework/events';
|
||||||
import { Launcher } from 'comp/launcher';
|
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';
|
parent = '.app__titlebar';
|
||||||
|
|
||||||
template = template;
|
template = template;
|
||||||
|
@ -26,7 +27,8 @@ class TitlebarButtonsView extends View {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
super.render({
|
super.render({
|
||||||
maximized: this.maximized
|
maximized: this.maximized,
|
||||||
|
iconSrc: KeeWebLogo
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -57,4 +59,4 @@ class TitlebarButtonsView extends View {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export { TitlebarButtonsView };
|
export { TitlebarView };
|
|
@ -28,18 +28,6 @@
|
||||||
pointer-events: none;
|
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 {
|
&__menu {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -57,6 +45,10 @@
|
||||||
.titlebar-hidden-inset & {
|
.titlebar-hidden-inset & {
|
||||||
padding-top: $titlebar-padding-large;
|
padding-top: $titlebar-padding-large;
|
||||||
}
|
}
|
||||||
|
.titlebar-custom.titlebar-hidden &,
|
||||||
|
.titlebar-custom.titlebar-hidden-inset & {
|
||||||
|
padding-top: $custom-titlebar-height;
|
||||||
|
}
|
||||||
.fullscreen .app & {
|
.fullscreen .app & {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,8 +1,27 @@
|
||||||
.titlebar-buttons {
|
.titlebar {
|
||||||
font-size: 0;
|
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 {
|
> .fa {
|
||||||
-webkit-app-region: no-drag;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
padding: 4px 16px;
|
padding: 4px 16px;
|
||||||
height: $custom-titlebar-height;
|
height: $custom-titlebar-height;
|
|
@ -38,4 +38,4 @@ $fa-font-path: '~font-awesome/fonts';
|
||||||
@import 'areas/open';
|
@import 'areas/open';
|
||||||
@import 'areas/settings';
|
@import 'areas/settings';
|
||||||
@import 'areas/import-csv';
|
@import 'areas/import-csv';
|
||||||
@import 'areas/titlebar-buttons';
|
@import 'areas/titlebar';
|
||||||
|
|
|
@ -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>
|
|
|
@ -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>
|
|
@ -263,16 +263,21 @@ function createMainWindow() {
|
||||||
theme = selectDarkOrLightTheme(theme);
|
theme = selectDarkOrLightTheme(theme);
|
||||||
}
|
}
|
||||||
const bgColor = themeBgColors[theme] || defaultBgColor;
|
const bgColor = themeBgColors[theme] || defaultBgColor;
|
||||||
const frameless =
|
|
||||||
process.platform === 'win32' &&
|
const isWindows = process.platform === 'win32';
|
||||||
['hidden', 'hidden-inset'].includes(appSettings.titlebarStyle);
|
let titlebarStyle = appSettings.titlebarStyle;
|
||||||
|
if (titlebarStyle === 'hidden-inset') {
|
||||||
|
titlebarStyle = 'hiddenInset';
|
||||||
|
}
|
||||||
|
const frameless = isWindows && ['hidden', 'hiddenInset'].includes(titlebarStyle);
|
||||||
|
|
||||||
const windowOptions = {
|
const windowOptions = {
|
||||||
show: false,
|
show: false,
|
||||||
width: 1000,
|
width: 1000,
|
||||||
height: 700,
|
height: 700,
|
||||||
minWidth: 700,
|
minWidth: 700,
|
||||||
minHeight: 400,
|
minHeight: 400,
|
||||||
titleBarStyle: appSettings.titlebarStyle,
|
titleBarStyle: titlebarStyle,
|
||||||
frame: !frameless,
|
frame: !frameless,
|
||||||
backgroundColor: bgColor,
|
backgroundColor: bgColor,
|
||||||
webPreferences: {
|
webPreferences: {
|
||||||
|
|
Loading…
Reference in New Issue