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

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

@ -20,7 +20,8 @@
<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">
<div class="dots">
{#if !isOpen} {#if !isOpen}
{#each new Array(count) as _, idx} {#each new Array(count) as _, idx}
<svg <svg
@ -28,7 +29,7 @@
height="14" height="14"
viewBox="0 0 14 14" viewBox="0 0 14 14"
class="upstream-dot" class="upstream-dot"
style="--dot: {idx + 1}; --dotCount: {count + 1};" style="--dot: {idx + 1}"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
@ -44,6 +45,7 @@
{/each} {/each}
{/if} {/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>
<Icon name={isOpen ? 'chevron-up' : 'chevron-down'} /> <Icon name={isOpen ? 'chevron-up' : 'chevron-down'} />
@ -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%;
} }