Merge pull request #2368 from gitbutlerapp/exclude-ignored-elements-from-clone

Draggable fixes and tag component update
This commit is contained in:
Pavel Laptev 2024-01-20 16:20:18 +01:00 committed by GitHub
commit a2247a9933
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 24 additions and 23 deletions

View File

@ -96,6 +96,13 @@ export function cloneWithPreservedDimensions(node: any) {
export function cloneWithRotation(node: any) {
const clone = node.cloneNode(true) as HTMLElement;
// exclude all ignored elements from the clone
const ignoredElements = clone.querySelectorAll('[data-remove-from-draggable]');
ignoredElements.forEach((element) => {
element.remove();
});
applyGhostStyle(clone);
// Style the inner node so it retains the shape and then rotate

View File

@ -158,21 +158,6 @@
}
}}
/>
<!-- <div
class="branch-card__sections"
use:dropzone={{
hover: 'cherrypick-dz-hover',
active: 'cherrypick-dz-active',
accepts: acceptCherrypick,
onDrop: onCherrypicked
}}
use:dropzone={{
hover: 'lane-dz-hover',
active: 'lane-dz-active',
accepts: acceptBranchDrop,
onDrop: onBranchDrop
}}
> -->
<!-- DROPZONES -->
<DropzoneOverlay class="cherrypick-dz-marker" label="Apply here" />
<DropzoneOverlay class="lane-dz-marker" label="Move here" />
@ -268,7 +253,6 @@
{readonly}
/>
</div>
<!-- </div> -->
</ScrollableContainer>
<Resizer
@ -303,7 +287,8 @@
.branch-card__contents {
display: flex;
flex-direction: column;
gap: var(--space-6);
padding-top: 20px;
gap: var(--space-4);
padding: var(--space-16) var(--space-8) var(--space-16) var(--space-8);
}

View File

@ -65,6 +65,7 @@
color="ghost"
border
clickable
shrinkable
on:click={(e) => {
const url = branchUrl(base, branch.upstream?.name);
if (url) open(url);
@ -136,12 +137,9 @@
{/if}
</div>
</div>
<div class="header__top-overlay" />
<div class="header__top-overlay" data-remove-from-draggable />
</div>
<!-- </div>
</div> -->
<style lang="postcss">
.header__wrapper {
z-index: 10;
@ -229,7 +227,6 @@
color: var(--clr-theme-scale-ntrl-50);
padding-left: var(--space-4);
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
text-overflow: ellipsis;
overflow-x: hidden;
@ -243,7 +240,7 @@
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-6) var(--space-2) var(--space-4);
border-radius: var(--radius-s);
border-radius: var(--radius-m);
margin-right: var(--space-2);
}

View File

@ -12,6 +12,7 @@
export let filled = false;
export let disabled = false;
export let clickable = false;
export let shrinkable = false;
</script>
<div
@ -24,6 +25,7 @@
class:tag-border={border}
class:filled
class:disabled
class:shrinkable
class:not-button={!clickable}
on:click
role={clickable ? 'button' : undefined}
@ -152,4 +154,14 @@
background-color: color-mix(in srgb, var(--clr-theme-scale-ntrl-50) 10%, transparent);
color: var(--clr-core-ntrl-50);
}
.shrinkable {
overflow: hidden;
text-overflow: ellipsis;
& span {
overflow: hidden;
text-overflow: ellipsis;
}
}
</style>