CSS fixes: branch (#4715)

* fix with on drag

* fix draggable handle for collapsed lines

* remove left border for the folded line when dragging
This commit is contained in:
Pavel Laptev 2024-08-18 21:39:35 +02:00 committed by GitHub
parent c9b5aa7c26
commit 4e23be18d8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 15 additions and 16 deletions

View File

@ -102,6 +102,8 @@
onGenerateBranchName={generateBranchName} onGenerateBranchName={generateBranchName}
{isLaneCollapsed} {isLaneCollapsed}
/> />
<div class="collapsed-lane-divider" data-remove-from-draggable></div>
</div> </div>
{:else} {:else}
<div class="resizer-wrapper" bind:this={scrollViewport}> <div class="resizer-wrapper" bind:this={scrollViewport}>
@ -264,10 +266,19 @@
/* COLLAPSED LANE */ /* COLLAPSED LANE */
.collapsed-lane-container { .collapsed-lane-container {
position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 12px; padding: 12px;
height: 100%; height: 100%;
border-right: 1px solid var(--clr-border-2); }
.collapsed-lane-divider {
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
background-color: var(--clr-border-2);
} }
</style> </style>

View File

@ -129,7 +129,7 @@
role="button" role="button"
> >
<div class="collapsed-lane__actions"> <div class="collapsed-lane__actions">
<div class="collapsed-lane__draggable" data-drag-handle> <div class="draggable" data-drag-handle>
<Icon name="draggable" /> <Icon name="draggable" />
</div> </div>
<Button style="ghost" outline icon="unfold-lane" help="Expand lane" onclick={expandLane} /> <Button style="ghost" outline icon="unfold-lane" help="Expand lane" onclick={expandLane} />
@ -403,20 +403,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 2px; gap: 10px;
}
.collapsed-lane__draggable {
cursor: grab;
transform: rotate(90deg);
margin-bottom: 4px;
opacity: 0.4;
transition: opacity var(--transition-fast);
color: var(--clr-scale-ntrl-0);
&:hover {
opacity: 1;
}
} }
/* */ /* */

View File

@ -240,6 +240,7 @@
.branch { .branch {
height: 100%; height: 100%;
width: fit-content;
} }
.draggable-branch { .draggable-branch {