gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-25 02:26:14 +03:00
Code Issues Packages Projects Releases Wiki Activity

Popup menus: update fixed margins to relative untis (#4279)

Browse Source
This commit is contained in:
Pavel Laptev 2024-07-08 16:29:15 +02:00 committed by GitHub
parent 4acff2ba46
commit c9f803fda3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/src/lib/components/contextmenu/ContextMenu.svelte
View File

@ -26,7 +26,6 @@
}: Props = $props(); }: Props = $props();
// LOCAL VARS // LOCAL VARS
let menuMargin = 4;
// STATES // STATES
let item = $state<any>(); let item = $state<any>();
@ -70,12 +69,10 @@
function setVerticalAlign(targetBoundingRect: DOMRect) { function setVerticalAlign(targetBoundingRect: DOMRect) {
if (verticalAlign === 'top') { if (verticalAlign === 'top') {
return targetBoundingRect?.top ? targetBoundingRect.top - contextMenuHeight - menuMargin : 0; return targetBoundingRect?.top ? targetBoundingRect.top - contextMenuHeight : 0;
} }
return targetBoundingRect?.top return targetBoundingRect?.top ? targetBoundingRect.top + targetBoundingRect.height : 0;
? targetBoundingRect.top + targetBoundingRect.height + menuMargin
: 0;
} }
function setHorizontalAlign(targetBoundingRect: DOMRect) { function setHorizontalAlign(targetBoundingRect: DOMRect) {
@ -130,6 +127,8 @@
bind:offsetHeight={contextMenuHeight} bind:offsetHeight={contextMenuHeight}
bind:offsetWidth={contextMenuWidth} bind:offsetWidth={contextMenuWidth}
class="context-menu" class="context-menu"
class:top-oriented={verticalAlign === 'top'}
class:bottom-oriented={verticalAlign === 'bottom'}
style:top="{menuPosition.y}px" style:top="{menuPosition.y}px"
style:left="{menuPosition.x}px" style:left="{menuPosition.x}px"
style:transform-origin={setTransformOrigin()} style:transform-origin={setTransformOrigin()}
@ -166,6 +165,14 @@
/* background-color: rgba(0, 0, 0, 0.1); */ /* background-color: rgba(0, 0, 0, 0.1); */
} }
.top-oriented {
margin-top: -4px;
}
.bottom-oriented {
margin-top: 4px;
}
.context-menu { .context-menu {
z-index: var(--z-blocker); z-index: var(--z-blocker);
position: fixed; position: fixed;

2
app/src/lib/navigation/ProjectsPopup.svelte
View File

@ -151,7 +151,7 @@
position: absolute; position: absolute;
top: 100%; top: 100%;
z-index: var(--z-floating); z-index: var(--z-floating);
margin-top: 6px; margin-top: 4px;
border-radius: var(--m, 6px); border-radius: var(--m, 6px);
border: 1px solid var(--clr-border-2); border: 1px solid var(--clr-border-2);
background: var(--clr-bg-1); background: var(--clr-bg-1);