gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-24 01:51:57 +03:00
Code Issues Packages Projects Releases Wiki Activity

UI: small badge for the folded trunk menu item

Browse Source
This commit is contained in:
Pavel Laptev 2024-02-29 13:53:17 +01:00 committed by Mattias Granlund
parent e20d5cdc1c
commit 7192c1f17f
1 changed files with 22 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
gitbutler-ui/src/lib/components/BaseBranchCard.svelte
View File

@ -26,6 +26,13 @@
class:selected class:selected
bind:this={baseContents} bind:this={baseContents}
> >
{#if isNavCollapsed}
{#if ($base$?.behind || 0) > 0}
<div class="small-count-badge">
<span class="text-base-9 text-bold">{$base$?.behind || 0}</span>
</div>
{/if}
{/if}
<img class="icon" src="/images/domain-icons/trunk.svg" alt="" /> <img class="icon" src="/images/domain-icons/trunk.svg" alt="" />
{#if !isNavCollapsed} {#if !isNavCollapsed}
@ -69,6 +76,7 @@
<style lang="postcss"> <style lang="postcss">
.base-branch-card { .base-branch-card {
position: relative;
display: flex; display: flex;
gap: var(--space-10); gap: var(--space-10);
padding: var(--space-10); padding: var(--space-10);
@ -108,4 +116,18 @@
gap: var(--space-4); gap: var(--space-4);
color: var(--clr-theme-scale-ntrl-40); color: var(--clr-theme-scale-ntrl-40);
} }
.small-count-badge {
position: absolute;
top: 10%;
right: 10%;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-2);
min-width: var(--space-14);
background-color: var(--clr-theme-err-element);
color: var(--clr-theme-scale-ntrl-100);
border-radius: var(--radius-m);
}
</style> </style>