mirror of https://github.com/keeweb/keeweb
fix #689: custom title bar on Windows
parent
7e2823903b
commit
0f4434a361
@ -0,0 +1,60 @@ |
||||
import { View } from 'framework/views/view'; |
||||
import { Events } from 'framework/events'; |
||||
import { Launcher } from 'comp/launcher'; |
||||
import template from 'templates/titlebar-buttons.hbs'; |
||||
|
||||
class TitlebarButtonsView extends View { |
||||
parent = '.app__titlebar'; |
||||
|
||||
template = template; |
||||
|
||||
events = { |
||||
'click .titlebar-buttons-minimize': 'clickMinimize', |
||||
'click .titlebar-buttons-maximize': 'clickMaximize', |
||||
'click .titlebar-buttons-restore': 'clickRestore', |
||||
'click .titlebar-buttons-close': 'clickClose' |
||||
}; |
||||
|
||||
constructor() { |
||||
super(); |
||||
|
||||
this.maximized = Launcher.mainWindowMaximized(); |
||||
|
||||
this.listenTo(Events, 'app-maximized', this.appMaximized); |
||||
this.listenTo(Events, 'app-unmaximized', this.appUnmaximized); |
||||
} |
||||
|
||||
render() { |
||||
super.render({ |
||||
maximized: this.maximized |
||||
}); |
||||
} |
||||
|
||||
clickMinimize() { |
||||
Launcher.minimizeMainWindow(); |
||||
} |
||||
|
||||
clickMaximize() { |
||||
Launcher.maximizeMainWindow(); |
||||
} |
||||
|
||||
clickRestore() { |
||||
Launcher.restoreMainWindow(); |
||||
} |
||||
|
||||
clickClose() { |
||||
window.close(); |
||||
} |
||||
|
||||
appMaximized() { |
||||
this.maximized = true; |
||||
this.render(); |
||||
} |
||||
|
||||
appUnmaximized() { |
||||
this.maximized = false; |
||||
this.render(); |
||||
} |
||||
} |
||||
|
||||
export { TitlebarButtonsView }; |
@ -0,0 +1,19 @@ |
||||
.titlebar-buttons { |
||||
font-size: 0; |
||||
|
||||
> .fa { |
||||
-webkit-app-region: no-drag; |
||||
font-size: 16px; |
||||
padding: 4px 16px; |
||||
height: $custom-titlebar-height; |
||||
box-sizing: border-box; |
||||
&:hover { |
||||
background: var(--titlebar-button-background-color); |
||||
} |
||||
&.fa-titlebar-close { |
||||
&:hover { |
||||
background: $titlebar-close-button-background-color; |
||||
} |
||||
} |
||||
} |
||||
} |
@ -0,0 +1,9 @@ |
||||
<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> |
After Width: | Height: | Size: 208 B |
After Width: | Height: | Size: 162 B |
After Width: | Height: | Size: 133 B |
After Width: | Height: | Size: 212 B |
Loading…
Reference in new issue