mirror of
https://github.com/zadam/trilium.git
synced 2025-02-21 21:43:55 +08:00
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:
parent
9da8d466b8
commit
89d28ef27c
3 changed files with 48 additions and 17 deletions
|
@ -25,21 +25,46 @@ class ContextMenu {
|
||||||
positionMenu() {
|
positionMenu() {
|
||||||
// code below tries to detect when dropdown would overflow from page
|
// code below tries to detect when dropdown would overflow from page
|
||||||
// in such case we'll position it above click coordinates so it will fit into client
|
// in such case we'll position it above click coordinates so it will fit into client
|
||||||
|
|
||||||
|
const CONTEXT_MENU_PADDING = 5; // How many pixels to pad context menu from edge of screen
|
||||||
|
const CONTEXT_MENU_OFFSET = 10; // How many pixels to offset context menu by relative to cursor
|
||||||
|
|
||||||
const clientHeight = document.documentElement.clientHeight;
|
const clientHeight = document.documentElement.clientHeight;
|
||||||
const contextMenuHeight = this.$widget.outerHeight() + 30;
|
const clientWidth = document.documentElement.clientWidth;
|
||||||
|
const contextMenuHeight = this.$widget.outerHeight();
|
||||||
|
const contextMenuWidth = this.$widget.outerWidth();
|
||||||
let top, left;
|
let top, left;
|
||||||
|
|
||||||
if (this.options.y + contextMenuHeight > clientHeight) {
|
if (this.options.y + contextMenuHeight - CONTEXT_MENU_OFFSET > clientHeight - CONTEXT_MENU_PADDING) {
|
||||||
top = clientHeight - contextMenuHeight - 10;
|
// Overflow: bottom
|
||||||
|
top = clientHeight - contextMenuHeight - CONTEXT_MENU_PADDING;
|
||||||
|
} else if (this.options.y - CONTEXT_MENU_OFFSET < CONTEXT_MENU_PADDING) {
|
||||||
|
// Overflow: top
|
||||||
|
top = CONTEXT_MENU_PADDING;
|
||||||
} else {
|
} else {
|
||||||
top = this.options.y - 10;
|
top = this.options.y - CONTEXT_MENU_OFFSET;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.options.orientation === 'left') {
|
if (this.options.orientation === 'left') {
|
||||||
left = this.options.x - this.$widget.outerWidth() + 20;
|
if (this.options.x + CONTEXT_MENU_OFFSET > clientWidth - CONTEXT_MENU_PADDING) {
|
||||||
|
// Overflow: right
|
||||||
|
left = clientWidth - contextMenuWidth - CONTEXT_MENU_OFFSET;
|
||||||
|
} else if (this.options.x - contextMenuWidth + CONTEXT_MENU_OFFSET < CONTEXT_MENU_PADDING) {
|
||||||
|
// Overflow: left
|
||||||
|
left = CONTEXT_MENU_PADDING;
|
||||||
|
} else {
|
||||||
|
left = this.options.x - contextMenuWidth + CONTEXT_MENU_OFFSET;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (this.options.x + contextMenuWidth - CONTEXT_MENU_OFFSET > clientWidth - CONTEXT_MENU_PADDING) {
|
||||||
|
// Overflow: right
|
||||||
|
left = clientWidth - contextMenuWidth - CONTEXT_MENU_PADDING;
|
||||||
|
} else if (this.options.x - CONTEXT_MENU_OFFSET < CONTEXT_MENU_PADDING) {
|
||||||
|
// Overflow: left
|
||||||
|
left = CONTEXT_MENU_PADDING;
|
||||||
|
} else {
|
||||||
|
left = this.options.x - CONTEXT_MENU_OFFSET;
|
||||||
}
|
}
|
||||||
else {
|
|
||||||
left = this.options.x - 20;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.$widget.css({
|
this.$widget.css({
|
||||||
|
|
|
@ -51,7 +51,6 @@ const TAB_ROW_TPL = `
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: var(--main-background-color);
|
background: var(--main-background-color);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-top: 2px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-row-widget * {
|
.tab-row-widget * {
|
||||||
|
|
|
@ -6,25 +6,32 @@ const TPL = `
|
||||||
<div class="title-bar-buttons">
|
<div class="title-bar-buttons">
|
||||||
<style>
|
<style>
|
||||||
.title-bar-buttons {
|
.title-bar-buttons {
|
||||||
margin-top: 4px;
|
|
||||||
margin-right: 4px;
|
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-bar-buttons button.icon-action {
|
.title-bar-buttons div button.icon-action {
|
||||||
border: none !important;
|
border: none !important;
|
||||||
background: none !important;
|
background: none !important;
|
||||||
font-size: 150%;
|
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;
|
background-color: var(--accented-background-color) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.title-bar-buttons div {
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<button class="btn icon-action bx bx-minus minimize-btn"></button>
|
<!-- divs act as a hitbox for the buttons, making them clickable on corners -->
|
||||||
<button class="btn icon-action bx bx-checkbox maximize-btn"></button>
|
<div class="minimize-btn"><button class="btn icon-action bx bx-minus"></button></div>
|
||||||
<button class="btn icon-action bx bx-x close-btn"></button>
|
<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>`;
|
</div>`;
|
||||||
|
|
||||||
export default class TitleBarButtonsWidget extends BasicWidget {
|
export default class TitleBarButtonsWidget extends BasicWidget {
|
||||||
|
|
Loading…
Reference in a new issue