gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-18 06:22:28 +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}> <button class="accordion" onclick={toggle}>
{#if count !== 1} {#if count !== 1}
<div class="accordion-row header"> <div class="accordion-row header">
<div class="accordion-row__line dots"> <div class="accordion-row__line">
{#if !isOpen} <div class="dots">
{#each new Array(count) as _, idx} {#if !isOpen}
<svg {#each new Array(count) as _, idx}
width="14" <svg
height="14" width="14"
viewBox="0 0 14 14" height="14"
class="upstream-dot" viewBox="0 0 14 14"
style="--dot: {idx + 1}; --dotCount: {count + 1};" class="upstream-dot"
fill="none" style="--dot: {idx + 1}"
xmlns="http://www.w3.org/2000/svg" fill="none"
> xmlns="http://www.w3.org/2000/svg"
<rect >
x="1.76782" <rect
y="1.76764" x="1.76782"
width="10.535" y="1.76764"
height="10.535" width="10.535"
rx="3" height="10.535"
stroke-width="2" rx="3"
/> stroke-width="2"
</svg> />
{/each} </svg>
{/if} {/each}
{/if}
</div>
</div> </div>
<div class="accordion-row__right"> <div class="accordion-row__right">
<h5 class="text-13 text-body text-semibold title">Upstream commits</h5> <h5 class="text-13 text-body text-semibold title">Upstream commits</h5>
@ -93,19 +95,26 @@
} }
& .accordion-row__line { & .accordion-row__line {
position: relative;
width: 2px; width: 2px;
margin: 0 22px; margin: 0 22px;
background-color: var(--clr-commit-upstream); background-color: var(--clr-commit-upstream);
--dots-y-shift: -6px;
&.dots {
place-items: center;
}
& .upstream-dot { & .upstream-dot {
position: absolute; /* position: absolute; */
fill: var(--clr-commit-upstream); fill: var(--clr-commit-upstream);
stroke: var(--clr-theme-warn-bg); 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 { .line-top {
height: 16px; height: 14px;
width: 100%; width: 100%;
} }