mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-12-01 04:14:45 +03:00
fixing branches height
This commit is contained in:
Pavel Laptev
GitButler
parent
91e0bdd19e
commit
56107652bb
@ -10,6 +10,8 @@
|
|||||||
// Needed when overflow is hidden
|
// Needed when overflow is hidden
|
||||||
export let inside = false;
|
export let inside = false;
|
||||||
|
|
||||||
|
export let sticky = false;
|
||||||
|
|
||||||
//
|
//
|
||||||
export let minWidth = 0;
|
export let minWidth = 0;
|
||||||
export let minHeight = 0;
|
export let minHeight = 0;
|
||||||
@ -81,12 +83,14 @@
|
|||||||
class:down={direction == 'down'}
|
class:down={direction == 'down'}
|
||||||
class:left={direction == 'left'}
|
class:left={direction == 'left'}
|
||||||
class:right={direction == 'right'}
|
class:right={direction == 'right'}
|
||||||
|
class:sticky
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<style lang="postcss">
|
<style lang="postcss">
|
||||||
.resizer {
|
.resizer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transition: background-color 0.1s ease-out;
|
transition: background-color 0.1s ease-out;
|
||||||
|
/* background-color: var(--clr-theme-container-outline-light); */
|
||||||
&:hover {
|
&:hover {
|
||||||
transition-delay: 0.3s;
|
transition-delay: 0.3s;
|
||||||
}
|
}
|
||||||
@ -139,4 +143,8 @@
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.sticky {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -68,5 +68,6 @@
|
|||||||
"virtual-branch-small": "M5.75 4V7H4.25V4H5.75Z M11.75 4V5C11.75 7.07107 10.0711 8.75 8 8.75C6.75736 8.75 5.75 9.75736 5.75 11V12H4.25V11C4.25 8.92893 5.92893 7.25 8 7.25C9.24264 7.25 10.25 6.24264 10.25 5V4H11.75Z",
|
"virtual-branch-small": "M5.75 4V7H4.25V4H5.75Z M11.75 4V5C11.75 7.07107 10.0711 8.75 8 8.75C6.75736 8.75 5.75 9.75736 5.75 11V12H4.25V11C4.25 8.92893 5.92893 7.25 8 7.25C9.24264 7.25 10.25 6.24264 10.25 5V4H11.75Z",
|
||||||
"removed-branch-small": "M3.38588 10.6431L8.00002 7.87463L12.6142 10.6431L13.3859 9.35687L9.45775 6.99999L13.3859 4.64311L12.6141 3.35687L8.00002 6.12534L3.38589 3.35687L2.61415 4.64311L6.54228 6.99999L2.61414 9.35687L3.38588 10.6431Z M8.75002 13V9.99999H7.25002V13H8.75002Z",
|
"removed-branch-small": "M3.38588 10.6431L8.00002 7.87463L12.6142 10.6431L13.3859 9.35687L9.45775 6.99999L13.3859 4.64311L12.6141 3.35687L8.00002 6.12534L3.38589 3.35687L2.61415 4.64311L6.54228 6.99999L2.61414 9.35687L3.38588 10.6431Z M8.75002 13V9.99999H7.25002V13H8.75002Z",
|
||||||
"target": "M5.24988 7.99805C5.24988 6.47926 6.48109 5.24805 7.99988 5.24805C9.51866 5.24805 10.7499 6.47926 10.7499 7.99805C10.7499 9.51683 9.51866 10.748 7.99988 10.748C6.48109 10.748 5.24988 9.51683 5.24988 7.99805ZM7.99988 6.74805C7.30952 6.74805 6.74988 7.30769 6.74988 7.99805C6.74988 8.6884 7.30952 9.24805 7.99988 9.24805C8.69023 9.24805 9.24988 8.6884 9.24988 7.99805C9.24988 7.30769 8.69023 6.74805 7.99988 6.74805Z M2.25 8C2.25 4.82436 4.82436 2.25 8 2.25C11.1756 2.25 13.75 4.82436 13.75 8C13.75 11.1756 11.1756 13.75 8 13.75C4.82436 13.75 2.25 11.1756 2.25 8ZM8 3.75C5.65279 3.75 3.75 5.65279 3.75 8C3.75 10.3472 5.65279 12.25 8 12.25C10.3472 12.25 12.25 10.3472 12.25 8C12.25 5.65279 10.3472 3.75 8 3.75Z",
|
"target": "M5.24988 7.99805C5.24988 6.47926 6.48109 5.24805 7.99988 5.24805C9.51866 5.24805 10.7499 6.47926 10.7499 7.99805C10.7499 9.51683 9.51866 10.748 7.99988 10.748C6.48109 10.748 5.24988 9.51683 5.24988 7.99805ZM7.99988 6.74805C7.30952 6.74805 6.74988 7.30769 6.74988 7.99805C6.74988 8.6884 7.30952 9.24805 7.99988 9.24805C8.69023 9.24805 9.24988 8.6884 9.24988 7.99805C9.24988 7.30769 8.69023 6.74805 7.99988 6.74805Z M2.25 8C2.25 4.82436 4.82436 2.25 8 2.25C11.1756 2.25 13.75 4.82436 13.75 8C13.75 11.1756 11.1756 13.75 8 13.75C4.82436 13.75 2.25 11.1756 2.25 8ZM8 3.75C5.65279 3.75 3.75 5.65279 3.75 8C3.75 10.3472 5.65279 12.25 8 12.25C10.3472 12.25 12.25 10.3472 12.25 8C12.25 5.65279 10.3472 3.75 8 3.75Z",
|
||||||
"pin": "M4.65842 2.07243L1.94734 4.78351C1.1397 5.59115 1.1397 6.9006 1.94735 7.70824C2.47262 8.23351 3.22365 8.4253 3.91415 8.25174L4.95432 9.82158C4.42239 10.6621 4.53518 11.7726 5.25174 12.4892C6.09106 13.3285 7.45187 13.3285 8.29119 12.4892L9.79734 10.983L13.3089 14.4946L14.3696 13.4339L10.858 9.92235L12.3641 8.41628C13.2034 7.57697 13.2034 6.21616 12.3641 5.37685C11.6475 4.66024 10.5369 4.54748 9.69633 5.07953L8.12657 4.03941C8.30021 3.34887 8.10844 2.59775 7.58312 2.07243C6.77549 1.2648 5.46605 1.2648 4.65842 2.07243ZM3.00801 5.84417L5.71908 3.13309C5.94093 2.91124 6.30061 2.91124 6.52246 3.13309C6.71029 3.32092 6.74288 3.61383 6.60094 3.83835L6.16002 4.53577L9.75834 6.92001L10.4452 6.38456C10.7036 6.18309 11.0717 6.2058 11.3034 6.43751C11.5569 6.69104 11.5569 7.10209 11.3034 7.35562L7.23053 11.4285C6.97699 11.682 6.56594 11.682 6.3124 11.4285C6.08069 11.1968 6.05798 10.8287 6.25944 10.5703L7.98437 8.59718L6.95997 7.54196L5.94244 8.59718L5.18683 7.45682L5.95283 6.73243L4.92218 5.64258L3.90389 6.60557L3.71328 6.72606C3.48875 6.86801 3.19584 6.83541 3.00801 6.64758C2.78615 6.42572 2.78615 6.06602 3.00801 5.84417Z"
|
"pin": "M4.65842 2.07243L1.94734 4.78351C1.1397 5.59115 1.1397 6.9006 1.94735 7.70824C2.47262 8.23351 3.22365 8.4253 3.91415 8.25174L4.95432 9.82158C4.42239 10.6621 4.53518 11.7726 5.25174 12.4892C6.09106 13.3285 7.45187 13.3285 8.29119 12.4892L9.79734 10.983L13.3089 14.4946L14.3696 13.4339L10.858 9.92235L12.3641 8.41628C13.2034 7.57697 13.2034 6.21616 12.3641 5.37685C11.6475 4.66024 10.5369 4.54748 9.69633 5.07953L8.12657 4.03941C8.30021 3.34887 8.10844 2.59775 7.58312 2.07243C6.77549 1.2648 5.46605 1.2648 4.65842 2.07243ZM3.00801 5.84417L5.71908 3.13309C5.94093 2.91124 6.30061 2.91124 6.52246 3.13309C6.71029 3.32092 6.74288 3.61383 6.60094 3.83835L6.16002 4.53577L9.75834 6.92001L10.4452 6.38456C10.7036 6.18309 11.0717 6.2058 11.3034 6.43751C11.5569 6.69104 11.5569 7.10209 11.3034 7.35562L7.23053 11.4285C6.97699 11.682 6.56594 11.682 6.3124 11.4285C6.08069 11.1968 6.05798 10.8287 6.25944 10.5703L7.98437 8.59718L6.95997 7.54196L5.94244 8.59718L5.18683 7.45682L5.95283 6.73243L4.92218 5.64258L3.90389 6.60557L3.71328 6.72606C3.48875 6.86801 3.19584 6.83541 3.00801 6.64758C2.78615 6.42572 2.78615 6.06602 3.00801 5.84417Z",
|
||||||
|
"draggable-horizontal-narrow": "M4 4.25C4 3.83579 4.33579 3.5 4.75 3.5H11.25C11.6642 3.5 12 3.83579 12 4.25C12 4.66421 11.6642 5 11.25 5H4.75C4.33579 5 4 4.66421 4 4.25Z M4 8.25C4 7.83579 4.33579 7.5 4.75 7.5H11.25C11.6642 7.5 12 7.83579 12 8.25C12 8.66421 11.6642 9 11.25 9H4.75C4.33579 9 4 8.66421 4 8.25Z M4 12.25C4 11.8358 4.33579 11.5 4.75 11.5H11.25C11.6642 11.5 12 11.8358 12 12.25C12 12.6642 11.6642 13 11.25 13H4.75C4.33579 13 4 12.6642 4 12.25Z"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -75,7 +75,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="new-branch-button">
|
<div class="new-branch-button">
|
||||||
<Button
|
<Button
|
||||||
wide
|
|
||||||
color="neutral"
|
color="neutral"
|
||||||
kind="outlined"
|
kind="outlined"
|
||||||
icon="plus-small"
|
icon="plus-small"
|
||||||
@ -87,20 +86,23 @@
|
|||||||
|
|
||||||
<style lang="postcss">
|
<style lang="postcss">
|
||||||
.canvas-dropzone {
|
.canvas-dropzone {
|
||||||
|
height: 100%;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: var(--space-16) var(--space-16) var(--space-16) var(--space-4);
|
padding: var(--space-12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.new-virtual-branch {
|
.new-virtual-branch {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
width: 24rem;
|
width: 24rem;
|
||||||
border-radius: var(--radius-m);
|
border-radius: var(--radius-m);
|
||||||
border: 1px dashed color-mix(in srgb, var(--clr-theme-container-outline-pale) 50%, transparent);
|
border: 1px dashed color-mix(in srgb, var(--clr-theme-container-outline-pale) 50%, transparent);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
padding: var(--space-20);
|
padding: var(--space-20);
|
||||||
gap: var(--space-20);
|
gap: var(--space-8);
|
||||||
|
|
||||||
outline-color: color-mix(in srgb, var(--clr-theme-scale-pop-40) 0%, transparent);
|
outline-color: color-mix(in srgb, var(--clr-theme-scale-pop-40) 0%, transparent);
|
||||||
outline-style: dashed;
|
outline-style: dashed;
|
||||||
|
|||||||
@ -143,123 +143,130 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="branch-card" data-tauri-drag-region class:target-branch={branch.selectedForChanges}>
|
<div class="branch-card" data-tauri-drag-region class:target-branch={branch.selectedForChanges}>
|
||||||
<div
|
<div class="branch-card-resize-container">
|
||||||
bind:this={rsViewport}
|
|
||||||
style:width={`${laneWidth || $defaultBranchWidthRem}rem`}
|
|
||||||
class="branch-card__contents"
|
|
||||||
class:first-child={branch.order == 0}
|
|
||||||
>
|
|
||||||
<BranchHeader
|
|
||||||
{readonly}
|
|
||||||
{branchController}
|
|
||||||
{branch}
|
|
||||||
{base}
|
|
||||||
{githubService}
|
|
||||||
projectId={project.id}
|
|
||||||
on:action={(e) => {
|
|
||||||
if (e.detail == 'generate-branch-name') {
|
|
||||||
generateBranchName();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<!-- DROPZONES -->
|
|
||||||
<DropzoneOverlay class="cherrypick-dz-marker" label="Apply here" />
|
|
||||||
<DropzoneOverlay class="lane-dz-marker" label="Move here" />
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="branch-card__dropzone-wrapper"
|
bind:this={rsViewport}
|
||||||
use:dropzone={{
|
style:width={`${laneWidth || $defaultBranchWidthRem}rem`}
|
||||||
hover: 'cherrypick-dz-hover',
|
class="branch-card__contents"
|
||||||
active: 'cherrypick-dz-active',
|
class:first-child={branch.order == 0}
|
||||||
accepts: acceptCherrypick,
|
|
||||||
onDrop: onCherrypicked
|
|
||||||
}}
|
|
||||||
use:dropzone={{
|
|
||||||
hover: 'lane-dz-hover',
|
|
||||||
active: 'lane-dz-active',
|
|
||||||
accepts: acceptBranchDrop,
|
|
||||||
onDrop: onBranchDrop
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
|
<BranchHeader
|
||||||
|
{readonly}
|
||||||
|
{branchController}
|
||||||
|
{branch}
|
||||||
|
{base}
|
||||||
|
{githubService}
|
||||||
|
projectId={project.id}
|
||||||
|
on:action={(e) => {
|
||||||
|
if (e.detail == 'generate-branch-name') {
|
||||||
|
generateBranchName();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<!-- DROPZONES -->
|
||||||
<DropzoneOverlay class="cherrypick-dz-marker" label="Apply here" />
|
<DropzoneOverlay class="cherrypick-dz-marker" label="Apply here" />
|
||||||
<DropzoneOverlay class="lane-dz-marker" label="Move here" />
|
<DropzoneOverlay class="lane-dz-marker" label="Move here" />
|
||||||
{#if branch.files?.length > 0}
|
|
||||||
<div class="card">
|
|
||||||
<BranchFiles
|
|
||||||
{branch}
|
|
||||||
{readonly}
|
|
||||||
{selectedOwnership}
|
|
||||||
{selectedFiles}
|
|
||||||
showCheckboxes={$commitBoxOpen}
|
|
||||||
/>
|
|
||||||
{#if branch.active}
|
|
||||||
<CommitDialog
|
|
||||||
projectId={project.id}
|
|
||||||
{branchController}
|
|
||||||
{branch}
|
|
||||||
{cloud}
|
|
||||||
{selectedOwnership}
|
|
||||||
{user}
|
|
||||||
bind:expanded={commitBoxOpen}
|
|
||||||
on:action={(e) => {
|
|
||||||
if (e.detail == 'generate-branch-name') {
|
|
||||||
generateBranchName();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{:else if branch.commits.length == 0}
|
|
||||||
<div class="new-branch card" data-dnd-ignore>
|
|
||||||
<div class="new-branch__content">
|
|
||||||
<div class="new-branch__image">
|
|
||||||
<ImgThemed
|
|
||||||
imgSet={{
|
|
||||||
light: '/images/lane-new-light.webp',
|
|
||||||
dark: '/images/lane-new-dark.webp'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<h2 class="new-branch__title text-base-body-15 text-semibold">This is a new branch.</h2>
|
|
||||||
<p class="new-branch__caption text-base-body-13">
|
|
||||||
You can drag and drop files or parts of files here.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<!-- attention: these markers have custom css at the bottom of thise file -->
|
|
||||||
<div class="no-changes card" data-dnd-ignore>
|
|
||||||
<div class="new-branch__content">
|
|
||||||
<div class="new-branch__image">
|
|
||||||
<ImgThemed
|
|
||||||
imgSet={{
|
|
||||||
light: '/images/lane-no-changes-light.webp',
|
|
||||||
dark: '/images/lane-no-changes-dark.webp'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<h2 class="new-branch__caption text-base-body-13">
|
|
||||||
No uncommitted changes<br />on this branch
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<BranchCommits
|
|
||||||
{base}
|
|
||||||
{branch}
|
|
||||||
{project}
|
|
||||||
{githubService}
|
|
||||||
{branchController}
|
|
||||||
{branchCount}
|
|
||||||
{readonly}
|
|
||||||
/>
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="branch-card__dropzone-wrapper"
|
||||||
|
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
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DropzoneOverlay class="cherrypick-dz-marker" label="Apply here" />
|
||||||
|
<DropzoneOverlay class="lane-dz-marker" label="Move here" />
|
||||||
|
{#if branch.files?.length > 0}
|
||||||
|
<div class="card">
|
||||||
|
<BranchFiles
|
||||||
|
{branch}
|
||||||
|
{readonly}
|
||||||
|
{selectedOwnership}
|
||||||
|
{selectedFiles}
|
||||||
|
showCheckboxes={$commitBoxOpen}
|
||||||
|
/>
|
||||||
|
{#if branch.active}
|
||||||
|
<CommitDialog
|
||||||
|
projectId={project.id}
|
||||||
|
{branchController}
|
||||||
|
{branch}
|
||||||
|
{cloud}
|
||||||
|
{selectedOwnership}
|
||||||
|
{user}
|
||||||
|
bind:expanded={commitBoxOpen}
|
||||||
|
on:action={(e) => {
|
||||||
|
if (e.detail == 'generate-branch-name') {
|
||||||
|
generateBranchName();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{:else if branch.commits.length == 0}
|
||||||
|
<div class="new-branch card" data-dnd-ignore>
|
||||||
|
<div class="new-branch__content">
|
||||||
|
<div class="new-branch__image">
|
||||||
|
<ImgThemed
|
||||||
|
imgSet={{
|
||||||
|
light: '/images/lane-new-light.webp',
|
||||||
|
dark: '/images/lane-new-dark.webp'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h2 class="new-branch__title text-base-body-15 text-semibold">
|
||||||
|
This is a new branch.
|
||||||
|
</h2>
|
||||||
|
<p class="new-branch__caption text-base-body-13">
|
||||||
|
You can drag and drop files or parts of files here.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<!-- attention: these markers have custom css at the bottom of thise file -->
|
||||||
|
<div class="no-changes card" data-dnd-ignore>
|
||||||
|
<div class="new-branch__content">
|
||||||
|
<div class="new-branch__image">
|
||||||
|
<ImgThemed
|
||||||
|
imgSet={{
|
||||||
|
light: '/images/lane-no-changes-light.webp',
|
||||||
|
dark: '/images/lane-no-changes-dark.webp'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h2 class="new-branch__caption text-base-body-13">
|
||||||
|
No uncommitted changes<br />on this branch
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<BranchCommits
|
||||||
|
{base}
|
||||||
|
{branch}
|
||||||
|
{project}
|
||||||
|
{githubService}
|
||||||
|
{branchController}
|
||||||
|
{branchCount}
|
||||||
|
{readonly}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="divider-line">
|
||||||
<Resizer
|
<Resizer
|
||||||
viewport={rsViewport}
|
viewport={rsViewport}
|
||||||
direction="right"
|
direction="right"
|
||||||
inside={$selectedFiles.length > 0}
|
inside={$selectedFiles.length > 0}
|
||||||
minWidth={320}
|
minWidth={320}
|
||||||
|
sticky
|
||||||
on:width={(e) => {
|
on:width={(e) => {
|
||||||
laneWidth = e.detail / (16 * $userSettings.zoom);
|
laneWidth = e.detail / (16 * $userSettings.zoom);
|
||||||
lscache.set(laneWidthKey + branch.id, laneWidth, 7 * 1440); // 7 day ttl
|
lscache.set(laneWidthKey + branch.id, laneWidth, 7 * 1440); // 7 day ttl
|
||||||
@ -294,10 +301,36 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.branch-card-resize-container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider-line {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 3px;
|
||||||
|
height: 100%;
|
||||||
|
/* background-color: red; */
|
||||||
|
/* background-color: var(--clr-theme-container-outline-light); */
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
pointer-events: none;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 50%;
|
||||||
|
transform: translateX(50%);
|
||||||
|
width: 1px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--clr-theme-container-outline-light);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.target-branch {
|
.target-branch {
|
||||||
--target-branch-background: color-mix(
|
--target-branch-background: color-mix(
|
||||||
in srgb,
|
in srgb,
|
||||||
var(--clr-theme-scale-pop-60) 30%,
|
var(--clr-theme-scale-pop-60) 20%,
|
||||||
var(--clr-theme-container-pale)
|
var(--clr-theme-container-pale)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -313,7 +346,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--space-4);
|
gap: var(--space-8);
|
||||||
padding: var(--space-12);
|
padding: var(--space-12);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -36,91 +36,33 @@
|
|||||||
$: hasIntegratedCommits = branch.commits?.some((b) => b.isIntegrated);
|
$: hasIntegratedCommits = branch.commits?.some((b) => b.isIntegrated);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="header__wrapper">
|
<!-- <div class="header__wrapper"> -->
|
||||||
<div class="header card" bind:this={container}>
|
<div class="header card" bind:this={container}>
|
||||||
<div class="header__info">
|
{#if !readonly}
|
||||||
<div class="header__label">
|
<div class="header__actions">
|
||||||
<BranchLabel bind:name={branch.name} on:change={handleBranchNameChange} />
|
<div class="header__buttons">
|
||||||
</div>
|
{#if !readonly}
|
||||||
<div class="header__remote-branch">
|
<div class="draggable" data-drag-handle>
|
||||||
{#if !branch.upstream}
|
<Icon name="draggable-narrow" />
|
||||||
{#if hasIntegratedCommits}
|
|
||||||
<div class="status-tag text-base-11 text-semibold integrated">
|
|
||||||
<Icon name="pr-small" /> integrated
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<div class="status-tag text-base-11 text-semibold pending">
|
|
||||||
<Icon name="virtual-branch-small" /> virtual
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<div class="pending-name">
|
|
||||||
<span class="text-base-11 text-semibold"
|
|
||||||
>origin/{branch.upstreamName
|
|
||||||
? branch.upstreamName
|
|
||||||
: normalizeBranchName(branch.name)}</span
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if branch.selectedForChanges}
|
||||||
|
<Button icon="target" notClickable>Target branch</Button>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="status-tag text-base-11 text-semibold remote">
|
<Button
|
||||||
<Icon name="remote-branch-small" /> remote
|
icon="target"
|
||||||
</div>
|
kind="outlined"
|
||||||
<Tag
|
color="neutral"
|
||||||
icon="open-link"
|
on:click={async () => {
|
||||||
color="ghost"
|
await branchController.setSelectedForChanges(branch.id);
|
||||||
border
|
|
||||||
clickable
|
|
||||||
shrinkable
|
|
||||||
on:click={(e) => {
|
|
||||||
const url = branchUrl(base, branch.upstream?.name);
|
|
||||||
if (url) open(url);
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
origin/{branch.upstreamName}
|
Make target
|
||||||
</Tag>
|
</Button>
|
||||||
{#if $pr$?.htmlUrl}
|
|
||||||
<Tag
|
|
||||||
icon="pr-small"
|
|
||||||
color="ghost"
|
|
||||||
border
|
|
||||||
clickable
|
|
||||||
on:click={(e) => {
|
|
||||||
const url = $pr$?.htmlUrl;
|
|
||||||
if (url) open(url);
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
View PR
|
|
||||||
</Tag>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{#if !readonly}
|
|
||||||
<div class="draggable" data-drag-handle>
|
<div class="header__buttons">
|
||||||
<Icon name="draggable-narrow" />
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{#if !readonly}
|
|
||||||
<div class="header__actions">
|
|
||||||
<div class="header__buttons">
|
|
||||||
{#if branch.selectedForChanges}
|
|
||||||
<Button icon="target" notClickable>Target branch</Button>
|
|
||||||
{:else}
|
|
||||||
<Button
|
|
||||||
icon="target"
|
|
||||||
kind="outlined"
|
|
||||||
color="neutral"
|
|
||||||
on:click={async () => {
|
|
||||||
await branchController.setSelectedForChanges(branch.id);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Make target
|
|
||||||
</Button>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<div class="relative" bind:this={meatballButton}>
|
<div class="relative" bind:this={meatballButton}>
|
||||||
<Button
|
<Button
|
||||||
icon="kebab"
|
icon="kebab"
|
||||||
@ -128,6 +70,7 @@
|
|||||||
color="neutral"
|
color="neutral"
|
||||||
on:click={() => (visible = !visible)}
|
on:click={() => (visible = !visible)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="branch-popup-menu"
|
class="branch-popup-menu"
|
||||||
use:clickOutside={{
|
use:clickOutside={{
|
||||||
@ -139,11 +82,74 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="header__info">
|
||||||
|
<div class="header__label">
|
||||||
|
<BranchLabel bind:name={branch.name} on:change={handleBranchNameChange} />
|
||||||
|
</div>
|
||||||
|
<div class="header__remote-branch">
|
||||||
|
{#if !branch.upstream}
|
||||||
|
{#if hasIntegratedCommits}
|
||||||
|
<div class="status-tag text-base-11 text-semibold integrated">
|
||||||
|
<Icon name="pr-small" /> integrated
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="status-tag text-base-11 text-semibold pending">
|
||||||
|
<Icon name="virtual-branch-small" /> virtual
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
<div class="pending-name">
|
||||||
|
<span class="text-base-11 text-semibold"
|
||||||
|
>origin/{branch.upstreamName
|
||||||
|
? branch.upstreamName
|
||||||
|
: normalizeBranchName(branch.name)}</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="status-tag text-base-11 text-semibold remote">
|
||||||
|
<Icon name="remote-branch-small" /> remote
|
||||||
|
</div>
|
||||||
|
<Tag
|
||||||
|
icon="open-link"
|
||||||
|
color="ghost"
|
||||||
|
border
|
||||||
|
clickable
|
||||||
|
shrinkable
|
||||||
|
on:click={(e) => {
|
||||||
|
const url = branchUrl(base, branch.upstream?.name);
|
||||||
|
if (url) open(url);
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
origin/{branch.upstreamName}
|
||||||
|
</Tag>
|
||||||
|
{#if $pr$?.htmlUrl}
|
||||||
|
<Tag
|
||||||
|
icon="pr-small"
|
||||||
|
color="ghost"
|
||||||
|
border
|
||||||
|
clickable
|
||||||
|
on:click={(e) => {
|
||||||
|
const url = $pr$?.htmlUrl;
|
||||||
|
if (url) open(url);
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
View PR
|
||||||
|
</Tag>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="header__top-overlay" data-remove-from-draggable data-tauri-drag-region />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- <div class="header__top-overlay" data-remove-from-draggable data-tauri-drag-region />
|
||||||
|
</div> -->
|
||||||
|
|
||||||
<style lang="postcss">
|
<style lang="postcss">
|
||||||
.header__wrapper {
|
.header__wrapper {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
@ -174,10 +180,11 @@
|
|||||||
/* background-color: red; */
|
/* background-color: red; */
|
||||||
}
|
}
|
||||||
.header__info {
|
.header__info {
|
||||||
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
transition: margin var(--transition-slow);
|
transition: margin var(--transition-slow);
|
||||||
padding: var(--space-12);
|
padding: var(--space-12) var(--space-12) var(--space-16) var(--space-12);
|
||||||
gap: var(--space-10);
|
gap: var(--space-10);
|
||||||
}
|
}
|
||||||
.header__actions {
|
.header__actions {
|
||||||
@ -186,10 +193,11 @@
|
|||||||
background: var(--clr-theme-container-pale);
|
background: var(--clr-theme-container-pale);
|
||||||
padding: var(--space-12);
|
padding: var(--space-12);
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
border-radius: 0 0 var(--radius-m) var(--radius-m);
|
border-radius: var(--radius-m) var(--radius-m) 0 0;
|
||||||
}
|
}
|
||||||
.header__buttons {
|
.header__buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
gap: var(--space-4);
|
gap: var(--space-4);
|
||||||
}
|
}
|
||||||
@ -200,10 +208,11 @@
|
|||||||
gap: var(--space-4);
|
gap: var(--space-4);
|
||||||
}
|
}
|
||||||
.draggable {
|
.draggable {
|
||||||
position: absolute;
|
/* position: absolute; */
|
||||||
right: var(--space-4);
|
/* right: var(--space-4);
|
||||||
top: var(--space-6);
|
top: var(--space-6); */
|
||||||
opacity: 0;
|
/* opacity: 0; */
|
||||||
|
margin-right: var(--space-4);
|
||||||
display: flex;
|
display: flex;
|
||||||
cursor: grab;
|
cursor: grab;
|
||||||
color: var(--clr-theme-scale-ntrl-50);
|
color: var(--clr-theme-scale-ntrl-50);
|
||||||
|
|||||||
@ -255,7 +255,7 @@
|
|||||||
align-items: self-start;
|
align-items: self-start;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: var(--space-8) var(--space-8) var(--space-8) 0;
|
padding: var(--space-8) var(--space-8) var(--space-8) 0;
|
||||||
margin-left: calc(var(--space-4) * -1);
|
/* margin-left: calc(var(--space-4) * -1); */
|
||||||
}
|
}
|
||||||
.file-card {
|
.file-card {
|
||||||
background: var(--clr-theme-container-light);
|
background: var(--clr-theme-container-light);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user