Various window border related fixes (#2077)

* Remove gap between window control buttons and top of screen, add square hitbox to window control buttons

* Add better overflow detection for context menu

* Remove gap between tabs and top of screen
This commit is contained in:
Abitofevrything
2021-07-22 19:37:53 +02:00
committed by GitHub
parent 9da8d466b8
commit 89d28ef27c
3 changed files with 48 additions and 17 deletions

View File

@@ -6,25 +6,32 @@ const TPL = `
<div class="title-bar-buttons">
<style>
.title-bar-buttons {
margin-top: 4px;
margin-right: 4px;
flex-shrink: 0;
}
.title-bar-buttons button.icon-action {
.title-bar-buttons div button.icon-action {
border: none !important;
background: none !important;
font-size: 150%;
height: 40px;
width: 40px;
}
.title-bar-buttons button:hover {
.title-bar-buttons div:hover button {
background-color: var(--accented-background-color) !important;
}
.title-bar-buttons div {
display: inline-block;
height: 40px;
width: 40px;
}
</style>
<button class="btn icon-action bx bx-minus minimize-btn"></button>
<button class="btn icon-action bx bx-checkbox maximize-btn"></button>
<button class="btn icon-action bx bx-x close-btn"></button>
<!-- divs act as a hitbox for the buttons, making them clickable on corners -->
<div class="minimize-btn"><button class="btn icon-action bx bx-minus"></button></div>
<div class="maximize-btn"><button class="btn icon-action bx bx-checkbox"></button></div>
<div class="close-btn"><button class="btn icon-action bx bx-x"></button></div>
</div>`;
export default class TitleBarButtonsWidget extends BasicWidget {