gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-11-23 20:54:50 +03:00
Code Issues Packages Projects Releases Wiki Activity

center dots

Browse Source
This commit is contained in:
Pavel Laptev 2024-10-16 15:15:16 +02:00 committed by Nico Domino
parent 6b89ffdecf
commit a7eef8ff38
2 changed files with 39 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
apps/desktop/src/lib/commit/StackingUpstreamCommitsAccordion.svelte
View File

@ -20,29 +20,31 @@
<button class="accordion" onclick={toggle}>
{#if count !== 1}
<div class="accordion-row header">
<div class="accordion-row__line dots">
{#if !isOpen}
{#each new Array(count) as _, idx}
<svg
width="14"
height="14"
viewBox="0 0 14 14"
class="upstream-dot"
style="--dot: {idx + 1}; --dotCount: {count + 1};"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="1.76782"
y="1.76764"
width="10.535"
height="10.535"
rx="3"
stroke-width="2"
/>
</svg>
{/each}
{/if}
<div class="accordion-row__line">
<div class="dots">
{#if !isOpen}
{#each new Array(count) as _, idx}
<svg
width="14"
height="14"
viewBox="0 0 14 14"
class="upstream-dot"
style="--dot: {idx + 1}"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="1.76782"
y="1.76764"
width="10.535"
height="10.535"
rx="3"
stroke-width="2"
/>
</svg>
{/each}
{/if}
</div>
</div>
<div class="accordion-row__right">
<h5 class="text-13 text-body text-semibold title">Upstream commits</h5>
@ -93,19 +95,26 @@
}
& .accordion-row__line {
position: relative;
width: 2px;
margin: 0 22px;
background-color: var(--clr-commit-upstream);
&.dots {
place-items: center;
}
--dots-y-shift: -6px;
& .upstream-dot {
position: absolute;
/* position: absolute; */
fill: var(--clr-commit-upstream);
stroke: var(--clr-theme-warn-bg);
transform: translateX(-6px) translateY(calc(var(--dot) * 7px)) rotate(45deg);
transform: rotate(45deg);
margin-top: var(--dots-y-shift);
}
& .dots {
position: absolute;
top: calc(50% - (var(--dots-y-shift) / 2));
left: 50%;
transform: translate(-50%, -50%);
}
}

2
packages/ui/src/lib/commitLinesStacking/Line.svelte
View File

@ -35,7 +35,7 @@
}
.line-top {
height: 16px;
height: 14px;
width: 100%;
}