zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2024-11-11 01:23:57 +08:00
Code Issues Projects Releases Packages Wiki Activity

Various window border related fixes (#2077)

Browse source 
* 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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 48 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/public/app/services/context_menu.js
View file

@ -25,21 +25,46 @@ class ContextMenu {
positionMenu() {
// 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
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 contextMenuHeight = this.$widget.outerHeight() + 30;
const clientWidth = document.documentElement.clientWidth;
const contextMenuHeight = this.$widget.outerHeight();
const contextMenuWidth = this.$widget.outerWidth();
let top, left;
if (this.options.y + contextMenuHeight > clientHeight) {
top = clientHeight - contextMenuHeight - 10;
if (this.options.y + contextMenuHeight - CONTEXT_MENU_OFFSET > clientHeight - CONTEXT_MENU_PADDING) {
// 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 {
top = this.options.y - 10;
top = this.options.y - CONTEXT_MENU_OFFSET;
}
if (this.options.orientation === 'left') {
left = this.options.x - this.$widget.outerWidth() + 20;
}
else {
left = this.options.x - 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;
}
}
this.$widget.css({

1
src/public/app/widgets/tab_row.js
View file

@ -51,7 +51,6 @@ const TAB_ROW_TPL = `
width: 100%;
background: var(--main-background-color);
overflow: hidden;
margin-top: 2px;
}
.tab-row-widget * {

23
src/public/app/widgets/title_bar_buttons.js
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 {